Как да направим иконка за мобилно приложение с Photoshop?

Всички знаем или поне сме чували за възможностите на Adobe Photoshop. С негова помощ грозното може да се превърне в красиво, както и обратното. Не веднъж се е случвало известно печатно издание да направи куриозна грешка при обработката на дадена снимка и така да лиши някоя известна личност от ръка или крак например. Освен в печатните и рекламни издания, Photoshop се ползва и в дизайна на web сайтове и мобилни приложения. В тази статия ще ви покажа как бързо и лесно да си направите иконка за мобилното ви приложение, без да е необходимо да сте Photoshop Master. Нека да започнем.

Създайте нов файл с размери 600px на 600px, като може да оставите бялото като цвят за фон.
От лентата с инструментите в ляво, открийте формите и изберете заобления квадрат (Rounded Rectangle Tool), като му сложите радиус от 20px.

Задържайки Shift (за да получите квадратна форма) нарисувайте квадратната форма по средата на белия фон.
Сега от менюто със Слоевете (Layers), намерете формата Shape1 и кликнете два пъти върху менюто за промяна на цветовете.

В долния десен ъгъл задайте цвят с номер bcbcbc и потвърдете промяната.

До менюто за промяна на цветовете на Shape1 се намира Маската на Слоя (Layer Mask). Избирайки Ctrl + клик върху маската, ще направите селекция на вече сивия квадрат:

С така направената селекция, създайте нов слой (Ctrl+Shift+n). От основното File меню, изберете Sellect -> Modify -> Contract и задайте стойност от 12px.

Докато сте все още в селекцията, изберете Paint Bucket от лентата с интрументите (pic6).

В менюто със слоевете (Layers) кликнете два пъти на слоя Layer 1, за да се влезете в менюто със стиловете (Layer Style). Изберете Gradient Overlay и кликнете върху бутона Gradient.

Вече сте в менюто Gradient Editor. Сега трябва да изберете двата цвята, с които да запълните вашата икона. За целта изберете първо долната лява стрелка и кликнете върху новопоявилия се бутон Color. Въвдете цвят ffd66c и потвърдете. Направете същото и с долната дясна стрелка като там въведете цвят ffce50 и натиснете ОК.

Обратно в менюто Gradient Overlay въведете на Angle стойност от 45 градуса и потвърдете с ОК.
Кликнете с десен бутон върху Layer 1 и изберете Duplicate Layer, като в менюто Name напишете Layer 2. Така създадохме дубликат на Layer 1. Влезте в менюто Layer Style на Layer 2 и сменете долния ляв цвят на Gradient-a с ffb700, както направихме по-горе.

За да направим иконката по-ефектна ще изтрием част от Layer 2, за да покажем част от Layer 1. За целта първо се уверете, че Layer 2 е селектиран. От менюто с инструментите изберете инструмента Elliptical marquee и направете селекция, подобна на показаната.

Сега ще обърнем селекцията. За целта натиснете Ctrl+Shift+i и от клавиатурата натиснете Delete. Ctrl+D, за да деселектирате.

Това е моментът да добавите няколко ефекта, за да може иконката да изглежда по-реалистично. Влезте в Layer Style менюто на Layer 2, изберете бутона Bevel and Emboss и задайте стойностите от долната картинка (pic11).

Потвърдете с ОК, влезте в Layer Style менюто на Layer 1 и отново в Bevel and Emboss менюто задайте долните стойности и потвърдете промените.

Сега ще направим и малко промени по външната рамка – Shape 1. За целта обаче, първо ще сменим фоновия цвят – Background. В Layer менюто най-отдолу ще намерите Layer – Background. Изберете го и с помоща на Paint Bucket и цвят за фон 000000 направете фона черен.

След това изберете Layer – Shape 1 и влезте в Layer Style менюто. Вече знаете как да създавате Gradient-и, така че създайте Gradient със следните цветове – ляво 003768; дясно dedfdf. Задайте Bevel and Emboss и Outer Glow с цвят: 003868 със стойностите, показани на картинките по-долу:

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

От менюто File -> Save, запазете *.psd файла, а след това File -> Save as, запазете файла и в *.jpeg формат. Така, ако искате да изпробвате други цветове или тези вече не Ви допадат, отворете *.jpeg файла с фотошоп и изберете Ctrl+U. Движете лентата Hue към желаните от вас цветове. Лесно, нали? 🙂

Остава да направите своя иконка и да се похвалите, като я качите на Facebook страницата на New Horizons. Ако пък има нещо, което искате да направите, а не ви се получава, пишете тук или във Facebook, за да помагам 🙂

Тези от вас, които искат задълбочени и систематични знания за работа с любимата ми програма, могат да разгледат предстоящите курсове по Photoshop.