Първо искам да кажа, че подобна работа е по-рентабилна за извършване във векторен редактор като Adobe Illustrator или CorelDraw, отколкото в растерен редактор Photoshop.
Но какво да направите, ако няма векторен редактор под ръка и работата трябва да се извърши точно сега? Няма друг изход освен да използвате добрия стар Photoshop. Но не е трудно да нарисувате бутон с ефекта на метална повърхност и във Photoshop.Ето какво получих за пет минути работа:
Имах нужда да нарисувам метален бутон с ефект на натискане, за да създам интерфейса на безплатното приложение за Android Flashlight, което можете да инсталирате от тази връзка, едновременно и да видите как можете да приложите изображението, създадено във Photoshop на практика.Описание на приложението тук.
Да започваме.
Отворете Photoshop, създайте нов документ 500 на 500 пиксела или каквото искате. Размерите на документа могат по-късно да бъдат променени без загуба на качество, т.к. за създаване ще използваме векторни инструменти и стилове на слоеве.
Поставете два водача точно в центъра на документа. Вземете инструмента Ellipse, задайте режим на Shape (Snape), цветът на запълване е сив 8f8f8f. Насочваме курсора точно към кръстосаните мерници на водачите, задръжте левия бутон на мишката и започнете да плъзгате курсора във всяка посока от центъра.След, когато сте започнали да плъзгате курсора, задръжте натиснати клавишите Alt и Shift, центърът на елипсата ще се премести към мерника на курсора, а самата елипса ще стане геометрично правилен кръг. Така изградете фигура във формата на кръг. Когато сте готови,първоотпуснете левия бутон на мишката исамо след товаклавишите Alt и Shift. Така че трябва да завършим с нещо подобно:
Изграждане на елипса.
Това ще бъде предната плоска повърхност на бутона. За да изглежда като метал, трябва да добавите стил на слоя Gradient Overlay със следните настройки:
Моля, имайте предвид, че градиентният стил е "Ъгъл" . Цветовете се редуват - чисто бяло с различни нюанси на сивото.
Резултат:
Метален градиент на бутона.
Дублирайте слоя с елипса и преместете получения дубликат под оригиналния слой (имам дубликат с имеEllipse 1 copy). Приложете командата Free Transform (Ctrl + T) към дубликата, задръжте клавишите Alt + Shift и леко увеличете диаметъра на формата, като плъзнете някой от ъглите на рамката:
Създаване на основата на бутона.
Приложете стил на слой към него също стил на слой „Наслагване на градиент“, но настройките този път ще бъдат различни, стилът на градиента е огледален, черно и бяло се редуват:
Добавяне на огледален градиент към основата на бутона.
Резултатът трябва да бъде:
Двуслойни форми с градиенти.
Дублиране на слойEllipse 1 copy, нарекох гоEllipse 1 copy 2и го преместих подEllipse 1 copy. Увеличете диаметъра му с Free Transform, така че документът да изглежда нещо подобно:
Дублиране на слой с форма.
Към този слой с форма ще добавим два стила на слоя - "Релефен" и "Щрих" със следните настройки:
Резултат:
В следващия урок ще нарисуваме икона за включване/изключване и ще дадем текстура на бутона.
Изтегляне на материали за урока:
1 PSD, 1 PNG | 1,54 MbИзтегляне от Yandex.Disk