Веб-дизайн у Photoshop: Створення сайту з нуля для початківців

Що ви зможете після курсу

• Зібрати концепт дизайну: дошку настрою зі скриншотів і схематичний прототип майбутнього сайту
• Налаштувати документ і сітку Bootstrap під веб та відмалювати головну сторінку блогу за колонками
• Дублюванням головної зібрати внутрішні сторінки — категорію з пагінацією та текстову
• Зробити мобільну версію сайту на мобільній сітці: перший екран, бургер-меню, картки новин
• Зібрати в InVision клікабельний прототип і підготувати файли макета до передачі клієнту
• Оформити кейс для Behance: перший екран, мокапи пристроїв, палітру, типографіку та контакти

Кому підійде курс

Курс закінчується дизайн-макетом: верстання, програмування та перенесення сайту на CMS тут не розглядаються.

Як проходить навчання

• Один наскрізний проєкт — блог від концепту до портфоліо — Блоки головної сторінки перевикористовуються у внутрішніх сторінках, мобільній версії та кейсі — не треба щоразу починати з нуля
• Практика в кожному занятті — Прийоми повторюються одразу в Photoshop на реальному макеті, а не на абстрактних прикладах
• Робота за сіткою Bootstrap — Макет витриманий за правилами верстання: колонки, відступи, межі першого екрана
• Розбори робіт у спільній групі — Завдання здаються через форму, зворотний зв’язок надходить на розборах групи раз на два тижні
• Бонусний цикл про Behance — Портфоліо збирається за доданим шаблоном: всередину вставляється власна робота

Що знадобиться

• Adobe Photoshop — англійський інтерфейс спростить повторення уроків; Adobe Illustrator знадобиться для правки банерної заготовки
• Joxi або Lightshot для скриншотів, Flaticon і Freepik для іконок та фотографій
• Акаунт InVision для клікабельного прототипа і профіль Behance для публікації кейсу

Чому самостійно зазвичай не виходить

Новачок відкриває Photoshop і стикається з питаннями, які уроки з інструментів не закривають: якого розміру робити документ для сайту, навіщо потрібна сітка і що можна випускати за її межі, чому макет виглядає кустарно. Без робочого процесу кожна сторінка збирається заново методом проб, а мобільна версія та здача проєкту залишаються за кадром.

Курс збирає процес повністю на одному наскрізному прикладі: концепт, головна сторінка за сіткою Bootstrap, внутрішні сторінки, мобільна адаптація, клікабельний прототип та оформлення кейсу. Блоки перевикористовуються, правила компонування та типографіки пояснюються на реальному макеті, а дрібниці на кшталт хлібних крихт, пагінації та єдиного акцентного кольору не губляться між заняттями.

Що зміниться

Як влаштований шлях

1. Концепт Зі скриншотів чужих робіт збирається дошка настрою, поверх неї накидається схематичний прототип блогу: блоки прямокутниками, підписи слайдера та новин, структура без деталей.
2. Десктоп Документ і сітка Bootstrap налаштовуються під веб, після чого прорисовуються перший екран, слайдер, новини, кольорова секція та футер головної сторінки.
3. Внутрішні сторінки та мобільна версія Головна дублюється у сторінки категорії та текстову, потім макет переноситься у вузький екран із бургер-меню та картками новин.
4. Здача та портфоліо Макети збираються в клікабельний прототип InVision та вивантажуються в PSD і JPEG, а бонусний цикл оформлює кейс для Behance за шаблоном.

Програма курсу

7 уроків · 2 модулі · 2 години 5 хвилин відео · Кожен урок — практика в Photoshop: дизайн блогу малюється від концепту до мобільної версії.

• Дизайн блогу від концепту до мобільної версії 4 уроки

  Від дошки настрою та схематичного прототипу — до головної сторінки за сіткою Bootstrap, внутрішніх сторінок та мобільної адаптації, з вивантаженням макета та клікабельним прототипом для клієнта.

  • Створення концепту дизайну16:52

    Курс починається з концепту: зі скриншотів чужих робіт збирається дошка настрою, поверх якої накидається схематичний прототип блогу — блоки прямокутниками, підписи слайдера та новин. Попутно налаштовується робоче середовище: полотно під веб, нарощування полотна інструментом Crop, поради новачкам щодо інтерфейсу та артбордів.

  • Створення головної сторінки сайту33:12

    Головна сторінка блогу про подорожі прорисовується повністю: документ і сітка Bootstrap під веб, перший екран зі слайдером, пошуком і логотипом, блок новин, кольорова секція та футер з рівними відступами. По ходу — типографіка з парою шрифтів, іконки в SVG та правило компонування контенту за колонками.

  • Внутрішні сторінки сайту17:52

    Внутрішні сторінки збираються дублюванням головної: обов’язкові заголовок і хлібні крихти, сторінка категорії з пагінацією та банером, текстова сторінка з блоком «читати ще». Готові макети вивантажуються в JPEG і склеюються в клікабельний прототип InVision.

  • Мобільна адаптація та підготовка до здачі проєкту9:54

    Макет переноситься в мобільну версію: мобільна сітка Bootstrap, перший екран, бургер-меню замість повного меню, новини картками або списком. Фінал — підрізка полотна кропом без білих полів та збереження результату в PSD і JPEG.

• Кейс для Behance за шаблоном 3 уроки

  Бонусний цикл збирає портфоліо: структура кейсу, перший екран, мокапи ноутбука і телефона, палітра з кодами кольорів, типографіка та сторінка контактів.

  • Оформлення кейсу на Behance 118:20

    Перший урок бонусного циклу закладає кейс для Behance: макет шириною 1400 пікселів, структура з папок, сітка напрямних і перший екран презентації з фотографією проєкту. Екрани сайту вставляються в мокапи ноутбуків, тінь під макетом робиться розмитим дублікатом шару.

  • Оформлення кейсу на Behance 217:22

    Кейс доповнюється секціями палітри та типографіки: кола з кодами кольорів, знятими піпеткою, шрифт Proxima Nova та розміри заголовків. Потім збирається перебивка з двома мокапами айфонів, у які через смарт-об’єкти вставляються мобільні сторінки.

  • Оформлення кейсу на Behance 311:35

    Завершення кейсу: секція мобільної версії з підкладками-тінями та вставкою сторінок сайту, фінальний екран з подякою та іконкою серця для лайків, блок зв’язку з поштою, Skype і соцмережами. Шаблон кейсу при цьому збирається приблизно за півгодини.

Часті запитання

Про цей курс

• Чи потрібно знати Photoshop до початку?

  Базові прийоми дає допоміжний урок з основами Photoshop для вебдизайнера — його дивляться й одразу повторюють. Решта інструментів курсу освоюється по ходу практики.

• Яким буде результат курсу?

  Дизайн-макет блогу — головна, внутрішні сторінки та мобільна версія — плюс клікабельний прототип в InVision та кейс для Behance за шаблоном.

• Чи підійде курс, якщо я ніколи не проєктував сайти?

  Так, курс стартує з концепту: дошка настрою зі скриншотів і схематичний прототип. Розміри документа, сітка Bootstrap та правила компонування пояснюються при відмалюванні головної сторінки.

• Чому робота іде без артбордів?

  Новачкам радять звичайне полотно: артборди зберігають одразу кілька картинок і ускладнюють роботу. Внутрішні сторінки робляться дублюванням файлу головної — так зберігаються всі шари.

• Як проходить зворотний зв’язок?

  Готова робота кожного уроку здається через форму, розбори проходять у спільній групі раз на два тижні.

• Чи стане курс у пригоді для портфоліо?

  Так. Бонусний цикл показує збірку кейсу Behance за шаблоном: перший екран, мокапи MacBook та iPhone, палітра, типографіка, мобільна версія та контакти. У шаблон вставляється власна робота.

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

  Усі відео та додаткові файли лежать у хмарному сховищі. Посилання на нього — у вашому акаунті на сайті, розділ «Завантаження», і в листі, який надійшов після оплати. Акаунт тут не формальність, а спосіб доставки: курс залишається в ньому назавжди. Навіть якщо лист загубився або ви згадали про купівлю через рік, посилання буде на місці.

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

  Завантажувати можна і варто. Радимо зберегти відео на комп’ютер і дивитися звідти. Причина проста: хмарне сховище не розраховане на перегляд відео. Іноді воно дозволяє увімкнути ролик просто у браузері, але якість при цьому помітно гірша за вихідну. На своєму комп’ютері ви побачите курс таким, яким його записували.

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

  Найкраще на комп’ютері або ноутбуці: завантажте відео й відкрийте будь-яким звичним плеєром. Знадобляться встановлені відеокодеки — на більшості комп’ютерів вони вже є. Завантажити курс можна на скільки завгодно пристроїв. А от телефон ми не радимо, і з двох причин. На маленькому екрані погано видно деталі, особливо якщо в уроці показують інтерфейс програми. І на телефонах часто немає кодеків для форматів, у яких записані відео.

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

  Для більшості курсів — ні. Вони розраховані на початковий рівень і пояснюють з азів. Якщо курс потребує підготовки, це сказано в його описі.

• Чи є терміни проходження курсу?

  Ні. Ані дедлайнів, ані розкладу, ані доступу, що згорає. Завантажили — дивіться коли зручно, з будь-якими перервами.

• Чи можна поділитися курсом з іншою людиною?

  Курс купується для особистого використання, і ми просимо ставитися до цього по-людськи: за кожним уроком стоїть робота, а ціна й так суттєво знижена.

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.