Очередной урок курса создания дизайна страницы сайта в программе Photoshop. Сегодня наша задача - создать макет сайта, точнее отдельной страницы сайта, а еще точнее - главной страницы.
Итак, напомню то, что мы сейчас создаем главную страницу сайта, вернее макет страницы сайта. Основной инструмент создания web-страниц, я имею в виду дизайна, это программа Photoshop. Кстати, это самая лучшая программа для того, чтобы создать макет сайта. Так, что не откладывая в долгий ящик, запускаем Photoshop и создаем новый документ с размерами:
Ширина документа 960 пикселей – не случайна. Существует рекомендуемый ряд ширины страницы – это, в пикселях: 960, 880, 800, 720. Первые два значения – для триколоночной верстки, остальные для двуколоночной. Высота страницы значения не имеет.
Если у вас не отображаются линейки — зайдите меню Просмотр и активируйте их. Очень пригодятся. Зайдите в меню Редактирование – Установки – Единицы измерения и линейки и в окошке Линейки проставьте: пикселы.
В панели инструментов активируем инструмент Градиент и создаем вот такой градиент:
Слева цвет #391213, справа #7f2021
В свойствах градиента выставляем Линейный и заливаем нашу страницу.
С помощью направляющих ( вытаскиваем их из линеек) отмечаем размеры шапки для того, чтобы сделать рамку вокруг нее. Высота – 150 пикселей. Активируем инструмент Прямоугольная область и выделяем прямоугольник по направляющим:
Идем в меню Выделение – Модификация – Растушевка и ставим радиус 5. Дальше в меню Редактирование – Выполнить обводку ставим такие настройки и жмем Да:
Дальше – берем лошадь, вернее ее рисунок:
Наша задача — отделить ее от фона. Ну, это как раз, в данной ситуации, не трудно. Активируем инструмент Волшебная палочка, с нажатой клавишей Shift выделяем черный фон. Идем в Выделение – Инверсия. Дальше Редактирование – Скопировать. Переходим на нашу страницу, идем в Редактирование – Вклеить.
Продолжаем создавать макет сайта. Лошадь великовата и не на том месте. С помощью инструмента Трансформирование и Перемещение исправляем этот недостаток. Если что-то забыли – посмотрите на странице Приемы обработки изображений в Photoshop. Точно так же делаем и с всадником.
Создаем новый слой, активируем инструмент Горизонтальный текст и пишем логотип. Логотип можно аккуратно сделать вне основного шаблона, тем более, что фон в верхней части шапки однородный и вставить картинку с логотипом будет нетрудно. Кстати это можно сделать и в HTML редакторе. Слоган вставим там же:
Старайтесь все это делать на отдельных слоях, опять же для экономии времени и нервов. Шапка готова.
Колонки, и зону основной информации тоже оформим в HTML редакторе. Ну и какой же макет сайта без футера! Делаем и этот важный элемент сайта.
Зона подвала (футера):
Давайте добавим в футер какую то картинку. Нашел я вот такую фотографию с лошадью. Выделяем на ней прямоугольный фрагмент, копируем и вставляем в макет страницы сайта:
Фрагмент, конечно, больше чем нам необходимо. Точно так же, как и при вставке фрагмента с лошадью в шапке, подгоняем размер и устанавливаем его в нужное место:
Дальше идем в меню Изображение – Коррекция — Цветовой тон/насыщенность. Активируем Тонирование и движками Цветовой тон, Насыщенность, Яркость добиваемся нужного тона и жмем Да. Дальше с помощью инструмента Прямоугольная область выделяем часть фрагмента, как показано на рисунке, копируем его и вставляем здесь же:
Имейте в виду, что скопированная часть фрагмента станет на место выделения и не будет видна. Перетащите ее вправо и установите рядом с фрагментом. Заходим в меню Редактирование – Трансформирование и жмем Отразить по горизонтали. Снова вставляем, маленький фрагментик и установим его на место, не отражая по горизонтали. Следующий отражаем и.т.д. Повторите эту операцию столько раз, сколько нужно для «растягивания» фрагмента по ширине рамки. Лишнее подчищаем резинкой.
Это еще не все. Макет сайта еще не готов! Теперь с помощью меню Слои – Объединить с предыдущим объединяем все слои фрагмента в один. Активируем инструмент Волшебная палочка, зажимаем клавишу Shift, выделяем фон фрагмента:
Через меню Редактирование заливаем выделение цветом 7f2021. Короче цвет нижней части фона страницы. Незалитые кусочки фона подкрасим кистью
В принципе на этом можно и остановиться. Но если есть желание, то можно с помощью кистей кое-что добавить к графике подвала. Я порылся в своих наборах кистей, выбрал вот такие:
Ничего особенного, а как оживляет рисунок!
Сохраните страницу в формате PSD, на всякий случай. Теперь макет сайта готов. Или макет страницы сайта, как кому угодно. Конечно, можно еще что-то добавить или убрать, процесс-то творческий. И графики в Сети навалом, и кистей и стилей, так что, если есть желание поэкспериментировать – работайте!
А о том, что будем делать дальше – на странице Раскройка страницы сайта в Photoshop
Спасибо за советы.
Хочу добавить. При отделении картинки от фона в случае если фон не однородный вместо волшебной палочки удобнее пользоваться унструментом Магнитное Лассо.
Так же можно пользоваться такой функцией... Filter — Extract.