Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Учимся создавать Шаблон ресторанного веб-сайта

Учимся создавать Шаблон ресторанного веб-сайта

Автор: sondar | Категория: Уроки Photoshop » Web | 28-08-2012, 11:37
На этом занятии мы создадим прекраснейший и элегантный макет ресторанного веб-сайта.

Детали
Программа: Adobe Photoshop CS5
Время выполнения: 25-30 минут
Ресурсы: Изображения, Иконки и векторный UI набор.

Перед тем, как мы начнем, давайте посмотрим на конечный результат.

Учимся создавать Шаблон ресторанного веб-сайта


Хорошо, теперь у нас есть все, что нам нужно, чтобы начать.

Шаг 1:
Откройте свой Фотошоп CS5 и откройте новый документ размером 1000х1300 пикселей.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 2:
Залейте Фоновый слой цветом #ffeac7.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 3:
Я разделил макет на 3 основные секции и сейчас мы начнем работать над заголовком. На изображении можете увидеть направляющие линии и размеры для разметки. Возьмите инструмент Прямоугольник (Rectangle tool) и сделайте длинный прямоугольник вдоль фонового слоя в верхней части. Залейте его цветом #897151.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 4:
Теперь откройте набор UI и поместите навигационную панель и бегунок в соответствии с нижним изображением.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 5:
Откройте папку с изображениями и скопируйте изображение пирога и поместите его между двумя панелями. Поместите слой с изображением ниже навигационной панели и панели прокрутки. Откорректируйте размер нажатием Ctrl+T.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 6:
Теперь создадим панель поиска и для этого создадим новый слой, назовите ее Панель поиска и опять возьмите инструмент Прямоугольник и сделайте узкий маленький прямоугольник и залейте его цветом #414042.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 7:
Теперь правым щелчком по слою панели поиска и пройдите в Режим наложения>Внутренняя тень. Установите настройки в соответствии с нижним изображением.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 8:
Откроем папку с круглыми иконками и скопируем иконку поиска, вставьте ее с правой стороны панели поиска, как показано ниже. Теперь выберите инструмент Горизонтальный текст цветом #bc9854, выберите шрифт Charlemgne Std>Жирный>18 тч. (Charlemgne Std>Bold>18pt) и затем напечатайте слово “Search”. Поместите его в панель поиска, как показано ниже.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 8а:
Теперь добавьте обводку слову “Search”. Правым щелчком по текстовому слою откройте Режим наложения>Обводка (Blending Options>Stroke). Выберите цвет #493612 для обводки и установите размер в 1 пиксель.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 8b:
Теперь добавьте Тень (Drop Shadow) для поискового текста. Для этого правым щелчком по текстовому слою, откройте Режим наложения>Тень (Blending Options>Drop Shadow). Установите настройки, показанные ниже. Добавьте другие круглые иконки, поверх главного баннера в навигационной панели.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 9:
Пора добавить текста в навигационную панель. Выберите инструмент Горизонтальный текст, установите тот же цвет, что и для текста “Search”. Выберите шрифт Charlemagne Std>Жирный, размер 36тч. и напечатайте “HOME”.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 10:
Правой клавишей по слою с текстом “HOME” и пройдите в Режим наложения и затем выберите Тиснение (Bevel and Emboss). Установите настройки, показанные ниже. Придайте ему тени и обводки, установите настройки тени для этого текста, как и для текста “Search”.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 11:
Теперь оставшийся текст включающий Menu, Services, Contact, About. Будем использовать тот же самый шрифт, размер с обводкой и тенью, но без Тиснения.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 12:
Пора добавить основное Название или заголовок на баннер. Сделайте новый слой. Выберите инструмент Горизонтальный текст цветом #bc9854, шрифт Charlemengne Std, Жирный, размер 60тч. и напечатайте “DELICIOUS”.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 12а:
Правым щелчком по слою Delicious, выберите Режим наложения и Внутренняя тень (установите настройки, показанные ниже).

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 12b:
Еще раз щелкните правой клавишей и выберите Режим наложения>Внутреннее свечение (Inner Glow) (задайте настройки, показанные ниже).

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 12с:
Теперь добавьте линию под Названием и для этого выберите инструмент Горизонтальный текст цветом #1e160b, шрифт Charlemagne Std, жирный, размер 24тч и напечатайте “Celebration of taste”.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 12d:
Напечатайте “Reservations” используя тот же шрифт, цвет, тень, обводку, как для текста “Search”. Поместите текст Reservations на красной ленточке в навигационной панели.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 13:
Теперь сделайте другой прямоугольник, используя инструмент Прямоугольник в основном окне слайда цветом #ffffff и уменьшите его непрозрачность до 22%.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 14:
Теперь добавим текст на этот белый квадрат. Правым щелчком по слою DELICIOUS выберите Сделать дубликат. Поместите продублированный текст на белый квадрат, как показано ниже. Добавим обводку черного цвета #000000 размером в 1 пиксель.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 15:
Сделайте дубликат под заглавного текста “Celebration of taste” и поместите этот дубликат, как показано ниже. Для остального текста пройдите в Lorum Ipsum site и скопируйте пару строчек, выберите шрифт Charlemagne Std, жирный, размер 24тч. и поместите скопированные строчки, как показано ниже. Я добавил несколько Коричнево-малиновых квадратиков (#570202) в качестве указателей, которые вы можете легко сделать при помощи инструмента Прямоугольник.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 16:
Мы закончили работу над областью заголовка, включая основной слайд. Теперь спустимся ниже к средней части. Скопируйте второй баннер из набора UI и поместите его ниже области бегунка. Я намереваюсь придать немного тени для него, для этого щелкните правой клавишей по этому слою и выберите Тень (установите настройки в соответствии с ниже показанным изображением).

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 17:
Придадим немного текстуры, для этого пройдите в Наложение Узора (Установит ниже указанные настройки).

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 18:
Сделайте дубликат слоя Delicious и Celebration и поместите продублированные слои на баннере (для сравнения посмотрите на изображение). Для текста “Today’s Special” возьмем белый текст #ffffff и шрифт Monotype Corsiva, Обычный (Regular), размер 36тч, плавный (Smooth).

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 19:
Добавьте оставшийся текст, также белого цвета, но шрифтом Charlemagne Std, жирный, размер 24тч.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 20:
Поместите еще 2 изображения, как показано ниже, выровняйте их по баннеру.

Учимся создавать Шаблон ресторанного веб-сайта


Добавьте еще два заголовка “Free home delivery items” and “Contact us” цветом #570202, используя шрифт Charlemagne Std, жирный, размер 30тч.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 21:
Добавьте параграф текста с сайта Ipsum Lorum черного цвета #000000, используя шрифт Charlemagne Std, жирный, размер 24тч. Теперь добавьте 2 кнопки (одну для Home Delivery с иконкой грузовика и одну для Email с изображением конверта из набора UI). Добавьте текста на кнопки, используя тот же процесс, который мы использовали для текста “Search”.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 22:
Теперь добавим второй слайдер с 4 или 5 изображениями продуктов. Сделайте длинный прямоугольник, используя инструмент Прямоугольник цветом #897151. Помесите этот прямоугольник под наш средний набор (Баннер, Изображения, текст и кнопки), как показано ниже. Можете измерить ширину изображения для справки.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 23:
Добавьте другие 4 изображения для этого второго слайдера. Может откорректировать размер, нажатием Ctrl+T. После этого скопируйте узкие кнопки из набора UI и поместите их каждую сторону слайдера, как показано ниже.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 24:
Добавьте еще одну ленточку, скопированную с набора UI, чтобы закрыть второй слайдер (для справки смотрите изображение ниже). Добавьте маленький прямоугольную полоску цветом #63523a для кнопки.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 25:
Для нижнего колонтитула сделайте еще один большой прямоугольник цветом #897151. Добавьте заголовки для колонтитула, используя шрифт Charlemagne Std, жирный, 30тч. цветом #f6e1ba.

Учимся создавать Шаблон ресторанного веб-сайта


Шаг 26:
Добавим текст из сайта Lorum Ipsum под каждый заголовок, используя Charlemagne Std, Жирный, размер 14тч. цветом #130e07. В завершение в самом низу добавим текст “Copyright”.

Учимся создавать Шаблон ресторанного веб-сайта


Мы закончили работу над этим макетом веб-сайта. Посмотрите.

Учимся создавать Шаблон ресторанного веб-сайта


Надеюсь Вам понравился данный урок создания макета. До встречи.


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

Другие новости по теме:


Просмотров: 4986 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.