Как создать макет веб-страницы в Adobe Photoshop?

Для создания макета веб-страницы в Adobe Photoshop необходимо выполнить следующие шаги: 14

1. Сформировать документ нужных размеров. 1 Для этого нужно кликнуть по «Файл» и «Создать», указать параметры полей. 1 Рекомендуется увеличить размер больше на 200 пикселей, чтобы добиться полного соответствия с реальным размером страницы. 1
2. Включить линейки и активировать сетку. 1 На листе появятся клеточки, необходимые для расположения элементов по предназначенным для них областям. 1 На готовом макете эти линии пропадут. 1
3. Подобрать изображение или палитру цветов для фона. 1 Самый простой вариант — придать фону ровный оттенок при помощи кнопки «Заливка». 1 Более выигрышно смотрятся картинки по тематике сайта. 1
4. Добавить логотип компании. 1 Для этого нужно использовать стандартный инструмент. 1
5. Сформировать верхнее меню. 1 После выставления линейки нужно кликнуть на «Прямоугольную область», выделить место вдоль линейки. 1 Затем подобрать подходящий цвет, нажать на кнопку «Заливка» и закрасить выделенную ранее область. 1 После этого отменить выделение: «Выделение» — «Отменить выделение». 1 После этого выбрать «Горизонтальный текст» и шрифт. 1 Щёлчком мыши по закрашенной области дать названия разделам меню. 1 При необходимости передвинуть текст в нужное место. 1 Затем создать слой, кликнуть на «Линия», нажать Shift и вертикальной линией разделить фон меню. 1 Потом скопировать слой и выставить после каждого раздела. 1
6. Создать основной блок с контентом. 1 Установить линии — вертикальную и горизонтальную. 1 Сделать слои — с заголовком и с текстом. 1 При необходимости переместить изображения. 1 Левой кнопкой нажать на «Текст» и растянуть по диагонали, после чего вставить и отформатировать текст. 1
7. В подвале сайта создать группу и слой. 1 Выполнить разметку, используя линейку. 1 Далее — «Прямоугольная область» и «Заливка». 1

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