Урок по созданию макета сайта для гостиниц и ресторанов.

Tags: американский бизнес стиль | Графика для сайта | уроки создания сайта | фото уроки фотошоп

В этом уроке создадим макет сайта для гостиниц, изменив картинку в шапке можно также применить этот макет и для ресторанов, кафе, пиццерии, бара и т.д.

В этом уроке вы наглядно увидите как при помощи простых древесных текстур можно создать элегантный и стильный макет.

 

Создайте новый документ размером 1000*1100 пикселей.
Сохраните следующую картинку у себя на компьютере мы будем использовать ее в качестве фонового слоя.

Откройте изображение в фотошопе и перейдите Правка-Определить узор. Таким образом можно создать узор из любого изображения которое у вас имеется.

Чтобы добавить этот узор в наш макет воспользуйтесь инструментом Заливка и убедитесь что в настройках выбран тип заливки Узор.

Нажмите один раз на вашем макете и он будет выглядеть следующим образом:

Как вы увидели узор заполнил не весь документ, чтобы исправить это возьмем кисть с мягкими краями, для выбора цвета воспользуемся пипеткой, чтобы точно подобрать цвет и выровняем низ макета.

Инструментом Прямоугольник со скругленными углами создадим форму в центре макета.

Добавим к форме следующие стили слоя:

Вот результат того, что должно получится:

Теперь на эту форму добавим изображение, вы можете использовать это место для слайд-шоу, либо для меню бронирования номеров.

Сверху нашей формы создадим еще одну аналогичную это будет нашим главным меню.

Для меню добавим стили:

Вот мой результат.

Используем еще раз Прямоугольник со скругленными углами и создадим еще три формы:

Для всех этих форм зададим следующие стили:

Вот что должно получится:

Теперь воспользуемся инструментом Перо, чтобы создать формы, как указано на рисунке ниже.

Для этой формы задаем стили:

Вот что должно получится:

Далее я буду дублировать этот слой несколько раз, чтобы получить результат, как на рисунке:

Добавим текст и изображения на наш макет.

Далее создадим с помощью инструмента перо еще одну форму.

Стили для этой формы копируем с формы верхнего меню и добавляем надпись.

Вот что у меня получилось.

Источник.

 

AddThis Social Bookmark Button