Фотошоп для фотографа 2013

Создаем дизайн для сайта о баре используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания макета/дизайна сайта о баре.


Финальный результат

Создаем дизайн для сайта о баре используя Фотошоп

Приступаем к уроку Фотошопа


Шаг 1.


Начнём с создания фона. Создадим новый документ 900х700px. с текстурой дерева (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")): ↓


Создаем дизайн для сайта о баре используя Фотошоп

Шаг 2.


Теперь используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") сделаем выделение 140 или 170px. В высоту, создаем новый слой и залейте выделение любым коричневым оттенком: ↓


Создаем дизайн для сайта о баре используя Фотошоп

Применяем Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), используя цвета #000000 ... #FFFFFF ... #000000, ставим прозрачность Градиента на 28% и прозрачность самого слоя на 30%.


Создаем дизайн для сайта о баре используя Фотошоп

Создаем дизайн для сайта о баре используя Фотошоп

Шаг 3.


Сделаем выделение чуть больше предыдущего и поместим его чуть ниже предыдущего: ↓


Создаем дизайн для сайта о баре используя Фотошоп

Создадим новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), зальём его любым цветом и применим Градиент (" Первый" цвет #013814... "Второй" цвет #005e29 ").


Параметры градиента: ↓

Создаем дизайн для сайта о баре используя Фотошоп

Создаем дизайн для сайта о баре используя Фотошоп

Теперь делаем обводку в настройках слоя - Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Создаем дизайн для сайта о баре используя Фотошоп

И добавляем тень: ↓


Drop Shadow (Тень): ↓

Создаем дизайн для сайта о баре используя Фотошоп

Текущий результат: ↓

Создаем дизайн для сайта о баре используя Фотошоп

Шаг 4.


Снова используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") сделаем выделение, как указанное на картинке: ↓


Создаем дизайн для сайта о баре используя Фотошоп

Создаем новый слой, применяем - Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), только на этот раз- Градиент переходит из темного в светлый, сверху вниз для баланса.


Создаем дизайн для сайта о баре используя Фотошоп

И снова добавляем обвоку в настройках слоя - Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Создаем дизайн для сайта о баре используя Фотошоп

И тень: ↓


Drop Shadow (Тень): ↓

Создаем дизайн для сайта о баре используя Фотошоп

Шаг 5.


Теперь добавляем всяческие элементы, подходящие вашему сайту, автор же взял бутылку пива.


Создаем дизайн для сайта о баре используя Фотошоп

И применил тень в настройках слоя - Blending Options (Параметры наложения): ↓


Drop Shadow (Тень): ↓

Создаем дизайн для сайта о баре используя Фотошоп

Так же, он взял фотографию бургера, которую разместил сзади бутылки: ↓


Создаем дизайн для сайта о баре используя Фотошоп

Применил к нему обводку в настройках слоя - Blending Options (Параметры наложения): ↓


Stroke (Обводка): ↓

Создаем дизайн для сайта о баре используя Фотошоп

И тень: ↓


Drop Shadow (Тень): ↓

Создаем дизайн для сайта о баре используя Фотошоп

Затем он добавил еще одно фото и применил к нему теже настройки, как и к предыдущей фотографии.


Создаем дизайн для сайта о баре используя Фотошоп

Шаг 6 .


Добавим "Меню" текст , шрифт "Caeldera" (Который можно найти в сети), с размером 18 px.


Создаем дизайн для сайта о баре используя Фотошоп

Применим к тексту тень в настройках слоя - Blending Options (Параметры наложения): ↓


Drop Shadow (Тень)ы: ↓

Создаем дизайн для сайта о баре используя Фотошоп

Шаг 7 .


Пришло время добавить лого, в пустой квадрат и придать вашей шапке "креатив". Для этого возьмем обычное фото, поместим его на зеленую полоску.


Создаем дизайн для сайта о баре используя Фотошоп

И изменим режим смешивания на Luminosity (Свечение), поставив Opacity (Непрозрачность) на 25%.


Создаем дизайн для сайта о баре используя Фотошоп

Шаг 8.


Осталось добавить остальные элементы: Текст, разделы, изображения панель поиска и т. д.


Финальный результат

Создаем дизайн для сайта о баре используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru