Урок по созданию макета сайта для гостиниц и ресторанов.
В этом уроке создадим макет сайта для гостиниц, изменив картинку в шапке можно также применить этот макет и для ресторанов, кафе, пиццерии, бара и т.д.
В этом уроке вы наглядно увидите как при помощи простых древесных текстур можно создать элегантный и стильный макет.
Создайте новый документ размером 1000*1100 пикселей.
Сохраните следующую картинку у себя на компьютере мы будем использовать ее в качестве фонового слоя.
Откройте изображение в фотошопе и перейдите Правка-Определить узор. Таким образом можно создать узор из любого изображения которое у вас имеется.
Чтобы добавить этот узор в наш макет воспользуйтесь инструментом Заливка и убедитесь что в настройках выбран тип заливки Узор.
Нажмите один раз на вашем макете и он будет выглядеть следующим образом:
Как вы увидели узор заполнил не весь документ, чтобы исправить это возьмем кисть с мягкими краями, для выбора цвета воспользуемся пипеткой, чтобы точно подобрать цвет и выровняем низ макета.
Инструментом Прямоугольник со скругленными углами создадим форму в центре макета.
Добавим к форме следующие стили слоя:
Вот результат того, что должно получится:
Теперь на эту форму добавим изображение, вы можете использовать это место для слайд-шоу, либо для меню бронирования номеров.
Сверху нашей формы создадим еще одну аналогичную это будет нашим главным меню.
Для меню добавим стили:
Вот мой результат.
Используем еще раз Прямоугольник со скругленными углами и создадим еще три формы:
Для всех этих форм зададим следующие стили:
Вот что должно получится:
Теперь воспользуемся инструментом Перо, чтобы создать формы, как указано на рисунке ниже.
Для этой формы задаем стили:
Вот что должно получится:
Далее я буду дублировать этот слой несколько раз, чтобы получить результат, как на рисунке:
Добавим текст и изображения на наш макет.
Далее создадим с помощью инструмента перо еще одну форму.
Стили для этой формы копируем с формы верхнего меню и добавляем надпись.
Вот что у меня получилось.