Макет на джаджа за музикален плейър във Photoshop

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

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



най-добрата точка и снимайте при слаба светлина

Музикална джаджа

В този урок ще направите всяко парче от измислена джаджа за музикален плейър, до иконите на бутоните и копчето на лентата за напредъка. Ще научите: как да използвате стиловете на слоевете на Adobe Photoshop, за да добавите гладки и фини размери към острите интерфейси; как да прилагаме едва забележими градиенти, които помагат да се изрази характеристика на осезаемост; как да създадете полезни и красиви състояния на взаимодействие за бутоните на джаджата; и как да проектираме правилни състояния на задържане и натискане, като същевременно запазим всичко ясно.



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

01. Създайте слой контейнер



Начертайте заоблен правоъгълник с радиус на границата 6px. Щракнете двукратно върху слоя, за да отворите диалоговия прозорец със стилове и му дадете 90deg линеен градиент запълване на # F9F9FA отгоре и #EFEFEF отдолу. Добавете бяла вътрешна сянка с разстояние 2px.

02. Добавете падаща сянка

Дайте на слоя контейнер черна сянка от 4 пиксела с разстояние 1 пиксел и 10% непрозрачност. Сега добавете 1px ход и му придайте лек до тъмен градиент със запълване на # C8C8C8 отгоре



03. Изолирайте лентата с бутони

Дублирайте слоя, изберете инструмента за избор на път ( ДА СЕ ) и изберете пътя на правоъгълника. Използване на инструмента за правоъгълник ( U ), задръжте shift, докато чертаете правоъгълник над съществуващия път. Изберете Intersect Shape Areas в панела с опции, за да изолирате по-малка форма.

04. Създайте форми на бутони

Премахнете щриха и падащата сянка и олекотете градиента до # F0EFEF отгоре и # F9FAFA отдолу. Използвайте инструмента Line ( U ), за да нарисувате една линия #DFDFDF в горната част на лентата. Добавете две черни вертикални линии и намалете непрозрачността до 6%.

05. Направете икона за възпроизвеждане

С инструмента за персонализирана форма ( U ), нарисувайте остър триъгълник и го напълнете с #BABABA. Завъртете го по посока на часовниковата стрелка на 90 градуса с Безплатна трансформация ( Cmd + T ). Нанесете черна вътрешна сянка с 1px разстояние и 1px размер при 40% непрозрачност. Нанесете бяла сянка на разстояние 1px.

06. Направете икона за бързо превъртане напред

Дублирайте иконата за възпроизвеждане. Използвайте Free Transform, за да го намалите до приблизително 75%. След това използвайте инструмента за избор на път ( ДА СЕ ), за да изберете пътя му. Копирайте го и го поставете. Сега задръжте shift и използвайте клавиша със стрелка надясно, за да преместите новия път надясно.

07. Създайте икона за пренавиване

Използване на инструмента за линия ( U ) отново задръжте shift и добавете вертикална линия 1px към иконата. Скрий пътя си с Cmd + H . Изберете инструмента за преместване ( V ), задръжте opt + cmd и натиснете клавиша със стрелка наляво, за да дублирате слоя. Тогава, Cmd + T , щракнете с десния бутон и изберете Flip Horizontally.

08. Добавете текст

Преместете новата форма на място и се уверете, че двата бутона са симетрични. След това добавете придружаващ текст за заглавието на песента и изпълнителя с помощта на инструмента за въвеждане ( т ). Разграничете ги с контраст, като направите единия по-лек от другия.

Photoshop мащабно изображение, за да се побере на платно

09. Променете стила на типа

След това добавете малко дълбочина към текста. На един текстов слой добавете бяла сянка на разстояние 1px. След това щракнете с десния бутон върху слоя и щракнете върху Копиране на стила на слоя. Изберете другите типове слоеве, щракнете с десния бутон върху палитрата от слоеве и щракнете върху Поставяне на стил на слоя.

10. Създайте слой за проследяване

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

11. Довършителни щрихи към лентата на пистата

Дайте на лентата на пистата бяла сянка на разстояние 1px и черна вътрешна сянка на разстояние 1px при непрозрачност 10%. Добавете градиентен ход с # 8C8C8C отгоре и #DFDEDE отдолу. Завършете го с градиентно запълване, което е #CCCCCC отгоре и # E8E8E8 отдолу.

12. Направете лентата за напредъка

Дублирайте слоя на пистата и с помощта на инструмента за директен избор ( ДА СЕ ), изберете трите най-десни опорни точки (увеличаване или маркиране). Докато задържате shift, натиснете клавиша със стрелка наляво, за да преместите десния ръб на лентата за напредък в средата на пистата.

13. Обратно към първия слой

Сега формата на лентата за напредъка е установена, щракнете с десния бутон върху първия слой, който сте направили (за контейнера) и щракнете върху Копиране на стила на слоя. След това изберете новия слой на лентата на напредъка, щракнете с десния бутон, щракнете върху Поставяне на стила на слоя и премахнете падащата сянка.

14. Създайте копчето на лентата за напредъка

Изберете инструмента Ellipse ( U ), задръжте Shift и нарисувайте кръг за копче. Стиловете на слоевете ще бъдат в клипборда от предишната стъпка, така че щракнете с десния бутон на мишката върху слоя си с елипса и отново щракнете върху Поставяне на стила на слоя Този път оставете падащата сянка за дълбочина.

15. Добавете няколко състояния на бутоните

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

16. Превърнете слоя в състояние на задържане

как да си направя лист с модел на характер

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

17. За натиснато състояние

Искаме отделните бутони да потъмнеят и да изглеждат така, сякаш действително са били натиснати, когато потребителят щракне върху курсора. Променете запълването на черно и намалете непрозрачността на градиента до 95%. След това добавете вътрешна сянка от 1px разстояние и 3px размер при 20% непрозрачност.

18. Добавете стилизиране

За да изострите бутона, добавете 100% # D7D7D7 падаща сянка с разстояние 1px. Уверете се, че Use Global Lighting е отметнато и променете ъгъла на -90deg. В палитрата на слоевете преместете слоя под вертикалните разделители на бутони, но над разделителя на лентата на бутоните.

19. Фина настройка

За черешката на тортата се върнете към слоя на копчето и го дублирайте. Използвайте безплатна трансформация ( Cmd + T ), за да го намалите с 20% и поставете стиловете на слоя от проследяващия слой върху неговия слой. След това затъмнете хода му, като промените цвета на горния си градиент на напълно черен.

Думи: Морган Алън Нътсън

Тази статия първоначално се появи в списание .net брой 239.

Хареса ли ви това? Прочетете тези!

Някакви въпроси? Питайте в коментарите!