Бутон за създаване на Web 2.0 от Photoshop

Бутони уроците Photoshop вероятно са една от най-горещите категории във всеки сайт на Photoshop tutorials и тъй като Web 2.0 е толкова гореща тема сега, нека да направим просто един бутон, подходящ за всяко Web 2.0 приложение на уеб сайтове. Урок след скок.

Създайте празно платно с размери около 500 пиксела (ширина) х 400 пиксела (височина), за да започнете проектирането на бутоните. Създаване на ново повикване за слой „BG01". Изберете Кръгъл правоъгълен инструмент, задръжте SHIFT и начертайте кръгъл квадрат в центъра. Всеки цвят е добър на настоящия етап.

Извикайте Опции за смесване на 'BG01"и коригирайте следните стилове:

Бъдете сянка

• Непрозрачност: 40%
• Разстояние: 0px
• Спред: 0%
• Размер: 6px

Gradiant Overlay

• Стоп на цветовете: 0%, # d00031
• Стоп на цветовете: 100%, # ff2b5d

Задръжте CTRL, кликнете с левия бутон върху „BG01"Стъпка с миниатюри, за да изберете формата. Отивам Изберете -> Промяна -> Договор и въведете стойността "2px". Това ще свие избраната област с 2 пиксела.

Създаване на ново повикване за слой „BG02и запълни осветената (след свиването) област с всеки цвят. Използвам # 000000 black тук. Щракнете два пъти върху 'bg02', за да стартирате Възможност за смесване и ощипвам следния стил.

Gradiant Overlay

• Стоп на цветовете: 0%, # c6002f
• Стоп на цветовете: 100%, # c6002f

Създайте друг нов слой за текст, обадете сетекст". Вмъкнете текста на бутона. Ще използвам азбука, която ще представя. Стилът на шрифта, който използвам тук, са следните:

• Заоблен Arial Bold
• 150pt

Същото, след като вземете решение за вашия текст, кликнете два пъти върху 'txt', за да стартирате Опции за смесване и ощипвам следните стилове.

Бъдете сянка

• Непрозрачност: 25%
• Разстояние: 0px
• Разпространение: 0px
• Размер: 5px

Вътрешна сянка

• Непрозрачност: 10%
• Разстояние: 0px
• Дросел: 0
• Размер: 10px

Релефно покритие

• Дълбочина: 1px
• Посока: Надолу
• Размер: 0px
• Омекотена: 0px
• Непрозрачност на режима на осветяване: 32%
• Непрозрачност в режим на сянка: 32%

Gradiant Overlay

• Стоп на цветовете: 0% # d2d2d2
• Цветен стоп: 100% # f0efef

Бутонът е почти готов. Нека да я накараме да светне малко над горната част. държа CTRL, ляв клик 'BG02'Layer Thumbnail, за да подчертае външната форма; избирам Eclipse Marquee Tool. Сега задръжте ALT, с избрания инструмент Eclipse Marquee Tool, плъзгането преминава към минус долната половина на осветената област. Вижте изображението по-горе.

Когато горната част е маркирана и Eclipse Marquee Tool все още е избрана, щракнете с десния бутон и изберете перце; въведете 15px за радиуса.

Създайте нов слой, обадете себлестя"и запълнете маркираната част с бяло [#ffffff]. Това трябва да добави ефект на сияние към горната част на бутона. Крайният продукт трябва да изглежда като изображението по-долу.

Инструкция за изтегляне

Нещо допълнително…

Нагласете опциите за смесване на 'BG01' и 'BG02ще ви даде по-интересни бутони. Ето още един урок на Photoshop за бутона, който съм правил преди - Създаване на гланциран бутон за Web 2.0

Изтеглете проба