is_реклам:

пошук, категорії та ін. показати ▼

Малюємо мокап для таблет-версії додатку

Малюємо мокап для таблет-версії додатку
автор опубліковано


На цьому уроці ми будемо створювати реалістичний mock-up для iPad в Adobe Photoshop. Як результат у вас буде власний шаблон для презентації дизайну додатків, а також нові навички роботи в Photoshop. Виконання уроку займе орієнтовно годину. Вам знадобиться версія Adobe Photoshop CS3 або вище, в прикладі використана версія CS6. Кожен скріншот можна збільшити, клікнувши на ньому.

Результат роботи

ipad_mockup_01

Крок 1

Відкрийте Photoshop і створіть новий документ розміром 4000 px на 3072 px. Візьміть інструмент Rounded Rectangle (Прямокутник з заокругленими кутами) і створіть нову фігуру із вказаними на малюнку параметрами. Це буде база для iPad.
ipad_mockup_02

Крок 2

Тепер задамо обводку для бази. Це додасть м'якості різким краям і зробить роботу реалістичнішою. Для бази задайте Layer Style (Стиль шару) Stroke (Обводка) з наступними параметрами:
ipad_mockup_03

Крок 3

Далі створимо срібний обідок для бази iPad. Продублюйте шар з базою і змініть колір заливки на #b4b8bb. За допомогою засобу Transform (Трансформування), якому відповідає комбінація клавіш Ctrl + T, зробіть срібний об'єкт на кілька пікселів більшим і розмістіть його під шаром з темною базою.
ipad_mockup_04

Крок 4

Задамо для срібної бази наступні стилі шару (Layer Style):

Bevel & Emboss (Тиснення)
ipad_mockup_05

Stroke (Обводка)
ipad_mockup_06

Outer Glow (Зовнішнє свічення)
ipad_mockup_07

Крок 5

Тепер нам потрібен відблиск на екрані iPad. Для цього створіть Rectangle (Прямокутник) білого кольору і поверніть його за допомогою засобу Transform (Трансформувати, Ctrl + T). Розмістіть білий прямокутник так, щоб він перекривав iPad з правого боку.
ipad_mockup_08

Крок 6

Додамо маску для білого прямокутника, щоб його було видно тільки в місці перетину з iPad. Утримуючи Ctrl, клацніть по іконці темної бази в палітрі Layers (Шари). Після того як з'явиться виділення, вкажіть маску шару з білим прямокутником.
ipad_mockup_09

Зменшіть значення opacity (непрозорість) білого прямокутника до 8%.
ipad_mockup_10

Крок 7

Додамо скріншот сайту чи вайрфрейму. Ми розмістимо його як смарт-об'єкт, що дозволить нам змінити його в будь-який момент.
ipad_mockup_11

Масштабуйте смарт-об'єкт (Smart Object) до розміру екрану iPad.

Крок 8

Тепер застосуємо до смарт-об'єкта наступні стилі шару (Layer Style):

Bevel & Emboss (Тиснення)
ipad_mockup_12

Stroke (Обводка)
ipad_mockup_12_1

Крок 9

Майже все. Залишилося додати кнопку і камеру до нашого iPad. Спочатку зробимо камеру. Намалюйте невелике коло інструментом Ellipse (Еліпс). Залийте його кольором #000000 і вкажіть йому стиль шару Drop Shadow (Тінь).
ipad_mockup_13

Крок 10

Всередині попереднього кола намалюйте ще одне менше коло кольором #30a7c4. Вкажіть йому стиль шару Stroke (Обводка).

ipad_mockup_14

Намалюйте маленьке біле світле коло всередині камери.
ipad_mockup_15

Крок 11

Зобразимо кнопку. Намалюйте коло відповідного розміру і залийте його кольором #000000.

Крок 12

Створіть відблиск на кнопці за допомогою інструменту Ellipse (Еліпс).
ipad_mockup_15_1

Зменшіть значення Fill (Заливка) до 4%.
ipad_mockup_16

Крок 13

Всередині кнопки намалюйте невеликий Rounded Rectangle (Прямокутник з заокругленими кутами) і трохи знизьте його непрозорість.
ipad_mockup_17

Ось і все!

Наш iPad готовий!
ipad_mockup_01

Додайте фон і тінь, щоб результат виглядав завершеним.
ipad_mockup_18

Сподобався пост? Пишіть коментарі внизу сторінки!

Автор уроку Maria Wendt. Переклад та скріншоти Насті Павлюк

схоже за тегами

Залишити коментар:

Яндекс цитирования UA TOP Bloggers