Главная | Регистрация | Вход | RSSЧетверг, 21.11.2024, 17:55

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:03

В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.

Так, вначале мы должны создать новый документ, размером 500 × 300 пикселей и залить его белым цветом.

Затем выберите Rounded Rectangle Tool (Закруглённый прямоугольник)(Радиус: 5 пикселей), чтобы сделать форму цветом #6d9e1e, как на рисунке ниже.

После этого примените Gradient Overlay  (Наложение градиента) для этого слоя, как на рисунке ниже.

Результат должен быть следующий:

Oк, переходим к следующему шагу.  Время для создания "заголовка" для нашего баннера. Нажмите Ctrl + левый клик по миниатюре слоя в палитре слоев,  чтобы сделать баннер выделенным, а затем используйте Rectangular Marquee Tool (Прямоугольное выделение), чтобы вырезать часть фигуры. Зажмите Alt и удалите часть фигуры как показано на рисунке ниже. После этого заполните оставшуюся часть белым цветом.

Снимите выделение Ctrl + D, после  этого измените режим наложения для этого слоя на Overlay (Перекрытие) и установите непрозрачность до 20%.

Oк, переходим к следующему шагу. Нужно добавить некоторые графические элементы для нашего заголовка. Перейти в Google Картинки и найдите изображения, которые бы вы хотели добавить. Вы можете выбрать любую картинку. Автор выбрал иконку с будильником, которую можно загрузить здесь . Откройте изображение и скопируйте его в наш основной документ. После этого нажмите Ctrl + T, чтобы уменьшить изображение до нужного размера.

Используйте инструмент Sharpen (Резкость), чтобы добавить резкости нашему будильнику.

Oк, переходим к следующему шагу. Возьмите инструмент Horizontal Type Tool (Горизонтальный текст) и напишите название заголовка.

Автор  использовал текст Myriad Pro белого цвета. Но вы можете использовать любой другой. После этого примените Drop Shadow (Тень) в режимах наложения.

Смотрите результат ниже:

Хорошо, мы сделали заголовок. После этого нужно добавить некоторые элементы дизайна для нашего баннера. Выберите Custom Shape Tool (Произвольная фигура) и выберите одну из стандартных форм Photoshop, которую вы видите на картинке ниже.

Добавьте две формы белого цвета, на наш баннер.

Слейте слои с фигурами в один слой. Теперь нам нужно  убрать лишние части фигур, которые выходит за наш баннер. Нажмите Ctrl +ЛКМ, нажмите на баннер на панели слоя в палитре слоев, чтобы выделить баннер и затем инвертировать это выделение Ctrl + Shift + I. Затем нажмите кнопку Delete для очистки выбранной области.

Удалите выделенную область Ctrl + D. А теперь попробуйте поэкспериментировать с режимами слоя и непрозрачностью / заливкой. Автор выбрал Soft Light (Мягкий свет) с непрозрачностью 20%.

Теперь нам нужно очистить  заголовок от этих элементов. Используйте Rectangular Marquee Tool (Прямоугольное выделение), чтобы сделать выделение, как на рисунке ниже и нажмите кнопку Delete.

Снимите выделение  Ctrl + D и добавьте больше текста Horizontal Type Tool (Горизонтальный текст). Используйте белый цвет.

Время, чтобы добавить ещё текст. Используйте  Rounded Rectangle Tool (Закруглённый прямоугольник) (Radius: 2 пикселей) и добавьте фигуру цвета # 69990d.

Теперь, используйте Horizontal Type Tool (Горизонтальный текст), чтобы добавить текст на подложке. Теперь наш баннер готов! Он выглядит прекрасно, не правда ли?

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

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

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

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