Создание макета сайта в Photoshop требует некоторого опыта и знаний в веб-разработке. HTML, CSS, JS – для создания красивого, функционального и отзывчивого макета все это нужно знать хотя бы на базовом уровне. Конечно, с практикой и изучением основ дизайна в растровых редакторах вы также можете создавать в них и профессиональные макеты – сделать это можно и в визуальном редакторе Adobe Photoshop.
Также придется учитывать и разрешения экранов, скорость загрузки страниц и адаптивность дизайна – если вы захотите пойти дальше и нарисовать полноценный сайт в PS. И делать все это в PS гораздо сложнее, чем в профессиональных инструментах (особенно в предыдущих версиях редактора).
Но для создания макета главной страницы Adobe Photoshop – вполне подходящий инструмент. Давайте смотреть!
Первый пример создания макета: краткая инструкция
Шаг 1. Настраиваем рабочее пространство
Шаг 2. Устанавливаем параметры сетки
Шаг 3. Определяем цветовую палитру
Шаг 5. Оформляем основную область содержимого
Шаг 7. Добавляем элементы дизайна
Шаг 8. Дорабатываем финальный вариант макета
Шаг 9. Экспортируем макета для веба
Второй пример создания макета: подробная инструкция
Этап №1. Подготовка. Создаем холст
Этап №3. Создаем текстурный паттерн
Этап №4. Помещаем логотип компании на страницу
Этап №5. Вставляем URL в зону хедера
Этап №6. Формируем место для слайдера содержимого
Этап №7. Добавляем приветственный текст
Этап №8. Завершаем проработку хедера
Этап №9. Добавляем градиент к бэкграунду
Этап №10. Делаем буллиты навигации
Этап №11. Формируем разделитель для содержимого
Этап №12. Добавляем основное содержимое
Что такое макет
Макет сайта – это прототип или предварительный эскиз будущего сайта, он определяет дизайн веб-ресурса и функциональные возможности. Макет создается в процессе разработки сайта.
Обычно макет содержит структуру сайта, расположение элементов (текст, изображения, кнопки и т. д.), навигацию и другие элементы дизайна.
Зачем он нужен
Макет помогает понять, как будет выглядеть готовый сайт, например лендинг. Также макет позволяет протестировать различные варианты дизайна, оценить функциональность. После того как макет готов, он может быть использован для создания финального варианта сайта.
Первый пример создания макета: краткая инструкция
Здесь мы рассмотрим создание макета главной страницы для десктопной версии сайта. Постарались разобрать каждый шаг максимально кратко.
Шаг 1. Настраиваем рабочее пространство
Будем создавать новый файл макета. Запускаем Photoshop. Открываем File и выбираем New.
Создаем новый файл
Устанавливаем размеры будущей веб-страницы (например, ширина – 1920 пикселей, высота – 1080 пикселей). Это один из вариантов, в случае с вашим макетом размеры могут быть иными. А вот разрешение можно оставить 72 пикселя на дюйм – оно идеально для использования для веба. Называем документ и нажимаем ОК.
Настраиваем размеры
Шаг 2. Устанавливаем параметры сетки
Для этого переходим в меню View и нажимаем кнопку New Guide Layout. Это функция создания нового макета направляющей. Настраиваем столбцы и строки в соответствии с потребностями дизайна.
Обычно выбирают сетку из 12 столбцов – это универсальный вариант, который поможет выровнять и равномерно расположить элементы любого дизайна.
Задаем параметры сетки
Шаг 3. Определяем цветовую палитру
Определяемся с основными и дополнительными цветами, а также с цветами-акцентами.
С помощью инструмента Color Picker выбираем цвета с готовых образцов. Сохраняем эти цвета (панели «Цвета» и «Образцы») – для удобного доступа в дальнейшем.
Для начала выбираем пипетку
Шаг 4. Создаем хедер
С помощью инструмента создания прямоугольника рисуем баннер в верхней части страницы.
Прямоугольник
Добавляем логотип компании, используя опцию Place Embedded (она находится в разделе File).
Нажимаем Place Embedded
Располагаем навигационное меню с помощью инструмента Text. Следим за тем, чтобы шрифты были одинаковыми и читабельными.
Работаем с инструментами типографики
Шаг 5. Оформляем основную область содержимого
С помощью прямоугольника создаем секции для контента. В том количестве, в котором они требуются. Инструмент находится на главной панели, в левой части редактора.
Нужный нам инструмент
Вставляем изображения с помощью уже знакомой нам функции Place Embedded.
Нажимаем на строку Place Embedded
Добавляем заголовки и основной текст. Не забываем соблюдать строгую иерархию для всех элементов.
Соблюдение иерархии – это лучшая читабельность
Шаг 6. Создаем подвал
Создаем еще один прямоугольник в нижней части, аналогичный подвалу на главной странице сайта (нижний колонтитул).
Вставляем в размеченную зону макета стандартный набор данных: контактную информацию, иконки социальных сетей и ссылки на документы (условия предоставления услуг или политику конфиденциальности, например).
Размечаем нижний колонтитул макета
Шаг 7. Добавляем элементы дизайна
Продолжаем добавлять новые элементы. Обязательно группируем слои, относящиеся к каждому разделу (заголовок, основной контент, сайдбар, подвал), чтобы сохранить чистоту и порядок.
Шаг 8. Дорабатываем финальный вариант макета
Увеличиваем масштаб и просматриваем дизайн. Все должно быть ровно и согласованно друг с другом.
Регулируем все неправильно расположенные элементы и убеждаемся, что цветовая палитра остается неизменной.
Шаг 9. Экспортируем макета для веба
Если с черновым вариантом макета – все ОК, то переходим в меню File и выбираем Export > Save for Web (в новой версии редактора). Выберите подходящий формат (обычно JPEG или PNG) и нажмите Save.
В старой версии редактора Save for Web вы найдете сразу же в меню File.
Сохраняем изображение для веба
Второй пример создания макета: подробная инструкция
Этот пример создания макета – более подробный. Мы рассмотрели создание типичных элементов главной страницы (хедер, футер, сайдбар), а также узнали, как вставить логотип, приветственный текст, буллиты и другие элементы.
Этап №1. Подготовка. Создаем холст
Запускаем Photoshop. Создаем новый документ с разрешением 1200 x 1500. Это будет самый первый этап создания нашего макета – настройка холста. Начинаем работу. Теперь мы будем формировать новый документ:
Указываем точные размеры будущего макета
Для примера создадим макет шириной 960 пикселей. Теперь мы выделим будущую рабочую зону. Для этого будем вставлять направляющие.
Выделяем рабочую область холста
Выделяем весь холст (можно использовать сочетание горячих клавиш Ctrl+A).
Теперь переходим в меню, которое называется Select, и находим строчку с надписью Transform Selection. Нажимаем на нее.
Делаем трансформацию выделения
Сейчас будем сжимать вышеупомянутое выделение. Как уже говорили выше, используем значение 960 пикселей.
Снимаем выделение
Следующий шаг – вставляем направляющие к выделению. В итоге все это может выглядеть следующим образом:
С каждой стороны будет по 20 px (суммарно: ровно 40 px)
Теперь нужно создать подложку между условным бордердом и содержимым (место для будущего контента). Сделаем это чуть позже, а пока вернемся к инструменту трансформирования.
Убедитесь, что установлен режим активного выделения. Теперь мы заново применяем команду трансформации выделения. Посмотрите на скриншот ниже, чтобы сформировать представление об этом шаге:
С каждой стороны будет по 20 px (суммарно: ровно 40 px)
Внимание: на предыдущем шаге не забудьте поменять размер выделения до 920 (в ширину).
Теперь снова будем вставлять направляющие для нашего нового выделения:
Следующий этап – создадим хедер (заголовок) макета. Здесь нет ничего сложного.
Этап №2. Создаем хедер
Снова делаем выделение (значение в пикселях мы указали красным цветом):
Для примера мы взяли значение в 465 пикселей
Сначала заполняем выполненное выделение серым цветом. Теперь нужно будет задействовать стили слоя. Делайте это, когда нужно работать с цветами и градиентными масками (очень частый сценарий при разработке макета). Этот подход нужно применять на протяжении всей работы над дизайном макета, чтобы сохранить визуальную иерархию и общий стиль.
Вот что получилось. Основная зона хедера готова
Теперь будем добавлять маску-градиент в зону предварительного хедера. Для этого кликаем на миниатюре слоя и входим в режим градиентного оверлея.
Создали градиентное заполнение оверлеем
В итоге перечисленные выше шаги в окне редактора, в нашем случае, выглядят вот таким образом:
Доделываем хедер
Далее нужно добавить выделение. Вот, что нужно будет сделать.
1. Формируем еще один layer.
2. Подготавливаем очень мягкую кисть. Устанавливаем значение диаметра в 600 px.
3. Цвет кисти у вас будет индивидуальным. В нашем случае это был #19535a.
Делаем однократный клик прямо по центру хедера
4. Продолжаем. Теперь нужно будет захватить выделение (в нашем случае его высота в пикселях указана красным):
Выделили участок будущего хедера
5. Теперь любым способом удаляем ранее выделенную зону (можно использовать старую-добрую клавишу Delete). Вот, что осталось на экране:
Должно получиться вот так
6. Сжимаем полученный блок по вертикали, для решения этой задачи можно использовать сочетание горячих клавиш Ctrl+T.
Получилась заготовка хедера
Нам сейчас очень важно убедиться, что место выделения идеально центрировано по отношению к хедеру. Для этого выделяем все компоненты (слои, заголовок и выделение), а затем нажимаем клавишу V (так можно быстро перейти в режим перемещения).
7. Теперь на панели параметров нажимаем на иконку выравнивания центров в горизонтальной плоскости (в английской версии функция эта называется Align Horizontal Centers).
Нам нужно выровнять горизонтальные центры
8. Теперь создаем новый слой. Поправка: будем делать это при помощи карандаша (он же Pencil Tool). Нарисуем соответствующую линию размером ровно в один пиксель.
Так мы сделали линию выделения. В нашем примере цвет был #01bfd2
9. Плавно скроем торчащие края с помощью градиентной маски. Для этого мы будем использовать знакомый Gradient (простыми словами, создадим на панели параметров градиент).
Настройки создаваемого градиента
10. Применяем упомянутый выше градиент.
Теперь у нас маска градиента
Дальше нужно создать элементарную текстуру и применить ее к зоне хедера. Ниже продолжим решать эту задачу.
Этап №3. Создаем текстурный паттерн
Выбираем инструмент «Карандаш», устанавливаем размер кисти на 2 пикселя и добавляем две точки. Они должны касаться друг друга по углам.
Отключаем фон и выделяем точки. В меню редактирования проекта нажимаем на строчку Define pattern. Это и есть определение узора. Вот как он выглядит у нас:
Назовите паттерн любым удобным образом
Далее порядок действий будем таким:
- Формируем еще один слой в проекте;
- Помещаем только что созданный слой под тем слоем, который имеет выделение;
- Входим в режим заливки;
- Находим знакомый нам паттерн среди узоров;
- Нажимаем кнопку ОК.
В итоге все будет выглядеть следующим образом:
Окно заливки
Выделение заполнено узором. Взгляните, как это сделано в нашем примере:
Узор успешно добавлен
Плавно наносим узор на хедер. Сразу же будем работать с уже знакомым нам инструментом – слой-маской. Ее прибавляем к слою с паттерном (речь об узорах).
Находим очень мягкую кисть. Начинаем малевать довольно большими мазками.
Теперь понижаем уровень непрозрачности кисти (в нашем случае примерно до 60%) и продолжаем процесс раскрашивания.
Важно: если вы находите краску излишне интенсивной, отрегулируйте непрозрачность слоя отдельно.
В нашем случае цвет кисти был #ffffff
Смотрите, как все ровно и красиво.
Готово
Фон практически готов. Теперь будем добавлять логотип.
Этап №4. Помещаем логотип компании на страницу
Перед добавлением шрифта добавляем выделение, которое останется за логотипом. Далее выполняем следующие действия:
1. Находим очень мягкую кисть;
2. Рисуем обычное пятно;
В нашем случае цвет кисти был #19535a
3. Открываем инструмент для работы с типографикой. Делаем надпись. Шрифт будет индивидуальным. В примере это был Bebas;
Созданная надпись
4. Применяем к логотипу конкретные эффекты. Например, к месту будет падающая тень;
Настраиваем падающую тень
5. Добавляем градиентный оверлей и настраиваем его сразу.
Настройка градиента-оверлея
Теперь будем добавлять навигационные ссылки.
Этап №5. Вставляем URL в зону хедера
Ссылки в шапке – это кликабельные слова или словосочетания. Такие анкоры можно определить, например, в правый верхний угол:
Вот как могут выглядеть URL в хедере
Создаем кнопку навигации. Как это сделать:
1. Активируем инструмент «Прямоугольная область», нажав на иконку Rectangular Marquee Tool;
2. Применяем инструмент Fill. Нам нужно сделать заливку выбранной зоны при помощи рандомного цвета;
3. Затем уменьшаем непрозрачность заливки до 0;
Результат
4. Дважды кликаем на миниатюру слоя и находим оверлейный режим с градиентным заполнением. Вот какие параметры мы использовали:
Настройки наложения градиента
5. Выбираем изображение размером 580 x 295 пикселей. Это будет место для будущего слайдера.
Этап №6. Формируем место для слайдера содержимого
Намечаем зону для будущего слайдера в соответствии с рекомендациями выше.
Зона для слайдера
Заливаем выделение. Мы использовали серый цвет и сплошную заливку.
Заливка – есть
Настало время достать из рукава заготовленную картинку – прикрепляем ее к базовому слою, который мы создали выше. Вот какое изображение в шапке у нас:
Картинка в шапке
Теперь будем формировать эффект тени для нашего слайдера. Вот что нужно сделать.
1. Формируем новый слой. Для этого открываем инструмент типа Brush.
2. В настройках задаем размер, примерно в 400 px.
3. Параметр Roundness ставим примерно на 10%. Вот эти параметры:
Мы установили вот такие параметры для кисти
4. Устанавливаем цвет кисти в значение #000000. Наносим такое пятнышко:
Пятно
5. Активируем размытие по Гауссу, чтобы таким образом сделать края более мягкими.
Мы установили радиус в 4 пикселя
6. Выбираем только нижнюю часть тени. Вырезаем ее.
Удалили часть тени и осталась половина
7. Нам нужно будет перетащить эту тень, но так, чтобы в итоге она располагалась немного выше ползунка.
Обратите внимание, где теперь тень
Мы уменьшили тень по вертикали. Затем выравниваем ее по центру относительно ползунка.
8. Выбираем оба слоя и на панели параметров нажимаем на кнопку, выделенную красным прямоугольником:
Выравнивание по центру
Этот инструмент выравнивает центры в горизонтальной плоскости.
9. Дублируем тень и поворачиваем ее по вертикали. Помещаем ее сразу же на нижний край нашего слайдера.
Теперь тень есть и на нижней линии слайдера
10. Теперь сформируем стрелки – для взаимодействия с ползунком. Создаем стрелки с помощью прямоугольной области выделения (этот инструмент уже встречался нам выше).
Заливка у нас будет #000000
11. Понижаем параметр opacity для стрелок до половины от 100% значения.
Работаем с каналом opacity. Ставим в 50%
Находим меню с автофигурами (см. панель параметров). Теперь нужно отыскать стрелочки. Вот какой вариант мы выбрали для нашего дизайна:
Мы использовали эту стрелку
12. Теперь внедряем сюда полосочку. Сразу заполняем ее цветом (соответственно, это значение #000000).
Вот наша полоска
13. Снова устанавливаем канал opacity в половину.
Настроили канал opacity на половину
Здесь мы можем добавить описание страницы, например.
Вот и описание
Как-то пусто? Давайте напишем парочку мотивирующих слов или просто поприветствуем посетителя.
Этап №7. Добавляем приветственный текст
Он помогает разнообразить визуал главной страницы. Например, можно сделать это вот таким образом:
Текст приветствия
Хедер практически закончен. Давайте проработаем тени.
Этап №8. Завершаем проработку хедера
Тень поможет завершить сформированный визуал. Добавляем тень таким же способом, каким мы делали это выше (кистью).
Это наша тень, созданная кистью
Но только обязательно оставьте зазор в 1 пиксель между заголовком и тенью.
Вот эта линия-зазор
Применяем градиент к фону. Почти готово.
Правило: создавайте градиент от светло-серого к белому.
Этап №9. Добавляем градиент к бэкграунду
Для этого создаем градиент и меняем параметр Location на 25%.
Ставим значение в 25%
Теперь формируем еще один новый слой – непосредственно под хедером. Нужно применить здесь градиент.
Обратите внимание, где начинается и где заканчивается слой
Макет у нас практически завершен. Посмотрите на него целиком:
Последние штрихи
Этап №10. Делаем буллиты навигации
Создаем элементы управления вращением. Такие вы можете увидеть на коммерческих и информационных сайтах.
Эти буллиты помогут управлять слайдером
Применяем внутреннюю тень к одному элементу управления, чтобы указать текущий активный элемент в слайдере.
Все внимание на настройки
Почти готово. Осталось добавить разделитель контента.
Этап №11. Формируем разделитель для содержимого
Открываем старый-добрый карандаш (в английской версии Pencil Tool). Рисуем обычную линию размером 1 пиксель.
В нашем случае выбрали цвет #aaaaaa – обычный серый цвет
Плавно скрываем края с помощью градиентной маски.
Края пропали
Пришло время перейти к контенту.
Этап №12. Добавляем основное содержимое
У нас трехколоночный макет, поэтому нам нужно создать три одинаковые колонки с некоторым запасом между ними.
Мы произвели простой расчет и разделили доступное пространство на три одинаковых по ширине поля, но с 25-пиксельной прокладкой между ними.
Вот как это уместилось
Добавляем направляющие линии на прямоугольники. Затем удаляем их. Колонны готовы.
Получились колонны
Добавляем несколько иконок под услуги. Обязательно сохраняем равномерное расстояние между объектами.
Для каждого блока-колонны добавили иконки
Для примера создадим простую кнопку Read more. Для этого выбираем инструмент Rounded Rectangle Tool, чтобы нарисовать форму. Важно: нужно убедиться, что это слой Shape Layer.
Радиус в нашем случае 20 пикселей
Продолжаем. Теперь нужно применить к кнопке наложение (напомним – градиента и обводку), соответственно.
Размер будет один пиксель
Дублируем кнопку Read more.
Получили три кнопки типа Read more
Прикрепляем изображения к превьюшкам.
Теперь у каждого блока есть изображения
Мы создали тень, как уже делали это чуть ранее, а затем поместили непосредственно под превьюшками.
Также мы добавили описание для каждого блока.
Теперь точно все
Создание нижнего колонтитула (футера) – завершающий этап работы. О нем далее.
Этап №13. Формируем футер
Делаем выделение для нижнего колонтитула и заливаем его серым цветом.
Вот он, будущий футер
Применяем наложение цвета с прозрачностью 100%.
Задаем настройки для Color Overlay как на картинке
Наконец, добавляем навигацию и информацию об авторских правах. Все, черновой вариант макета главной страницы готов. Можно экспортировать его в web-формат и использовать по назначению.
