Макет сайта в элегантном деревянном стиле
В этом уроке я продемонстрирую вам процесс создания макета для сайта в деревянном стиле для отелей и ресторанов.
Итоговый результат:
Создайте новый документ размером 1000х1100 пикселей. Загрузите это фоновое изображение, сохраните на свой компьютер и откройте в Photoshop. Это изображение мы будем использовать в качестве фона для будущего макета.
После этого перейдите в меню Edit > Define Pattern (Редактирование - Определить узор). Исходное изображение для фона нам больше не понадобится, поэтому можете его закрыть. На панели параметров найдите инструмент Заливка (G), в настройках данного инструмента в качестве источника заливки установите Pattern (Узор) и в палитре узоров выберите шаблон, который мы только что создали.
Заполните этим узором созданный документ. Мы создали фон для макета.
Обратите внимание, в нижней части холста виден резкий переход между цветами. Чтобы решить эту проблему выберите инструмент Кисть (B), зажмите Alt и ваш курсор превратится в пипетку. Кликните по образцу подходящего цвета и закрасьте нижнюю часть холста.
Инструментом Прямоугольник со скруглёнными углами (U) создайте форму, как показано ниже. Мы создали основу для шапки.
К этому слою примните такие стили:
Внутреннее свечение:
Наложение цвета:
Наложение узора:
Обводка:
В полученную форму шапки поместите подходящее изображение, это может быть изображение ресторана, отеля или вообще слайд-шоу. Я выбрал изображение пятизвёздочного отеля.
Чуть выше шапки создайте ещё одну форму для основного меню тем же инструментом. Цвет - не имеет значение.
К этому слою добавьте следующие стили слоя:
Внутреннее свечение:
Наложение градиента:
Обводка:
Вот, что получилось у меня:
Инструментом Прямоугольник со скруглёнными углами создайте ещё три формы ниже шапки. Две первые формы послужат для контента, а третья - для футера. Цвет не имеет значения.
К этим слоям примените такие стили:
Внутреннее свечение:
Обводка:
Теперь при помощи инструмента Перо (P) создайте форму, подобно изображению ниже. Для удобства можете воспользоваться сеткой View > Show > Grid (Просмотр - Показать - Сетка). Мы создали первую кнопку для макета.
К этой кнопке примените такие стили:
Тень:
Внутреннее свечение:
Наложение градиента:
Наложение узора:
Продублируйте эту кнопку ещё три раза и копии расположите, как показано ниже.
На все элементы макета добавьте текст. Все настройки для текста выберите самостоятельно.
Слева в нижней части шапки создайте форму в виде ленты при помощи пера и примените к нему стили подобно основному меню.
На эту ленту добавьте текст, я написал приветственное сообщение Welcome to Grafpedia. В верхней части кнопки Luxury Hotel я добавил пять звёздочек.
Вот результат:
Ссылка на источник урока.