Рубрика: Photoshop Уроки | Урок прочитали: 608
 (голосов: 0)

Дизайн шаблона сайта для бара-ресторана

Перед вами шаблон, который мы будем делать сегодня:

Шаг 1. Итак, начнем с создания нового документа размером 900х700px.
Создайте новый слой в документе и залейте его любой текстурой, похожей на дерево.

Шаг 2. Затем при помощи инструмента Прямоугольная область выделения (rectangular marquee) выделите полосу в верхней части шаблона, к примеру ,140 или 170 px в высоту. Создайте новый слой и залейте его любым оттенком коричневого цвета.

Перейдите меню Слой – Стили слоя – Градиент (Layer -Layer Styles – Gradient) и используйте цвета #000000 … #FFFFFF … #000000, примените к градиенту непрозрачность (opacity) 28%. Убедитесь, что параметр заливка (fill) для слоя установлен на 30%.

Шаг 3. Следующий шаг. Снова используем инструмент Прямоугольная область выделения (rectangular marquee), выделите прямоугольник под предыдущим слоем, точно так же от одного края до другого, но уже примерно в два раза больше.

Создайте новый слой и установите в качестве основного цвета #013814, а второй цвет на #005e29. Используя инструмент Градиент (Gradient), проведите линию снизу вверх так, чтобы темный оттенок был внизу.

Пока этот слой остается выделенным, перейдите к меню Слой – Стили слоя – Параметры наложения (Layer - Layer Styles- Blending Options) и примените следующие настройки:

Вот как ваш документ должен выглядеть на данном этапе.

Шаг 4. При помощи инструмента Прямоугольная область выделения (rectangular marquee), выделите прямоугольник в верхнем левом углу вашего шаблона, как показано на рисунке ниже:

Создайте новый слой, снова переключитесь на инструмент градиент (Gradient), на этот раз используйте те же оттенки зеленого, что и раньше, проведите линию сверху вниз так, чтобы темно-зеленый был сверху. Это придаст вашему шаблону лучший баланс.

Не снимая выделения со слоя, перейдите к меню Слой – Стили слоя (layer  - layer styles) и примените следующие настройки (те же, что и в предыдущем шаге).

Шаг 5. Возьмите модель бутылки пива. У меня не было модели, поэтому я перешел к сайту MorgueFile.com, нашел бутылку пива (beer bottle) и вырезал ее. Как только вы бутылка будет готова к перемещению в наш документ, вставьте ее и поместите в середину зеленой линии с правой стороны, но не слишком близко к краю.

Если она негармонично смотрится, добавьте немного едва уловимой тени к слою.

Шаг 6. Следующий шаг – добавление сочных иллюстраций. Предположив, что мы создаем шаблон сайта для бара-ресторана, добавим изображения с едой. Мои все так же взяты с сайта Morguefile.com, если вы хотите использовать те же изображения, что и я, просто наберите в поиске гамбургер (hamburger). Вставьте изображение соответствующего размера в наш документ (если слишком большое – просто уменьшите его) и поместите за  бутылкой пива. Нажмите Ctrl+T, чтобы немного его развернуть, а затем, когда вы будете довольны результатом, нажмите Enter.

Оставаясь на этом слое, перейдите к меню Слой – Стили слоя – Параметры (Layer- Layer styles –option) и примените эти настройки:

Если ваш шаблон такой же широкий, как и наш – вы можете добавить еще одно изображение, используя ту же технику. Вот результат на данный момент:

Шаг 7. Выберите инструмент Text (Текст). Используя шрифт “Caeldera” (бесплатно можно скачать на сайте UrbanFonts.com) размером 18px  приятного бежевого оттенка, сочетаемого с вашим шаблоном, напишите ключевые слова для вашего меню навигации.

Затем – тень для текста.

Шаг 8. Добавьте свой логотип в квадрат, который мы создали ранее, если у вас уже есть лого – здорово, если нет – все что мы сделали, это залили круг оранжевым цветом и добавили текст. Получилось в стиле заката солнца, но смотрится стильно.
Возьмите фото музыкантов бара, вставьте его в шаблон так, чтобы он перекрывал большой зеленый прямоугольник.  Удалите лишнее с желтых краев.

Установите Режим смешивания (Blending Mode) на Свечение (Luminosity) (это действие полностью вернет зеленый цвет), а затем уменьшите непрозрачность (opacity) примерно до 25% , или даже меньше, вы же не хотите, чтобы фигуры на фоне слишком сильно привлекали к себе внимание.

Итак, это все. Ваш шаблон готов. Теперь, все, что вам нужно сделать  - разрезать его и наполнить текстом.  Успехов!
Полноразмерный вариант можно увидеть здесь.

Автор: http://loreleiwebdesign.com/
Перевод: Анцыперович Александра
Ссылка на источник

           

Похожие файлы и публикации:

Дизайн шаблона сайта для бара-ресторана
Сегодня мы будем учиться делать  привлекательное портфолио для веб-сайта.
Дизайн шаблона сайта для бара-ресторана
В данном уроке мы будем учиться создавать информационный блок для сайта.
Дизайн шаблона сайта для бара-ресторана
Слейте изображения.  Layer – Merge Layers (Слой – слить слои). Примените автоматическую тоновую коррекцию (уровни). Image – Adjustments – Auto levels (Изображение – Коррекция – Автоматическая тоновая коррекция) (Shift + Ctrl + L). Перейдем к меню Channels (Каналы), которое  находится во вкладке рядом с панелью слоев,  Duplicate (дублируем) Blue(Синий) канал.
Дизайн шаблона сайта для бара-ресторана
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Дизайн шаблона сайта для бара-ресторана
В этом изумительном Photoshop уроке вы будете учиться создавать суперглянцевую сферу в CS4 Extended. Он состоит из сочетания традиционной техники создания глянцевой сферы, а также из объемной сферы в Photoshop. Успехов!
Дизайн шаблона сайта для бара-ресторана
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Дизайн шаблона сайта для бара-ресторана
В этом уроке мы будем создавать дизайн шаблона для автомобильного сайта в тёмных цветах.
Дизайн шаблона сайта для бара-ресторана
В этом уроке будет показано, как создать красивый текстовый эффект при помощи текстуры печенья и стилей слоя. Метод очень простой и не займёт больше 30 минут.
Дизайн шаблона сайта для бара-ресторана
На прошлой неделе я смотрел фильм «Война богов» (Immortals), а перед этим я ходил в кинотеатр посмотреть постеры. Я видел постер к этому фильму, а также постеры к старым фильмам Гарри Поттера, и у всех них присутствует похожий металлический текстовый эффект. Исходя из этого я решил воссоздать средневековый металлический текстовый эффект в Photoshop.
Дизайн шаблона сайта для бара-ресторана
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Дизайн шаблона сайта для бара-ресторана
Ресурсы для урока: Фотография дерева Зимняя ветка Кора дерева Ворон Абстрактные кисти
Дизайн шаблона сайта для бара-ресторана
В этом уроке мы воспользуемся комбинацией базовых фигур, текстур, фильтров и готовых изображений для создания купона.
Дизайн шаблона сайта для бара-ресторана
Шаг 1. Создание фона Зайдите в меню File > New (Файл > Новый) и создайте новый документ 600 х 200px с белым фоном. Посмотрите на изображение ниже, если вы не уверены в настройках.
Дизайн шаблона сайта для бара-ресторана
Иногда, бывает нужно быстро применить какой-либо эффект и в этом на помощь придут экшены. Одним нажатием кнопки, Вы без труда воссоздадите нужный эффект.
Дизайн шаблона сайта для бара-ресторана
В этом уроке вы научитесь делать очень интересный, стильный эффект для текста. Говорить о нём можно очень много и долго, так как этот эффект нынче очень моден и часто используется как для дизайнерских текстовых надписей, так и для текста вообще. А пока одни будут ещё говорить, мы не тратя время даром, пожалуй, уже начнём урок! Вот собственно о чём пойдёт речь. Нравится? Тогда вперёд!