Макет страницы сайта в Photoshop

Задача - создать макет сайта.

Основной инструмент создания web-страниц, я имею в виду дизайна, это программа Photoshop. Запускаем Photoshop и создаем новый документ с размерами:

Ширина документа 960 пикселей – не случайна. Существует рекомендуемый ряд ширины страницы – это, в пикселях: 960, 880, 800, 720. Первые два значения – для верстки с 3 колонками, остальные для двуколоночной. Высота страницы значения не имеет.

Если у вас не отображаются линейки — зайдите меню Просмотр и активируйте их. Зайдите в меню Редактирование – Установки – Единицы измерения и линейки и в окне Линейки проставьте: пикселы.

В панели инструментов активируем инструмент Градиент и создаем следующтй градиент:

Слева цвет #391213, справа #7f2021

В свойствах градиента выставляем Линейный и заливаем нашу страницу.

С помощью направляющих ( вытаскиваем их из линеек) отмечаем размеры шапки для того, чтобы сделать рамку вокруг нее. Высота – 150 пикселей. Активируем инструмент Прямоугольная область и выделяем прямоугольник по направляющим:

Далее в меню Выделение – Модификация – Растушевка и ставим радиус 5. Дальше в меню Редактирование – Выполнить обводку ставим такие настройки и нажимаем Да:

Дальше рисунок с изображением лошади:

Следующая задача — отделить ее от фона. Активируем инструмент Волшебная палочка, с нажатой клавишей Shift выделяем черный фон. Идем в Выделение – Инверсия. Дальше Редактирование – Скопировать. Переходим на страницу, идем в Редактирование – Вклеить.

Однако лошадь великовата и не на том месте. С помощью инструмента Трансформирование и Перемещение исправляем этот недостаток.

Создаем новый слой, активируем инструмент Горизонтальный текст и пишем логотип. Логотип можно аккуратно сделать вне основного шаблона, тем более, что фон в верхней части шапки однородный и вставить картинку с логотипом будет нетрудно. Также это можно сделать и в HTML редакторе. Слоган вставим там же:

Необходимо все это делать на отдельных слоях, опять же для экономии времени. Шапка готова.

Колонки, и зону основной информации тоже оформим в HTML редакторе. Далее делаем футер (подвал) сайта:

Зона подвала (футера):

Давайте добавим в футер какую то картинку. Нашел я вот такую фотографию с лошадью. Выделяем на ней прямоугольный фрагмент, копируем и вставляем в макет страницы сайта:

Фрагмент больше, чем нам необходимо. Точно так же, как и при вставке фрагмента с лошадью в шапке, подгоняем размер и устанавливаем его в нужное место:

Дальше идем в меню Изображение – Коррекция — Цветовой тон/насыщенность. Активируем Тонирование и движками Цветовой тон, Насыщенность, Яркость добиваемся нужного тона и нажимаем Да. Дальше с помощью инструмента Прямоугольная область выделяем часть фрагмента, как показано на рисунке, копируем его и вставляем здесь же:

Следует иметь в виду, что скопированная часть фрагмента станет на место выделения и не будет видна. Перетащите ее вправо и установите рядом с фрагментом. Заходим в меню Редактирование – Трансформирование и нажимаем Отразить по горизонтали. Снова вставляем, маленький фрагментик и установим его на место, не отражая по горизонтали. Следующий отражаем и.т.д. Повторите эту операцию столько раз, сколько нужно для «растягивания» фрагмента по ширине рамки. Лишнее подчищаем резинкой.

Теперь с помощью меню Слои – Объединить с предыдущим объединяем все слои фрагмента в один. Активируем инструмент Волшебная палочка, зажимаем клавишу Shift, выделяем фон фрагмента:

Через меню Редактирование заливаем выделение цветом 7f2021. Короче цвет нижней части фона страницы. Незалитые кусочки фона подкрасим кистью
В принципе на этом можно и остановиться. Далее добавляем селедующий фрагмент:

Результат:

Сохраните страницу в формате PSD. Макет сайта готов.

Поиск по сайту: