Главная | Регистрация | Вход | RSSВторник, 11.02.2025, 06:49

PhotoShopWorld

Форма входа
PhotoShopWorld
Уроки Фотошоп
Фотошоп дополнения
Учебник Фотошоп
Фотошоп Ещё...
Категории раздела
Эффекты [243]
Работа с текстом [188]
Работа с фото [444]
Графика для сайта [96]
Дизайн/Рисование [389]
Анимация [43]
Практика [53]
Работа с планшетом [33]
Кисти [22]
Фильтры / Плагины [17]
Рамки [1]
Текстуры (фоны) [11]
Экшены [0]
Стили [0]
Градиенты [7]
Шрифты [0]
Фигуры [2]
Шаблоны для фото [0]
Иконки [0]
PSD исходники [0]
Основы работы [65]
Установка дополнений [7]
Описание инструментов [32]
Фотошоп Ещё... [0]
Фотошоп
Орфография
Система Orphus
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Мир Фотошопа

Главная » Файлы » Графика для сайта

Дизайн шаблона сайта для бара-ресторана
18.03.2011, 16:11

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

Шаг 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% , или даже меньше, вы же не хотите, чтобы фигуры на фоне слишком сильно привлекали к себе внимание.

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

Категория: Графика для сайта | Добавил: Photoshop-master
Просмотров: 478 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск
Фотошоп-Мастер
Фотоэффекты онлайн
Фотошоп с нуля!
Фотошоп уроки!
Photoshop
RSS лента

Кликните по иконке, чтобы получать новые уроки по RSS каналу

Создать фоторамку
Опросы
Есть ли у вас проблемы с закачкой дополнений с сайта?
Всего ответов: 21
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Copyright MyCorp © 2025
    Сделать бесплатный сайт с uCoz