Мокап ликбез — все что нужно знать про мокапы. Как создать макет (MockUp) банки с содовой в Фотошоп

В этом уроке вы узнаете, как создать макет (Mockup) банки с содовой. Мы создадим основную форму банки с помощью векторных фигур, настроим Градиент (Gradient) и с его помощью придадим банке металлический эффект. А так же нарисуем капельки воды и с помощью Смарт объектов (Smart object) вставим изображения и превратим наш макет (Mockup) в легко редактируемый шаблон. Таким образом, вы сможете представить ваш дизайнерский продукт, неоднократно используя готовый шаблон.

Прим. переводчика: такие макеты (Mockup ) как этот, очень удобно использовать в дизайнерских целях. Всего за пару кликов вы настраивает смарт объект, зачастую просто вставляя готовое изображение, и получаете вид конечного продукта.
Финальный результат.

(нажмите на изображение, чтобы увеличить)

Шаг 1. Откройте новый документ в Photoshop и воспользуйтесь предложенными настройками.

Ниже вы можете рассмотреть все формы элементов, которые нам нужно создать, с их именем и расположением в палитре слоёв.

Начнём создавать основу банки. Используйте инструмент Прямоугольник (Rectangle tool) и его настройки в верхней панели опций. Нарисуйте первый прямоугольник с размерами 568х1124 пикселей и назовите его Middle 1 .Создайте еще один прямоугольник 568 пикселей шириной и 1086 пикселей высотой и дайте ему название Middle 2 .
Смотрите настройки и порядок слоёв на скриншоте ниже.

Шаг 2. Для создания верхней фигуры мы будем работать с инструментом Перо (Pen Tool) в режиме Слой- фигура (Shape). Нарисуйте левую часть фигуры, как на скриншоте ниже и назовите этот слой Top shape 2 .

Затем, используя инструмент Выделение контура (Path Seleсtion), выделяем созданную фигуру и, зажав клавиши Alt + левый клик, перетащим дублированную фигуру на этом же слое. Как только дублированная фигура готова, зададим ей правильное положение. Нажмите комбинацию клавиш Ctrl+ T Отразить по горизонтали

Шаг 3. Далее мы собираемся создать верхний выступ банки. Для этого используйте инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool).
Настройки такие:
Радиус (Radius) - 5 пикс.
Заданный размер (Fixed Size) - 468пикс. ширина и 25пикс. высота
Расположите созданную фигуру как показано ниже и назовите этот слой Top shape 1 .

Шаг 4. Для создания нижней части банки мы воспользуемся методом, который использовали в шаге 2 для создания верхней фигуры. То есть - чтобы нарисовать нижнюю фигуру мы будем работать с инструментом Перо (Pen Tool) в режиме Слой- фигура (Shape). Нарисуйте левую часть нижней фигуры, как на скриншоте ниже и назовите этот слой Bottom Shape . Затем, используя инструмент Выделение контура (Path Selection), выделяем созданную фигуру и, зажав клавиши Alt + левый клик, перетащим дублированную фигуру на этом же слое. Как только дублированная фигура готова, зададим ей правильное положение. Нажмите комбинацию клавиш Ctrl+ T , щёлкните правой кнопкой мыши и выберите опцию Отразить по горизонтали (Flip Horizontal). Расположите фигуру, как показано на скриншоте.

На данный момент наша банка имеет такой вид. Будет удобней придать фигурам цвет оттенков серого, чтобы было лучше различать все элементы.

Прим. переводчика: советую сохранить этот скриншот и открыть у себя в Photoshop для того, чтобы правильно отобрать цвета для каждой фигуры, это важно. Воспользуйтесь пипеткой и берите цвета с миниатюр слоя.

Шаг 5. Сейчас мы собираемся добавить световые эффекты (блики) на банке, чтобы оживить её и сделать более реальной на вид. Для этого активируйте слой Middle 1 ,и дважды щёлкнув мышкой по слою, вызовите окно настроек стилей слоя. Там выберите опцию Наложение градиента (Gradient Overlay) и воспользуйтесь предложенными настройками.

Так как этот градиент мы создали вручную, было бы разумно его сохранить на будущее. Для этого в окне редактирования градиента можно нажать кнопку Сохранить (Save), выбрать подходящее название для вашего градиента и сохранить его у себя на компьютере. А так же можно просто нажать кнопку Новый (New) и этот градиент появится в списке градиентов в Photoshop.

Шаг 6. Активируйте слой Middle 2 и уменьшите его Заливку (Fill) на 0%. В стилях слоя примените тот же градиент, что и к предыдущей фигуре, то есть тот, который вы создали и сохранили в шаг 5.

Как вы можете видеть на скриншоте ниже, автор немного редактирует градиент по сравнению с оригинальным, ранее созданным. Это нужно для того, чтобы при добавлении графических элементов содовой, мы получили более реалистичный результат. Вы можете пока не редактировать этот градиент, добавив графику, вы сможете вернуться и подстроить.

Прим. переводчика: иногда, исходя из цвета и насыщенности, добавляемых вами изображений для дизайна напитка, вам придётся несколько корректировать настройки градиента, например, Непрозрачность или Режим наложения.

Шаг 7. К слою Top Shape 2 мы будем применять следующие стили слоя:
Внутренняя тень (Inner Shadow)

Затем создайте новый слой Shift + Ctrl + N и назовите его Top Gradient . Используя инструмент Прямоугольная область (Rectangular Marquee Tool), создайте выделение, которое охватит часть фигуры верхнего слоя Shape 2 . Затем активируйте инструмент Градиент (Gradient Tool), в верхней панели опций, нажав на предварительный просмотр в редакторе градиента, выберите градиент, созданный вами в предыдущих шагах.
Примените выбранный градиент по всей длине, как показано ниже:

Как только вы применили градиент, вызовите Свободную трансформацию комбинацией клавиш Ctrl + T Деформация (Warp).
Измените вручную слой с градиентом, ориентируясь по контуру слоя Top Shape 2 . Измените этому слою режим наложения на Перекрытие (Overlay), а так же примените обтравочную маску, щелкнув правой кнопкой мыши и выбрав опцию Создать обтравочную маску (Create Clipping Mask).

С помощью инструмента Перо (Pen Tool) нарисуйте фигуру как на скриншоте, таким образом, мы добавим блик. Назовите этот слой Light Left .

Измените этому слою режим наложения на Перекрытие (Overlay) и внизу палитры слоёв нажмите кнопку Добавить слой-маску (Add Layer mask). Сделайте активной эту маску, выберите инструмент Кисть (Brush Too), поставьте чёрный цвет (# 00000) и скройте на маске часть блика, как показано на скриншоте.

Существует несколько различных способов достижения такого же результата, однако это самый быстрый и простой способ управления точностью желаемого эффекта. Используйте кисть с учетом того, что кисть черного цвета скрывает слой на маске, а зона белого цвета на маске и есть то, что показано на слое.
Как только блик готов, дублируйте его, отразите по горизонтали, как делали это в предыдущих шагах и расположите копию, как показано на скриншоте.

Теперь с помощью инструмента Прямоугольник (Rectangle tool) создайте новую фигуру с такими настройками:
Заданный размер (Fixed Size) - 540пикс. ширина и 7пикс. высота
Цвет - белый (# FFFFFF)
Назовите этот слой Overlay Перекрытие (Overlay).

Затем, к этому слою добавьте маску слоя и, так же как и раньше, обработайте чёрной кисточкой часть фигуры, скрывая блик там, где он проявляется наименьше всего. А так же примените к этому слою стиль слоя Тень (Drop Shadow) с настройками указанными ниже.

Шаг 8. Теперь мы подошли к работе со слоем Top Shape 1 . П рименим к нему стили слоя.

После применения градиента добавим некоторые детали. Нужно загрузить выделение этой фигуры. Для этого выделите слой Top Shape 1 и щёлкните левой кнопкой мыши по миниатюре векторной маски с зажатой клавишей Ctrl . После этих действий мы автоматически получаем выделение данной фигуры. Теперь создайте новый слой Shift + Ctrl + N и назовите его Overlay и примените к нему такой же режим наложения - Перекрытие (Overlay). Активируйте инструмент Кисть Непрозрачностью (Opacity) 35% и обработайте этот слой как показано на скриншоте ниже.

Шаг 9. Выделите слой Bottom Shape примените следующие стили слоя - Внутренняя тень (Inner Shadow) и Наложение градиента (Gradient overlay).

Затем создайте новый слой и назовите его Bot Gradient . Используя инструмент Прямоугольная область (Rectangular Marquee Tool), создайте выделение, которое охватит часть слоя и примените к нему наш пользовательский градиент, который вы уже создавали.

Дублируйте созданный слой и расположите копию в палитре слоёв выше слоя Bot Gradient и расположите его так, как на скриншоте. Масштабируйте дубль с помощью команды Ctrl + T - Масштабирование (Scale).

Теперь выделите сразу первый, потом второй слой так же, из только что созданных, вызовите Свободную трансформацию комбинацией клавиш Ctrl + T , затем щёлкните правой кнопкой мыши и выберите опцию Деформация (Warp). Деформируйте слои, придав им аналогичную форму как на скриншоте.

Как только достигнете нужной формы, выделите оба слоя: Bot Gradient и его копию, и щёлкните правой кнопкой мыши, чтобы выбрать опцию Объединить слои (Merge Layers). У вас получится один слитый слой. Измените этому слою режим наложения на Жёсткий свет (Hard Light), а так же примените обтравочную маску, щелкнув правой кнопкой мыши и выбрав опцию Создать обтравочную маску (Create Clipping Mask).

Теперь создайте новый слой Shift + Ctrl + N и назовите его Overlay и примените к нему такой же режим наложения - Перекрытие (Overlay). Уменьшите Непрозрачность (Opacity) этого слоя до 70%. Активируйте инструмент Кисть (Brush) белого цвета размером 40 пикселей, Непрозрачностью (Opacity) 50% и нарисуйте новый элемент как показано на скриншоте.

Сейчас активируйте инструмент Прямоугольник (Rectangle tool) чёрного цвета (# 000000) и воспользуйтесь настройками ниже, чтобы задать ему точные размеры. Назовите это слой Ligne Shadow и установите ему режим наложения Умножение (Multiply). Уменьшите Непрозрачность (Opacity) этого слоя до 20%.

Затем добавьте маску слоя, выделите её, и чёрной кисточкой на маске скройте левую и правую часть фигуры для достижения эффекта, как показано ниже:

Шаг 10. В этом шаге мы добавим тень и отражение для нашей банки с содовой. Создайте новый слой и расположите его ниже слоя Bottom Shape . Назовите новый слой Shadow Soda .
Используя инструмент Овальная область (Elliptical Marquee Tool), создаем форму такую как на скриншоте. Эта форма должна иметь ширину чуть меньше чем нижняя часть банки. Заполните выделение чёрным цветом с помощью инструмента Заливка (Paint Bucket) и установите режим наложения слою на Умножение (Multiply).

Теперь идём в меню Фильтр - Размытие - Размытие по Гауссу (Filter> Blur> Gaussian Blur), ставим в настройках Радиус (Radius) 2,0 пикселей. И снова Фильтр - Размытие - Размытие в движении (Filter> Blur> Motion Blur), ставим Угол (Angle) 0, а Смещение (Distance) 100 пикселей.
Затем разместите слой с тенью, относительно банки, как показано на скриншоте.

Сейчас выделите в палитре слоёв слой Bottom Shape . Дублируйте этот слой, нажмите комбинацию клавиш Ctrl+ T , щёлкните правой кнопкой мыши и выберите опцию Отразить по вертикали (Flip Vertical). Расположите этот слой прямо под слоем Shadow Soda и примените стиль слоя Внутренняя тень (Inner Shadow).

Затем добавьте маску слоя, выделите её, и чёрной кисточкой на маске скройте области, как показано ниже:

Шаг 11. В этом шаге мы будем создавать конденсат в виде крупных капель воды. Это освежит дизайн нашей банки и будет выглядеть очень эффектно. Мы сначала создадим новую папку поверх всех слоев и назовите её Water . Внутри новой папки создайте векторную фигуру с помощью инструмента Эллипс (Ellipse), воспользовавшись настройками, указанными на скриншоте ниже. Заливку (Fill) этому слою уменьшите до 0%.

Затем мы добавим стиль слоя созданной фигуре.

Добавьте маску слоя к слою с созданной каплей. Будем работать на маске, чтобы создать мягкую прозрачность капельке. Активируйте инструмент Кисть (Brush) чёрного цвета (# 000000) размером 40 пикселей, Непрозрачностью (Opacity) 25% и поработайте на маске, чтобы получить результат примерно как на скриншоте.

С помощью инструмента Перо (Pen Tool) создайте две фигуры белого цвета (# FFFFFF), как показано на скриншоте ниже. Режим наложения для этих фигур поставьте Перекрытие (Overlay) и Непрозрачность (Opacity) 75%.

Для каждого слоя с бликом добавьте маску слоя и скройте области указанные на скриншоте.

Шаг 12. После того как вы создали каплю, выделите все слои в группе и слейте их в один слой, нажав правую кнопку мыши и выбрав опцию Объединить слои (Merge Layers). После этого смените этому слою режим наложения на Линейный свет (Linear Light).
Таким образом, когда мы начнём копировать слой с каплей, мы будем работать с меньшим количеством слоев, что делает файл меньше, а работу легче.

Теперь дублируйте слой с каплей столько раз, сколько вам необходимо, меняя при этом размер других капель с помощью Свободной трансформации (Free transform) и располагая их случайным образом. Посмотрите скриншот ниже для примера.
До слияния и растеризации слоёв с каплями воды вы можете создать отдельный документ, переместить в него папку с каплями воды, для применения в будущем, с возможностью масштабирования без потерь в качестве, так как капля создана из векторных фигур. Затем сохраните этот файл у себя на компьютере.

Шаг 13. Теперь давайте раскрасим нашу банку с содовой. Автор выбрал зелёный цвет # 76B51C ,вы выбирайте цвет соответственно вашим потребностям и дизайна.
Создайте новый слой над слоем Middle 1 и с помощью инструмента Прямоугольник YOUR DESIGN HERE! Это слой, где мы применим наш основной дизайн, используя Смарт объект (Smart Objec).

Теперь стоя на этом слое, щелкните правой кнопкой мыши и выберите опцию Преобразовать в смарт-объект (Convert to Smart Object). Немного позже вы узнаете об использовании смарт-объекта.

Выделите слой со смарт объектом и немного подкорректируйте фигуру с помощью Ctrl + T Деформация (Warp), как показано на скриншоте, затем щелкните правой кнопкой мыши и выберите опцию Создать обтравочную маску (Create Clipping Mask).

Затем создайте новый слой над слоем Top Gradient и снова с помощью инструмента Прямоугольник (Rectangle tool) нарисуйте прямоугольник с указанными размерами как на скриншоте. Назовите этот слой YOUR DESIGN HERE TOP . И так же щелкните правой кнопкой мыши и выберите опцию Преобразовать в смарт-объект (Convert to Smart Object).

Снова выделите слой со вторым смарт объектом и немного подкорректируйте фигуру с помощью Ctrl + T Деформация (Warp), относительно слоя Top Shape 2 , затем переместите этот слой под слой Top Gradient и к нему автоматически применится обтравочная маска.

Шаг 14. Теперь выберите слой YOUR DESIGN HERE! Дважды кликните по миниатюре смарт-объекта и перед вами откроется новый файл, содержимое которого и будет соответствовать вашему смарт-объекту. Здесь на нескольких слоя можете создать свой дизайн или воспользуйтесь уже готовым дизайном нашей банки, который можно .

Прим. переводчика: По данной ссылке дизайн уже слитых слоёв, но если вы создадите свой, то внутри
смарт-объекта, так же как и в обычном документе можно создать дизайн с отдельным слоем для каждого элемента, это нужно для того, чтобы вы могли с лёгкостью менять и редактировать изображения и текст, исходя из ваших потребностей.

Как только ваш дизайн внутри смарт-объекта будет готов, нажмите Ctrl + S , чтобы сохранить изменения. После этого можете закрыть файл, который открывался после двойного щелчка по смарт объекту и посмотреть на основном документе, что ваш дизайн теперь присутствует на банке содовой с учетом всех бликов и теней.
Теперь сделайте то же самое со вторым смарт-объектом YOUR DESIGN HERE TOP. Дважды кликните по миниатюре смарт-объекта и перед вами снова откроется новый файл, в котором так же как и раньше создайте свой дизайн или воспользуйтесь тем, который предложен в архиве.

Мы закончили создание удивительной банки с содовой, которая может быть использована в качестве макета. С помощью смарт-объектов вы с лёгкостью сможете менять дизайн банки, применяя к ней любые изображения и текст. В завершение, автор добавил немного размытый фон, чтобы главный акцент был на банке, и она выглядела как настоящая.

Mockup или mock —up (макет) - модель того или иного продукта, выполненная в естественных пропорциях, созданная для быстрого предоставления дизайна продукта в готовом виде, с целью более чёткого представления дизайна конечного продукта.

Многие из нас знают, что это, а тем, кто не знает будет полезно.
Разыграем ситуацию, которая бывала, наверняка, у всех.
Вы посылаете заказчику макет на утверждение, а он Вам в ответ:

— Мне нравиться, но я не уверен будет ли это смотреться хорошо на поём продукте…

Тут-то Вам и пригодится Mockup . Суть его заключается в следующем, у Вас есть изображение продукта в нужном ракурсе, в нужной ситуации, и Вы как бы применяете к нему Ваш дизайн. В процессе его «как бы » применения происходят все нужные преобразования, это ракурс, всевозможные искажения, наложения эффектов и т.д.

Опять же, для тех, кто не знает, расскажу…

Как это работает?

1. Вы загружаете Ваш mockup (psd ) в фотошоп и в области управления слоями ищите слой с таким значком: . Чаще всего этот слой подписан «Put your design here », «Your design », «Double click me », «Edit me » и т.п.

2. Кликаете в область отмеченную красным облаком на картинке ниже, а именно на значок смарт слоя
3. У Вас откроется новое окно, в которое следует поместить Ваш дизайн, после чего нажимаете Ctrl+S (сохранить)
Возвращаетесь в предыдущее окно, ВУА-ЛЯ! Ваш дизайн на продукте!

На просторах интернета можно найти великое множество мокапов разного качества, вида, стиля, платных и бесплатных .

Но, не редко бывает так, что нужный нам продукт мы не можем найти. Для этого и пригодится этот материал. В нём я расскажу о принципах создания и работы мокапов.

Как сделать свой mock-up?

Для начала найдём картинку хорошего качества какого-нибудь необычного предмета без рисунков, а лучше белого цвета.
Здесь, как говорится, Google в помощь, или Яндекс – кому что нравится.
Для своего мокапа я решил взять чайник.

Итак, начнём…

Для начала отделяем картинку от фона. Его можно удалить вовсе, фон у меня будет свой.

Затем создаём новый пустой слой, и преобразуем его в смарт-объект. Как я уже говорил, в основе работы мокапа лежит именно смарт-объект.

Опять же. Для тех. Кто не знает, на пустом слое нажимаете правый клик и выбираете «Преобразовать в смарт-объект», после чего иконка вашего слоя будет с таким значком: .

Далее, применяем маску предыдущего слоя к пустому слою. На иконке предыдущего слоя кликаем правой кнопкой мыши (ПКМ) и нажимаем: «Выделить пикселы ». Затем не снимая выделения нажимаем пустой слой и кликаем под областью слоёв вот этот значок: . Если Вы всё сделали правильно, то к Вашему пустому слою добавится слой с белым силуэтом предыдущего слоя, в моём случае с силуэтом чайника.

Теперь, открываем наш смарт-объект двойным кликом на этот значок: , и для удобства работы помещаем в него сетку (Свою я нарисовал в иллюстраторе), нажимаем CTRL+S и возвращаемся в предыдущую вкладку, где видим вот такую картину:

Для удобства работы примените к слою с сеткой (Пустой слой ) эффект «Умножение ».

Теперь начинается самая трудоёмкая часть создания мокапа, это искажение. Тут без пространственного мышления не обойтись.

Для этого на Вашем слое с сеткой (Пустой слой ) нажмите на значок в виде звеньев цепи между самим слоем и слоем-маской. Если звенья пропали, то Вы всё сделали правильно.

Теперь нажимаем на слой с сеткой, чтобы он выделился белыми уголками и идём по пути: Редактирование → Марионеточная деформация.

Мы видим. Что наш слой покрылся непонятной сеткой. Теперь. Нам нужно прокликать его по контуру расставляя узлы для фиксации нашего фона. Не бойтесь ошибиться, программа не даст Вам поставить узел не там, где нужно, о чём сообщит вам содержимое этого окна:

Это трудоёмкий процесс, запаситесь терпением.

Когда с контуром вы закончите, Ваш слой будет выглядеть примерно так:

Дальше всё тем же инструментом расставляем маркеры и деформируем наш слой с сеткой (пустой слой) так, чтобы сетка естественно облегала сам предмет. По окончании деформации нажмите Enter . Если Вы допустили ошибки при деформации, то скорее всего то, что заметно на сетке, не будет видно на продукте с другим дизайном, если, конечно, в основе Вашего дизайна нет сетки.

На этом этапе Вы можете поставить в Ваш смарт-объект любой дизайн, чтобы посмотреть хорошо ли Вы деформировали слой.

Закрывая глаза на кучу недочётов, мой вариант меня устраивает. Далее, Вам нужно проделать кучу операций со слоями таких, как дублирование, эффекты наложения, тени и прочее, чтобы Ваш мокап смотрелся органично. Кроме того, Вы можете создавать смарт-объекты для каждой части Вашего мокапа отдельно например: крышка, ручка и т.д. На этом, пожалуй, всё.

Главное помните, что качество Вашего мокапа зависит только от Ваших способностей.

Часто нам хочется показать свои работы красиво и интересно, но не всегда это получается сделать, просто выложив саму работу. Гораздо интереснее выглядит подача, где картинки как будто нарисованы в альбоме или используются на этикетках продуктов, для этого как раз и нужны мокапы.

Мокап (или mock-up на английском) - это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном. Бывают и просто JPEG картинки, называемые мокапами, но работать с ними сложно, нужно долго искажать картинку и вписывать ее в окружение.

Смарт-объекты - очень крутая штука. Если вы хоть раз уменьшали картинку в фотошопе, а потом растягивали ее на большой размер, наверняка получалась примерно такая история, потому что Фотошоп искажает файлы.

То же самое и с шрифтами и с эффектами. Для того, чтобы этого избежать, стоит превращать все элементы в смарт-объекты. Для того чтобы создать смарт-объект, откройте любое изображение в фотошопе. Далее преобразуйте фоновый слой в обычный (редактируемый), для этого двойным щелчком мыши кликните по нему и нажмите ОК либо создайте его дубликат, для этого нажмите комбинацию клавиш Ctrl+J. Затем, щелкнув правой кнопкой мыши по преобразованному/дублированному слою из контекстного меню выберите «Преобразовать в смарт-объект». После того, как Вы это сделали, на миниатюре Вашего слоя появится небольшая иконка, которая означает, что слой является смарт-объектом.

По сути смарт-объект - это контейнер, изменения которого не затрагивают объект внутри. Можно растягивать, уменьшать, применять эффекты не теряя качества картинки или шрифта. По умолчанию кстати все картинки, которые перетаскиваются в ФШ, становятся смарт-объектами.

Редактирование смарт-объектов происходит как редактирование отдельного файла в отдельном окне (создается временный файл в формате.psb, привязанный к основному файлу). Изменение и сохранение этого файла приводит к изменению основной картинки.

Пользоваться мокапами очень просто.

• Скачиваем нужный PSD, открываем его и ищем слой с примерным названием «Your design here» или что-то подобное.
• Дважды щелкаем на иконке смарт-слоя - открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
• После этого закрываем это окно, выбрав «Да» при вопросе нужно ли сохранить.

Все, в исходном файле ваша картинка искажается и вписывается в объект. В любой момент картинку можно заменить или подвинуть, опять же повторив все действия выше.

Сейчас огромное количество ресурсов, где можно найти мокапы для собственных нужд, чтобы показать свои работы в лучшем свете. Вот несколько ресурсов, где можно найти неплохие мокапы бесплатно.

На самом деле мокапы не очень сложно сделать самому, владея элементарными навыками работы в фотошопе. Вот прекрасное видео, где на примере футболки показано как сделать мокап, последовательность работы можно перенести вместо футболки на любой другой предмет.

Показывайте свои работы красиво - пользуйтесь мокапами

В этом уроке мы узнаем, как создать реалистично выглядящий мокап упаковки (коробки) в Adobe Photoshop.

Этот урок я сделал для того, чтобы показать как можно создавать свои собственные показы упаковок, для презентации клиентам например. Сначала мы сделаем основу, а затем уже наложим готовый дизайн на упаковку. И в конце уже добавим реалистичности, путем добавления бликов и теней.

Шаг 1.

Вначале создадим новый документ, с размерами 1588х1191px и зальем фон #d2d3d5 цветом.

Шаг 2.

Для того чтобы все получилось аккуратно, лучше всего использовать Линейку и Сетку . Для того чтобы активировать Линейку зайдите в Просмотр > Линейка (Ctrl + R) , а чтобы активировать сетку зайдите в Просмотр > Показать > Сетка (Ctrl + ,) .

Также вот мои настройки сетки.

Шаг 3.

Создадим новую Группу и назовем ее Right Side . Затем создаем новый слой и также назовем его Right Side . Используя инструмент Прямоугольное выделение , выделим прямоугольник размером 795х1078px . Этот прямоугольник можно залить любым цветом, я для примера залил белым (#FFFFFF) .

После этого я преобразовал этот слой в Смарт-объект , нажав правой кнопкой мыши по нему и выбрав Преобразовать в Смарт-Объект . Я это сделал для того чтобы при любых трансформациях слой не терял качества и впоследствии я мог быстро вставить готовый дизайн.

Шаг 4.

Теперь я создаю по примеру правой стороны, такую же группу но называю ее Left Side . А затем создаю в ней новый слой и тоже называю его Left Side . Точно также как и с правой стороной я делаю выделение размером 483х1078px и заливаю ее любым цветом. После этого преобразую этот слой в Смарт-объект .

Шаг 5.

После этого я начинаю преобразовывать свои слои по форме приблизительно в 3д форму коробки. Для начала беру Right Side , затем выбираю Свободную трансформацию (Ctrl + T) и уменьшаю одну сторону примерно на 75% по высоте. Меньшая сторона у меня приблизительно получилась 815px по высоте.

Шаг 6.

Для левой стороны мы делаем аналогичную трансформацию. Будьте внимательны чтобы вертикальные линии все остались вертикальными. И совместите по итогу левую и правую сторону чтобы получилось как на картинке у меня.

Шаг 7.

Теперь перейдем к наложению дизайна на упаковку. Именно для этого мы использовали смарт-объекты. Выберем любую сторону и нажмем в панели слоев на выбранном смарт-объекте правой кнопкой и выберем Редактировать Содержимое. Откроется исходное состояние прямоугольника, на которое мы накладываем наш дизайн. После этого закрываем этот документ с сохранением и автоматически грань должна обновиться.

Вот пример моего дизайна.

Шаг 8.

После того как мы вставим дизайн в смарт-объекты и сохраним их, у нас должна получиться вот такая картинка.

Шаг 9.

В принципе уже выглядит неплохо. Добавим тени чтобы добавить реалистичности.

Создадим новую группу которую назовем Shadows. И в ней создадим новый слой который назовем Back . Далее сделаем выделение по форме упаковки, проще всего это сделать нажав по слоям левой и правой стороны зажав одновременно Ctrl и Shift . У вас должно получиться выделение по форме коробки. Затем залейте это выделение черным цветом. А после этого трансформируйте и сожмите по вертикали и верх тени сдвиньте влево. Как показано на рисунке. И после этого используйте на этом слое Размытие по Гауссу и уменьшите прозрачность этого слоя.

Шаг 10.

Теперь создадим новый слой и назовем его Bottom . После этого выберем инструмент Кисть (B) и выберем настройки примерно как у меня.

Теперь нарисуем с помощью этой кисти нарисуем еще одну тень, в месте соприкосновения коробки с поверхностью.

Должен получиться примерно такой вид.

Шаг 11.

Теперь перейдем к группе Right Side создадим в ней новый слой и назовем его Shadows . К этому слою нужно обязательно добавить маску по размеру правой стороны либо сгруппировать со слоем на котором у нас дизайн. После этого этот слой переводим в Режим наложения Мягкий свет . И выбираем инструмент Кисть (B) делаем у нее мягкие края и аккуратно рисуем нижний полукруг по форме английской буквы U.

Должно получиться нечто подобное.

Шаг 12.

Тоже самое повторяем и для левой стороны коробки.

Привет, друзья. Сегодня поговорим о том, как сделать мокап для демонстрации вашего landing page. Думаю, тем, кто делает посадочные страницы на постоянной основе пригодится экшен для

Photoshop, который в несколько кликов сделает из макета отличный mockup, который даже посредственный дизайн превращает в стильный и презентабельный.

Несколько лет назад, в одном из видеокурсов по веб-дизайну (в бонусах), наткнулся на урок с оформлением сайтов в перспективе. Выглядело это очень круто и вот о чем я говорю: UI100Day-01 by Arche阿北

Давайте посмотрим, как установить себе такой экшен и разберемся с настройками. Для начала скачайте и распакуйте архив:

Затем, запустите Photoshop и откройте 2 окна «Операции» и «Стили». Если в правом меню их нет, то можно включить. Для этого, в верхнем меню перейдите в «Окно» и поставьте галочки напротив «Стили» и «Операции». Тогда соответствующие иконки появятся на экране.

Теперь раскройте окно «Операции» и нажмите на иконку меню этого окна.

Перед вами откроется контекстное меню, в котором выбираем «Загрузить операцию».

Перейдите в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric Mock-UP».

Теперь, перейдите в «Стили» и проделайте туже операцию, только добавьте файл стилей.

Далее, как и в прошлый раз, переходим в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric_MockUP_styles».

Обратите внимание на то, что в папке есть документация в формате PDF.

Делаем мокап дизайна сайта

Настало время для творчества. Но впереди еще несколько нюансов.

1. Экшен работает только с картинками или группами. То есть 1 картинка — 1 слой. или объединяем элементы картинки в группу.
2. Работать можно и с несколькими картинками одновременно, но все они должны быть цельным объектом и располагаться на отдельном слое либо разделены по группам.
3. Документ должен иметь разрешение 72 dpi.

Открывайте картинку в Фотошопе и давайте познакомимся с настройками.

Первым делом убедимся, что у нас открыта всего лишь одна картинка, позже я покажу как работать сразу с несколькими, но начнем с одной. У меня это дизайн, взятый у одного из участников Dribbble.

Изначально картинка выглядит следующим образом:
Rexchange Currency Exchange Website
by uithemes

С этим изображением и будем работать. Давайте откроем окно экшенов и посмотрим на настройки плагина.

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

Давайте раскроем настройки горизонтального экшена и разберемся с основными параметрами, которые можно задать. Благо, их не так и много, всего 3.

Начнем с того, в какую сторону должна быть направлена изометрия.

Я выбираю левую сторону. «ONE», «TWO» как раз и означает количество картинок в проекте. Мы договорились, что начнем, пока, только с 1.

Кликните по строке «(ONE) Image — Transform LEFT», а затем по значку « » в нижней строке. Начнется магия, а на самом деле, работа экшена (записанного порядка действий разных команд).

Добавлю белый фон и в результате получаем такое отображение сайта:

Даже на белом фоне и в уменьшенном виде смотрится достаточно интересно. А если добавим цветной фон?

Как по мне, получилось еще интереснее. А весь процесс занял секунд 15. Вручную такая перспектива делалась бы дольше. https://youtu.be/mPgQFPeOny4 Демонстрация работы экшна

Но это не все настройки. Еще есть возможность изменять глубину или высоту элемента. Возьмем несколько иконок для наглядности. А заодно покажу как работать с несколькими изображениями

Создаю проект, в котором 3 слоя. На каждом слое по 1 иконке.

Убедитесь, что находитесь на первом слое и переходите в окно «Операции». Выберите пункт «(THREE) Images — Transform LEFT » и жмите « ».

Давайте теперь увеличим высоту одной из иконок. То есть сделаем цилиндр зеленой иконки чуть больше.

Для этого, убеждаемся, что находитесь на нужном слое и выбираем одну из команд «EXTRUDE ADD (+) «, например, я сделаю глубину на 30 пикселей больше.

Кроме этого, еще можно управлять тенью. То есть делать ее больше. Давайте попробуем сделать ее на 80 пикселей длиннее, чтобы была заметна разница.

Как видите, тень теперь стала намного больше и заметнее. Я не говорю, что стало лучше, просто для примера гиперболизировал результат.

Кликнув по иконке смарт-объекта можно отдельно поработать с тенью, изменить цвет, положение и т.д., но это уже детали работы с Photoshop и статья не об этом. Если возникнут вопросы, пишите в комментариях.

Еще есть настройка размытия, но я не нашел ей применения и не буду писать о ней в статье. Если кому-то интересно — попробуйте. Алгоритм работы с настройкой такой же как и выше.

• Делаем активным нужный слой;
• находим настройку размытия;
• применяем с нужным параметром;

Вот так просто, за считанные секунды можно сделать достойный мокап сайта в целом и отдельных его элементов. Как вам идея? Есть ли способы полегче? Какими плагинами и экшенами пользуетесь вы?