Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Рисуем mock-up для iPad в Adobe Photoshop

18 января 2015 | Опубликовано в Уроки | Нет комментариев »

В этом уроке мы будем создавать реалистичный mock-up для iPad в Adobe Photoshop. В результате у вас будет собственный шаблон для презентации дизайна приложений, а также новые навыки работы в  Photoshop. Выполнение урока займет у вас ориентировочно час. Для его выполнения вам понадобится версия Adobe Photoshop CS3 и выше, хотя в примере использована версия CS6.

 

Результат

How to Create a Great iPad Mockup in Photoshop

Шаг 1

Откройте Photoshop и создайте новый документ размером 4000 px на 3072 px. Возьмите инструмент Rounded Rectangle/Прямоугольник со скругленными углами и создайте новую фигуру указанных ниже размеров.

How to Create a Great iPad Mockup in Photoshop 1

Это база для iPad.

Шаг 2

Теперь нам нужно указать базе обводку. Это придаст мягкости резким краям и сделает работу реалистичнее. Укажите базе Layer Style/Стиль слоя Stroke/Обводка со следующими параметрами:

How to Create a Great iPad Mockup in Photoshop 2

Шаг 3

Теперь нам нужно создать серебряный обод для базы iPad. Дублируйте слой с базой и смените цвет заливки на #b4b8bb. При помощи инструмента Transform/Трансформировать (Cmd/Ctrl + T) сделайте серебряный объект на несколько пикселей больше и разместите его под слоем с темной базой.

How to Create a Great iPad Mockup in Photoshop 3

Шаг 4

Теперь мы укажем серебряной базе следующие стили слоя (Layer Style):

Bevel & Emboss/Тиснение

How to Create a Great iPad Mockup in Photoshop 4

Stroke/Обводка

How to Create a Great iPad Mockup in Photoshop 5

Outer Glow/Внешнее свечение

How to Create a Great iPad Mockup in Photoshop 6

Шаг 5

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

How to Create a Great iPad Mockup in Photoshop 7

Шаг 6

Добавим маску для белого прямоугольника, чтобы он был виден только в месте пересечения с iPad. Удерживая Cmd/Ctrl, кликните по иконке темной базы в палитре Layers/Слои. После того как появится выделение, укажите маску слою с белым прямоугольником.

How to Create a Great iPad Mockup in Photoshop 8

Снизьте opacity/непрозрачность белого прямоугольника до 8%.

How to Create a Great iPad Mockup in Photoshop 9

Шаг 7

Теперь добавим скриншот сайта. Мы разместим его как смарт-объект, что позволит нам редактировать содержимое в любой момент.

How to Create a Great iPad Mockup in Photoshop 10

Масштабируйте смарт-объект (Smart Object) до размера экрана iPad.

Шаг 8

Теперь применим к смарт-объекту следующие стили слоя:

Bevel & Emboss/Тиснение:

How to Create a Great iPad Mockup in Photoshop 11

Stroke/Обводка:

How to Create a Great iPad Mockup in Photoshop 12

Шаг 9

Почти все. Осталось добавить кнопку и камеру. Сначала займемся камерой. Нарисуйте небольшой круг инструментом Ellipse/Эллипс. Залейте его цветом #000000 и укажите ему стиль слоя Drop Shadow/Тень:

How to Create a Great iPad Mockup in Photoshop 13

Шаг 10

Внутри предыдущего круга нарисуйте еще один поменьше цвета #30a7c4. Укажите ему стиль слоя Stroke/Обводка:

How to Create a Great iPad Mockup in Photoshop 14

Нарисуйте маленький белый светлый кружок внутри камеры.

How to Create a Great iPad Mockup in Photoshop 15

Шаг 11

Теперь займемся кнопкой. Нарисуйте круг соответствующего размера и залейте его цветом #000000.

How to Create a Great iPad Mockup in Photoshop 16

Шаг 12

Создайте не блик на кнопке при помощи инструмента Ellipse/Эллипс.

How to Create a Great iPad Mockup in Photoshop 17

Снизьте Fill/Заливку до 4%.

How to Create a Great iPad Mockup in Photoshop 18

Шаг 13

Внутри кнопки нарисуйте небольшой Rounded Rectangle/Прямоугольник со скругленными углами и немного снизьте его непрозрачность.

How to Create a Great iPad Mockup in Photoshop 19

Вот и всё!

Наш iPad готов!

Добавьте фон и тень, чтобы результат выглядел завершенным!

How to Create a Great iPad Mockup in Photoshop

Автор урока Maria Wendt

Перевод — Дежурка

Смотрите также:




Оставить ответ


− один = 5

Вставить изображение