В тази статия ще ви кажа как да го направите сами, от нулата, т.е. без да използвате изображения на трети страни за основата на колажа, създайте фотореалистично оформление на iPhone 5 във Photoshop. Между другото, изображението, направено с помощта на тази техника, се използва в Wikipedia в статията за iPhone 5.

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

Самият процес на създаване на оформлението ще бъде интересен и информативен, т.к. В процеса ще използваме векторни форми, филтри, стилове на слоеве, изрязващи маски и други техники, които ще бъдат полезни както за начинаещи, така и за напреднали потребители на Photoshop.

Това е оформлението, с което се сдобих, две опции, с изключен и включен дисплей:

Да започваме.

Първо, нека създадем нов документ (Ctrl+N) с ширина 600 пиксела и височина 700 пиксела на бял фон.

Създаване на калъф за iPhone 5

Разбира се, първото нещо, което ще направим, е да създадем тялото на смартфона, така да се каже, „тялото“ на устройството. Вземете Rounded Rectangle Tool и въведете следните настройки в лентата с опции в горната част на прозореца на Photoshop: цвят на запълване 000004, ширина 285px, височина 624px, радиус 45px. Задайте режима на инструмента на „Форма“, тогава ще използваме векторни инструменти само в този режим.

Нека преименуваме този слой на "Body" . Дублирайте този слой, преименувайте дубликата на "Body 1" и го преместете под слоя "Body" в панела със слоеве. Изключете видимостта на слоя "Building 1" .

Отидете до слоя "Body" . Добавете към него стилове на слоя „Stroke“ (Stroke) и „External glow“ (Outer Glow) със следните параметри:

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

И самият документ:

Направете слоя 'Building 1' видим и променете цвета му на 767f8f. Сега на m трябва да го накараме да стърчи малко отвъд слоя "Body" , т.е. беше малко по-голям във всички посоки. Активирайте инструмента „Безплатна трансформация“ (Free Transform Tool, Ctrl + T), задръжте клавишите Shift + Alt и плъзнете всеки ъгъл на общата рамка в посока от центъра на документа, така че фигурата да се увеличи леко, но не промяна на пропорциите:

Ето какво се случи, увеличих малко екранната снимка:

Създайте друг заоблен правоъгълник под слоя "Building 1" с цвят на запълване 0b0e13, ширина 301.34px, височина 640.38px и радиус 50px. Преименувайте слоя на "Сграда 2" :

Ето как изглежда работният документ, когато се увеличи малко:

Корпусът на смартфона е изработен от лъскав материал, така че трябва да има отблясъци. Не забравяйте, че фотографският реализъм се свежда до най-малките детайли!

Нека нарисуваме акценти върху тялото на iPhone. Създайте нов слой над слоя "Building 2" , изключете видимостта на слоевете по-горе. Вземете бяла кръгла четка, задайте диаметър на 10px и твърдост на 0 (нула).

Задръжте натиснат клавиша Shift и нарисувайте 50px хоризонтална линия с четката приблизително в центъра на документа. След това приложете Filter ->Blur ->Motion Blur (Филтър ->Blur ->Motion Blur) със стойност на ъгъл 0 ° и „Displacement“ (Разстояние) 30px:

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

След това огънете линията. Нека отидем Редактиране ->Трансформиране ->Деформация (Редактиране ->Трансформиране ->Изкривяване) и изберете дъга (Арка) с огъване от 30%:

Използвайки инструмента за свободна трансформация, поставете дъга в горния ляв ъгъл на тялото и завъртете дъгата на минус 45°. Вземете инструмента Polygonal Lasso Tool и създайте триъгълна селекция, както е показано на изображението по-долу, след което натиснете клавиша Delete, за да премахнете излишната част от дъгата.Ето как ще изглежда:

Дублирайте дъговия слой, завъртете го на 90° и го поставете в горния десен ъгъл на кутията. Направете същото за долните ъгли.

За да избегнете претрупването на панела със слоеве, групирайте тези четири слоя и преименувайте групата на „Акценти“.

Ето как изглежда калъфът за iPhone 5 сега:

Използвайки инструмента за правоъгълник, създайте правоъгълна форма 5 x 5 px с цвят на запълване 1b1f22, дублирайте я три пъти и ги поставете, както е показано по-долу:

Поставете тези четири слоя в група.

Да направим екран. Вземете Rounded Rectangle Tool и създайте правоъгълник с размери 263 x 464 px с радиус 5 px и цвят на запълване 090d10:

Сега не е зле да добавите подчертаване в предната част на вашия смартфон.

Използвайки Pen Tool създайте нещо като този запълнен с бяло триъгълник:

Преименувайте слоя на Face Flare. панели." След това, докато този слой е активен, задръжте натиснат клавиша Ctrl и щракнете върху миниатюрата на слоя "Body" :

В резултат на това в документа ще се появи избрана област според формата на слоя „Тяло“. С активния слой „Осветяване на лица. панел" щракнете върху иконата на маската на слоя, разположена в долната част на панела със слоеве. Направете запълване на слоя 0%:

Добавете към слоя „Открояване на лица. panel" стил на слоя "Gradient" (Gradient Overlay) със следните параметри:

Резултат:

Създаване на бутони за iPhone

Да направим крайни бутони за телефона. Да започнем с бутона в горната част. Използвайте Rounded Rectangle Tool, за да направите правоъгълник с ширина 50, височина 5 и радиус 5 px, цвят на запълване 242b33. Щракнете с десния бутон върху контура и изберете „Избор на област“ от контекстното меню, ще се появи селекция около формата. Вземете 2px бяла мека кръгла четка, направете я на 40-50% непрозрачност и нарисувайте хоризонтален щрих в горната част на селекцията, след това нарисувайте две вертикални щрихи отдясно и отляво, както е показано:

Използвайки същата техника, създайте страничните бутони, само че този път създайте един вертикален правоъгълник с ширина 4,5, височина 28 и радиус 4 px за горния бутон и същото за долните два, само 22 px височина.

Резултат:

Бутон за начало

Вземете Ellipse Tool, задръжте натиснат клавиша Shift и създайте правилен кръг с диаметър 57px. Попълнете формата с цветове 1b1b1d.

Дублирайте слоя и променете цвета на запълване на 000004. Натиснете клавиша V, за да активирате инструмента за преместване, след което натиснете клавиша със стрелка надолу. С тези действия ще преместите втората форма с един пиксел надолу.

Ето как ще изглежда празният бутон:

Дублирайте горната елипса и променете цвета й на по-светъл 4f5259. Създайте друга елипса, както е показано на изображението по-долу, моята е зелена (цветът няма значение). Задръжте натиснат клавиша Ctrl и щракнете в панела върху слоя с елипсата, разположен под зелената елипса, като резултат трябва да имате два избрани слоя.Отидете на Layers ->Combine Shapes ->Subtract Front Shape (Слой ->Combine Shapes ->Subtract Front Shape). Ако получената фигура е променила цвета си на запълване, върнете цвета към нея 4f5259:

Приложете стила на слоя Gradient Overlay към получената форма със следните настройки:

И за да завършим създаването на бутона Начало, нека нарисуваме квадрат в центъра на бутона. Отново вземете "Заоблен правоъгълник" , създайте квадрат със страна 23 и радиус 8 пиксела. Изключете запълването, направете ширината на линията (Stroke) около 1,86pt, а цвета - 818181:

Нарисувай камерата и високоговорителя на iPhone

Използвайте инструмента Ellipse Tool, за да начертаете правилен кръг с диаметър 12px и цвят 1e1e1e. Задръжте натиснат клавиша Ctrl и щракнете върху иконата на елипса в панела със слоеве, ще се появи селекция.Създайте нов слой. Вземете 12px бяла кръгла четка с нулева твърдост, задайте непрозрачност на 20-30% и щракнете под и вдясно от центъра на селекцията, за да създадете подчертаване. Начертайте кръг от 6,5 px в центъра на първия, запълнете го с 14171c. Ако е необходимо, преминете към инструмента за преместване и използвайте опциите за подравняване, за да подравните кръговете около центровете им. Изберете кръга и го осветете с четка с диаметър 7px. Картината е направена в по-голям размер за по-голяма яснота!

Създайте по-малък кръг (около 4px), запълнен със синьо 0e1377 в центъра на съществуващите кръгове. Създайте нов слой и използвайте бяла четка с твърдост и непрозрачност 100%, 1px в диаметър, направете точки като тази, след което намалете непрозрачността на слоя до 50%.

Можете да създадете външен кръг и други кръгове с по-голям диаметър от 12px, например на снимките действителният диаметър на външния кръг е 83px, групирайте всички слоеве и намалете размера на групата до 12px по ширина и височина.Полученият по този начин кръг е показан вдясно в увеличен мащаб.

Резултат:

Да преминем към рисуването на високоговорителя.

За да начертаем решетката на високоговорителя, трябва да създадем наш собствен шаблон. Създайте нов документ 2 x 2 px с прозрачен фон. Увеличете максимално документа, вземете инструмента „Молив“ (Pencil Tool) с бял цвят и поставете два квадрата с един пиксел върху документа, както е показано на снимката:

След това отиваме Редактиране ->Дефиниране на шаблон (Редактиране ->Дефиниране на шаблон), измислете някакво име за новия модел, запазете.

Отново вземете нашия любим "Заоблен правоъгълник" , начертайте правоъгълник с ширина 57, височина 11 и радиус 20 пиксела, запълнете с цветове 191919. Създайте нов слой, задръжте натиснат клавиша Ctrl, щракнете върху иконата на правоъгълник в панела със слоеве, за да оформите избрана област, с мека бяла четка с диаметър 2px, нарисувайте хайлайт в долната част и в долната част на дясното заобляне намалете непрозрачността на слоя до 50%, с една дума, всичко е както преди:

Дублирайте правоъгълника, за по-голяма яснота, променете цвета на запълването му (в моя пример е син), вземете инструмента Free Transform, задръжте клавишите Shift + Alt, така че трансформацията да се извърши пропорционално и относително до центъра на формата, след това намалете фигурата, както е показано на фигурата по-долу. Добавете стиловете на слояInner Shadow, Gradient Overlay и Pattern Overlay към новата форма със следните настройки (използвайте модела, който току-що създадохме в Pattern Overlay):

Може да се интересувате прочетете за iphone 13 отзиви от собственици на смартфони.

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

Остава да създадете сянка под iPhone 5. Създайте нов слойнад най-долния фонов слой Вземете кръгла черна четка с нулева твърдост, 14px в диаметър и 100% opacity и рисувайте върху нов слой хоризонтална линия под корпуса на телефона, след което приложете филтъра Motion Blur към слоя с отместване от 35 px:

Това завършва създаването на оформлението, ако желаете, можете да добавите икони към екрана на iPhone.

Изтеглете PSD файл:Изтеглете от Yandex Disk

Категория:

Photoshop