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

Дизайн на телефон в стил "HTC Touch Diamond"

Дизайн на телефон в стил "HTC Touch Diamond"




Преди да започнем нека видим финалният резултат.

Натиснете върху изображението за цял размер


1/ Създайте документ с размери 1000х1000px и бял фон.

Натиснете върху изображението за цял размер


2/ Сега ще направим основата на телефона. С Rounded Rectangle Tool , 20px направете показаната форма

Натиснете върху изображението за цял размер


3/ Направете показаните настройки за [b]Rounded Rectangle Tool.
Започнете от средата на вече нарисуваниия правоъгълник, и държейки Alt начертайте фигурата. Използвайте rulers (View>Rulers) и grid (View>Show>Grid) за да сте по-прецизни. Когато сте готови именувайте слоя "Phone shape 1."

Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


4/ Дублирайте слоя и запълнете копието с #5b5b5b. Именувайте го "Phone shape 2."

Натиснете върху изображението за цял размер


5/ Двоен клик върху слоя "Phone shape 2", в Blending Options направете показаните настройки.

Натиснете върху изображението за цял размер


6/ Създайте нов слой, именувайте го "light." Натиснете Ctrl + клик върху слоя "Phone shape 2", за да заредите селекцията. Вземете Rectangular Marquee Tool , с показаните настройки и премахнете горната част от селекцията. Селектирана трябва да остане само най-долната, по широка част на телефона.



Натиснете върху изображението за цял размер


7/ Вземете Gradient Tool , задайте цветове от бяло към прозрачно и приложете от горе надолу. Трябва да постигнете подобен ефект.

Натиснете върху изображението за цял размер


8/ С Eraser Tool, 0% Hardness, изтрийте на някои места.

Натиснете върху изображението за цял размер


9/ С Pen Tool направете пътечка в долната част на телефона.

Натиснете върху изображението за цял размер


10/ Създайте нов слой, наречете го "light 2." Настройте Brush Tool на 1 px, бял цвят.Вземете отново Pen Tool, кликнете с десния бутон и изберете Stroke Path. Уверете се че в появилият се прозорец сте избрали Brush. Simulate Pressure не трябва да е отметнато. Натиснете OK.

Натиснете върху изображението за цял размер


11/ Изтрийте по краищата на линията, която направихме. След това приложете Filter > Blur > Gaussian Blur, с radius 0.7 px.

Натиснете върху изображението за цял размер


12/ Повторете направеното от 9 до 11 стъпка, за да добавите същият ефект и върху останалите страни на телефона. Също така променете цвета на фона на черен. Използвайте следващите снимки за ориентир.

Натиснете върху изображението за цял размер


Натиснете върху изображението за цял размер


13/ Приключихме с тази част от телефона. Селектирайте слоевете, които направихме до сега(Ctrl+клик) с изключение на фона и ги групирайте (Layer>New>Groups from layers). Именувайте групата „Exterior side”. Направете още една група „Interior side”, в нея направете още една папка с име „Вottom side”. С Rounded Rectangle Tool направете форма като показаната.

Натиснете върху изображението за цял размер


14/ Премахнете горната част на формата с Rectangle Tool, в този режим

Натиснете върху изображението за цял размер


15/ Двоен клик на слоя, в Blending Options задайте следните настройки

Натиснете върху изображението за цял размер


16/ Сега трябва да добавим малко светлина на тази фигура. Процедирайте като в стъпка 9, но този път използвайте Line Tool , 1 рх, бял цвят

Натиснете върху изображението за цял размер


17/ Направете нова група с име "Button." Нарисувайте кръгче с Ellipse Tool . Използвайте водачите, за да направите кръгчето точно в центъра.

Натиснете върху изображението за цял размер


18/ В Blending Options за този слой използвайте показаните настройки.

Натиснете върху изображението за цял размер


19/ Направете още едно кръгче, но този път по малко. Започнете от средата на другия кръг и дръжте натиснати Alt + Shift докато чертаете. Това ще ви помогне да направите кръгчето на точното място.

Натиснете върху изображението за цял размер


20/ Направете показните настройки в Blending Options.

Натиснете върху изображението за цял размер


21/ Създайте нов слой над тези с кръгчетата и го именувайте "Shine 1."Приложете Radial Gradient, както е показано на снимката. Цветовете трябва да са бяло към прозрачно.



Натиснете върху изображението за цял размер


22/ Добавете маска на слоя и с черна четка премахнете тази част от бялата светлина която е извън бутона. Установете Blend Mode на Linear Light и Opacity на 34%.

Натиснете върху изображението за цял размер


23/ Създайте нов слой с име "Shine 2." С Elliptical Marquee Tool направете селекция като показаната и запълнете с бяло. Отново добавете маска и изтрийте излишното,бялото трябва да е само вътре в бутона. Поставете Blend Mode на Soft Light и Opacity на 70%.

Натиснете върху изображението за цял размер


24/ С Pen Tool направете пътечка, настройте Brush Tool на 2 px, Hardness 100%, бял цвят. Вземете отново Pen Tool кликнете с десн бутон и изберете Stroke Path.

Натиснете върху изображението за цял размер


25/ С мека гума (Eraser Tool) изтрийте долната част на линията, така че да избледнее малко. Задайте Opacity 70% за този слой.

Натиснете върху изображението за цял размер


26/ Създайте нов слой и нарисувайте бяло петно. Приложете Filter > Blur > Gaussian Blur, radius 18.5 px. Променете Blend Mode на Soft Light.

Натиснете върху изображението за цял размер


27/ Сега ще направим сензорните бутони. Създайте нова група под групата “Button”и я наречете "Signs." Направете кръче с Ellipse Tool и намалете Opacity на 20%. След това задайте показаните настройки в Blending Options>Stroke. Задaйте Fill 0% за този слой.

Натиснете върху изображението за цял размер


28/ Добавете показаните фигурки, използвайки Line Tool. Стрелкичките направете с Custom Shape Tool .

Натиснете върху изображението за цял размер


29/ Слушалките направете с Pen Tool, къщичката и стрелката отново с Custom Shape Tool. Добавете и показаните настройки в Blending Options.

Натиснете върху изображението за цял размер


30/ Завършихме долната част на телефона. Следва да поработим върху горната. Направете фигура с Rounded Rectangle Tool запълнете я с #626262, на нов слой. Отрежете долната част, така че да премахнете заоблените краища.

Натиснете върху изображението за цял размер


31/ Направете следните настройки в Blending Options за този слой.

Натиснете върху изображението за цял размер


32/ Създайте нов слой с име “Shine”. Направете показаната селекция, премахнете областта от селекцията където се срещат двете части на телефона. Използвайте Gradient Tool (бяло към прозрачно) и запълнете.

Натиснете върху изображението за цял размер


33/ Направете пътечка с Pen Tool, превърнете я в селекция (десен клик>Make Selection) Обърнете селекцията Select>Inverse и натиснете Delete. Задайте Opacity 50%.

Натиснете върху изображението за цял размер


34/ Нарисувайте логото с Pen Tool или създайте свое собствено.

Натиснете върху изображението за цял размер


35/ Направете нова група "Screen." В нея ще направим форма с Rectangle Tool. В Blending Options направете следните настройки.

Натиснете върху изображението за цял размер


36/ Създайте още една група с име "Camera." Направете кръгче в горния десен ъгъл и го запълнете с #111111. Направете показаните настройки.

Натиснете върху изображението за цял размер


37/ Дублирайте слоя и променете цвета на #222222, Направете тези настройки в Blending Options. Променете Fill на 0%.

Натиснете върху изображението за цял размер


38/ Направете още едно кръгче с цвят #222222. Направете настройките.

Натиснете върху изображението за цял размер


39/ Отново кръгче, запълнете го с #3b3b39. Изрежете средата на кръгчето, като използвате Elliptical Tool. Направете настройките.

Натиснете върху изображението за цял размер


40/ Направете кръгче с черeн цвят.

Натиснете върху изображението за цял размер


41/ Направете нов слой над тoзи с черното кръгче. С Brush Tool направете две малки петна. Използвайте тези цветове: #47307a и #1a3327.

Натиснете върху изображението за цял размер


42/ Повторете стъпка 39, но този път направете по-малко кръгче. Запълнете отново с #3b3b39. Задайте Opacity 40% и използвайте следните настройки за Blending Options.

Натиснете върху изображението за цял размер


43/ Направете кръгла селекция около камерата и я запънете с бяло на нов слой. Приложете Filter>Blur>Gaussian Blur, radius 2-3px. Намалете Opacity на 5%.

Натиснете върху изображението за цял размер


44/ Създайте нова група с име "Speaker." С Rounded Rectangle Tool, 10 px направете показаната форма.

Натиснете върху изображението за цял размер


45/ Задайте тези настройки в Blending Options

Натиснете върху изображението за цял размер


46/ За да направите говорителчето да изглежда реалистично е наобходимо да добавите патерн. Как става това може да видите в този урок стъпки 3-7

Натиснете върху изображението за цял размер


47/ Направете форма подобна на показаната. Приложете настройките.

Натиснете върху изображението за цял размер


48/ Създайте нова форма но този път по малка, запълнте я с #d7d7d7. С Rounded Rectangle Tool премахнете заоблените краища. Направете настройките.

Натиснете върху изображението за цял размер


49/ Сега ще направим текстура. Направете нов слой с име „Noise” и го запълнете с бяло. Приложете Filter > Noise > Add Noise, с показаните параметри.
Поставете Blend Mode на Multiply и Opacity на 20%.
Направете селекция само на външната част от телефона и поставете маска на слоя Noise. По този начин текстурата ще бъде видима само в селектираната област.

Натиснете върху изображението за цял размер


50/ Повторете предишната стъпка, но този път селектирайте друга част от телефона. Ориентирайте се по изображенията по долу.

Натиснете върху изображението за цял размер


51/ Ще добавим още малко светлина на телефона. Следвайте снимките и направете подобни форми. Поставете Opacity на 10% или по малко.

Натиснете върху изображението за цял размер


Довършете телефона като добавите свое лого или картинка.

Натиснете върху изображението за цял размер


52/ Сега ще направим фон. Създайте по-голям документ и го запълнете с черно. Аз използвах размери 2215x1510 px. Преместете телефона в него.

Натиснете върху изображението за цял размер


53/ Дублирайте слоя 12 пъти и подредете копията едно зад друго както е показано. Помнете, че когато обектите се отдалечават, те трябва да изглеждат по-малки. Това правило за перспективата трябва да спазвате. Също може да смените изображенията във всеки телефон.

Натиснете върху изображението за цял размер


54/ За всички слоеве с телефони, с изключение на първия телефон задайте тези настройки за Blending Options. (направете настройките за един слой и после ги копирайте на останалите: десен клик на слоя Copy Layer Style/Paste Layer Style )

Натиснете върху изображението за цял размер


55/ За да добавим сянка на първия телефон може да използваме друга техника. Направете форма подобна на тази на телефона и я запълнете с черно.

Натиснете върху изображението за цял размер


56/ Преместете слоя с формата под този с телфона. В Blending Options задайте показаните настройки.

Натиснете върху изображението за цял размер


57/ За да създадете отражение, обединете всички слоеве с телефони в група. Дублирайте групата, натиснете Ctrl+T, десeн утон> Flip Vertical и преместете в долната част както е показано. Правим групирането на слоевете за да не дублираме всеки един поотделно.

Натиснете върху изображението за цял размер


58/ Намалете Opacity на слоевете до стойност по ваша преценка . Може да промените някой настройки в Blending Options, така всеки телефон ще има различно отражение.
В менюто Color Overlay за всички слоеве (на отражението) задайте черен цвят. След това за двата най- малки телефона направете Opacity на 80%. (в същото меню), на следващите два задайте 70%, на следващите 60%, и останалите 50%.

Натиснете върху изображението за цял размер


59/ Направете нов слой над всички останали. Заредете селекцията като задържите Ctrl+Shift и кликнете на малката картинка на всеки слой.

Натиснете върху изображението за цял размер


60/ Приложете градиент черно към прозрачно. Поставете Blend Mode за този слой Soft Light.

Натиснете върху изображението за цял размер


61/ Създайте нов слой между телефоните и отраженията им. Отидете на Filter > Render > Clouds.

Натиснете върху изображението за цял размер


62/ Filter > Blur > Motion Blur, с показаните настройки. Установете Blend Mode на Soft Light. Трявва да получите красив ефект върху отраженията.

Натиснете върху изображението за цял размер


63/ Съдайте нов слой над този в който работихме току що. Използвайте отново Gradient Tool, от черно към прозрачно за да скрием част от отраженията.

Натиснете върху изображението за цял размер


64/ Създайте нов слой над този с черния фон. (новият слой да е втори от долу нагоре ) Именувайте го „Clouds." Отново приложете Filter > Render > Clouds.

Натиснете върху изображението за цял размер


65/ Добавте маска на този слой и я запълнете с черно (маската). Използвайте Gradient Tool, бяло към прозрачно и приложете в маската. Целта е да остане видима само част от нея.

Натиснете върху изображението за цял размер


66/ Направете нов слой над слоя Clouds, именувайте го Noise и запълнте с бяло. Приложете Filter > Noise > Add noise.

Натиснете върху изображението за цял размер


67/ Поставете курсора на мишката между двата слоя "clouds" и "noise" Натиснете Alt и когато мишката се промени кликнете веднъж. С други думи добавяме Clipping Mask.

Натиснете върху изображението за цял размер


68/ Променете Blend Mode на слоя „Noise” на Multiply и Opacity на 51%.

Натиснете върху изображението за цял размер


69/ За слоя Clouds задайте Opacity 30%.

Натиснете върху изображението за цял размер


70/ В тази последна стъпка може да добавите лъчи. Как става това видите в този урок, в стъпки 44-47

Финал:

Когато сет готови запазете в JPG и може да експериментирате с Levels, Colors... или да добавите още ефекти по ваш вкус

Натиснете върху изображението за цял размер


Моят опит:

Натиснете върху изображението за цял размер


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




Урокът е добавен от: tir_ram
Източник: http://psdtuts.com/

Коментари

zzzmiqta

Урока въобще не е дълъг:P

tir_ram

Изобщо нали :)

coaster

Обаче крайният резултат е страхотен и определено си заслужава труда..!! : )

tir_ram

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

bubsss

Дам грешка е, вече е оправена :)

d0brin

Мале урока е страхотен love it :P ето как си направих моя wallpaper по този урок :)

http://i191.photobucket.com/albums/z218/stargatesga/Phone_Wallpaper.jpg

`маndaринchouuu____

на 20 стъпка вътре в кръкчето не става сиво а черно как да го направя в сиво плс помогнете миииииииииииииииииии

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

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