Как в мокап вставить свое изображение

Как Вставить Фотографию в Макет Продукта в Adobe Photoshop

Kirk Nelson Last updated Mar 24, 2020
What You’ll Be Creating

Envato Market — отличный ресурс стоковых фотографий, графических шаблонов и макетов продуктов. Это ресурс позволяет быстро сделать коммерческий продукт высокого качества. В этом коротком уроке, я покажу вам как использовать Adobe Photoshop, что бы добавить ваши собственные изображения в макет продукта, купленный на Envato Market. (Примеч. перев.: далее по тексту будет использоваться сленговое слово «мокап» вместо «макета продукта»)

1. Выберите Объект

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

Шаг 1

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

Шаг 2

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

2. Изменените Фон

Шаг 1

В нашей воображаемой рекламе, приложение должно показывать, что видит камера. Фоновое изображение содержится в слое Смарт-Объекта, названном как EDIT BACKGROUND. Дважды щелкните на миниатюре, что открыть содержимое в отдельном окне для файла.

Откроется файл с названием Layer1.psb. Обратите внимание, что документ имеет только один слой, с изображением фона.

Шаг 2

Зайдите во вкладку Файл > Поместить Связанные (File > Place Linked) и выберите новую фотографию в качестве фонового изображения для рекламы. Я выбрал вид улицы из своих собственных фотографий.

Шаг 3

Зайдите во вкладу Файл > Cохранить (File > Save) и затем закройте файл. Фоновое изображение в начальном файле изменилось в соответствии с новым фоном. Обратите внимание , что к новому фону автоматически были применены цветовые эффекты и эффект размытия.

3. Измените интерфейс приложения

Шаг 1

Интерфейс изменяется таким же образом. Дважды щелкните мышкой на значке слоя EDIT OBJECT, чтобы открыть Смарт-Объект.

Шаг 2

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

Шаг 3

Этот файл, названый Camera1.psb, содержит различные слои используемые, что бы иллюстрировать смартфон, и другие Смарт-Объекты, названные REPLACE CONTENTS для содержимого экрана. Дважды щелкните на значке, чтобы открыть этот файл.

Шаг 4

Этот новый файл, названый как Screen11.psb, содержит изображение на экране смартфона. Вставьте новое изображение для интерфейса используя вкладку Файл > Поместить Связанные (File > Place Linked).

Шаг 5

Сохраните и закройте все отркрытые файлы со смарт-объектами. Их должно быть три: Screen11.psb, Camera1.psb, и Camera.psb. Исходный файл теперь теперь содержит новый интерфейс встроенный в общий кадр.

Вот и все!

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

КАК В ФИГМЕ ВСТАВИТЬ КАРТИНКУ В МОКАП

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

Кроме того, можно вставить изображение с помощью команды меню. Для этого нужно выбрать пункт «Insert» в верхнем меню, затем «Image». В появившемся окне нужно выбрать файл с изображением на компьютере и нажать кнопку «Open». Изображение будет помещено в макет.

Если нужно вставить картинку в уже созданный элемент макета, нужно выбрать элемент и нажать правую кнопку мыши. В всплывающем меню нужно выбрать пункт «Edit» и затем «Paste». Изображение будет вставлено в элемент макета.

Важно помнить, что картинку в Фигме всегда можно сменить на другую. Для этого нужно выделить картинку, нажать на неё правой кнопкой мыши и выбрать пункт «Replace Image. ». Затем нужно выбрать новый файл с изображением и нажать кнопку «Open».

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

How to Add Popup Overlay Modal in Figma

Дизайн мобильного приложения для заказа еды в Figma (2022)

Как сделать Мокап в Photoshop/Figma. Как вставить изображение в Mockup

Как вставить картинки в мокап журнала в Фигме (Figma)

Лучшие плагины Figma для создания Mokup

Создаем мокап в фигме — 4 минуты урок

Фоновые элементы в Figma // Паттерн за 2 минуты // Дизайн background

МОКАПЫ ДЛЯ FIGMA: ARTBOARD STUDIO. Обзор плагина — Уроки фигма на русском

Как сделать Mockup в Figma?

МОКАПЫ БЕЗ СКАЧИВАНИЯ ФОТОШОПА — КАК РАБОТАТЬ С МОКАПАМИ — MOCKUPS — КАК ДЕЛАТЬ И ЧТО ТАКОЕ МОКАПЫ

Как работать с мокапами в Фотошопе

Мокап – что это такое? Это готовые графические файлы, в которые пользователь может вставить свои фотографии, чтобы показать, как выглядит изображенный на них объект как бы в реальном пространстве. Картина на стене, баннер на вышке, логотип на визитке, картинка на футболке и многое другое. Чаще всего это готовые файлы в формате psd, то есть фотошопа, поэтому разбираться начнем именно с них. Итак, как работать с мокапами в Фотошоп.

Как пользоваться мокапом в фотошопе

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

Как и где скачать мокап

Самое простое — найти нужный мокап самостоятельно, без подсказок.

Задайте в поиске Яндекса или Гугл «скачать мокап бесплатно».

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

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

В поиске вы всегда можете конкретизировать – мокап визиток, мокап логотипа или мокап картин, плакатов.

Если есть лицензия, обратите внимание и на нее.

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

Вот несколько ссылок на те сайты, которыми я пользуюсь сама, можете перейти и скачать нужный мокап там.

• https://mockupdownload.ru/
• http://psdcollection.ru/category/mokap/
• https://mockuphunt.co/collections/free-mockups
• https://freemockup.ru/

Видео «Как работать с мокапами»

Описывать, как работать в Фотошоп трудно, посмотрите видео — это более понятно и н6аглядно.

Я показываю на конкретных примерах, как с ними работать.

Первый мокап – арт объект в окружении ярких деталей.

Ссылка на мокап — https://freemockup.ru/watercolors-canvas-mockup/

Второй – картинка на фактурной стене.

1. Первый шаг – скачать мокап. Избегайте кликов по рекламе – она уведет вас, скорее всего, на платные сервисы. Многие мокапы хранятся на яндекс-дисках, это очень удобно для скачивания. Другие же могут скачиваться напрямую с сайтов.
2. Второй шаг – извлечь файлы из архива (разархивировать скачанные файлы). В папке обязательно должен быть файл *psd, то есть фотошопа.
3. Третий шаг – открыть полученный файл *psd. Файл должен быть с расширением именно фотошопа, то есть *psd.
4. Далее найти нужный слой с картинкой и заменить встроенное изображение на свое. Это самый важный шаг. И это уже не так просто.

Как вставить картинку в мокап в PhotoShop

Переходим к самому интересному и самому сложному в процессе.

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

Как найти этот файл?

Вариантов несколько, в зависимости от устройства мокапа.

Картинка в отдельном слое

Делюсь, как это делаю я.

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

Кликаю по слою, и фотошоп предлагает перейти к редактированию другого файла. «Выскакивает» вот такая картинка, кликайте «ОК»:

Итак, нужный слой найден. Осталось заменить готовое изображение на свое.

Как в мокап вставить свое изображение

В новом файле фотошопа отключаю видимость слоя со встроенной картинкой.

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

Сохраняю полученный файл.

Возвращаюсь к открытому исходному проекту и вижу, что картинка встала в нужное место.

Остается только скачать полученное изображение в нужном формате.

Это самый простой вариант, который может вам встретиться.

Но бывают сложности, и файл с картинкой не так просто найти.

Открываем второй проект

При клике на слои видим, что один из них содержит фон, а при отключении второго ничего не происходит.

Как вставить изображение в мокап в фотошопе в данном случае?

Однако в нем есть вложенные слои и подсказка – «Ваш дизайн здесь».

Кликаю по слою и перехожу в редактирование вспомогательного файла.

Точно так же, как в первом примере,

• вставляю картинку,
• редактирую при необходимости,
• сохраняю файл.

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

Обратите внимание, что фотография встала под тени, вписалась в общую картину.

Сохраняю полученное.

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

Я показала, как использовать мокап в фотошопе , но есть и другие программы, в которых можно работать с мокапами. Например, Канва. Хотя возможностей редактирования в ней намного меньше, и встроенных бесплатных мокапов там ограниченное количество. Об этом – отдельный урок.

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

Как вставить изображение в мокап в Photoshop

Для того чтобы красиво презентовать проект заказчику, можно воспользоваться мокапами. Мокап – трёхмерная модель объекта, с помощью которого демонстрируется дизайн проекта. Мокап отражает, как бы выглядел проект в реальной исполнении. На данный момент, существует множество ресурсов, где можно как платно, так и бесплатно скачивать и пользоваться разнообразными мокапами. Ниже перечислены некоторые из них:

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

Открываем скачанный файл в программе Photoshop и переходим в поле со слоями. Там некоторые слои подписаны следующими фразами: “Add design here”, “Edit me” и другие, указывающие, что данные слои нужно редактировать (такие слои всегда являются смарт-объектами). Нажимаем два раза по нужному слою: откроется окно-контейнер, где необходимо создать новый слой.

Открываем то изображение, которое нужно поместить в контейнер, и копируем его. Для этого нажимаем Ctrl + A (задается выделение) и Ctrl + C (копируем изображение). Переходим в контейнер и помещаем изображение на новый слой при помощи Ctrl + V. С помощью горячих клавиш Ctrl + T растягиваем изображение до нужного размера.

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

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

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

5 признаков того, что вам нужен редизайн сайта

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

Какие компании провели ребрендинг в 2023 году

Готовы предоставить полную консультацию по условиям и
всем интересующим вопросам работы с нашей компанией!

Весь спектр услуг маркетинга и рекламы: лидогенерация, SEO, контекстная реклама, таргетированная реклама, создание и правка сайтов, управление репутацией, внедрение crm-систем и многие другие услуги

Отвечаем
в мессенджерах:

Частное Предприятие «Сильвервеб ПРО» © 2017-2023

Заявка на обратный звонок

Частное Предприятие «Сильвервеб ПРО» с уважением относится к правам наших клиентов. Мы безоговорочно признаем важность конфиденциальности личной информации и соблюдаем правила защиты персональных данных от несанкционированного доступа третьих лиц (защита персональных данных).

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

Ниже приводится информация об обработке персональных данных.

1. Персональные данные. Цель сбора и обработки персональных данных.

1.1. Вы всегда можете посетить данную страницу, не раскрывая никакой персональной информации.

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

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

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

2. Условия обработки персональной информации покупателя и её передачи третьим лицам.

2.1. При обработке персональных данных наших клиентов мы руководствуемся законом РБ «Об информации, информатизации и защите информации».

2.2. В отношении персональной информации покупателя сохраняется ее конфиденциальность.

2.3. Наше агентство не передает персональные данные третьим лицам.

3. Меры, применяемые для защиты персональной информации пользователей.

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