0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн LIETOАвтор темы

  • Я крутой
  • ***
  • 25
  • +4/-1
  • Я крутой!!!
Урок(фотошоп) - Делаем кнопки
« : 24 Ноябрь 2008, 17:37:18 »
В это простом уроке мы научимся простому способу создания маленьких кнопок, используя пару слоев и один перемежающийся с ними слой изображения.
Вы не можете просматривать ссылки. Регистрация или Вход
Приблизительное время выполнения: 5 минут

Шаг 1

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

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

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

sample_button.zip
Вы не можете просматривать ссылки. Регистрация или Вход
Шаг 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. Вы закончили! Одна кнопка готова!
Вы не можете просматривать ссылки. Регистрация или Вход
Шаг 10

Затем я создал ещё несколько кнопок, используя разные картинки. Шрифт, которым набрана надпись “Button Maker“, называется “Dynamoe“, если вам интересно!
Вы не можете просматривать ссылки. Регистрация или Вход
Незабываем про +

*

Оффлайн Sasho

  • @-@-@-@-@-@-@
  • *****
  • 245
  • +28/-0
  • Пол: Мужской
  • Живу я тут!
Урок(фотошоп) - Делаем кнопки
« Ответ #1 : 24 Ноябрь 2008, 18:05:25 »
Классс, надо будет и себе попробывать. Я в фотошопе вобще ничего не рисую, потому что там всё так усложнённо, зато если уметь, то можно очень красиво рисовать, ща попробую кнопочку такую заделать...  :yes:
Вы не можете просматривать ссылки. Регистрация или Вход

*

Оффлайн tealite

  • *****
  • 101
  • +2/-1
  • Пол: Мужской
Урок(фотошоп) - Делаем кнопки
« Ответ #2 : 24 Ноябрь 2008, 18:54:55 »
так это же больше на значки похоже.
но урок дельный!
Вы не можете просматривать ссылки. Регистрация или Вход

*

Оффлайн LIETOАвтор темы

  • Я крутой
  • ***
  • 25
  • +4/-1
  • Я крутой!!!
Урок(фотошоп) - Делаем кнопки
« Ответ #3 : 24 Ноябрь 2008, 20:14:07 »
tealite ну незнаю значки или кнопки какая разница скоро еще выложу
Незабываем про +