Делаем mockup в Photoshop для презентации landing page. Мокап ликбез — все что нужно знать про мокапы

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

• Выбирается окружающая среда (десктоп, мобильное устройство, смарт-часы и т.д.)
• Загружается скриншот сайта (или его URL)
• Результат сохраняется в нужном разрешении.

Все. Легко, не правда ли? В некоторых генераторов мокапов есть возможность демонстрации дизайна в большом количестве ракурсов, что существенно расширяет возможности дизайнера. FreelanceToday предлагает вашему вниманию 10 бесплатных генераторов макапов.

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

Количество макетов: 155+

Среда: десктоп, мобильные устройства, книги, баннеры, визитки и многое другое

Формат: PNG

Разрешение по ширине: 700-3800 пикселей.

Smartmockups это бесплатный генератор мокапов с большим количеством сцен в различном разрешении. Созданные мокапы можно использовать как угодно: в цифровом или печатном виде, при наличии нужных навыков можно создавать новые сцены, готовые макеты разрешается использовать в личных и коммерческих проектах. Все предметы, с помощью которых можно продемонстрировать дизайн, разбиты на категории для удобства пользователя. Чтобы найти нужный макет, можно воспользоваться функцией поиска по тегу. Также можно отфильтровать изображения по запросам iOS, Android, Windows Phone и так далее.

Количество макетов: 150+

Среда: десктоп, ноутбук, планшет, смартфон, часы

Формат: PNG

Разрешение по ширине: 880-2500 пикселей.

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

Количество макетов: 25+

Среда: ноутбук, телефон, планшет, рамки

Формат: JPEG

Разрешение по ширине: 960-5000 пикселей.

Бесплатный генератор мокапов Dunnnk содержит более 55 уникальных предметов. В основном создатель генератора сосредоточился на демонстрации дизайна для iPhone. Это специализированный генератор, поэтому выбор изображений компьютеров и ноутбуков весьма невелик. За дополнительную плату можно скачать некоторые готовые мокапы в формате PSD.

Количество макетов : 55+

Среда : iPhone, Android, MacBook, iMac, Apple Watch

Формат: JPEG

Разрешение по ширине : 2000 пикселей.

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

Количество макетов: 20+

Среда: iPhone. Android, MacBook, браузеры, физические носители

Формат: JPEG

Разрешение по ширине: 320-2560 пикселей.

Главным отличием бесплатного генератора мокапов MockUPone является большое количество исходных изображений. К примеру, если нужно показать, как будет смотреться приложение на экране iPhone, то у дизайнера есть широкий выбор: представлены модели 7, 7 Plus, 6, 6 Plus и так далее до 5С. Однако есть и минусы, все макеты сделаны в одном ракурсе, в фас, что несколько ограничивает возможности реалистичного показа. Готовые изображения можно сохранить в форматах JPEG, PNG или PSD, рекомендуемый размер файла 1242х2208 для iPhone. Помимо смартфонов от Apple в генераторе есть множество других макетов электронных устройств, в том числе телевизоров.

Количество макетов: 80+

Среда: iOS, Android, Windows Phone, ноутбуки, десктопы, телевизоры

Формат: PHG, JPEG

Разрешение по ширине: 2000+ пикселей.

В MockDrop можно найти одну из самых больших коллекций бесплатных макетов, генератор предлагает на выбор более 100 изображений. Чтобы использовать этот инструмент, потребуется установить на компьютер последнюю версию браузера Chrome, Firefox или Safari. Сервис очень быстрый, создатели сервиса постарались максимально сократить время работы над мокапом. Пожалуй, это самый быстрый генератор мокапов из всех и при этом он совершенно бесплатный.

Количество макетов: 100+

Среда: смартфон, ноутбук, десктоп, часы, планшет, телевизор

Формат: JPEG

Разрешение по ширине: 3000 пикселей.

MediaModifier это очень мощный генератор мокапов, но бесплатных изображений в нем немного. В среднем изготовление качественного макета обойдется дизайнеру в $3,5. Но если поискать, то вполне можно найти интересный бесплатный исходник. После того, как нужный исходник будет найден, можно приступать к загрузке скриншота и его трансформации под размер дисплея устройства.

Количество макетов: 10+

Среда: компьютеры, смартфоны, ноутбуки, физические носители

Формат: JPEG

Разрешение по ширине: 2400.

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

Количество макетов: 20+

Среда: iPhone, iMac, iPad, телевизор, постер, рамка

Формат: PNG

Разрешение по ширине: 1200 пикселей.

Генератор GetMocky содержит более 100 качественных макетов, для удобства пользователей разбитых на несколько категорий. Поиск подходящего исходника осуществляется по тегам. Это позволяет найти нужный макет в самые короткие сроки. Среди бесплатных шаблонов можно выбрать файлы малого и среднего размера. Если же нужно создать изображение в формате HD (1440 пикселей), Full HD (1920) или Original Size (4000+), придется заплатить.

Количество макетов: 100+

Среда: десктоп, ноутбук, планшет, смартфон, часы.

Формат: PNG

Разрешение по ширине: 480 и 720 пикселей.

ВМЕСТО ЗАКЛЮЧЕНИЯ

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

Здравствуйте, сегодня я опишу как делаются шаблоны (Mock-up или Mockup) для презентаций своих работ. Основные плюсы Mock-up – быстрое редактирование макетов продукции, без затрат времени на создание всех эффектов презентации, но нужно сначала создать шаблон, приступим.

Я решил сделать Mock-up для представления фирменного стиля и добавил в шаблон телефон, что бы показать и «ИТ» тематику. Вся работа выполнялась в программе Adobe Photoshop CS6.

Создаю документ с настройками – 297х210 мм (альбомный формат А4), 300dpi. Делаю разметку направляющими (середина по горизонтали и вертикали), вставляю текстуру бумаги:

Основной файл подготовлен, начинаем создавать нашу продукцию – делаем визитки.

Создаем новый документ с размерами 90х50 мм 300dpi (почему я не делаю, в основном документе, я опишу ниже), и начинаем делать визитку:

Все было создано за короткий строк, и поэтому все делалось сразу, «экспромтом». Заливаем градиентом файл:

Создаем квадраты, переворачиваем ромбами, уменьшаем, дублируем, получаю результат:

Вставляю текст, работаю с типографикой:

Одна сторона готова, делаем по аналогичному принципу сторону «б»:

Визитки готовы.

Вставляем наши визитки в основной документ, т.к. мы все создавали в размерах 1:1 (в соотношении уже напечатанной продукции) и 300 dpi, у нас получается правильное соотношение в Mock-up.

Переводим слои визиток в «смарт обьекты».

Почему я не делал визитки, сразу, в документе – можно было делать все сразу в документе, но конечный файл нашего Mock-up получится очень большим (и «тормознутым»), легче работать с отдельными файлами, так шаблон у нас получится маленького размера, и при этом совершенно не пострадает в функционале. Поэтому, я создаю шаблон каждой продукции в новом файле, а потом вставляю в Mock-up.

Смотрим на результат:

Делаем тень от визиток. Можно сделать разными способами, я делал так - создаем новый слой, инструментом «прямоугольное лассо» выделяем контуры тени, заливаем линейным градиентом, регулируем прозрачность слоя. Можно просто закрасить нужный участок «мягкой» кистью.

Не забываем, что вся «продукция» Mock-up"а должна быть смарт объектами.

Визитки расположены на документе, приступаем к созданию СД(ДВД) диска.

Создаем новый документ:

Делаем разметку диска, не забывая соблюдать правильные размеры:

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

Вставляем наши объекты и текст, созданный в визитках:

Диск готов, вставляем его в основной документ, рисуем ему тень (по аналогичному принципу, как в визитках):

У нас заканчивается место на «холсте», добавляем высоты и поправляем горизонтальную направляющую:

Я решаю создать конверт, формата Е65, для документации. Создаю новый документ размерами 220х110 мм 300 dpi, дальше все делаю аналогично, как и с визиткой\диском.

Замечание – «вырубка» для прозрачного «окошка» должна находится с отступами от краев: слева – 20 мм, снизу – 15 мм.

Вставляем конверт в наш Mock-up, добавляю тень:

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

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

Замечание – соблюдаем размеры, этот телефон примерно 59x124 мм, но мы его переворачиваем на 90 градусов.

Структура слоев телефона (в смарт объекте):

Рисуем тень телефона. Опускаем конверт вниз и ищем оптимальное расположение нашей продукции:

Аналогично всем выше написанным, создаю «карандаши», работаю над их цветом и «брендированием»:

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

Вот и наш Mock-up создан, переходим к второй части статьи.

Как редактировать Mock-up

Открываем документ mock-up.psd, заходим на нужный нам слой, пусть это будет «диск»:

Нажимаем два раза мышкой на смарт слое, выскакивает предупреждение:

Нажимаем «ок», открывается новое окно с нашим диском. Дальше редактируем, что пожелаем, например цвет (меняем на темно красный):

Закрываем документ с диском, выскакивает предупреждение:

Нажимаем «Да», смотрим как изменился наш Mock-up:

Вот так просто, редактируем наш реалистичный шаблон.

Подумав, я решил сделать третью часть статьи.

Вкратце, опишу как сделать иллюзию 3Д шаблона.

Для начала разберемся, из чего мы можем сделать 3Д, мобильный и карандаши сразу убираю, т.к. они имеют толщину, и нужно будет заново создавать эти объекты, исходя из угла обзора, это долго. Оставляю диск и визитки.

В этом уроке вы узнаете, как создать макет (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. Дважды кликните по миниатюре смарт-объекта и перед вами снова откроется новый файл, в котором так же как и раньше создайте свой дизайн или воспользуйтесь тем, который предложен в архиве.

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

Довольно часто на мой сайт заходят по запросу: «Как работать с мокапами в фотошопе?» А статьи, посвященной этому вопросу на моем сайте нет. Вернее до сегодняшнего дня не было, т.к. я решил восполнить этот ужасный пробел и написать небольшой мануал по работе с мокапами. В своей статье я решил использовать бесплатный мокап керамических бутылок, на которых можно изменять этикетку и цвет заднего фона всей композиции. Хочу, однако, предупредить, что все мокапы разные — в том плане, что изменяться могут другие детали изображения — не обязательно этикетки или фон… Но общий принцип работы с мокапами вам будет понятен после ознакомления со статьей и в дальнейшем вы без труда сможете пользоваться любым мокапом.

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

Первое, что мы должны сделать — распаковать архив. Нам нужен непосредственно файл Ceramic Bottle PSD MockUp.psd

Открываем его в Фотошопе и смотрим:

Открыли файл и смотрим на панель со слоями

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

Смарт-объект имеет свою пиктограмму

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

Нас интересует слой со смарт-объектом. Для наглядности откроем папку слоев Regular Color, а не Ceramic label — там такой же смарт-объект, только цветом темнее и будет лучше нам виден.

Для его редактирования ДВАЖДЫ щелкаем на его значке. Именно на значке — эта область выделена рамкой на рисунке выше.

Открывается окно смарт-объекта. Его можно редактировать всеми доступными средствами. С этой точки зрения он ничем не отличается от обычного слоя.

Смарт-объект в режиме редактирования

Вырежем надпись «Ceramic». Неважно как. Кто как привык. Ластиком или рамкой + Del. Главное убрать надпись в середине. И нажимаем Ctrl+S — сохраняем этот слой.

После сохранения надпись исчезла и на бутылке

Как видите удаленная нами надпись в смарт-объекте пропала и с бутылки.

А теперь напишем что-нибудь свое. Например ИНФОРМ-ДЕПО. Красивым таким поносным цветом. И снова сохраним слой (Ctrl+S). Смарт-объект можно при этом не закрывать. Смотрим:

Наша надпись оказалась на бутылке

Как видите, надпись оказалась там, где надо. Несложно, правда? Слой смарт-объекта может содержать свои слои как текстовые, так и графические. Вы можете загрузить в этот слой сторонний AI, EPS, PNG и т.д. Главное — нажимать Ctrl+S всякий раз, когда вы в нем что-то поправили.

Теперь поменяем цвет фона. Раз мы закончили с надписью, закроем смарт-объект с надписью и ДВАЖДЫ щелкнем на пиктограмме корректирующего слоя. Да-да. В данном примере это не что иное, как корректирующий слой с фильтром Photo Filter.

Корректирующий слой для фона

Тычем в квадратик с цветом и выбираем требуемый. Все.

Меняем цвет фона на поносный

Спасибо за внимание.

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

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

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

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

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

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

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

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

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

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

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

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