В този урок ще създадем прост набор от квадратни бутони, които могат да бъдат полезни при дизайна на потребителския интерфейс (UI). Естетичният дизайн на тези бутони е вдъхновен от индустриалните продукти на Braun от 60-те години на миналия век, разработени от легендарния дизайнер Дитер Рамс. вижте пълната мощ на този инструмент на Photoshop, с който ще постигнем фотореалистични изображения.
Урокът е подходящ за всички най-нови версии на Photoshop, започвайки от CS2.
Ето резултата от урока:
Да започваме. Нека започнем със създаването на фона. Създайте канава документ с размери 500 x 300 px във Photoshop с бял фон. Отключете фоновия слой, като щракнете два пъти върху името на слоя.
Приложете стила Gradient Overlay към слоя със следните настройки:
Резултатът трябва да изглежда така:
Сега нека започнем да създаваме същинските бутони.
Лента с бутони
Вземете Rounded Rectangle Tool, задайте опцията Shape на 262427 тъмно сиво запълване и създайте фигура 149 x 50 px с радиус 3 px:
Поставете го в центъра на документа, използвайте инструментите за подравняване, ако е необходимо. Ето как трябва да изглежда:
Нека зададем стилове на слоя с формата Color Overlay (Color Overlay), Inner shadow (Inner Shadow) и Stroke (Stroke) със следните параметри:
Резултатът трябва да бъде:
Създаване на форма на бутон
Използвайте инструмента за мащабиране, за да увеличите до 200%.
Вземете отново Rounded Rectangle Tool, задайте опцията Shape, запълнете го с бяло (FFFFFF) и създайте квадрат със страна 48px и радиус 3px:
Нека да дадем стилове на основата на слоя с бутони Inner glow (Inner Glow), Gradient Overlay (Gradient Overlay) и Stroke (Stroke) със следните параметри:
В резултат основата трябва да изглежда така (мащаб 200%):
Добавяне на кръг в средата
Вземете Ellipse Tool и нарисувайте бял кръг в средата на бутона. Преди да нарисувате кръг, задръжте Alt + Shift, за да направите кръга правилен и да изградите от центъра (мащаб на картината 200%):
Нека придадем на формата на кръга следните обединени слоеве: Inner Shadow (вътрешна сянка),Gradient Overlay (Gradient Overlay) и Stroke (Stroke) със следните настройки:
Резултат (увеличение 200%):
Създайте нов слой. Преминете към Brush Tool и използвайте 15 px мека кръгла четка с бял цвят. Направете щрих, както е показано със стрелката на снимката, за да създадете ефект на подчертаване в долната част на бутона (увеличение 300%):
Бутонът е готов. Нека да я погледнем:
В панела със слоеве изберете (задържайки Ctrl) три слоя: слоя с основата, оградете и ги маркирайте и групирайте, групата може да се нарече "Лев бутон" :
Дублирайте групата „Лев бутон“ два пъти, преименувайте новите групи „Среден“ и „Десен бутон“ и след това използвайте инструмента за преместване, за да преместите дубликатите, както е показано на изображението по-долу:
На левия бутон нарисувайте оранжев ((df7237) кръг с помощта на Ellipse Tool. Това ще представлява индикатора на бутона за запис:
Придайте на тази форма стил на слой Inner Shadow със следните настройки:
Вземете кръглата четка, направете твърдостта 0%, диаметър 15px и бял цвят.Създайте нов слой и нарисувайте малко петно в долната част на оранжевия кръг, след което намалете непрозрачността на слоя до 70% (мащаб 300%):
Нека направим десния бутон да изглежда като натиснат. За да направите това, добавете друг стил на слоя към слоя с основата на десния бутон, вътрешна сянка (Inner Shadow) със следните параметри:
Резултат:
Това е!
В резултат на това, използвайки само векторни форми и стилове на слоеве, създадохме фотореалистични бутони от 60-те години.