Всем привет. Для начала хочу рассказать историю создания этой кнопки, ну а потом сам процесс создания кнопки в фотошопе.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/5897a8377e507ab3fa595ffda5d301f8.jpg[/img]Откуда взялась идея?Да откуда она взялась? Так вот есть такой хороший сайт под названием яндекс, уверен все его знают
, у этого сайта появился раздел яндекс.диск и вот однажды зайдя в этот раздел увидел кнопки в желто-оранжевых оттенках, честно скажу что я влюбился в эти кнопки
и у меня тут же в голове пронеслась идея создать такую кнопку в фотошопе! Ну в конкурсе охота поучаствовать которая проходит на сайте masterwebs.ru.
Мое удивление.Оказывается данная кнопка сделана чисто на
CSS3 я то думал что просто картинка, а оно вот что, не знаю может покажется странным кому то что я удивился, но я если честно не разбираюсь в
CSS3 на таком уровне так базово. И так небольшую историю послушали, теперь приступаем к самому уроку!
Шаг 1. Создание документа.Для начала создайте документ. Размеры выбирайте по своему вкусу я сделал
400х400 что бы размер картинок был не очень большим.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/986ea39d4b86f9cb535bd7528db5ec0c.jpg[/img]Шаг 2. Создание формы кнопкиДля этого на панели инструментов возьмите инструмент
прямоугольник со скругленными углами.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/fa9ddcf6d50e180e43c669dd10f22416.jpg[/img]И выставьте такие настройки:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/4bcb870df311ea5103e21c7d9f7a3e40.jpg[/img]Затем создаем вот такую фигуру нашей кнопки:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/d71ec3faf325cfc92f1126713b34fa7b.jpg[/img]И наконец задаете ей такие параметры наложения:
Внутренняя тень/Inner Shadow:[img]http://s1.hostingkartinok.com/uploads/images/2012/10/2dba0d0fe00940e0098d0f3a3a610417.jpg[/img]Внутреннее свечение/Inner Glow:[img]http://s1.hostingkartinok.com/uploads/images/2012/10/367f383fe72fd8d2e983b7d6765f7821.jpg[/img]Вот что выходит:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/3afab183e31b1b462623a2fe500dcc7d.jpg[/img]Шаг 3. Светлая частьДля этого берем инструмент
прямоугольник со скругленными углами с такими настройками:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/7ab86685975ef540db55b4721c7bb77e.jpg[/img]И создаем вот такую фигуру:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/49bfd02dcafc2ccba339d0ae98673bbc.jpg[/img]Теперь отрежем лишнее, для этого выбираем наш слой с белым фоном нажимаем правой кнопкой мыши и выбираем растрировать слой.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/9c61f39a4c2f3f9e6827a18ce469194f.jpg[/img]После этого оставаясь на нашем слое и удерживая клавишу
CTRL кликаем по слою с фоном нашей кнопки:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/9f5d1513bfa339a8fbb5fd5d4a6987da.jpg[/img]Получаем выделение кнопки, теперь нажмите комбинацию клавиш
CTRL+SHIFT+I (получаем инверсию выделения) затем клавишу
DELETE. Все получаем правильно вырезанную форму.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/aca4651003f0afe201d8703744fe1790.jpg[/img]Так ну теперь сделайте выделение нашей белой фигуре зажимая
CTRL + клик на нашем слое.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/5d31165c7c2730d3b77e426c041d6925.jpg[/img]Затем в панели инструментов выберите основной цвет и назначьте вот такой
цвет: #fbdf76.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/df10eee7b68af5af06204b128b62f6de.jpg[/img]Теперь нажимаем комбинацию
ALT+Backspace и заливаем нашу фигуру.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/a83bb74bb529817b754b1900b66384b9.jpg[/img]И да чуть не забыл что бы эффект смотрелся лучше нашу только что залитую фигуру с помощью
свободной трансформации уменьшите по бокам на
1 пикс. И прозрачность опустите до
70%.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/1c656831ee2c347dc60e1e5ef2275afc.jpg[/img]Результат:[img]http://s4.hostingkartinok.com/uploads/images/2012/10/ad227b892abeed28ef550224e9d338cb.jpg[/img]Шаг 4. Делаем высветления и затемнения.1. Нижнее осветление кнопки.Берем инструмент
кисть.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/1bf3436a30eaa47d11ce4774d3708fb2.jpg[/img]Ставим такие настройки:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/66bfc08eafd75e3526122bdff15261ac.jpg[/img]Создаем новый слой и проводимся кистью по нижней части кнопки:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/8a77c273b3557f2bd260b6d14e84307d.jpg[/img]Обрезаем лишнее как делали выше, т.е выделить слой кнопки, инвертировать и удалить.
Прозрачность сделайте
40%.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/148b4359ed124a8bad253e1d591b9283.jpg[/img]2. Верхнее осветление кнопки.Проделайте все тоже самое только цвет кисти будет таким:
#fdefaa. Мой результат:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/c8d1718a1686a8782ba2f928107e50c2.jpg[/img]3. Затемнение середины.Опять делаем то же самое только нужно делать это посередине светлой части кнопки и теперь не надо ничего инвертировать и выделять, просто не выходите за границы кнопки. Цвет кисти:
#f9d659. Прозрачность
90%.
Получаем:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/ed09153b47120f503fa09102d801e8b9.jpg[/img]Кнопка готова но без теней смотрится не очень красиво и сейчас мы с вами сделаем эту тень!
Шаг 5. Создание теней.Создание теней это очень трудоемкий процесс и долгий поэтому попробую объяснить более понятно.
1. Задняя теньИ так начнем. Создайте новый слой. Сбросьте цвета нажатием клавиши
D. Нажмите
X если основной цвет не черный. Возьмите инструмент
Овальная область.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/172d358dea256d21d24ef32e5d33bb19.jpg[/img]Создайте вот такую фигуру:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/104719302d9bbfb58151b79908d8c8ac.jpg[/img]Заполняем ее комбинацией клавиш
ALT+Bakspace.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/45bc68e18c16cc121b83bc9fae33c226.jpg[/img]Убираем выделение
CTRL+D.
Применяем фильтр
размытие по гауссу.[img]http://s4.hostingkartinok.com/uploads/images/2012/10/9e047bc9d3f7c459b87f648c6fb77bc8.jpg[/img]С такими настройками:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/d875d56e5ee0b72432813fcd772089a6.jpg[/img]Результат:[img]http://s1.hostingkartinok.com/uploads/images/2012/10/75e159aa61a625bddbe911782832ed48.jpg[/img]Далее сдвигаем чуть вверх:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/e0de8e569de41455384437a86e8dfbf8.jpg[/img]Затем трансформируем нашу тень комбинацией
CTRL+T.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/effd47e3deb4fcbb4ddfd988364dc5da.jpg[/img]И затем с помощью прямоугольной областью удаляем нижнюю часть:
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/d9b7787b8a9354a9e64db1aeda0b1c35.jpg[/img]Как вы заметили, низ тени получился, мягко говоря, пи**ец
. Для этого берем инструмент
размытие и размываем уголки.
[img]http://s4.hostingkartinok.com/uploads/images/2012/10/8086422e7df543d217b948b2410d5321.jpg[/img]Вуаля готово!
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/ec72fe05ad888b15ec672dff1c22c27b.jpg[/img]Но это еще не все! Идем дальше…
2. Нижняя тень.Дублируем нашу кнопку т.е без свечений теней и т.д а просто саму кнопку. Очищаем от стилей. И перемещаем слой ниже слоя самой нашей кнопки.
Так теперь измените цвет на черный и растрируйте слой. Затем переместите фигуру ниже на
1 пикс.[img]http://s4.hostingkartinok.com/uploads/images/2012/10/a4cd36b942e43e331ebf0c3f61a70d2a.jpg[/img]И размываем по гауссу:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/67c3291950453d6474d7594432f28bf9.jpg[/img]Теперь с помощью
свободной трансформации уменьшите ширину нашей тени, получаем вот что:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/4fd5af3fad97c6522902c6628c66c93e.jpg[/img]Прозрачность уменьшите до
55%.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/882ff4cc115310b3febea59c59a08425.jpg[/img]Так ну все тени готовы осталось сделать отражение и написать текст.
Шаг 6. Отражение.Делается отражение очень просто как дважды два. Опять дублируем наш слой с кнопкой и перемещаем в самый низ слоев. И перемещаем фигуру как на рисунке:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/b1dc08978518c998b2f5a0c0042d252a.jpg[/img]Затем нажимаем на
пиктограмму слой-маски:[img]http://s4.hostingkartinok.com/uploads/images/2012/10/e3ce688ddcbfbbf45c36fa841455e2df.jpg[/img]Выбираем инструмент
градиент, ставим такие настройки:
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/a207f6646bf1af313c22b72f0af0e343.jpg[/img]Теперь проводимся
градиентом снизу – вверх , если надо то делаем это несколько раз что бы получить нужный эффект.
Все готово!
Вот результат:[img]http://s1.hostingkartinok.com/uploads/images/2012/10/16930bfaf07e0eee8c590bfed3c1bbc8.jpg[/img]Так теперь добавьте любой текст, я сделал так написал
Скачать файл шрифтом
Arial, размером
18пт, цвет:
#5b400c. Затем продублировал текст сместил
влево на 1 пикс. и
вниз на 1 пикс. , переместил слой ниже первого текста и назначил такой цвет:
#f8e4a2.
Все наша кнопка готова.
[img]http://s1.hostingkartinok.com/uploads/images/2012/10/5897a8377e507ab3fa595ffda5d301f8.jpg[/img]Надеюсь вам понравилось пожалуйста прокомментируйте если есть какие ошибки или недочеты )
Автор: Шакиров Ринат.
Сайт:
http://psd-master.ru – лучшие уроки фотошопа бесплатно.
При поддержке:
SeoPult - система автоматизированного продвижения сайтов и управления контекстной рекламой.
Обсудить на форуме.
[img]http://www.masterwebs.ru/sp/seopult.gif[/img]