Як зробити фотореалістичний макет iPhone у Photoshop
У цьому матеріалі розповім, як самостійно, з нуля, тобто. не використовуючи будь-які сторонні зображення для основи колажу, створити фотореалістичний макет iPhone 5 у Photoshop. До речі, зображення, зроблене за цією методикою, використано у Вікіпедії у статті iPhone 5.
Сам собою процес створення макета буде цікавим і пізнавальним, т.к. У процесі ми будемо використовувати векторні форми, фільтри, стилі шару, відсічні маски та інші методики, знання яких знадобиться як початківцю, так і досвідченому користувачеві Photoshop.
Ось який макет в результаті вийшов у мене, два варіанти, з вимкненим та увімкненим дисплеєм:
Для початку створимо новий документ (Ctrl+N) шириною 600 та висотою 700 пікселів на білому тлі.
Створення корпусу iPhone 5
Перейменуємо цей шар "Корпус". Дублюйте цей шар, перейменуйте дублікат на "Корпус 1" і перемістіть його під шар "Корпус" на панелі шарів. Вимкніть видимість шару "Корпус 1".
Переходимо на шар "Корпус". Додамо до нього стилі шару "Обведення" (Stroke) та "Зовнішнє світіння" (Outer Glow) з такими параметрами:
Ось як має тепер виглядати панель шарів:
Зробіть видимим шар "Корпус 1" і змініть його колір на #767f8f. Тепер м треба зробити те щоб він трохи виступав за шар " Корпус " , тобто. був дещо більшим за розміром у всіх напрямках. Активуйте інструмент "Вільна трансформація" (Free Transform Tool, Ctrl+T), затисніть клавіші Shift+Alt і потягніть за будь-який куточок габаритної рамки у напрямку від центру документа, щоб фігура трохи збільшилася, при цьому не змінюючи пропорцій:
Ось що вийшло, на скріншоті я трохи збільшивмасштаб:
Створіть ще один прямокутник із округленими кутами нижче шару "Корпус 1" з кольором заливки #0b0e13, шириною 301,34px, висотою 640,38px та радіусом округлення 50px. Перейменуйте шар на "Корпус 2":
Ось як виглядає робочий документ при трохи збільшеному масштабі зображення:
Давайте намалюємо відблиски на корпусі iPhone. Створіть новий шар над шаром "Корпус 2", вимкніть видимість шарів вище. Візьміть круглу кисть білого кольору, задайте діаметр 10px і жорсткість 0 (нуль).
Затисніть Shift і проведіть пензлем приблизно в центрі документа горизонтальну лінію довжиною 50px. Потім застосуйте Фільтр --> Розмиття --> Розмиття в русі (Filter --> Blur --> Motion Blur) зі значенням кута 0° і "Зміщення" (Distance) 30px:
Ось як має виглядати ця лінія до та після застосування фільтра:
Далі вигнемо лінію. Ідемо Редагування --> Трансформування --> Деформація (Edit --> Transform --> Warp) і вибираємо дугу (Arch) з вигином в 30%:
За допомогою інструмента "Вільна трансформація" розташуйте дугу в верхньому лівому куті корпусу і поверніть дугу на кут мінус 45°. Візьміть інструмент "Прямолінійне Лассо" (Polygonal Lasso Tool) і створіть трикутне виділення, як показано на малюнку нижче, потім натисніть клавішу Delete для видалення зайвої частини дуги. Ось як це виглядатиме:
Дублюйте шар із дугою, поверніть його на 90° і розмістіть у верхньому правому куті корпусу. Виконайте ці ж операції для нижніх кутів.
Щоб не захаращувати панель шарів, згрупуйте ці чотири шари і перейменуйте групу на "Блики".
Ось як тепер виглядає корпус iPhone 5:
За допомогою інструменту"Прямокутник" (Rectangle Tool) створіть прямокутну фігуру розміром 5 на 5 пікселів із заливкою кольору #1b1f22, дублюйте її три рази і розмістіть їх, як показано нижче:
Помістіть ці чотири шари до групи.
Зробимо екран. Візьміть інструмент "Прямокутник з округленими краями" (Rounded Rectangle Tool) і створіть прямокутник розміром 263 на 464 пікселі, радіусом округлення 5 пікселів та заливкою кольору #090d10:
За допомогою інструмента "Перо" (Pen Tool) створіть приблизно такий трикутник із заливкою білого кольору:
Перейменуйте шар на "Блик лиц. панелі". Далі, при цьому активному шару затисніть клавішу Ctrl і клацніть на мініатюру шару "Корпус":
У результаті документі з'явиться виділена область формою шару " Корпус " . При активному шарі "Блик лиц. панелі" клацніть по розташованому внизу панелі шарів значку створення маски шару. Зробіть заливку шару 0%:
Додайте до шару "Блик лиц. панелі" стиль шару "Градієнт" (Gradient Overlay) з наступними параметрами:
Створюємо кнопки для iPhone
Використовуючи цю техніку, створюємо кнопки, розташовані збоку, тільки цього разу створюємо один вертикальний прямокутник шириною 4.5, висотою 28 і радіусом 4 пікселя для верхньої кнопки, а для двох нижніх такий самий, тільки висота 22 пікселя.
Кнопка "Home"
Візьміть інструмент "Ellipse Tool", затисніть клавішу Shift і створіть правильне коло діаметром 57px. Заливку фігури зробіть кольори #1b1b1d.
Дублюйте шар та змініть колір заливки на #000004. Натисніть клавішу V, щоб активувати інструмент "Переміщення" (Move Tool), а потім натисніть клавішу "Стрілка вниз". Цими діями Ви перемістите другу фігуру наодин піксель вниз.
Ось як виглядатиме заготівля кнопки:
Дублюйте верхній еліпс та змініть його колір на світліший #4f5259. Створіть ще один еліпс, як показано на малюнку нижче, у мене він зеленого кольору (колір не має значення). Затисніть клавішу Ctrl і клацніть у панелі по шару з еліпсом, розташованим під зеленим еліпсом, у результаті у Вас мають бути виділені два шари. Перейдіть Шари --> Об'єднати фігури --> Відняти передню фігуру (Layer - Combine Shapes - Subtract Front Shape). Якщо у Вас фігура, що вийшла, змінила колір заливки, поверніть їй колір #4f5259:
Застосуйте до фігури шар шару "Накладення градієнта" (Gradient Overlay) з наступними налаштуваннями:
І на завершення створення кнопки "Home" намалюємо квадратик у центрі кнопки. Знову беремо "Прямокутник із округленими кутами", створюємо квадрат зі стороною 23 і радіусом 8 пікселів. Відключаємо заливку, ширину обведення (Stroke) робимо близько 1,86 pt, а колір - #818181:
Малюємо камеру та динамік iPhone
Інструментом "Еліпс" (Ellipse Tool) малюємо правильне коло діаметром 12px та кольором #1e1e1e. Затисніть клавішу Ctrl і клацніть на іконці еліпса в панелі шарів, з'явиться виділення. Створіть новий шар. Візьміть круглу білу кисть діаметром 12px з нульовою жорсткістю, зробіть непрозорість 20-30% і натисніть нижче та правіше центру виділення для створення відблиску. Намалюйте коло діаметром 6.5 пікселів у центрі першого, заливку зробіть #14171c. При необхідності перейдіть на інструмент "Переміщення" (Move Tool) і використовуйте опції вирівнювання для вирівнювання кіл щодо їх центрів. Виділіть коло і поставте на нього відблиск пензлем діаметром 7px. Малюнок для наочності виконаний у більшому розмірі!
Створіть коло меншого діаметру (близько 4px) із заливкою синього кольору #0e1377 у центрі наявних кіл. Створіть новий шар і білим пензлем з жорсткістю та непрозорістю 100%, діаметром 1px поставте приблизно такі точки, потім зменшіть непрозорість шару до 50%.
Можна створити коло зовнішній та інші кола більшого діаметру, ніж 12px, наприклад, на малюнках фактичний діаметр зовнішнього кола 83 px, згрупувати всі шари та зменшити розмір групи до 12px по ширині та висоті. Отриманий таким чином коло у збільшеному масштабі показано праворуч.
Переходимо до малювання динаміка.
Для малювання сітки динаміка нам потрібно буде створити власний візерунок (Pattern). Створюємо новий документ розміром 2 на 2 пікселі з прозорим тлом. Збільшуємо масштаб документа до максимуму, беремо інструмент "Олівець" (Pencil Tool) білого кольору і наносимо на документ два однопіксельні квадрати, як показано на малюнку:
Після чого йдемо Редагування --> Визначити візерунок (Edit --> Define Pattern), вигадуємо новому візерунку якесь ім'я, зберігаємо.
Знову беремо наш улюблений "Прямокутник із округленими краями", малюємо прямокутник шириною 57, висотою 11 та радіусом 20 пікселів, заливку робимо кольори #191919. Створюємо новий шар, затиснувши клавішу Ctrl клікаємо по іконці прямокутника в панелі шарів для утворення виділеної області, м'яким білим пензлем діаметром 2px малюємо відблиск у нижній частині і на нижній частині правого округлення, зменшуємо непрозорість шару до 50%, словом, , як ми робили раніше:
Дублюємо прямокутник, для наочності змінюємо колір його заливки (на прикладі це це блакитний колір), беремо інструмент "Вільна трансформація", затискаємо клавіші Shift+Alt, щобтрансформування відбувалося з дотриманням пропорцій щодо центру фігури, потім зменшуємо фігуру, як показано на малюнку нижче. Додаємо до нової фігури стилі шару "Внутрішня тінь", "Накладення градієнта" та "Накладення візерунка" з наступними параметрами (у "Накладенні візерунка" використовуємо створений щойно візерунок):
Ось як виглядає динамік після зменшення другого прямокутника та додавання стилів шару до меншого прямокутника:
На цьому створення макету закінчено, за бажання можна додати іконки на екран iPhone.