Мокап – что это такое? Это готовые графические файлы, в которые пользователь может вставить свои фотографии, чтобы показать, как выглядит изображенный на них объект как бы в реальном пространстве. Картина на стене, баннер на вышке, логотип на визитке, картинка на футболке и многое другое. Чаще всего это готовые файлы в формате psd, то есть фотошопа, поэтому разбираться начнем именно с них. Итак, как работать с мокапами в Фотошоп.
Как пользоваться мокапом в фотошопе
Даже если вы не профессионал в графических программах, то без особого труда разберетесь с тем, как работать с мокапами в фотошопе.
Как и где скачать мокап
Самое простое — найти нужный мокап самостоятельно, без подсказок.
Задайте в поиске Яндекса или Гугл «скачать мокап бесплатно».
Из поисковой выдачи выбирайте любой. Почти у всех есть фильтры для выбора темы, используйте их.
На англоязычных сайтах не все так понятно, но тоже можно разобраться.
В поиске вы всегда можете конкретизировать – мокап визиток, мокап логотипа или мокап картин, плакатов.
Если есть лицензия, обратите внимание и на нее.
Что такое мокап/mockup и для чего он нужен?
По лицензиям у меня есть отдельный ролик, и если этот вопрос вас интересует, то вот ссылка на него «Фотостоки и бесплатные лицензии».
Вот несколько ссылок на те сайты, которыми я пользуюсь сама, можете перейти и скачать нужный мокап там.
Видео «Как работать с мокапами»
Описывать, как работать в Фотошоп трудно, посмотрите видео — это более понятно и н6аглядно.
Я показываю на конкретных примерах, как с ними работать.
Первый мокап – арт объект в окружении ярких деталей.
Второй – картинка на фактурной стене.
- Первый шаг – скачать мокап. Избегайте кликов по рекламе – она уведет вас, скорее всего, на платные сервисы. Многие мокапы хранятся на яндекс-дисках, это очень удобно для скачивания. Другие же могут скачиваться напрямую с сайтов.
- Второй шаг – извлечь файлы из архива (разархивировать скачанные файлы). В папке обязательно должен быть файл *psd, то есть фотошопа.
- Третий шаг – открыть полученный файл *psd. Файл должен быть с расширением именно фотошопа, то есть *psd.
- Далее найти нужный слой с картинкой и заменить встроенное изображение на свое. Это самый важный шаг. И это уже не так просто.
Как вставить картинку в мокап в PhotoShop
Переходим к самому интересному и самому сложному в процессе.
В основной фотошоповский файл мокапа как правило встроен дополнительный файл, с которым и нужно работать. Именно в нем вы сможете вставить фото в мокап.
Как найти этот файл?
Вариантов несколько, в зависимости от устройства мокапа.
Картинка в отдельном слое
Делюсь, как это делаю я.
Чаще всего нужный файл скрыт в отдельном слое. Поэтому первым делом я отключаю все слои, и в итоге нахожу тот, который и содержит изображение.
Кликаю по слою, и фотошоп предлагает перейти к редактированию другого файла. «Выскакивает» вот такая картинка, кликайте «ОК»:
Итак, нужный слой найден. Осталось заменить готовое изображение на свое.
Как в мокап вставить свое изображение
В новом файле фотошопа отключаю видимость слоя со встроенной картинкой.
Новым слоем вставляю свою фотографию. Перевожу в растровый объект, если нужно подредактировать картинку.
Сохраняю полученный файл.
Возвращаюсь к открытому исходному проекту и вижу, что картинка встала в нужное место.
Остается только скачать полученное изображение в нужном формате.
Это самый простой вариант, который может вам встретиться.
Но бывают сложности, и файл с картинкой не так просто найти.
Открываем второй проект
При клике на слои видим, что один из них содержит фон, а при отключении второго ничего не происходит.
Как вставить изображение в мокап в фотошопе в данном случае?
Однако в нем есть вложенные слои и подсказка – «Ваш дизайн здесь».
Кликаю по слою и перехожу в редактирование вспомогательного файла.
Точно так же, как в первом примере,
Как только сохранили изменения, то они сразу отображаются в основном файле проекта.
Обратите внимание, что фотография встала под тени, вписалась в общую картину.
Сохраняю полученное.
Закрываю оба файла, обычно без сохранения, в последующем буду использовать другие картинки.
Я показала, как использовать мокап в фотошопе , но есть и другие программы, в которых можно работать с мокапами. Например, Канва. Хотя возможностей редактирования в ней намного меньше, и встроенных бесплатных мокапов там ограниченное количество. Об этом – отдельный урок.
Надеюсь, что использование мокапа вам стало более понятно. Применяйте для оформления своих работ. Это не сложно, но в итоге выглядит профессионально.
Источник: www.arsenalweb.ru
Что такое мокапы и как с ними работать?
Мокап ― это макет продукта с помещённым на нём дизайнерским решением. Мокапы нужны для того, чтобы показать ту или иную продукцию заказчику с уже сделанным вами дизайном, ведь правильная презентация работы — это очень важно.
На фото слева ― пример готового дизайна сайта , а справа ― мокапов с ним.
При создании демонстрационного материала создаётся трёхмерное изображение, что ещё больше приближает мокап к реалистичности. Мокапы могут понадобиться в любых ситуациях, но чаще всего их используют для презентации:
- фирменного стиля,
- обложки книги,
- буклетов,
- визиток,
- мерча,
- POS-материалов.
Сайтов с шаблонами для мокапов немало. Мы разберём несколько из них.
1. С сайта стока скачивается zip-документ. В этом документе есть
инструкция по использованию мокапа и PSD документ с самим макетом.
2. Откройте мокап в Photoshop. Файл PSD будет состоять из слоёв. Один из слоёв будет предназначен для того, чтобы в него вставили другой дизайн. Выгледеть он будет так:
3. Дважды по нему кликните и во всплывающем окне нажмите «ОК».
4. Откроется область для вставки изображения.
5. Перетащите в эту область нужную картинку
и растяните ее границы по краям:
6. Нажмите сочетание клавиш Ctrl + S или выберетив меню: «Файл» — «Сохранить». В всплывающем окне нажмите кнопку «Поместить».
7. Теперь вернитесь на вкладку с мокапом, чтобы увидеть готовый результат. Остается только сохранить мокап в формате PNG.
Шаблоны мокапов трудно создать самостоятельно, но можно скачать уже готовые. Для самостоятельного создания шаблона продукта можно использовать любую программу для рисования: Adobe Illustrator, Adobe Photoshop, Figma.
Источник: adspectrum.ru