Как сделать мокап на кружку в фотошопе

Создание мокапа в Adobe Photoshop

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

При подготовке используйте несколько источников освещения и делайте снимки сразу под несколькими углами, чтобы впоследствии иметь возможность работы и с другими вариантами. Также учтите, что некоторые разновидности мокапов могут создаваться и без исходников, в том числе при помощи 3D-инструментов, однако в таком случае требуются соответствующие навыки работы с Фотошопом.

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

Этап 2: Работа с цветом

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

Подробнее: Замена цвета объектов и кожи в Adobe Photoshop

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

Этап 3: Подготовка объектов

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

1. Через главное меню «Файл» на верхней панели программы произведите открытие нужного изображения. Сложность и дальнейший порядок действий, как уже было сказано, зависит от выбранного объекта.
2. Выберите инструмент «Прямоугольник» на панели в левой части экрана и создайте соответствующую форму поверх области на изображении, где должен находиться заменяемый элемент. Лучше всего за основу брать броские цвета, чтобы не было проблем на следующем шаге.

Основной акцент необходимо делать на углах, по необходимости используя и другие инструменты.

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

Этап 4: Добавление изображений

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

1. Находясь в ранее подготовленном файле, дважды кликните по миниатюре смарт-объекта на панели слоев. Также можете щелкнуть правой кнопкой мыши и выбрать «Редактировать содержимое».
2. Открывшийся в итоге документ представляет собой выбранный объект без учета всех внесенных изменений, которые, однако, будут автоматически применены после сохранения. Таким образом, все, что нужно сделать, это добавить требуемые элементы, будь то текст или картинки.
3. Чтобы применить изменения, воспользуйтесь сочетанием клавиш «CTRL+S» или пунктом «Сохранить» в меню «Файл». При возращении к изначальному файлу можно сразу заметить результат проделанной работы, так как ранее пустая область изменится соответствующим образом.

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

Этап 5: Коррекция, освещение и тени

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

1. Щелкните ЛКМ по слою и на нижней панели в той же колонке воспользуйтесь кнопкой «Создать новый корректирующий слой или слой-заливку» и выберите пункт «Кривые».
2. Переместите появившийся корректирующий слой над смарт-объектом, нажмите ПКМ и выберите «Создать обтравочную маску». В итоге рядом с миниатюрой должна появиться стрелочка, указывающая на расположенный ниже слой.
3. На вкладке «Свойства» используйте график уровней, чтобы придать изображению приемлемый вид. К сожалению, более конкретные рекомендации дать невозможно, потому что каждый случай индивидуален.

Этап 6: Завершение работы

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

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

Как сделать мокап — пошаговая инструкция

Красиво представить идею — сложная работа. Требуется продемонстрировать, каким образом визуал смотрится в реальной жизни. Mock-up— идеальный помощник для решения такой задачи. В этой статье расскажем, как сделать мокап, какие сервисы (Illustrator или Figma) лучше использовать. Более того, покажем примеры удачных мокапов и дадим пошаговую инструкцию, как они создаются в Photoshop.

Важно. В статье будем использовать синонимы мокап = макет = прототип.

Что такое мокап продукта

Mock-up — это визуализация работы дизайнера. С помощью него внешний вид нового продукта выглядит максимально приближенно к реальности. Чтобы понятно представить разработанную концепцию нового продукта, дизайнерам требуется наложить визуал на шаблонную картинку: футболку, кружку, коробку, экран телефона. Какие преимущества можно выделить в этом дизайнерском приеме:

• Демонстрация дизайна с привязкой к контексту. Можно показать упаковку в нескольких вариантах: мерч, полиграфию или как смотрится новая концепция на экране гаджета. Сразу видны все достоинства и недостатки предлагаемых идей.
• Возможность мгновенно донести свои наработки заказчику. Устные объяснения не смогут убедить клиента, что дизайн / надпись / интерфейс будет идеально смотреться. Проще сделать прототип, который сразу даст точное представление о выбранной концепции.
• Мокапы открывают неограниченные возможности для дизайнеров тестировать гипотезы и накидывать новые варианты. Например, в приложении вы нанесли на футболку принт и увидели, что некоторые детали не видны. Сделали новый мокап — и уже без этих деталей. Вы сразу проверяете, нужны эти мелочи на принте футболки или нет. Это удешевляет работу: не нужно наносить принт на реальную футболку — достаточно сделать это в специальном приложении.
• Визуализация фирменного стиля в брендбуке. Демонстрируйте клиенту, как меняется восприятие фирменного стиля при изменении цветов, логотипов и шрифтов. Это помогает маркетинговым отделам формировать успешные рекламные компании.
• Сокращаются сроки разработки нового дизайна. Создавайте множество вариантов одного продукта, чтобы клиент выбрал лучший. А если вы в дороге, а заказ срочный — сделайте мокап с телефона. Сервисы это позволяют.

Есть масса предложений, как сделать мокап бесплатно. Как вариант — выберите бесплатный шаблон на одном из сервисов, о которых мы расскажем ниже.

Помните. Mock-up интерфейса — это всегда статичная визуализация. После того как добавлена ссылка, всплывающее окно или другие функции, он становится прототипом. А ненавязчивой текстовой визуализацией служит White paper. Подробнее о вайт пейпер читайте в статье.

Вот примеры макетов:

Источник — Телеграм-канал Мокапыч

Зачем дизайнерам использовать мокапы

Это открывает неограниченные возможности улучшить имеющийся дизайнерский проект, используя Photoshop. Специалист может добавлять или убирать любые детали одним кликом. Дизайнеры примеряют образы своих идей на реальном предмете, выбирая лучшее. Мокапами пользуются, чтобы показать клиенту, как будет выглядеть дизайн в реальной жизни, и продать ему новую концепцию. Что показывают с их помощью:

• фирменный стиль и брендбуки;
• проекты обложки журнала, книги, брошюры;
• упаковочные материалы;
• баннеры, плакаты, вывески;
• различную печатную продукцию вроде визиток, блокнотов, фирменных бланков;
• корпоративный мерч.

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

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

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

Самые простые сделать мокап самому без напряга

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

Воспользуйтесь онлайн библиотекой PSD Mockup

Каталог работает в формате PSD. Здесь предлагаются десятки шаблонов по отдельным параметрам. Выбирайте mock-up для одежды, обуви, гаджета, блокнота, часов, посуды или чего-то другого. Скачайте макет в PSD формате и используйте как смарт-объект в ФШ, чтобы создать новый брендинг.

Smartmokups

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

Здесь есть огромная библиотека профессиональных шаблонов. Есть возможность расширить функции инструментов. Экономит время при создании современных концепций визуальной поддержки.

Вот такой мокап получился на десктопный формат. Был использован «Desktop on the white table with a decoration».

Mockuuups Studio

Приложение для быстрого создания различных мокапов доступно на ПК, смартфонах или других гаджетах. В каталоге больше 700 разнообразных шаблонов красивых сцен и техники. Разрешение 5472×3648 обеспечивает идеальное качество изображения, прорисовываются мельчайшие детали.

За 5 минут удалось сделать мокап с iPhone 14 Pro Max на рабочем столе

Placeit by Envato

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

На этот раз мы поместили логотип ProTraffic, чтобы создать собственный мерч.

Shotsnapp

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

Приложение не поддерживается в Safari.

Как видите, удалось сделать мокап даже на часах Apple Watch.

Animockup

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

Посмотрите, какая необычная гифка получилась за 3 минуты. Мимо нас движется MacBook Pro Space Gray.

При помощи бесплатного инструмента вы без труда добавите новые кадры в видеоряд. Круто, что с помощью этого тулза создаются красивые и неповторимые рекламные ролики. В общем, это отличный помощник при работе с видео-макетами.

Pixelsurplus

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

Сервис предлагает и платные шаблоны для прототипов.

Device Shots

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

Скрин на девайсе Apple Thunderbolt:

Store Previewer

При помощи бесплатного инструмента вы создадите мокап приложения в App Store. Именно поэтому оно так и называется — Store Previewer. Здесь можно редактирровать рейтинг, количество скачиваний, тайтл, дескрипшен и так далее. Вы получите полное «превью» прилки в App Store.

Facebook* Design

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

Dimmy.Club

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

В этом сервисе мокапы не генерируются онлайн — он предоставляет готовые шаблоны, вы их скачиваете и уже сами все делаете в ФШ.

MockDrop

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

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

Rotato

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

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

Screen Guru

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

Мы ввели URL Протрафа — и вот что у нас получилось:

Screenly

Дает возможность мгновенно превратить скриншоты и фотографии в красивый мокап рабочего стола. Функционал осваивается за несколько минут. Прост, удобен, доступен для начинающих и опытных дизайнеров. Вставляете скриншот в специальное поле — и все, через минуту вы владелец Мака ��

Получаются минималистично оформленные скриншоты. С ними ваш гайд или «How to» статья будут смотреться гармоничнее.

Artboard Studio

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

Сервис платный: тариф Lite Plan стоіт $12 в месяц, а Professional — $20.

Prewiwed

Инструмент подойдет для быстрой генерации безупречных мокапов. Можно создавать макеты в высоком разрешении. Освоить весь доступный набор инструментов можно за пару минут. Выбрав 3D-модель, можно экспериментировать с ракурсами для позиционирования изображения.

Для примера выбраны Macbook Pro M1 14 и Google Pixel 5.

MockJar

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

Вот какая картинка у нас получилась. Устройство — iMac Green 2021:

Как сделать мокап в профессиональных графических редакторах

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

Делаем мокап в Photoshop

1. Скачанный мокап формата PSD открываем в Фотошопе.
2. Выбираем слой и даем ему название, чтобы реализовать в смарт-объекте.
3. Кликаем по объекту и открываем файл, где может находиться авторский плейсхолдер или пустое пространство.
4. Выбранное изображение вставляем в родительский файл и закрепляем, обновляя смарт-объект.
5. Дальше, если есть возможность работать с прототипом, меняем цвет, фон, текст.
6. Работу завершаем, сохранив новый объект в выбранном формате на ПК.

Лучше всего процедуру опишут видео. Вот парочка на эту тему:

Делаем мокап в Illustrator

1. Анализируем рынок. Выбираем готовые шаблоны похожей тематики.
2. Определяем задачи, которые должен решать логотип.
3. Делаем наброски. Выбираем наиболее интересный, подходящий вариант.
4. Прорисовываем детали, выбираем нужный тип шрифта, цветовых тонов, фона.
5. Решаем, как правильно презентовать клиенту новую идею.

А вот ролик-инструкция по созданию макета в Иллюстраторе. Он на английском, но это не страшно, т.к. суть все равно понятна:

Примеры удачных мокапов

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

Кружки

Маленькая деталь мгновенно превращает банальный предмет обихода в оригинальный подарок.

Для мерча ProTraffic:

Книги

Оригинальный макет оформления книги может повлиять на увеличение продаж.

Обложка книги «Маленький принц»:

Футболки

Как будет выглядеть мерч, легко узнать с помощью специального сервиса — Smartmockups, Mockuuups Studio, Mock и других. Посмотрите:

Распылители

Дизайн передает точное представление о бренде и назначении.

Пакеты для покупок

Брендирование пакетов для покупок рекламирует торговые сети.

Сайты

Mock-up показывает, как будет выглядеть сайт на телефоне, компьютере, планшете разных моделей и т.д.

Газеты

Мокапы на стадии подготовки материала формируют вид издания.

Сумки

Макет облегчает работу модельеру.

Наружная реклама

Помогает оценить внешний вид до печати.

Упаковки продуктов

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

Конфетной обертки

Делают товар узнаваемым и уникальным.

Заключение

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

Краткое резюме по статье

В переводе с английского mockup — это макет или реалистичный образ предмета. Он дает точное представление о том, как будет смотреться предмет с привязкой к контексту на экране, в городской среде или на предмете.

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

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

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

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

Мокап: что это такое, как его сделать и где взять бесплатно

Мокап или mockup — это заранее созданное изображение, макет, куда помещают свой дизайн. Видели на сайтах абсолютно одинаковые футболки с разными принтами или губы с разными цветами помад? Это и есть мокапы, когда на одном объекте (это может быть что угодно: футболка, кружка, визитка, губы, обложка книги, кофейный стаканчик) размещают разные шрифты, логотипы, фоны.

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

Это шаблон со стокового фотохостинга, который легко превратить в мокап / Фото: unsplash.com

Какие бывают мокапы

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

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

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

• 3d-модель. Это созданный с нуля «чистый» объект. Чтобы сделать такой мокап, нужно уметь работать в 3d-редакторах: Blender, 3ds Max, Cinema4D и т.д. Если нет времени осваивать новую профессию, модель можно купить у специалиста или попытаться скачать бесплатно.

Пример мокапа в формате 3d-модели / Фото: unsplash.com

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

• Скачанные мокапы. В интернете можно найти бесплатные мокапы. Это готовые psd-файлы, на которые с помощью Фотошопа можно накладывать свои изображения. Удобно, если готовый мокап подходит по форме. Если же у вашего продукта уникальный дизайн, то без 3d-моделирования или фотосъёмки не обойтись.

Скриншот с сайта с бесплатными мокапами для Фотошопа / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

• Мокапы, созданные на сайтах. Есть множество платных и бесплатных сервисов, где новичок, который никогда не открывал даже Paint, может сделать свой мокап. Достаточно выбрать шаблон и перенести на него свою картинку.

3d-моделирование — это огромная индустрия и сложная профессия, которой не обучиться за пару абзацев. Если нужен индивидуальный мокап и поджимает время, проще всего обратиться к специалисту.

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

Как сделать мокап

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

1. Сфотографируйте объект сами или найдите на фотостоках. Например, для этой инструкции автор нашёл подходящую фотографию на бесплатном стоке.

2. Откройте изображение в Фотошопе.

3. Возьмите инструмент Прямоугольник / Rectangle Tool. Найти его можно на панели инструментов слева или с помощью горячей клавиши U.

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

Точно размер и форму подгонять не нужно — это чуть позже / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Фото: piqsels.com

5. В меню Окно / Windows откройте палитру Слои / Layers. Вы увидите слой с прямоугольником, который так и будет называться. Кликните по нему правой кнопкой мыши и выберите Преобразовать в смарт-объект / Convert to Smart Object.

Это обязательный шаг, который нельзя пропускать / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

6. Теперь пришло время подогнать форму! Нажмите по прямоугольнику правой кнопкой мыши и выберите Свободное трансформирование / Free Transform. Это позволит передвинуть прямоугольник, изменить его размер.

Чтобы подогнать будущий мокап под форму идеально, нажмите ещё раз правой кнопкой мыши и выберите Искажение / Distort.

Теперь, передвигая квадратики вокруг прямоугольника, можно сделать форму ещё точнее / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

Если и этого мало, как в нашем случае, потому что стакан округлой формы, нажмите правой кнопкой ещё раз и выберите Деформация / Warp.

Из-за деформации прямоугольник идеально «лёг» на стакан / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

7. Добавляем на макет дизайн! Кликните два раза по слою с прямоугольником — смарт-объект откроется в отдельном документе. Добавьте на этот новый документ с прямоугольником логотип, текст, изображение с дизайном. Если у вас изображение, перетащите его из папки мышью или откройте через команду Ctrl + O. Если вам нужен текст, добавьте его через инструмент фотошопа Текст / Text.

Автор добавил фон, скачанный со стока, а сверху — текст. Всё это происходит в файле смарт-объекта с прямоугольником / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

Важно: когда вы закончите все манипуляции с будущим мокапом, сохраните смарт-объект с прямоугольником. Для этого нажмите Ctrl + S или Файл / File — Save / Сохранить.

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

Добавить реалистичности мокапу можно, меняя у слоя с Прямоугольником режимы наложения и непрозрачность. Автор поставил режим Линейный затемнитель / Linear Burn и Непрозрачность / Opacity 79% / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

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

Стакан с другим фоном и ручной деформацией текста / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

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

Мокапы для Фотошопа — как с ними работать

А как быть, если создавать свой проект не хочется или слишком тяжело? Естественно, скачать готовый мокап в интернете! Рассказываем, как работать со скачанными мокапами для Фотошопа.

1. Скачайте мокап бесплатно или купите на специальном сайте. В любом поисковике по соответствующему запросу найдется много ресурсов.

2. В результате вы получите архив с файлом в формате PSD. Разархивируйте его и откройте документ в Фотошопе.

Вы увидите мокап в формате .PSD со множеством групп и слоями в них. Они все подписаны, а те, которые поддаются изменению — выделены красным / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт / Мокап: Tatiana Teplukhina, psdmockup.ru

3. Меняем цвета и изображение.

Чтобы изменить цвет крышки, нажмите дважды на красный квадратик на слое, который называется Change Cap Color, а для изменения фона — на нижний серый квадратик, названный Change Background Color.

Чтобы изменить главное — логотип — дважды нажмите на слой смарт-объект, который называется YOUR IMAGE HERE. Вы окажетесь в отдельном документе смарт-объекта, где находится только базовый логотип. Вставьте поверх него любую картинку, логотип, надпись и нажмите Ctrl + S или Файл / File — Save / Сохранить.

После сохранения результат тут же отобразится в файле с мокапом / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт

4. Готово. Чтобы в любой момент у вас был доступ к мокапу со всеми слоями, сохраняйте его в формате .PSD. Так его можно передавать другим людям, которые смогут его открыть в таком же виде и с такими же настройками.

как сделать мокап в фотошопе пошаговая инструкция

Мокапы нужны чтобы показать заказчику дизайн рекламы или документа вживую. Мокапы- файлы в формате PSD созданные в фотошопе.

Готовый мокап помогает дизайнеру создать свой дизайн рекламы. На основе своих фотографий и документов.

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

В нашем случае это фото с смартфоном в руке. На смартфоне уже есть изображение иконок социальных сетей.

Для того чтобы поместить на экран смартфона свое изображение.

Определение размера экрана смартфона.

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

Пипетка. Далее из выпадающего меню выбираем Линейка. Кликаем мышкой по краю экрана смартфона вверху. Далее не отпуская клавиши мышки передвигаем к другому краю. При этом появятся + в начале и конце линии. Таким образом определяется ширина экрана.

Чтобы увидеть размер в цифрах кликаем вверху Окно (Window).

В выпадающем списке меню выбираем Инфо.

Далее зажимаем клавишу мышки и от края линии + тянем в сторону нижнего края. При этом мы увидим на Инфо размер высоты экрана на смартфоне. После полученных размеров экрана мы кликаем по пиктограмме Прямоугольник. После чего из выпадающего

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

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

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

Создание смарт-объекта.

После чего по слою с прямоугольником нажимаем правой кнопкой мышки. Это откроет контекстном меню.

кликаем Преобразовать в смарт- объект.

Далее Прямоугольник перетаскиваем на изображение экрана смартфона.

Выравниваем с помощью инструмента Трансформирование- Искажение.

При выравнивании прямоугольника необходимо Непрозрачность уменьшить до 60-65%.

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

Далее временно отключаем этот слой нажав, на глазок.

Выделение объект-изображения.

Теперь будем выделять объект- изображение доступными инструментами в фотошопе.

В моем случае с помощью Прямолинейного лассо.

После чего кликаем вверху Выделение где выбираем Модификация-Сглаживание

и ставим радиус примерно 4

Далее включаем глазок слоя с прямоугольником преобразованным в смарт- объект.

Выбираем этот же слой и включаем слой маску.

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

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

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

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

Найденное изображение помещаем на новом документе. Подгоняем под его размеры с помощью инструмента Трансформирование – Искажение. Или Свободное трансформирование Ctrl+T

После чего нажимаем Enter и кликаем Файл и в выпадающем меню жмем Сохранить или Ctrl+S.

Теперь отправляемся в основной документ, который редактировали, кликаем по нему.

И перед нами готовый мокап сделанный своими руками.

Далее мы можем поместить на экран смартфона все что угодно.

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

Открываем подобранное изображение. Как

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

Нажимаем Enter и сохраняем как и в первом случае Ctrl+S.

Далее переходим к основному редактируемому документу. Жмем по нему и наше изображение внутри смартфона.