Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Рисуем металлическую кнопку

Рисуем металлическую кнопку

Автор: LuLu | Категория: Уроки Photoshop » Web | 7-05-2007, 15:50
В этом уроке по фотошоп мы научимся рисовать металлическую кнопку, можно также использовать в качестве логотипа.

1. Для начала создадим новый документ 400x400px с белым бэкграундом. Назовем слой " base".

2. Создадим новый слой (кликаем на панели слоев внизу по иконке белого листика), возьмем инструмент Elliptical Marwuee Tool, зажмем клавишу Shift и нарисуем круг и зальем его цветом #2F2F2F.



3. Не снимая выделения создадим еще одни слой, назовем его " Bevel", затем идем Select > Modify > Contract и укажем значение 2px. Далее идем Select > Feather и поставьте значение 5. Теперь залейте окружность цветом #5F5F5F.



4. Теперь цветом переднего плана сделайте белым, выберите инструмент Gradient, тип заливки "от цвета переднего плана к прозрачному" (foreground to transparent) и зайлейте выделение сверху вниз. Вот так это должно выглядеть:


5. Создайте еще один новый слой и назовите его " Orb base". Возьмите инструмент Elliptical Marquee Tool и сделайте еще одно выделение внутри существующего круга и залейте его #3D6D9C цветом.

Рисуем металлическую кнопку

6. Создайте еще один слой и назовите его " Orb Inset" и поместите его под " Orb base". Ctrl+Click на иконке слоя " Orb base"для выделения объекта, перейдите на " Orb Inset" и залейте его черным цветом. Нам пока это не видно, т.к. он находится под верхним слоем, но скоро поймете для чего это :) Теперь перейдите в настройки Blending options слоя " Orb base"(двойной клик рядом с названием слоя). Перейдем на вкладку Inner Glow и выставим такие параметры, как показано на скриншоте:

Рисуем металлическую кнопку

Затем на вкладку Inner Shadow:

Рисуем металлическую кнопку

7. Перейдем на слой " Orb inset" и сделаем трансформацию Edit > Free Transform (или Ctrl+T) и введите в верхней части меню в параметрах отвечающих за ширину и высоту объекта W и H по 102%, как показано на скриншоте:

Рисуем металлическую кнопку

8. Теперь зайдем в настройки стилей слоя Blending options на вкладку Gradient Overlay и выставим значения как на скриншоте:

Рисуем металлическую кнопку

9. Далее Ctrl+Click по иконке слоя " Orb base", возьмем мягкую кисть 100px диаметром, цвет переднего плана установим в #3D6D9C и в верхнем меню в настройках кисти в качестве режима наложения выберем Linear Dodge, Opacity 30% и Flow 60. Теперь внизу круга нарисуем такой круг как на скриншоте, книзу пройдитесь несколько раз кистью, чтобы получиь ярко голубой цвет.

Рисуем металлическую кнопку

10. Создайте еще один слой над слоем " Orb base" и назовите его " Orb reflection", возьмите инструмент Elliptical Marquee Tool и сделайте новую окружность, как показано на скриншоте. Зайлейте ее белым цветом, прозрачность слоя Opacity уменьшите до 30% (на палитре слоев), а режим наложения слоя измените на Overlay.

Рисуем металлическую кнопку

11. Создаем еще один слой, назовем его " Orb reflection2", делаем окружность, как показано на скриншоте, заливаем белым цветом, прозрачность слоя Opacity понижаем до 40%, а режим наложения слоя меняем на Overlay.

Рисуем металлическую кнопку

12. Осталось добавить текст и наша кнопка/логотип готова!
Урок photoshop - рисуем сеталлическую кнопку


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 28358 | Напечатать | Комментарии (29)

#1 написал: Zero_Vadim (31 мая 2007 11:39)
Далее идем Select > Modify > Feather

перейдите на " Orb Inset" и залейте его черным цветом
#2 написал: LuLu (31 мая 2007 14:23)
У меня photoshop CS2, поэтому просто Select > Feather, а про "Orb Inset" спасибо, исправила :)
#3 написал: Zero_Vadim (31 мая 2007 22:53)
А, изв, у мя CS 3 ) ты в скобках указывай)
#4 написал: Velada (4 июня 2007 17:49)
Здравствуйте! Давно хотела научиться рисовать такие кнопки но все уроки попадаются не совсем понятные... У меня такой вопрос, переведите, плиз или скрин покажите куда идти при выполнении этих действий: "Select > Modify > Contract и укажем значение 2px. Далее идем Select > Feather и поставьте значение 5." У меня фотошоп русский, 8-я версия, я еще учусь, а так хочется кнопочку нарисовать! winked
#5 написал: LuLu (4 июня 2007 18:07)
#6 написал: Velada (5 июня 2007 09:57)
УРА!!! lol
Наконец-то ПОЛУЧИЛОСЬ!!!
Спасибо, большое за скрин, после него дело сдвинулось с мертвой точки!
Как же здорово, когда получается то, что давно хотелось сделать! winked

А еще воодушевленная успехом я сделала стеклянный шар, если интересно можно посмотреть мой вариант: http://www.zshare.net/image/2150031524d531/
Спасибо за помощь! smile
#7 написал: LuLu (5 июня 2007 17:39)
Классно шар получился и эльфик внутри такой одинокий... :)
#8 написал: M1ndhunter (28 июля 2007 04:22)
Спасибо за урок! winked Вроде не совсем получилось (блик), но хоть чему-то научился... smile Вот мой вариант (сделана как обои на раб. стол, 1600х1200 пикс., 188 Кб): http://www.zshare.net/image/2875511b35ab39/ request
P.S. Хочу попробовать нарисовать прямоугольную кнопку с надписью: "Ctrl + Alt + Del" lol
#9 написал: LuLu (28 июля 2007 10:40)
Симпатичная кнопка, наверное дело в самом цвете (красный) он не очень яркий, поэтому свечение также не ярким получилось, и круг внутренний который самым первым на красном нарисован, может его чуть уменьшить, что б виден был оригинальный красный цвет, мне кажется должно быть лучше тогда, объемней :)
Чилавечки в тему lol
#10 написал: M1ndhunter (28 июля 2007 15:28)
smile Спасибо за совет, будем пробовать еще... winked
P.S. Этот урок подходит не только для круглых кнопок... Как и обещал, нарисовал прямоугольную. Два часа "убил" на это занятие lol И опять-же не вышло с бликами. Там их сложней делать (пришлось сделать 4 reflection слоя, и повозиться немного с ними). Вот что из этого вышло (1600х1200, 190 Кб): http://www.zshare.net/image/28790779f74d
d2/
#11 написал: LuLu (28 июля 2007 16:59)
Не плохо, но есть замечание, по моему выпуклый блик справа должен быть также во внутрь кнопки, как левый, оно будет смотреться как подъем к середине кнопки, и может блики все сместить чуть ниже? :) Не подумай, что я придераюсь, мы все тут учимся, пробуем, экспериментируем, поэтому на твой вкус и цвет, хочешь принимай пожелания, а хочешь - нет winked
Так держать smile
#12 написал: M1ndhunter (28 июля 2007 17:40)
Ничего, это очень хорошее замечание! winked Надо попробовать еще... Я вот как раз и не знал, как лучше сделать...
#13 написал: ффф (27 августа 2007 10:39)
Подскажите почему у меня не получается цветная кнопка, а только серая, и как нанести logoчтоб оно было цветным
#14 написал: LuLu (27 августа 2007 13:44)
Возможно Вам необходимо сменить режим изображения на RGB (Image > Mode > RGB Color)
#15 написал: Dark :) (1 ноября 2007 10:18)
Урок просто СУПЕР! LuLu спасибо за урок.
#16 написал: UncleKiti (9 ноября 2007 07:57)
Lulu, ,больше разных вариаций, мне нравится!!! Урок просто замечательный. Сэнк Ю!
#17 написал: Jani (3 декабря 2007 14:43)
а у меня вообще с самого начала ничего не получается request
мало то, что я новичек в этом, у меня стоит 8 русская версия, английский ни бум бум! Цвет поменять не могу, выделить круг не могу... про остальное вообще молчу! А так хочется сделать!!!
#18 написал: LuLu (3 декабря 2007 15:25)
Я думаю может все таки не надо перескакивать через голову и начать с основ? http://zerolayer.ru/photoshoptutorials/basic/.
#19 написал: tango (23 декабря 2007 02:50)
А у меня все получилось. спасибо за урок.
#20 написал: Gogh (11 января 2008 09:40)
У меня все получилось, только большая пикселизация (квадратит), как избежать этого?
#21 написал: Gogh (11 января 2008 09:44)
Здорово!
#22 написал: LuLu (16 января 2008 17:01)
Gogh,
попробуйте включать сглаживание где это возможно и делать в бОльшем формате.
#23 написал: SilentHunter (1 февраля 2008 10:00)
Во многих уроках не указывается разрешение, от чего возникают несостыковки с исходным результатом... По большей части во всех уроках используется 72 dpi (Можно выставить сразу при создании нового документа) и тогда пикселизации не будет... Если поставить скажем 300 dpi - пикселизации не будет вообще практически, но могут возникнуть проблемки с такими фильтрами как "добавление шума", облака и прочее...

Говорю не как эксперт, просто личные наблюдения в помощь начинающим:)
#24 написал: Крис (28 февраля 2008 15:08)
Млин ... кто мне скажет почему этот шарик внутри который должен быть синим , не как не заливается синим ... тоесть я переключаю на любой цвет , а у меня всёравно остаётся серый ... и некак . Подскажите плиз ))
#25 написал: Slavka94 (8 марта 2008 18:50)
Круто
#26 написал: zlooO (8 апреля 2008 05:39)
еДИНСТЕНАЯ штука каторая получилось да и то криво -)))
#27 написал: StaFox (14 июня 2008 17:59)
У мну не получилось, сделать как нуна пункт 9. И вышло неясно что, ну я там домалявал...
ЫмэйдЖ
#28 написал: myafa (25 августа 2008 19:21)
LuLu Спасибо тебе огромное, здоровский урок!
Я не только кнопочку нарисовала, но и ещё пару горячих клавиш усвоила (Ctrl+T и Ctrl+клик)
winked
#29 написал: Yan Gavrilov (16 декабря 2008 12:11)
спасибо!
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Дизайн завораживающего постера для Часа Земли
Дизайн завораживающего постера для Часа Земли


На этом уроке мы научимся создавать концептуальный коллаж на тему Часа Земли. В ходе выполнения урока мы
проведем вас сквозь процесс придания изображению глубины при помощи нескольких мощных инструментов.
Вы так же научитесь накладывать изображения друг на друга настолько бесшовно, что они будут выглядеть как
одно цельное изображение.


Выделенные области в Photoshop Часть 2
Выделенные области в Photoshop Часть 2

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

Создание вот такого сюрреалистичного представления сознания. Часть 1
Создание вот такого сюрреалистичного представления сознания. Часть 1

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


Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

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