RSS сайта | RSS форума | RSS каталога файлов | RSS блога | Карта форума | Карта сайта | Все теги сайта
Главная страница

ГлавнаяФорумБлогФайлыОбратная связьО сайтеГостевая книгаПоиск
Настал ваш час, чтобы заработать реальные деньги на своем сайте
ВНИМАНИЕ!!!
Не зарегистрированные участники сайта ProSIdr, т.е. гости, НЕ могут оставлять сообщения на форуме. 
Для более корректного общения убедительная просьба
РЕГИСТРАЦИЯ или ВХОД
Реклама:
[ Новые сообщения · Заработай на своем сайте · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Admin  
Форум "ProSIdr" » Графика и дизайн (Photoshop, After Effects) » Уроки Adobe Photoshop » Делаем кнопки в Photoshop
Делаем кнопки в Photoshop
AdminДата: Среда, 10.03.2010, 15.51.06 | Сообщение # 1
Рядовой
Группа: Модераторы
Сообщений: 179
« »

Смайл настроения:
Ранг:

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

Приблизительное время выполнения: 5 минут

Шаг 1

Начните рисовать цветной фон. Я использовал темно-коричневый и серый здесь, а также легкий радиальный градиент. Затем в новом слое нарисуйте круг и залейте его цветом. Не имеет значения, какой цвет вы используете, я использовал зеленый.

Шаг 2

Далее мы собираемся применить некоторые стили слоя. Мы используем два типа Внутренняя тень и Внутреннее свечение (Inner shadow и Inner glow). Также применим легкий Наложение градиента (Gradient Overlay) и Тень (Drop Shadow) и немного Глянца (Satin). Я выбрал их, чтобы придать объекту 3D-вид, используя тени по краям и радиальный градиент, чтобы создать впечатление, что свет падает на середину. Последний эффект нужен лишь для того, чтобы добавить изюминку.

Как бы то ни было, вместо того, чтобы показывать вам оригинальные настройки, скачайте исходник и скопируйте оттуда Стиль слоя (Layer Style).

Шаг 3

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

Шаг 4

Используя инструмент Овальная область (Circular Selection Tool), мы нарисуем эллипс, который длиннее горизонтально, чем вертикально (как показано). Создайте новый слой и нарисуйте радиальный градиент от белого к прозрачному. Заметьте, что вам нужно протянуть градиент так, чтобы общая прозрачность появилась снаружи выделенной области (чтобы белая часть имела острый краешек там, где заканчивается выделенная область).

Когда закончите, поверните эллипс на 30 градусов. Это наша основная освещенная область.

Шаг 5

Теперь продублируйте слой с освещением. Выключите видимость первого слоя, чтобы вы видели, что делаете, далее зажмите Ctrl и кликните на втором освещенном слое, чтобы выбрать его пиксели. Затем нажмите стрелку вниз и влево несколько раз, а затем delete. У вас должен остаться освещенный краешек (как показано).

Шаг 6

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

Шаг 7

Далее нам нужно сделать кнопку переливающейся. Чтобы сделать это, просто берем главный зеленый слой и ставим Заливку (Fill) на 0%

Заливка (Fill) вроде Непрозрачности (Opacity), только когда вы ставите Непрозрачность (Opacity) 0%, стили слоя также становятся прозрачными, а если вы сделаете Заливку (Fill) 0%, стили слоя будут видны. Это отлично, поскольку мы избавляемся от зеленого, но у нас по-прежнему есть все для наших кнопок. Теперь все, что нам нужно – это поместить что-то под стили.

Шаг 8

Я выбрал британский флаг и вот, вы видите его и как работают стили слоя.

Шаг 9

Теперь нажмите Ctrl и кликните на слое с кругом, чтобы выбрать этот круг, нажмите Shift+Ctrl+I, чтобы инвертировать выделение, и нажмите delete. Вы закончили! Кнопка готова!





добавить на Яндекс
 
Форум "ProSIdr" » Графика и дизайн (Photoshop, After Effects) » Уроки Adobe Photoshop » Делаем кнопки в Photoshop
  • Страница 1 из 1
  • 1
Поиск:
Сегодня нас посетили
elvaik11, roseannqt16, karaoz69, katinasa3, kittykj16, ellenyq60, lindakh69, dustinfz4, marshallky1, helenif2, heidivy11, elisedu60, clarissatj18, lizrd4, lorainezk16, lorrievp3, [Полный список]


www.megastock.ru
PR-CY.ru Яндекс.Метрика

Администрация сайта не претендует на авторские права. Материалы предоставленные на сайте, принадлежат их владельцам и предоставляются исключительно в ознакомительных целях.
Cайт оптимизирован для просмотра браузером Opera, Google Chrome, Mozilla Firefox, Safari.
           

Яндекс.Метрика