Как наложить на мокап дизайн

Как использовать мокапы: оформляем скриншоты в презентации правильно

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

Зачем нужен мокап в презентации

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

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

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

Вот так мы показываем в своей презентации о компании, маркетинг-киты из портфолио::

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

Вот еще один слайд из той же самой презентации о нашей компании:

Источник

Как вставить изображение в мокап в фотошопе — Фоторедактор Фотошоп

Для того, чтобы вставить изображение в мокап в фотошопе нужно сначала найти отличный мокап. Сейчас существует достаточно много ресурсов, которые предоставляют мокапы в свободном доступе. Одним из таких является платформа https://www.mockupworld.co.

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

Итак, давайте рассмотрим как вставить изображение в мокап, на примере вот этой работы.

Как вставить изображение в мокап в фотошопе — рис. 1

1. Открываем сам файл в программе фотошоп. И обращаем внимание на окно “слои”. И выделяем слой (это всегда смарт-объект) с надписью “ADD DESIGN HERE”.

Как вставить изображение в мокап в фотошопе — рис. 2

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

Как вставить изображение в мокап в фотошопе — рис. 3

3. Открываем то изображение, которое хотим поместить в контейнер и копируем его. Для этого нажимаем Ctrl + A (задается выделение), Ctrl + C (копируем фото), Ctrl + W (закрываем документ). Важно учиться пользоваться горячими клавишами. Это очень упрощает процесс создания и редактирования документов в программе фотошоп.

Как вставить изображение в мокап в фотошопе — рис. 4

4. Переходим в контейнер и помещаем изображение на слой, который недавно создали. С помощью команды Ctrl + T, растягиваем фотографию до нужного размера. Далее Ctrl + S (сохранить), Ctrl + W (закрыть документ)

Как вставить изображение в мокап в фотошопе — рис. 5

5. Всё! Изображение вставлено в мокап. Наслаждаемся результатом.

Как вставить изображение в мокап в фотошопе — рис. 6 Как вставить изображение в мокап в фотошопе — рис. 7

Источник

Как использовать PSD шаблоны мокапов в программе Фотошоп?

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

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

Архив сохранится на вашем компьютере и теперь его нужно распаковать.

В появившейся папке найдем файл glass-bottle-mockup-psd и откроем его в Фотошопе:

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

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

Теперь нужно убрать все лишнее на этом слое. Можно просто скрыть объекты, либо вовсе удалить их, если они больше не понадобятся. Кому как нравится. После чего нажимаем Файл → Сохранить (Ctrl+S), и все изменения сохранятся автоматически.

А теперь можно добавить что-то свое, например, логотип, надпись, или рисунок. И снова сохраним.

Все оказалось совсем несложно. На этот слой можно помещать любые файлы, как векторные, так и растровые, с множеством возможных разрешений AI, EPS, PNG, JPEG. А также можно делать текстовые слои, в общем тут куда уже приведет ваша фантазия. Только не забывайте сохранять изменения.
Ну и теперь пришло время поменять фон. Это можно сделать разными способами. В некоторых мокапах можно добавить свой фон, в некоторых можно поменять цвет. В любом случае, разобраться какой из способов подходит вам не сложно. В нашем примере мы просто поменяем цвет.
Для начала разблокируем слои, отвечающие за фон, и скроем один из них.

Затем перейдем на слой белого цвета, в панели инструментов выберем нужный нам цвет и закрасим кисточкой, можно так же использовать инструмент заливка (Alt+ Backspace).

Источник

Как наложить на мокап дизайн

Наносим логотип на мокап в Photoshop

Привет! В этом уроке мы сделаем эффектную подачу нашего логотипа на летящей кружке в программе Photoshop.

Дополнительные материалы для самых любознательных:
Подробнее о работе с мокапами в Photoshop: www.youtube.com/watch?v=amTo8bcHTgY
Подробный урок по очистке изображений от всего лишнего: www.youtube.com/watch?v=dQxD0f.
Урок по вписыванию объекта в фото — пригодится, чтобы вписать логотип в фотографию: www.youtube.com/watch?v=MWntI2.

3. Откройте слой «ADD LOGO HERE», два раза кликнув по нему. Если у вас нет панели со слоями, включите ее в верхнем меню «Window — Layers». Удалите слой с логотипом на кружке — нажмите на кнопку с мусорным ведром под слоями.

4. Экспортируйте свой логотип из Figma в формате «svg». Для этого сгруппируйте все объекты, выделив и нажав Ctrl+G и в правой панели EXPORT выберите нужный формат и нажмите на кнопку.

5. Логотип в формате «svg» поместите на место шаблонного логотипа на кружке, перетащив файл в окно и сохранив Smart object. Если все сделано правильно, на кружке появится ваш логотип. Если нет — не стесняйтесь просить помощи у команды в чате.

6. Настройте цвет кружки и фон на свой вкус и экспортируйте результат в формате «jpg» через меню File — Export — Export as.

Задание со звездочкой:

7. Можете подобрать для своего бренда более удачные мокапы — скачать их можно в группах ВК или через поиск в Гугле: «мокапы» или «mockups»

Источник

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

Этап 1: Выбор дизайна и фона

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

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

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

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

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

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

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

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

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

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

Подробнее: Создание прямоугольников и фигур в Adobe Photoshop

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

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

Подробнее: Работа со слоями-масками в Adobe Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник