Niranth; Переклад: Слуцька Світлана

Створення привабливих та функціональних веб-макетів – невід'ємна частина життя веб-дизайнера. У цьому уроці Photoshopми створюватимемо професійний макет сайту з нуля. У процесі уроку Ви дізнаєтесь деякі корисні трюкипід час створення дизайну.

Ресурси уроку:

1. Набір іконок (wefunction.com)
   Альтернативний набір іконок
2. Twitter значок (iconeden.com)
3. Шрифт Bebas (dafont.com)

Крок 1. Mockup

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

Крок 2. Створюємо документ.

Ми будемо створювати макет сайту шириною 960 пікселів. Для цього, створіть новий документрозміром 1200х1500 пікселів. Роздільна здатність 72 пікселі.

Так, як макет сайту буде шириною 960 пікселів, нам потрібно визначити цю область, додавши напрямні. Виділіть весь документ ( Ctrl+A).

Перейдіть до меню Виділення - Трансформувати виділену область(Select > Transform Selection). На панелі властивостей у верхній частині екрана встановіть ширину 960 пікселів. Це буде робоча область макета.

Встановіть напрямні точно за межами виділення.

Нам потрібно створити відступ між краями робочої області макета та областю контенту, який ми додамо пізніше. При активному виділенні документа знову перейдіть в меню Виділення - Трансформувати виділену область(Select > Transform Selection). Зменшіть виділення шириною до 920 пікселів. Це означає, що з кожного боку макету буде відступ у 20 пікселів, у результаті це 40 пікселів.

Встановіть напрямні за новим виділенням:

Крок 3. Створюємо шапку сайту.

Переходимо до створення шапки сайту. Створіть виділення заввишки 465 пікселів у верхній частині макета.

Залийте виділення сірим кольором, а надалі використовуйте стилі шару, щоб застосовувати кольори та градієнти.

До шапки додамо градієнтну заливку через стиль шару. Накладення градієнта(Gradient Overlay). Створіть градієнт із двох кольорів.

Тепер шапка виглядатиме так:

До шапки тепер потрібно додати підсвічування. Створіть новий шар (Ctrl+Alt+Shift+N)та виберіть м'який пензель розміром 600 пікселів. Виберіть колір #19535a і клацніть пензлем один раз у верхній центральній частині шапки.

Створіть на шапці виділення 110 пікселів.

Натисніть клавішу Deleteдля видалення виділеної частини.

Шар із підсвічуванням відобразіть по вертикалі (Ctrl+T).

Потрібно переконатися, що світлова пляма на шапці знаходиться по центру. Для цього, зробіть активними шари з шапкою та підсвічуванням та виберіть інструмент Переміщення(Move Tool) (V). На панелі властивостей у верхній частині екрана натисніть кнопку Вирівнювання центрів по горизонталі (Align Horizontal Centers).

Створіть новий шар (Shift+Ctrl+N)та намалюйте інструментом Олівець(Pencil Tool) точку, розміром 1 піксел. Для малювання використовуйте колір #01bfd2.

Згладимо краї цього шару, використовуючи градієнтну маску. Виберіть інструмент Градієнт(Gradient Tool) і створіть градієнт, як показано нижче:

Застосуйте новий шар з маскою, яку залийте щойно створеним градієнтом.

Крок 4. Створюємо візерунок

Тепер створимо простий візерунок, який додамо до шапки. Інструментом Олівець(Pencil Tool) розміром 2 пікселі намалюйте дві точки, як показано на малюнку. Відключіть на час видимість фонового шару (клацніть по іконці ока біля фонового шару) і створіть візерунок (Редагування - Визначити візерунок)(Edit > Define Pattern):

Створіть новий шар (Shift+Ctrl+N)і помістіть його під шар із підсвічуванням. Виділіть область, до якої Ви хочете застосувати візерунок та відкрийте вікно Виконати заливку(Fill) (Shift+F5). Натисніть кнопку ОК.

Після додавання текстури шапка виглядає так:

Зробіть плавний перехідвід візерунка до шапки: до шару з візерунком додайте маску та м'яким пензлем білого кольору(#ffffff) з непрозорістю 60% пройдіться маскою.

Результат:

Крок 5. Додаємо логотип

Переходимо до додавання логотипу. Виберіть м'яку кисть із кольором #19535a і намалюйте пляму.

Напишіть текст:

До шару з логотипом додайте стиль шару Тінь(Drop Shadow).

Крок 6. Навігація

Додати текст для навігації.

Намалюйте кнопку навігації за допомогою інструмента (Rectangular Marquee Tool). Залийте виділення будь-яким кольором та зменшіть параметр Заливка до нуля.

До шару з кнопкою додайте стиль Накладення градієнта(Gradient Overlay).

Крок 7. Слайдер для контенту

Створіть виділення розміром 580х295 пікселів.

Залийте виділення будь-яким відтінком сірого.

Розмістіть зображення. Закріпіть його із шаром, який створили раніше.

Тепер до слайдера додамо ефекту. Створіть новий шар (Shift+Ctrl+N), Виберіть Пензлик(Brush Tool) з діаметром 400 пікселів. Відкрийте панель «Пензель» (F5) і встановіть параметри, показані на скріншоті:

Виберіть чорний колір (#000000) і намалюйте пляму:

Для пом'якшення країв застосовуйте фільтр Розмиття по гаусу(Gaussian Blur).

Виділіть нижню половину тіні та видаліть (Delete).

Помістіть шар із тінню над слайдером:

Стисніть шар із тінню за середній маркер (Ctrl + T), а потім знову відцентруйте шар з тінню: виділіть обидва шари і в панелі властивостей натисніть кнопку Вирівнювання центрів по горизонталі(Align Horizontal Centers).

Дублюйте шар із тінню (Ctrl + J)та помістіть дублікат на нижній край слайдера.

Намалюйте кнопки на слайдері за допомогою інструмента Прямокутна область виділення(Rectangular Marqee Tool ) . Залийте кнопки чорним кольором (#000000).

Зменшіть непрозорість шару із кнопками до 50%.

Додати фігуру стрілки на кнопки слайдера:

На нижній частині слайдера намалюйте смугу та залийте її чорним кольором (#000000).

Зменшіть непрозорість шару зі смугою до 50%.

На цю смугу додайте опис Вашого проекту:

Крок 8. Додаємо текст із привітанням

Напишіть текст із привітанням:

Крок 9. Завершуємо роботу над шапкою сайту

Ми майже закінчили роботу над шапкою сайту. Додайте ледь помітну тінь за допомогою інструмента Пензлик(Brush Tool).

Залиште між тінню та заголовком перепустку в 1 піксел.

Створіть новий шар під шаром із шапкою (Shift+Ctrl+N)та застосуйте до нього градієнт.

Крок 10. Додаємо кнопки для слайдера

Намалюйте кнопки зміни слайдів.

До однієї кнопки додайте стиль шару Внутрішня тінь (Inner Shadow), а потім дублюйте шар з кнопкою потрібну кількість разів (Ctrl + J).

Крок 12. Створюємо роздільник для контенту

Інструментом Олівець (Pencil Tool) і намалюйте світло-сіру (#aaaaaa) лінію шириною один піксел.

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

Крок 13. Додаємо контент

Настав час додати області під контент. Область контенту буде розділена на 3 колонки з рівним відступом. Між кожною колонкою буде відступ 25 пікселів.

Перш ніж почати проектувати макет сайту, нам знадобиться ескіз, на якому буде видно його зовнішній вигляд та функціональність. Для ескізу я використовував лише сірі тони, щоб загалом зосередитися на "плануванні" і поки не морочитися з квітами. В результаті ви будь-якої миті можете швиденько щось поміняти місцями або переробити.

2. Створення документа

Макет сайту буде шириною 960 пікселів, тому нам необхідно створити документ з розмірами 1200х1500 пікселів, з роздільною здатністю 72 пікс/дюйм.

Ми визначилися із шириною, тепер нам необхідно позначити цю область за допомогою . Натисканням клавіш Ctrl+A виділіть весь документ.

Перейдіть до Select (Виділення) та виберіть Transform Selection (Трансформувати виділену область). На панелі параметрів вгорі для ширини встановіть значення 960, це робоча область майбутнього макету.

Розташуйте напрямні по краях виділення.

Тепер ми створимо відступ між кордоном робочої області та областю для контенту, який буде додано пізніше. Переконайтеся, що у вас виділення активно, після цього знову пройдіть у меню Select > Transform Selection (Виділення - Трансформувати виділену область). Розмір ширини зменшіть до 920 пікселів. А це означає, що по обидва боки макета з'явиться відступ по 20 пікселів, а загалом 40 пікселів.

Додамо ще дві вертикальні напрямні з обох боків нового виділення.

3. Створення шапки сайту

У верхній частині макета утворіть виділення заввишки 465px.

Виділену ділянку заповніть сірим відтінком, трохи пізніше ми застосуємо до неї стилі шару для зміни кольору.

До шапки додайте градієнт за допомогою стилю накладання градієнта. Градієнт складатиметься з двох кольорів #0f201c та #002931.

Ось, що має вийти:

Тепер до шапки додамо підсвічування. Візьміть пензель з м'якими краями, діаметром 600px, колір - #19535a і на новому шарі зробіть клік пензлем у верхівці у центрі шапки.

У верхній частині шапки утворіть виділення розміром 110px.

Натисканням клавіші Delete видаліть виділену ділянку.

За допомогою вільного трансформування (Ctrl+T) відобразіть по вертикалі шар із підсвічуванням.

Переконайтеся, що підсвічування на шапці розташоване по центру. Для цього активуйте шари з підсвічуванням та шапкою, на панелі інструментів виберіть Переміщення (V). У верхній частині панелі параметрів виберіть функцію Align Horizontal Centers (Вирівнювання центрів по горизонталі).

Створивши новий шар, олівцем (B) намалюйте лінію в 1 піксель по ширині всього документа. Колір – #01bfd2.

За допомогою градієнтної маски згладьте краї створеної лінії. Візьміть інструмент Градієнт (G) і налаштуйте його, подібно до скріншоту нижче:

Створений шар заповніть градієнтом.

4. Створення візерунка

Шапку макета ми прикрасимо картатим візерунком. Олівцем у 2 пікселі намалюйте дві точки, розташовані по діагоналі. На якийсь час відключіть фоновий шарклікнувши по вічку біля мініатюрки фонового шару. Потім створіть візерунок, перейшовши в меню Edit (Редагування) та вибравши Define Pattern (Визначити візерунок).

Нижче підсвічування створіть новий шар. Виберіть ділянку, до якої потрібно застосувати візерунок. Натисканням клавіш Shift+ F5 заповніть шапку.

Результат:

Залишилося зробити плавний перехід від візерунка до шапки. Додавши маску до шару з візерунком, зробіть плавний перехід білим м'яким пензлем з непрозорістю 60%.

Дивіться результат:

5. Додавання логотипу

Логотип – це невід'ємна частина кожного сайту. Для його створення візьміть м'який пензель, встановіть колір #19535a і у верхньому лівому кутку намалюйте пляму.

Потім напишіть текст для логотипу.

Застосуйте до нього такі ефекти:

Накладення градієнта:

6. Навігація

Створіть кнопку для виділення категорії навігації за допомогою інструмента Прямокутна область (M). Заповніть виділену ділянку будь-яким кольором та значення заливки понизьте до 0%.

7. Слайдер для контенту

Утворіть виділену область 580х295 пікселів.

Виділену ділянку залийте будь-яким відтінком сірого кольору.

Зверху накладіть зображення та прикріпіть його до нижнього шару.

До слайдера потрібно додати тінь. Створивши новий шар, візьміть пензель (B) розміром 400px і натисніть клавішу F5, щоб відкрити вікно налаштувань пензлів. Усі налаштування дивіться на зображенні нижче.

Колір встановіть чорний і намалюйте пляму.

Щоб пом'якшити краї, використовуйте фільтр Gaussian Blur (Розмиття Гауссом).

Утворіть виділення для нижньої половини тіні та видаліть її.

Тінь розташуйте вгорі слайдера.

Спочатку стисніть тінь, а потім відцентруйте її, використовуючи функцію Align Horizontal Centers (Вирівнювання центрів по горизонталі).

Продублюйте тінь і розташуйте копію внизу слайдера.

За допомогою інструмента Прямокутна область (M) на слайдері створіть дві кнопки та заповніть їх чорним кольором.

Для шару з кнопками зменште непрозорість до 50%.

Використовуючи стандартні фігури Фотошоп, додайте кнопки на кнопки.

Внизу слайдера створіть смужку та заповніть чорним кольором.

Для смужки зменште непрозорість до 50%.

Тут ви можете додати опис свого проекту.

8. Текст із вітанням

Ліворуч від слайдера введіть текст з привітанням.

9. Завершення роботи над шапкою

Ми закінчуємо працювати над шапкою. І насамкінець пензлем додамо трохи помітну тінь.

Між тінню та заголовком залиште відстань 1 піксель.

Нижче шару з шапкою створіть новий шар. Застосуйте до нього градієнт.

10. Кнопки для слайдера

Настав час додати кнопки для зміни слайдів.

До першої кнопки застосуйте стиль шару Внутрішня тінь, щоб зробити її активною.

11. Розділювач для контенту

Трохи нижче кнопок для слайдера намалюйте лінію світло-сірого кольору #aaaaaa, шириною в 1 піксель.

Додавши маску до лінії, зробіть на краях плавний перехід за допомогою градієнта. Ми створили лінію розділення.

12. Додавання контенту

Тепер додамо області контентної частини. Вони будуть розділені на 3 колонки з відступом 25px.

Розташуйте вертикальні напрямні по обидва боки колонок.

Для кожної колонки додайте заголовок та відповідну іконку. Нижче заголовки додайте контент.

Використовуючи інструмент Прямокутник зі округлими кутами, створіть кнопку Read More. Зверніть увагу, щоб на панелі параметрів було вибрано режим Фігура.

До кнопки застосовуйте стилі Накладення градієнта та Обведення.

Кнопку Read More продублюйте (Ctrl + J) ще двічі та розташуйте їх у кожній колонці під контентом.

Як і раніше, потрібно створити розділову лінію, розташувавши її під кнопками. Нижче розташуйте прямокутники сірого кольору і застосуйте до них стиль Обведення.

На кожний прямокутник накладіть зображення.

Як і раніше, створіть тіні і розташуйте їх нижче областей із зображеннями.

Нижче кожного зображення розмістіть заголовок, контент, кнопку Read More та розділову лінію.

Нижче у першу колонку помістіть іконку Twitter.

Потім розмістіть повідомлення про Twitter.

Намалюйте ще одну кнопку More Tweets.

До цієї кнопки застосуйте стилі Накладення градієнта та Обведення:

Напишіть на ній текст More Tweets.

13. Створюємо футер

У самому низу макета сайту утворіть виділену область та залийте її сірим кольором.

Застосуйте до футера стиль накладання кольору.

І наприкінці розмістіть на футері навігацію та копірайт.

Макет сайту готовий!

Зміст Створення макетів сайтів: розвага для обраних Розробка макету сайту: етапи Спосіб №1. Нарізка макету із шаблону сайту Спосіб №2. Створення макету сайту у майже фотошопі Спосіб №3. Онлайн-інструмент для створення макетів

Для початку подумайте над тим, чому ви вирішили створити макет сайту самостійно. Ця робота потребує різнобічних знань від людини в галузі ІТ та дизайну, аналітичного та творчого мислення одночасно. А ще певної частини вашого часу. Окей, є 4 причини, чому вам могло це знадобитися. Якщо у вас інша – пишіть у коментарі, доповню.

Створення макетів сайтів: розвага для вибраних

Причина #1. Інтерес до розробки макетів сайту

Ваші інтереси дуже специфічні? Ми тут нікого не засуджуємо. Самим стало колись цікаво, і почали цим займатися! До того ж, потяг до пізнання - наша відмінна риса. Хвалю вашу цікавість.

Причина #2. Розробка макету сайту як вид заробітку

Якщо ви хочете стати в майбутньому веб-дизайнером, з чогось треба починати, А саме з елементарного макета сторінки сайту. Швидкий результатсвоєї роботи мотивує як ніщо інше. На щастя, у статті пропоную лише бліц-способи створення макета.

До речі, робота веб-дизайнера – це не жарти. Ось тут нижче я просто залишу графік зарплати залежно від стажу (за даними DOU за травень-червень 2016). Ні на що не натякаю. Просто прихований хантінг.

Причина #3. Складання ТЗ на розробку макету сайту для дизайнера

Часто перед недизайнерами варто показати макет веб-сайту - іноді просто для ілюстрації своєї ідеї, але іноді і для підкріплення ТЗ. Звичайно, це не обов'язково і грамотний дизайнер сам зрозуміє вашу ідею і навіть зробить краще, ніж ви очікуєте. Однак, якщо ви точно знаєте, чого хочете, краще це показати, а не розповідати.

Зручно також користуватися програмою Coggle, яке ви можете підключити доGoogleDrive.

Мені подобається Coggle тим, що майнд-карта завжди під рукою, їй зручно ділитися з колегами, і тут добре підібрані кольори елементів інтерфейсу. До того ж працює права кнопкамишки, що дозволяє добре налаштовувати карту. У мене вийшла ось така структура для головної сторінкисайту.

На першому етапі проектування макету створюється mind-map сайту

Етап 2: Створення прототипу сайту

Далі можна відразу почати малювати макет сайту у фотошопі, але, навіть якщо робити макет з цікавості, спочатку слід намалювати прототип сайту. При покроковій розробціПротототипування - невід'ємний етап, який зміцнює психічне здоров'я веб-дизайнера. Під час створення прототипу намічаються ключові блоки майбутнього сайту(шапка, слайдер, кнопки, контакти, структура матеріалу та ін.). Це дозволяє суттєво заощадити час на етапі відтворення макета т.к. можна буде побачити приблизний результат та безболісно внести зміни.

Втомилися? Зробіть життя простіше та замовте розробку сайту у KOLORO.Ми врахуємо ваші побажання та ви отримаєте саме те, що хотіли.

Створення прототипу сайту онлайн

Зазвичай я користуюсь двома найбільш популярними онлайн-інструментами для створення прототипу сайту: Moqups та Mockflow. В обох випадках є можливість створювати прототипи безкоштовно, але з обмеженим функціоналом Тарифи для першого сайту починаються від $13/міс. (10 проектів, 1 Гб), а для другого – від $14/міс. (Необмежену кількість проектів + ​​25 Гб у хмарі). Ще всі рекомендують Mockingbird. І я порекомендую, але тільки з поваги до Eminem, тому що тут 3 проекти обійдуться вже $12/міс., а безкоштовних інструментів менше.

Тепер про особисте враження. Moqupsзручніше та інтуїтивно зрозумілий навіть з першого відвідування. Тут багато готових блоків та іконок – саме те, що потрібно, щоб швидко пройти етап прототипування. Крім того, елементи зручно центруватищодо середини сторінки чи інших елементів. Трохи заважає обмеженняу 300 об'єктів для сторінки в безкоштовному режимі- для макету односторінкового сайту може бути обмаль. Є можливість вставляти елементи з воркфрейму Bootstrap. Mockflowдозволяє робити трохи менше, і з ним потрібно кілька хвилин розібратися і звикнутидо нього, проте Велика кількість простору на дискуможе когось залучити.

Прототипи сайту в Moqups та Mockflow

Як запрототипувати майбутній сайт?

Розглянемо на прикладі Moqups як можна створити прототип сторінкиз текстом для блогу.

Крок 1. Додаємо шапку(Текст можна змінити).

Крок 2. Додаємо блокдля картинки та напис (заголовок статті). За допомогою стилів можна зручно змінювати розмір, шрифт та інше форматування тексту.

Крок 3. Додаємо тексті задаємо ширинуколонки. Усі блоки зручно центруються щодо середини сторінки.

Крок 4. Текст треба було б розбити картинкою. Та й ширина колонки занадто велика, 500 рх буде краще. На щастя, її можна швидко поміняти. Великий плюс: виділені елементи зменшуються відносно один одного і мій блок із картинкою теж зменшився.

Крок 5. Додамо сайдбар(Бічну колонку), тут вже буде просто. Розмістимо поле для пошукута блок для передплатина розсилку (з привабливою картинкою та яскравою кнопкою).

Крок 6. Припустимо, наша стаття вийшла такою маленькою. Ще можна додати опитуванняі рейтингстатті. Вийшов акуратний прототип сторінки для блогу. Додайте інші елементи на свій смак.

Створення прототипу дозволяє побачити масштаби сторінкита прийняти рішення щодо тих чи інших блоків. До речі, за допомогою цих інструментів можна робити прототипи для різних девайсів. Наприклад, якщо постаратися, вийде щось схоже. Однак зазвичай прототип обмежується ч/б виконанням.

Прототип програми для смартфона

Етап 3: Робимо красивий макет сайту: вибираємо колір

Від успішного вибору кольорів залежить сприйняття сайтуі бренду користувачами. Не раджу покладатися на свої сили – підбір вдалого відтінку може зайняти годинник. Тому рекомендую використовувати готові палітри кольорів для Інтернету. У Google нещодавно вийшов докладний гайд за вдалими кольорами для матеріального дизайну (Тренд веб-дизайну). Ці кольори гармонійно поєднуються, і ви можете бути впевнені у їхній привабливості. За допомогою Materialpalette можна вдало підібрати два кольори – основний та акцент, а також подивитися, як вони будуть виглядати в інтерфейсі. Трохи більше кольорів на Material Design Colors.

Уявили сайт? Зробили прототип? Вибрали кольори? Тепер можна перейти до створення макета. Пропоную вам кілька способів.

Увага! Тут не буде порад щодо того, як зробити макет сайту у фотошопі - це тема для окремої статті, тут простіші способи.

Спосіб №1. Нарізка макету із шаблону сайту

або існуючих сайтів

Цей спосіб підійде вам, якщо ви хочете:

• розібратися в основних інструментах Photoshop;
• знайти різні референсидля свого майбутнього сайту та зібрати їх докупи;
• відчути себе дизайнером на пару годин;
• продемонструвати веб-дизайнеру або агентству (наприклад, нам:) найбільш докладне бачення сайту;
• підкріпити ТЗна розробку сайту не тільки «ось тут кнопочки призову, а тут роздільник та лідомагніт».

Плюси такого підходу до розробки макету:

• ви зможете уникнути поширених помилок, надивившись на якісні сайти;
• зрозумієте, як не треба робитищоб було добре;
• виконавці веб-дизайну будуть чітко уявляти, чого ви очікуєте;
• це дуже швидко- За кілька годин ви зробите макети для всіх сторінок сайту.

Мінуси:

• ви так і не зрозумієте, що таке веб-дизайн;
• деякі референси, які ви знайдете, верстальник не реалізує без змін інших частин сайту.

Як це робиться

Найпростіший і швидкий спосібзробити макет сайту - вибрати шаблон під певнуCMSта переробити його під себе. Тому спочатку потрібно визначитися з CMS, що значно спростить розробку сайту. Однак врахуйте, що дизайн сайту буде обмежуватисяелементами, які є в шаблоні. Звичайно, ви зможете змінити кольори, але окремі елементи інтерфейсу вже готові і їх поміняти ви не можете.

Якщо ви робитимете рагу з різних сайтів, не забувайте десь у блокнотику олівцем писати вихідники. Це спростить подальшу розробку дизайну та верстку макета.

Макети сайтів під Wordpress

Найбільш популярна CMS – це Wordpress. Наприклад, ви знайдете багато сучасних шаблонів для цієї CMS. Навіщо? Сайт на шаблоні прискорює запуск проекту в разиОднак він не буде унікальним. Хоча, якщо ви будете використовувати оригінальні ілюстрації, зображення та креативний підхід - навіть шаблонний макет можна переробити до невпізнання. Головною перевагою є те, що ваш сайт гарантовано буде адаптивним і взагалі красенем у плані відображення на різних пристроях.

Перегляньте різні шаблониі виберіть такий, який вам найбільше до смаку. Я ще трохи пошукала на Envato Market і знайшла шаблон Dalton, який мені сподобався найбільше. Зайшовши на демонстраційну версіюшаблону, ви одразу побачите концепт корпоративного сайту. Натиснувши на меню, ви зможете переглянути більше докладно, які функції є у ​​шаблону, як виглядатимуть різні сторінки. Найкраще приділити цьому півгодини і добре розібратися в тому, що є в шаблоні.

Що далі? Підбираємо розмір макета сайту, ріжемо та клеїмо

Коли ви вже опанували шаблон, можна приступати до його нарізці. Відмінно, якщо роздільна здатність вашого екрану 1920 рхабо більше - це дозволить просто робити скріншоти частин сайту та з'єднувати їх у редакторі. Робота з макетом починається з шапки (header), далі – різні блоки (body), в кінці – підвал (footer).

Вам знадобиться:

• зручний інструмент для знімка вибраної області (screen capture tool), я використовую Lightshot - він пропонує зберегти зображення в окремий файлабо копіює їх у буфер обміну;
• Photoshop- для склеювання нарізаних частин зображення.

Етапи створення макету для сайту на основі шаблону

Крок 1. Вибираємо ширину макету сайту

Вирішіть, яку сторінку ви робитимете першою. Чи не починайте з головної - її краще залишити наостанок, т.к. це найбільш важлива сторінка сайту і спочатку краще небагато набити руку. У прикладі я робитиму сторінку «Про нас» - тут буде цікава інформаціяпро компанію та її співробітників. У мене вже є прототип сайтутому я знаю, що роблю. Як там ваш прототип?

Відкрийте Photoshop та задайте ширину макету сайту 1920 рх. Цього буде достатньо для того, щоб побачити, як сайт буде виглядати у браузері.Якщо у вас роздільна здатність менша - ставте таку ширину, яку дозволяє монітор. Щодо висоти поки не турбуйтеся – тут складно вгадати і все одно доведеться розтягувати/звужувати область.

Крок 2 Продовжуємо створення макета сайту у Photoshop

Підберіть у шаблоні таку шапкуяка вам подобається. Виріжтеїї за допомогою зручного інструменту, відкрийте документ у Photoshop та вставтетуди (Ctrl+V). За допомогою інструмента переміщення (V) помістіть шапку вгорі. Мені подобається шапка з topbar, де є Контактна інформаціяПро компанію.

Крок 2.А. Робіть одразу правильний макет сайту

Тепер у вас є два шляхи – змінювати текст у зображенні або писати супутній текств текстовому файлі. Що зручніше? Все залежить від ваших цілей. на особистому досвідіможу сказати, що краще це зробити в макеті, одразу підібравши шрифт та розміри. Так безпечнішим і буде WYSIWYG у дії (What You See Is What You Get, «що бачиш, те й отримаєш»).

Крок 3. Йдемо до успіху

Наповнюйтесвій макетрізними блоками та редагуйтеїх відповідно до своїх потреб. на даному етапіможна не грати з квітами, якщо у вас немає навичок використання Photoshop. Щоб збільшити висоту макета, використовуйте інструмент «Рамка»(С).

Що вийшло

Через пару хвилин роздумів, нарізки і склеювання шматків, що найбільш сподобалися, у мене вийшов структурований макет сторінки"Про нас"

Про що не варто забувати

1. Називайтекожен шарз блоком адекватно, згідно з тим, що там є. Інакше потім зовсім загубитеся.
2. При виборі шрифту треба вибрати різний розмірдлязаголовків та основного тексту. При цьому краще керуватися бібліотекою веб-шрифтів Google Fonts. Не забудьте відфільтрувати кириличні шрифти.

Спосіб №2. Створення макету сайту у фотошопі майже

Вам підійде спосіб №2, якщо:

• у вас ніPhotoshop(совість не дозволяє чи немає місця на диску) або ви ще не навчилися ним користуватися;
• Ви хочете познайомитись зHTML кодом таCSS стилямибез втручання у розмітку;
• вам потрібний інтерактивний макет сайту.

Раджу шикарний безкоштовний інструментдля створення макетів Macaw. Для роботи з програмою її треба скачати та встановити- Справа кількох хвилин. У програмі можна в візуальному режимі практично верстати макет, тому що ви відразу зможете опублікувати його та побачити HTML-код та CSS. Дещо докладніше про роботу програми. У Macaw є істотний недолік- вона створює неадаптивну веб-сторінку.Як із цим боротися? Тут уже знадобляться навички верстальника, щоб підключити фреймворк (наприклад, якщо робити макет сайту під Bootstrap). Однак якщо потрібно просто показати працюючий макетколегам - Macaw чудово підійде.

Так виглядає не адаптивний шаблонна різних пристроях. Хочеться плакати

Для початку роботи запустіть програму на комп'ютері. Вашій увазі представляється порожній документ із шириною сторінки 1200 рх із сіткою макета сайту. За замовчуванням між стовпцями є відступ(Padding), тому між створеними елементами буде відстань. Малювати вам доведеться лише в межах колонок, тому що якщо ви вийде за них, блоки будуть відображатися один під одним. Тож слідкуйте за ними.

Ви можете самостійно задавати ширину стовпців, їх кількість та відстань між ними. Якщо ви хочете, щоб елементи "прилипали" один до одного, задайте 100% ширину колонки та приберіть між ними відступ. Навіщо вам ця сітка? При HTML верстці макету сайту буде простіше зробити адаптивний шаблон, т.к. сучасні фреймворки використовують саме 12-стовпцеву сітку.

Ви можете змінити ширину робочої області, потягнувши її праворуч або задавши розмір самостійно

Що далі? Макетуємо

Налаштуйте робочу областьтак, як вам зручно та приступаємо до роботи. Я створюватиму таку саму сторінку, яку вирізала із шаблону Dalton.

Крок 1.

Для початку необхідно створити шапку. Це буде контейнерз висотою 100 рх і нижнім кордономтовщиною в 1 рх.

Усередині іншого контейнерабуде логотип, а всередині наступного – меню. Для окремих елементівменю не потрібно створювати окремі блоки, достатньо встановити прийнятну відстань між словами (word spacing).

Крок 2

З готовою шапкоюможна приступати до решти блоків. У наступному блоці у мене буде фон, який необхідно окремо завантажити.

Крок 3. Створення інтерактивного макету сайту

Продовжую перетягувати блоки та вставляти в них текст. Кнопку створюю за допомогою спеціального інструменту « Кнопка»(логіка!). Macaw дозволяє створювати інтерактивний макет з різними станамикнопок та можливістю перемикання між сторінками.

Зверніть увагу на такі виділені елементи. Вони допомагають перемикатися між різними блоками та організовувати їх. Наприклад, текст має бути у певному контейнері, а не бовтатися просто так.

Якщо натиснути File ->Publish, ви отримаєте готову сторінку, в якій можна буде переглянути HTML-код та CSS в різних вкладках. Це дуже зручно, якщо ви хочете побачити, як виглядає розмітка

Що вийшло

Вийшло якось так. Тут для порівняння, злівасклеєні шматки відредагованого шаблону, справа- макет, створений у Macaw. Великий плюс програми – ви можете вставляти кнопки, додавати їм посилання, створювати різні сторінки та переходити між ними. Тільки не забувайте про ієрархії контейнеріві не загубіться у них.

Особливості такого способу створення макету сайту:

• щоб зрозуміти тонкощі роботипрограми, треба витратити додатковий час;
• навіть коли вже вник у програму, все ще іноді не зрозуміло, чому вона поводиться так, а не інакше;
• про адаптивність можна забути, якщо не доробляти самому;
• справді зручно створювати макеті навіть трохи розібратися у верстці - можна побачити, як взаємодіють елементи та взагалі якась структура;
• у стилях можуть з'являтися такі речі «width: 16.6666666666%», які треба буде виправляти; просто потрібно розуміти, що тут WYSIWG, а не більше.

Спосіб №3. Онлайн-інструмент для створення макетів

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

Зручний інструмент для створення інфографікиЯким я користуюся вже давно - сервіс Creately . Тут є десятки та сотні компонентів для створення UI дизайнупід різні пристрої (більше під мобільні). Вам сподобається, покажу деякі з них.

Ще тут зручно редагувати елементи, додавати текст (і навіть робити кнопки з посиланнями!). Загалом, всього за пару хвилин у мене вже вийшло те саме, що і в Macaw, тільки акуратніше. Однак такий макет не зробити дуже інтерактивним. До цього методу нічого очікувати кроків т.к. сервіс добре інтуїтивно зрозумілий. На скрині я постаралася максимально відобразити можливості сервісу.

Можливості сервісу Creately

На цьому все. Це були ті способи, яких я прийшла на тому чи іншому етапі творчого розвитку. Якщо ви знайшли користь у цьому матеріалі – ми щасливі.

P.S. Ця стаття є ознайомчою та не дозволить вам стати веб-дизайнером. За серйозними знаннями доведеться багато покопатися в інтернетах.

В цьому уроці ми навчимося створювати макет блогу в мінімалістичному стилі, використовуючи нові технології Photoshop. У цьому нам допоможуть нові можливості створення та збереження стилів. Character Styles та Paragraph Styles.

Давайте подивимося, що ми створюватимемо в цьому уроці.

Для виконання уроку вам знадобляться такі ресурси:

• Безкоштовний шрифт Free Font Sansation.
• Текстура 26 Repeatable Pixel Pattern
• Набір соціальних іконок Free Social Media Icons
• Рука значок Hand Cursor Icon
• Стокове зображення Stock photo: Harvest 1
• Стокове зображення Stock photo: New York Streets 3
• Стокове зображення Stock photo: Daisy Age
• Стокове зображення Stock photo: A tree on the horizon
• Стокове зображення Stock photo: Sales figures
• Стокове зображення Stock photo: Time is Money!

Підготовка полотна

Крок 1

У цьому уроці ми будемо використовувати фреймворк 960 GS . Потрібно з завантажити шаблон з його головної сторінки і знайти всередині файл архіву"12 Column Grid".

Натисніть на іконку ока біля шару 12 Col Grid, щоб приховати його видимість, поки він нам не знадобиться.

Крок 2

Поки що розмір нашого полотна досить малий. Натискаємо Image> Canvas Size(або Ctrl + Alt + C), щоб зробити розмір трохи більшим і встановлюємо опорну точку в центрі.

Крок 3

Натисніть Ctrl + R, щоб показати лінійку.НатиснітьView> New Guide (Перегляд — Нова напрямна) , щоб створити нову напрямну.Виберіть Verticalта Position (Положення): 185 px , щоб створити вертикальну напрямну, яка буде зсунута на 185 px від лівого краю.

Крок 4

Створіть ще вертикальні напрямні на відстані150 , 1095 і 1130 пікселів .

Підготовка Color Theme

Крок 5

У нашому дизайні ми збираємося використати наступну колірну комбінацію- Colorlouver . Натисніть на зображення, щоб відкрити комбінацію кольорів і зберегти у форматі JPEG.

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

Підготовка фону

Крок 6

Виберіть шар Backgroundта натисніть на значок замка, щоб розблокувати цей шар. Двічі клацаємо зображення, щоб змінити колір фону.

За допомогою піпетки виберіть другий колір нашої колірної схеми (# 948371) .

Крок 7

Намалюйте прямокутну форму у верхній частині полотна.Це буде друге тло.

Крок 8

Виберіть створену форму та перейдіть до панелі Option Bar. відкрийте Fill Colorта натисніть значок вибору кольору. Коли з'явиться діалогове вікно Color Picker, виберіть перший колір. В полі StrokeВиберіть None

Крок 9

Створіть новий шар та за допомогою Rectangular Marquee Tool виділіть верхній прямокутник. Активуйте інструмент градієнтної заливки та залийте виділену область радіальним градієнтомвід білого до чорного.

Змініть його режим Blend modeна Screenі зменшіть непрозорість Opacityдо 37% .

Крок 10

Створіть новий шар та назвіть його «тінь».

Намалюйте прямокутне виділення в нижній частині другого фону, як показано нижче. Натисніть Edit: Fill . Встановити Use - Black . Натисніть OK, щоб заповнити виділення чорним.

Крок 11

Розмийте його за допомогою Gaussian Blur.НатиснітьFilter > Blur > Gaussian Blur .

Крок 12

Утримуючи Alt, помістіть курсор між тіннюі шар з другим фоном.Не відпускаючи Al , натисніть, щоб перетворити шар на відсічну маску . Перетворивши його на Clipping Mask, тіні зараз розміщені всередині верхнього фону.

Крок 13

Змініть прозорість тініOpacityдо 50% . Нижче ви можете побачити результат при 100% збільшенні.

Крок 14

Настав час, щоб помістити всі шари в одну групу. Щоб зробити це, виберіть усі шари та натисніть Ctrl + G .

Header

Крок 15

Намалюйте прямокутник у верхній частині полотна, як показано на малюнку.

Крок 16

У панелі Option Bar, встановіть колір Stroke - # af9f8e .

Крок 17

Для заливання виберіть наступні кольори лінійного градієнта- від# d0c4b9до #a89c91.

Назва сайту

Крок 18

У лівому боці шаблону додаємо назву нашого сайту. Зверніть увагу, щоб розміщення відповідало малюнку нижче. Двічі клацніть текст і додайтеDrop Shadow. В уроці був використаний шрифт Sansation.

Меню

Крок 19

Використовуючи шрифт Sansation 14 пунктів, створюємо меню. Знову зверніть увагу на місце розташування.

Крок 20

Для активної кнопки меню встановіть тип шрифту – bold.

Крок 21

Активуйте інструмент створення багатокутника Polygon tool та встановіть кількість сторін - 3 . Намалюйте трикутник із кольором заливкиFill: # 3d3123та значення обведенняStroke: None. Додаємо до шару тінь -Layer Style> Drop Shadow .

Крок 22

Підкреслимо активну кнопкуменю.Активуйтеінструмент Лінія та встановити її розмір weight -5 пікселів. Виберіть колір# f76b6aі лінія має бути без обведення.

Розмістіть лінію під активним менюі додайте відстані між лінією та прямокутною формою в 1 піксель.

Використання стилів символу

Крок 23

Збережемо налаштування стилів для тексту. Це щось схоже на спрощену версію стилів символів InDesign. Щоб зберегти їх, потрібно активувати текст, а потім натиснути на іконці New Character Style.

Двічі клацніть новий стиль і виберіть наступні настройки.

Крок 24

Виберіть наступний пункт меню, а потім натисніть кнопку Character Style, щоб застосувати параметри стилю.Якщо ви знайшли знак плюс біля стилів, це означає, що вони мають різні настройки.

Крок 25

Повторіть попередній крок, щоб застосувати створений стиль активного меню.

Крок 26

Тож у чому перевага використання стилів символів? Вони допоможуть нам централізувати налаштування тексту. Ми можемо просто змінити стиль символу, щоб відредагувати будь-який текст. Наприклад, якщо змінити стиль Top Menu – Normalна Corbel,всі елементи меню автоматично зміняться Corbel.

Крок 27

Створіть новий шар та помістіть його під елементами меню. НатиснітьCtrl і клацніть поменю, щоб зробити наступне виділення.Залийте йогочорний.

Крок 28

Видаліть виділення, натиснувшиCtrl + D.Розмийте чорну область, використовуючи фільтрFilter > Blur > Gaussian Blur .

Слайдер

Крок 29

Намалюйте прямокутну форму шириною стовпців (див. нижче).

Для кольору заливки виберіть # dfd1c2. Колір Stroke - # c8baac,розмір 10 pt. Натисніть на маленьку стрілку поруч із лінією, щоб переконатися, що вибрано опцію Align Insid.

Крок 30

Вставляємо зображення, як показано нижче. Конвертуйте його в Clipping Mask, натиснувши Ctrl + Alt + G . Зображення буде автоматично розміщено всередині слайдера. При необхідності, ви можете змінювати розмір і переміщати його, не впливаючи на його рамку.

Крок 31

Намалюйте ще одну прямокутну форму біля слайдер таким же кольором.Переконайтеся, що форма буде прив'язана до крайньої напрямної. Додаємо стиліLayer Style> Pattern Overlay,використовуючи текстуру

Photoshop - дуже популярна серед веб-дизайнерів програма, для багатьох навіть стандарт. І якщо мова заходить про макет сайту, то в більшості випадків під ним мається на увазі файл формату PSD.

Перед створенням макета необхідно визначитися зі структурою сайту, продумати навігацію, уявляти собі, де які блоки та елементи будуть розташовуватися.

Із чого складається макет?

Переважна більшість веб-сторінок складається з:

• Верхній частині (шапки), в якій розташовується логотип, слоган, навігаційне менюі т.д.;
• основного блоку, у якому розміщується контент;
• бічній панелі (сайдбара);
• нижньої частини (футера), в якій зазвичай зберігається допоміжна інформація, відомості про авторські права, Корисні посиланняі т.д.

Як створити?

Придумайте та продумайте структуру. Не зайвим буде малювати її на аркуші паперу або в Photoshop.

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

Визначтеся, що розтягується або фіксовано буде ваш дизайн. Шаблон фіксованого розміруна всіх екранах виглядає однаково, «гумовий», змінюючи розміри, підлаштовується під пристрій. Якщо дизайн «гумовий», то необхідно визначитися, чим заповнюватиметься тло сайту.

Втім, макет справжнього веб-ресурсу ми створювали в , яка є частиною (вкрай рекомендую), і складний прикладви можете знайти у ній.

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

1. Створіть документ майбутнього макету. Не забудьте визначити розмір.
2. Розмежуйте макет за допомогою напрямних, що витягуються з лінійок.

Щоб увімкнути лінійки, або натисніть клавіші Ctrl+R , або виконайте команду Перегляд -> Лінійки головного меню програми.

Для витягування горизонтальної напрямної клацніть на верхній лінійці кнопкою миші і, не відпускаючи її, переміщуйте покажчик вниз доти, доки напрямна не займе необхідне становище. Щоб витягнути вертикальну лінію, проробіть все те саме, тільки переміщуйте покажчик праворуч від розташованої зліва лінійки.

У результаті ваш шаблон має бути розмежований.

1. Намалюйте макет. Додайте графіку, лінії, кнопки та інші елементи. Тут все індивідуально, а інструменти для роботи ми розглядали протягом .

1. Додати кольори, якщо не зробили цього раніше. Пам'ятайте про гармонійність та м'якість тонів. Знання людино-машинної взаємодії та художня школа будуть лише у плюс.

Як розрізати

Вже готовий макетнеобхідно розрізати «на шматочки», щоб використовувати його елементи в дизайні сайту, частина якого буде реалізована через HTML, частина - через CSS, а частина - за допомогою тих самих картинок, на які макет буде розрізаний. Пам'ятайте про це, коли захочете залишити кілька картинок з білим тлом, текст сторінки або назви посилань - залишати потрібно тільки те, що братиметься з графічних файлів і не буде реалізовано іншими засобами.

Отже, макет готовий та відкритий. Розрізатимемо.

1. Вимкніть шари з непотрібними елементамимакету - текстом, кнопками, формами і т. д. Щоб сховати шар, клацніть на вічку в його рядку.

1. Підгоніть витягнуті з лінійок напрямні під структурні елементисайту. В принципі, макет можна розрізати і за ними, але в такому випадку може вийти не зовсім так, як потрібно, тому будемо використовувати інший засіб.
2. Виберіть інструмент Розкривання. Він розташований на палітрі групи Рамка.

1. Щоб відрізати шматок макета, підведіть вказівник до місця, звідки хочете почати, і робіть все так, ніби виділите прямокутну область. Вирізану частину буде пронумеровано. Синій колірномера означає, що фрагмент активний та його можна редагувати. Частини, які програма передбачає, що ви розрізатимете, мають номери на сірий фон. Відрізаний фрагмент виділено і має маркери, завдяки яким його розмір та положення можна коригувати.

1. Аналогічно зробіть наступний розріз, і так доти, доки робота не буде завершена.
2. Коли все зроблено, збережіть результат. Для цього виконайте команду Файл -> Експортувати -> Зберегти для Web ( стара версія), перевірте настройки (виберіть формат, якість тощо), натисніть Зберегти та вкажіть папку, в якій буде створено каталог графічних файлів.

1. Усередині обраної директорії з'явилася папка images з графічними файлами, кожен із яких містить частину макета.
2. Тепер можна зберегти кнопки, іконки та інші, приховані раніше елементи.

Макет створений, розрізаний та повністю готовий.