все самое интересное о веб-дизайне

Создаем в фотошопе объемную кнопку для мобильного телефона

4

12-04-2012

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

Шаг 1
Создаем в фотошопе новый документ, заливаем цветом #282828.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 1
Применим к фону «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум» (Add Noise…) со значением 3.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 2
Получили такую текстуру.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 3
Воспользуемся инструментом «Кисть» (Brush Tool). Выберем мягкую кисть диаметром 300 пикселей, цвет белый, и на новом слое щелкнем в центре.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 4
Меняем режим наложения слоя на «Мягкий свет» (Soft Light).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 5
На новом слое создаем небольшой круг черного цвета.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 6
Потом на новом слое создаем круг поменьше серого цвета.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 7
И на новом слое создаем еще один круг поменьше, белого цвета.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 8
Находимся на слое с белым кругом. Удерживая Ctrl, щелкаем по слою в палитре слоев для того, чтобы выделить круг. После этого сдвигаем выделение на 2 пикселя вниз. После этого нажимает Del.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 9
И получаем такой результат.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 10
Применим к фигуре стиль слоя «Наложение градиента» (Gradien Overlay), цвет от темно серого #1e1e1e к более светлому #636363.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 11
Применим стиль слоя «Внешнее свечение» (Outer Glow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 12
Стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 13
На этом шаге получили такой результат.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 14
Внимание! Переходим на слой с серым кругом и применим нему стиль слоя «Наложение градиента» (Gradien Overlay), цвет от темно серого #222222 к более светлому #444444.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 15
Далее стиль слоя «Обводка» (Stroke).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 16
Стиль слоя «Внутреннее свечение» (Inner Glow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 17
Стиль слоя «Внешнее свечение» (Outer Glow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 18
Стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 19
Результат выглядит так.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 21
Внимание! Переходим на слой с черным кругом и примеим нему стиль слоя «Наложение градиента» (Gradien Overlay), цвет от светло серого #585858 к более темному #151515.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 22
Стиль слоя «Тень» (Drop Shadow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 23
Получили такой результат.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 24
Применим к черному кругу «Фильтр» (Filter) > «Размытие» (Blur) > «Размытие по Гауссу» (Gaussin Blur) со значением 1.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 25
Получилась такая кнопка.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 26
Теперь на новом слое напишем цифру 2, цвет #e8e7e7.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 27
Применим к цифре стиль слоя «Внутренняя тень» (Inner Shadow).Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 28
Цифра выглядит так.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 29
Теперь на новом слое напишем АВС, цвет #e8e7e7.Создаем в фотошопе объемную кнопку для мобильного телефона

Шаг 30
Применим к буквам стиль слоя из Шага 27 и все, наша мобильная кнопка готова.Создаем в фотошопе объемную кнопку для мобильного телефона

15309
  • Поделиться:
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=7053
  • Подписаться на обновления:

  • Понравился пост? Поддержите DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью формы Facebook

Комментариев 4 комментария

С Вашего позволения — задам пару вопросов)))
1. Я так понял, что для каждого круга создается слой (прозрачный)? При рисовании кистью на каждом новом слое у меня как-то странно меняется диаметр круга (меньше чем предполагаемый диаметр кисти).
2. Для слоя № 1, который создается над текстурой режим наложения мягкий свет? Сделал вроде так, из-за этого, все остальные круги, которые я рисовал нечетки, а тоже размытые.
3. «Применим к фигуре стиль слоя «Наложение градиента»» имелось ввиду, находясь на слое с текстурой? Или на слое какого-то из кругов?

Спасибо большое! Мне урок очень понравился!!!

ОтветитьОтветить

@Charlie:
1) Да, каждый круг должен быть на отдельном слое. Круг не обязательно делать кистью. Можно выделением с последующей заливкой.
2) Посмотрите порядок слоев. Все три круга должны быть выше слоя с текстурой и светового пятна.
3) Все стили слоя применяются к фигуре из предыдущего шага.

Пожалуйста! Успехов в обучении ))

ОтветитьОтветить

Не получилось сделать.
Шаг8 не ясен.
Хотел сделать такую же кнопку, только зеленую.
Не идет что-то дело, не задается.

ОтветитьОтветить

У кого проблема с шагом 8 — не стоило рисовать круг как фигуру. Тут лучше создать слой,и инструментом выделения «Овальная область» с зажатым Shiftом нарисовать круглое выделение,и залить его с помощью Alt+Backspace.

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!