ФорумPhotoshopУроки PhotoshopНеобработанные Уроки
Демиарт Поиск Новые сообщения
ОтветитьНовая темаНовое голосование
ОтветитьНовая темаНовое голосование
3 ответа. 3367 просмотров.
   
 мужчина  cheburator-all 29 Ноября 2009, 15:31
Пост №1 * 29 Ноября 2009, 15:31
Ответ с цитированием этого сообщения

Размышляющие
17 постов
Возраст: 30
Регистрация: 7.11.2009
Проживает: Россия
И так начем рисовать кнопочку. Создадим новый файл. 500px (width) x 400px (height)
Создадим новый слой. Назовем его "bg01". Возьмем инструмент Rounded Rectangular Too. Теперь удерживая SHIFT создаем равносторонний прямоугольник в центре. На этой стадии можно использовать любые цвета заливки прямоугольники т.к позже мы все равно будем им заниматься smile.gif

Создаем иконку в стиле web 2.0 *

Открываем параметры наложения (Blending Options) для ‘bg01‘ и устанавливаем следующее:

Drop Shadow

* Opacity: 40%
* Distance: 0px
* Spread: 0%
* Size: 6px

Gradiant Overlay

Color stop: 0%, #d00031
Color stop: 100%, #ff2b5d

|| dop1
Создаем иконку в стиле web 2.0 *

Создаем иконку в стиле web 2.0 *

Теперь кликаем по миниатюре слоя (мини картинка слоя). Теперь идем сюда Select -> Modify -> Contract и выбирем значение 2px (2 пикселя). Теперь область выделения станет меньше на 2 px
Создаем иконку в стиле web 2.0 *
Создаем новый слой. Назовем его "bg02" И Заливаем его любым цветом. К пример черным #000000 (У нас выделена зона). Для этого слоя ставим следующие параметры наложения (Blending Option)

Gradiant Overlay
Color stop: 0%, #c6002f
Color stop: 100%, #c6002f
(т.е в начале #c6002f в конце #c6002f)
---
Создаем новый слой для текста. Назовем его "txt". Пишем текст вашей кнопки. Мы будем использовать:
* Rounded Arial Bold
* 150pt

Для этого слоя ставим следующие параметры наложения (Blending Option)

Drop Shadow
* Opacity: 25%
* Distance: 0px
* Spread: 0px
* Size: 5px
Inner Shadow
* Opacity: 10%
* Distance: 0px
* Choke: 0
* Size: 10px
Bevel Emboss
* Depth: 1px
* Direction: Down
* Size: 0px
* Softten: 0px
* Highlight Mode Opacity: 32%
* Shadow Mode Opacity: 32%
Gradiant Overlay
* Color Stop:0% #d2d2d2
* Color Stop:100% #f0efef
(т.е в начале #d2d2d2 в конце #f0efef)

---
Кнопка почти готова. Теперь сделаем не много свечения вверху. Зажимаем CTRL левой кнопкой мыши по миниатюре слоя (так мы уже делали выше). Выбираем Eclipse Marquee Tool. Теперь удерживая ALT и выделяем как на рисунке:
Создаем иконку в стиле web 2.0 *
Теперь кликаем второй кнопкой мыше по выделеной облости и выбирите Feather. Вводим значение 15px
Создаем иконку в стиле web 2.0 *
Теперь последнийй штрих. Создадим новый слой. Назовем его glow. edit -> fill Выбираем заливку цветом (color) #ffffff. Теперь устанавливаем прозрачность этому слою (opacaty) на ваше усмотрение.

Создаем иконку в стиле web 2.0 *

Оригинал: tips.bexinh.cn
Перевел: cheburator-all специально для demiart.ru clapping.gif
rolleyes.gif Раньше переводами не увлекался
Если кто то что то недопонял спрашиваем. wink.gif


Отредактировано: cheburator-all — 29 Ноября 2009, 15:34
ключевые слова: создаем кнопку, web 2 0, ржавчина, фотошоп графика текст металл ржавчина, скачать вопросы по теме коррозия металлов, создаём кнопку, кнопка в стиле web 2 0, меню 2 0, Создаём иконку, site:demiart ru кнопка web 2 0
  Google

Группа: Робот
1 пост
Возраст: скрывает
Регистрация: 26.11.2003

 мужчина  house96 1 Декабря 2009, 17:43 (спустя 2 дня 2 часа)
Пост №2 * 1 Декабря 2009, 17:43 (спустя 2 дня 2 часа)
Ответ с цитированием этого сообщения

Дебютанты
1 пост
Возраст: скрывает
Регистрация: 23.10.2009
Проживает: скрывает
biggrin.gif biggrin.gif Прикольно!! У меня тоже прикольно получилось! Только вот не понял, как сделать так, чтобы вот эта заливка (белая) расьущовывалась
0
 мужчина  FromSky 1 Декабря 2009, 18:57 (спустя 1 час 13 мин.)
Пост №3 * 1 Декабря 2009, 18:57 (спустя 1 час 13 мин.)
Ответ с цитированием этого сообщения

Размышляющие
396 постов
74°
Возраст: 30
Регистрация: 21.08.2008
Проживает: Симферополь
house96, " расьущовывалась" lol.gif lol.gif lol.gif Lol
Эта называется размытие!Вобще легче просто мягкой кистью ткнуть а потом Filters-Blur-Gaussian blur!
0
 мужчина  cheburator-all 2 Декабря 2009, 04:22 (спустя 9 часов 24 мин.)
Пост №4 * 2 Декабря 2009, 04:22 (спустя 9 часов 24 мин.)
Ответ с цитированием этого сообщения

Размышляющие
17 постов
Возраст: 30
Регистрация: 7.11.2009
Проживает: Россия
Если что играйте с цвета в Параметрах наложения слоев. Поняв смысл можно сделать из этой кнопки много разных кнопок rolleyes.gif
0
« Предыдущая тема | Необработанные Уроки | Следующая тема »
 Похожие темы
Создаем дизайн для галереи в стиле Web 2.0
Clean Photo Gallery Website Layout
Irdin 31 45055 +4 29 Февраля 2016 - 21:32
» к последнему сообщению
Кнопка в стиле Web 2.0
Arameus 9 9972 10 Октября 2010 - 23:42
» к последнему сообщению
Кнопка в стиле WEB 2.0
Создаем кнопку в стиле WEB 2.0
-SeZaR:)- 19 10805 13 Мая 2013 - 10:43
» к последнему сообщению
Стикер в стиле Web 2.0
Легко и просто!
verbaska 85 66909 +4 6 Января 2015 - 04:38
» к последнему сообщению
Меню в стиле Web 2.0
Сложность: легко
tosha95 5 6771 25 Апреля 2012 - 12:15
» к последнему сообщению

1 посетитель в этой теме
, 1 гость