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

Преглед на урок

Векторно "Zune" с Photoshop

Векторно "Zune" с Photoshop




Help къде ми са инструментитеееее?

1. Създаване на фон
От лентата с менютата изберете File>New (Ctrl+N), за да създадете нов документ с размери 400×600px, резолюция 72 pixel/inch, RGB цветови режим. За Foreground изберете светлосин цвят #b5efff, а за Background цвят #00bef3. От кутията с инструменти изберете Gradient Tool (G). От лентата с опции за инструментите изберете Radial gradient.
Изтеглете градиента в посока от горният десен ъгъл на документа към долния ляв.



От кутията с инструменти изберете Rectangular Marquee Tool (M). Направете правоъгълна селекция с височина около 125px и ширина, съвпадаща с ширината на документа.
За Foreground изберете бял цвят. От кутията с инструменти изберете Gradient Tool(G). От лентата с опции за инструментите изберете Linear Gradient. Изтеглете градиент бяло/трансперант в посока горе-долу. В палитрата Layers поставете Blending Mode на слоя на Soft Light. За да деселектирате изберете Select>Deselect.



2. Създаване на тялото на Zune
За Foreground изберете цвят 000000. Изберете инструмента Rounded Rectangle Tool (U). От лентата с опции за инструментите изберете режим Shape Layers и Radius: 7px. Начертайте правоъгълна селекция, която има височина почти колкото височината на документа ви.
Изберете Layer>Layer Style>Gradient Overlay (или кликнете двукратно върху слоя в палитрата Layers, за да се отвори прозореца Layer Style и изберете стила Gradient Overlay). Направете следните настройки:







3. Дублирайте слоя (с десен клавиш на мишката кликнете върху него в палитрата Layers и от контекстното меню изберете Duplicate Layer). Променете цвета на правоъгълника в цвят #1e1e1e (кликнете двукратно върху миниатюрата на слоя в палитрата Layers, за да се отвори прозореца Pick a solid color).
От лентата с менютата изберете Edit > Free Transform. Преместете лявата, горната и дясната страна на правоъгълника навътре с около 10px. Долната страна преместете с около 120 px нагоре. За да завършите трансформацията, кликнете върху клавиш Enter.
Върху слоя приложете следните стилове:

Outer Glow



Inner Glow



Stroke







Дублирайте новият слой с правоъгълника. Изберете Edit>Free Transform (Ctrl+T). Докато задържате клавишите Shift+Alt преместете долният ляв ъгъл навътре с около 10-15 px. Променете цвета на #0f0f0f. Приложете стила Inner Shadow.



4. Добавяне на лъскавина към тялото
Дублирайте слоят с първия правоъгълник. Преместете го над всички останали слоеве и в палитрата Layers поставете Fill на слоя на 0%. Приложете стила Gradient Overlay.







5. Създаване на Pad на Zune.
Тялото на Zune-то е завършено. Проблема сега е, че върху него няма бутони. Ще добавите чувствителен на допир Pad и бутони отляво, и отдясно.
За Foreground цвят 000000. От кутията с инструменти изберете Rounded Rectangle Tool (U) с Radius 30-40px. Начертайте правоъгълника при задържан клавиш Shift. Поместете правоъгълника, така че разстоянието от екрана до горната му част да е по-малко, отколкото от долната му част до долната част на Zune-то. В хоризонталната част той трябва да е централно разположен (погледнете изображението по-долу).
Приложете стила Outer Glow.





Дублирайте слоя. С десен клавиш на мишката кликнете върху слоя и от контекстното меню изберете Clear Layer Style (или от лентата с менютата изберете Layer>Layer Style>Clear Layer Style). Променете цвета на #070707. Изберете Edit>Free Transform (Ctrl+T) . Задръжте клавишите Alt и Shift. Намалете размера на правоъгълника с около 2px.



Приложете следните стилове:









Отново дублирайте правоъгълника и изтрийте стиловете. Намалете размера с около 2px.



Дублирайте слоя, премахнете стиловете. Намалете размера му с около 2px. Приложете следните стилове:

Gradient Overlay





Stroke







6. Създаване на кръгли бутони
Създайте нова група (кликнете с мишката върху иконата Create a new Group, която се намира в долната част на палитрата Layers или изберете Layer>New>Group). От кутията с инструменти изберете Ellipse Tool. Задръжте клавиш Shift и начертайте кръгчето за бутона със стрелката. Поместете го в ляво от Pad и приложете следните стилове:







Дублирайте слоя и изтрийте стиловете. Намалете размера му с 2-3 px и приложете следните стилове:











Дублирайте групата. Изберете инструмента Move Tool (V). Задържайки клавиш Shift, преместете групата в дясната част. Местенето при задържан клавиш Shift се извършва по права линия.
7. Създаване на иконите за бутоните
Включете мрежата, като от лентата с менютата изберете View > Show > Grid. Можете да промените настройките за мрежата от Edit > Preferences > Guids, Grids, & Slices.
Изберете инструмента Pen Tool в режим Shape Layers и създайте стрелка, като показаната по-долу.



Поставете Fill на слоя на 0% и тогава приложете стила Stroke. Намаляването на стойността на Fill ще намали прозрачността на слоя, докато не приложите стил върху него.





За десният бутон повторете стъпките по-горе, но начертайте един триъгълник и два правоъгълника.



Селектирайте всички слоеве от палитрата Layers, които представят вашето Zune.За целта, при задържан клавиш Shift, кликнете върху първия и след това върху последния слой в палитрата Layers (без слоя Background). От менюто на палитрата Layers изберете New Group from Layers. В появилия се диалогов прозорец New Group from Layers можете да дадете наименование на групата.
8. Добавяне на сянка
Можете да добавите сянка. Създайте нов слой под групата, която току-що създадохте. Изберете инструмента Elliptical Marquee Tool и създайте елипса. За Foreground изберете цвят 000000. Запълнете селекцията с инструмента Paint Bucket Tool. Приложете Filter>Blur>Gaussian Blur.

Финален резултат:



Моят опит:



Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: poli1111
Източник: http://www.tutorial9.net/

Коментари

giovaniki

Много Добър Урок Моя Опит:

http://prikachi.com/users/giovaniki/1T.jpg

IFo

smiley5996, giovaniki: Страхотно, браво :)
И урока изглежда добър :) Браво на преводача.

poli1111

IFo, много по-голямо браво заслужава авторът на урока. Благодаря все пак.

pwndson

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

neooo

pwndson тъп ли си или си много тъп ?
Първо фона е различен, второ телефона на автора е малко по-малък от колкото на smiley и трето върху бутоните на smiley е действано по-"грубо"..

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.