Този бутон ще се използва в приложението за android за включване/изключване на светодиода, така че трябва да има две състояния - ВКЛЮЧЕНО и ИЗКЛЮЧЕНО.

В предишния урок нарисувахме основата на повърхността и тялото на бутона. Сега нека създадем икона за подчертаване, която да представя състоянието на бутона.

Това е изображението, което трябва да получим в резултат на урока:

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

Ще направим стандартна икона, нещо като това:

Ще създадем икона, която изглежда така.

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

Да започваме.

Нека създадем нов документ 500 на 500 пиксела. Поставете водачите в центъра на документа. Вземете Ellipse Tool, изберете режима Shape (Snape),
се уверете, че операциите по пътя са в позиция „Нов слой“ (повече тук) и изградете геометрично правилен кръг от центъра, като в началото на последния урок, след думите "да започнем." Цветът на запълване не е важен. Резултат:

Форма на елипса за празна значка.

Сега трябва да изградим друг кръг, но по такъв начин, че съдържанието на този кръг да се извади от съдържанието на първия кръг. За да направите това, изберете операцията „Изваждане от областта на формата“ в лентата с опции:

Избор на операцияИзваждане на предната форма (Изваждане от областта на фигурата).

И изграждаме друг правилен кръг от центъра, като размерът на новия кръг е по-малък от първия. защото втората форма е изградена в режим на изваждане, пикселите на първата форма ще бъдат извадени от втората:

Съдържанието на втория кръг се изважда от първия кръг.

Забележка: Когато работя с векторни фигури в някои версии на Photoshop, срещам неправилно поведение на програмата при превключване на режимите на работа на пътя, това се случва в момента във Photoshop CC 2017.Следователно, след превключване на режимите, просто натискам бутона за отмяна на предишната стъпка Crtl + Alt + Z, след което изграждам втората фигура. Повече подробности във видеото.

В резултат на това имаме кръг, пълен с пиксели. Но за нашата задача не е необходим цял кръг, а полукръг, или по-скоро „две трети кръг)))“. Извадете сегмента от получения кръг. За да направите сегмента геометрично правилен, поставете хоризонтален водач на височина три четвърти от кръга:

Хоризонтално ръководство за изрязване на част от кръг.

Сега вземете инструмента Pen Toll, все още имаме режима Subtract Front Shape за работа с пътеки, така че съдържанието на формата, начертано от Pen, също ще бъде извадено от основното съдържание. Начертайте триъгълник с инструмента Pen, един връх на мерника на централните водачи. двете страни трябва да минават през пресечната точка на горния хоризонтален водач и външния контур на кръга:

С помощта на триъгълника, създаден от инструмента за писалка, премахнахме част от кръга. Забележете, че всички пътища са на един и същ слой.

Сега трябва да нарисуваме вертикална пръчка, този път се нуждаем от режима „Добавяне към областта на формата“:

Избиране на режим "Обединяване на фигури" .

Когато превключвам на този режим (и той трябва да действа върху следващата добавена фигура), моят проблем с Photoshop отново, триъгълникът, начертан с писалката, се слива с кръга, така че натискам отмяна Crtl+Alt+Z, грешката се премахва, докато режимът Обединяване на фигури остава.

Вземете инструмента Rectangle и изградете вертикален правоъгълник, който завършва с иконата за ВКЛ./ИЗКЛ.:

Иконата ВКЛ./ИЗКЛ. е изградена. Но, както можете да видите, дебелината на линиите не съответства една на друга. Това се поправя лесно.

И така, общо взето, иконата е готова. Ако сте объркани от това как контурите на формата се появяват във вашия документ, не се притеснявайте. Когато записвате документ във всеки стандартен графичен формат, контурите няма да се виждат. Те могат да бъдат скрити дори в документ на Photoshop, за това просто трябва да изберете всеки друг инструмент, с изключение на векторните, например „Инструмент за преместване“.

Но може да не харесваме ширината на линията на полукръг или правоъгълник, диаметър и размер, тяхното съотношение и т.н. Не напразно използвах векторни фигури за изграждане, защото по всяко време, дори след запазване на документа. можем да ги мащабираме отново, без да губим качество и да зачитаме относителната геометрия. Например, след като нарисувах правоъгълник, ми се струва, че ширината на полукръга е твърде малка в сравнение с правоъгълника. Мога лесно да поправя това, като намаля диаметъра на вътрешния кръг.
Вземете Direct Selection Tool, задръжте натиснат клавиша Ctrl и щракнете една по една върху всички опорни точки на контура на кръга.След това приложете командата „Свободна трансформация“, задръжте натиснати клавишите Shift + Alt и, издърпвайки навътре всеки ъгъл на полето за трансформиране, намалете диаметъра на вътрешния кръг, за да увеличите ширината на полукръглата лента. По този начин можем да променим размера и позицията на всеки елемент от иконата:

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

Но най-важното е, че можем да променим геометрията на иконата по абсолютно същия начин, като вече я наслагваме върху целевия документ.

Всъщност, тъй като иконата е готова, време е да я плъзнете в документа с бутона, можем да го направим с инструмента "Преместване" . Ето как изглежда документът:

Изглед на документ с добавена векторна икона.

В момента иконата се намира в центъра на бутона, но не изглежда добре. Факт е, че кръгът на иконата е под центъра, но ако повдигнете фигурата, правоъгълникът ще бъде твърде висок.Следователно, първо трябва да намалите контура на правоъгълника спрямо иконата и след това да преместите цялата икона нагоре. Пътеката може лесно да се намали с инструмента за избор на път:

Преместете правоъгълника малко надолу.

С избора на опорните точки на пътеките и инструмента за свободна трансформация можем да променим размера на иконата.

Освен това, като изберете желаните опорни точки с инструмента за директен избор, можем не само да трансформираме размера, но и да преместим точките, за да променим формата на иконата. Тук ще преоразмеря иконата (всички избрани опорни точки), за да пасне на бутона:

Използвайте Free Transform, за да коригирате размера на векторната форма.

Преименувайте слоя с икони наon.

Първо, нека направим иконата във включено състояние. В този случай ще се ограничим до добавяне на стилове на слоя Outer Glow и Color Overlay със следните настройки:

Резултат:

Изглед на бутона във включено състояние.

Сега нека направим състоянието ИЗКЛ. Дублирайте слояon, преименувайте го наoff и добавете стил на слоя Inner Shadow и Color Overlay със следните настройки:

Резултат:

Изглед на бутона в състояние "изключено" .

За да придадете на бутона лъскав метален ефект, осветете корпуса. Създайте нов слой върху всички останали слоеве. Вземете инструмента "Четка" , направете твърдостта равна на нула, цветът е бял, размерът е малко по-голям от лентата на тялото. Кликнете с четката горе вляво. Трябва да изглежда така:

Рисуването приключи, за по-голяма яснота добавих черен фон.

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

Моето изображение с концентрични кръгове на прозрачен фон.

Такова изображение просто се създава във всеки векторен графичен редактор, например CorelDRAW, но във Photoshop, използвайки стандартни инструменти, дори и с използването на действия, не е възможно да го направите. Само ръчно, чрез създаване на контур под формата на кръг, последван от щрих с дебелина 1 пиксел, след това създаване на следващия кръг с по-голям диаметър и т.н., като цяло това е дълго и скучно. Но тъй като Не търся лесни начини, чисто принципно, кодирах JS скрипт за Photoshop, за да получа концентрични кръгове с еднакъв отстъп един от друг, няма да описвам тук, тази тясна тема е интересна само за хора, работещи в CAD програми.Предлагам да изтеглите чертежа на кръгове заедно с готовия PSD от връзките в долната част на страницата.

Поставете картина с кръгове върху слоя с формата с основата на бутона, променете режима на смесване, най-добре е сами да изберете режима, като напишете, тук използвах режима "Наслагване" .

Ако кръговете се открояват твърде ясно, намалете непрозрачността на слоя, освен това добавих слой маска и рисувах върху кръговете на някои места с полупрозрачна черна четка.

Краен резултат:

Изтегляне на материали за урока(PSD, 1 PNG, 1.54 Mb)Изтегляне от Yandex.Disk

Категория: