модерен

Само Photoshop

Уроци и ресурси за Photoshop

Добре дошли в SoloPhotoshop, където ще намерите най-добрата информация за уроци, ресурси и статии за Adobe Photoshop!

Модерен пластмасов бутон за мрежа с Photoshop | Само Photoshop

Модерни уеб бутони с Photoshop

Продължавайки с поредицата от елементи за дизайн на уеб интерфейси, сега ще създадем модерен пластмасов бутон с Photoshop.

След урока за елегантни пастелни бутони, ще работим с втория от тази серия Modern Plastic Button, който е малко по-сложен, но все още не изисква извънредни познания за Photoshop.

Ще създадем нов документ за нашия бутон, ако искате да го създадете със същите характеристики, които използвах и аз. Отидете на "Файл> Нов".

След това трябва да активирате правилата и да създадете ръководства, които да ни помогнат да фокусираме новия си бутон. Бутонът ще бъде с ширина 220px с височина 80px. Вземете инструмента "Заоблен правоъгълник" и с радиус 35px плъзнете с помощта на водачите, за да създадете формата на бутона, точно както виждаме на следващото изображение.

Прилагане на стилове на слоеве

За да създадем пластичния ефект на нашия бутон, ще използваме отново стилове на слоеве, които са прости и ефективни, но преди всичко те могат да бъдат запазени за по-късна употреба. Щракнете двукратно върху слоя бутон в палитрата на слоя и ще се появят опциите за стилове.

Следвайки параметрите на следващите изображения, ще постигнем нашия стил на пластичен ефект:

Външен блясък

Вътрешно блестящо

Градиентно наслагване

Удар

Пластмасов стил

Осветеност на бутоните

Ефект, който е трудно да се постигне със стилове на слоеве, е този на осветлението, което красиво засилва контраста на дизайна, поради което ще го направим по традиционния начин, с няколко бели слоя извън фокуса и играене "Режимите на слоевете".

Възползвайки се от водачите, ние създаваме сферична селекция около нашата фигура, както можем да я видим по-долу:

След това намаляваме селекцията и я запълваме, на нов слой, с бял цвят, изображението е идеално, както трябва:

Премахваме избора, като натискаме „Ctrl + D“. Сега правим същото, но в нов слой и сега го преместваме нагоре. Ако желаете, можете да дублирате първия слой и след това да обърнете позицията и да го повдигнете до подходящото положение, което можем да видим на изображението:

Прилагаме "Gaussian Blur" с радиус 10px (Filter> Blur> Gaussian Blur) върху двата слоя, след което е необходимо да сменим "Layer Mode на Overlay" и да намалим непрозрачността до стойности, вариращи от 50 до 75% в зависимост върху това, което искате да постигнете. И ние всъщност сме подготвили нашия модерен пластмасов бутон, но ще добавим някои прости детайли, за да изглежда по-добре.

Допълнителни елементи

Е, ще добавим малко текст и една от фигурите, които самият Photoshop носи, след което с някои прости ефекти на слоя те ще бъдат готови.

В потребителските форми на фотошоп намираме голям брой фигури, които бихме могли да използваме, този път използвах обикновена стрелка, която съм дублирал и завъртял, за да изглежда като двойна стрелка, която показва изтегляне или нещо подобно, със сигурност ще нещо по-добро ще им се случи хаха. След като фигурата се съедини, ние прилагаме стиловете на слоя "Inner Shadow and Color Overlay" с параметрите, които наблюдаваме по-долу:

Необходимо е да намалим "Запълването" на слоя до 0%, правим това, за да изчезне оригиналният цвят на фигурата и да се показват само наскоро приложените стилове на слоя.

С инструмента "Текст" написах "Пластмасов бутон" и след това със стилове на слоя прилагаме следната сянка. Играйте с опциите, така че да постигнете други и по-добри резултати, ако желаете.

Накрая добавих алтернативен текст, който поради липса на идеи съм сложил "Lorem Ipsum" и върху него също е приложена сянка, в този случай цвят, подходящ за цвета на същия бутон. Следващото изображение ви показва параметрите:

И готови имаме нашия прост, но поразителен и модерен пластмасов бутон, който със сигурност ще бъде полезен във вашите уеб проекти.

Ще се видим в следващия урок от тази поредица ...