Создание мокапов для просмотра в ноутбуках
- Для чего нужны мокапы
- Определение размера экрана ноутбука
- Создание документа смарт- объекта
- Выделение объекта- изображения на экране ноутбука
- Перемещение изображения на экран ноутбука
- Размещение изображения с использованием созданного мокапа
Для чего нужны мокапы
Мокап это готовый шаблон где меняя содержимое получаем демонстрационный файл, используемый для обучения, демонстрации, оценки дизайна, продвижения и других целей.
В этом файле можем показать дизайн своего сайта или упаковки с чипсами то есть что угодно.
Для этого мы используем готовые шаблоны, которые можно скачать из интернета. Мы попробуем создать свой мокап на экране ноутбука.
Определение размера экрана ноутбука
Чтобы поместить наше изображение на экране показанного ноутбука.
Необходимо измерить ширину и длину экрана. Для этого открываем картинку с ноутбуком в Adobe Photoshop.
Активируем в программе фотошопа пиктограмму Пипетка и из выпадающего меню выбираем Линейка.
Кликаем на экране вверху ноутбука и не отпуская передвигаем к другому краю при этом появится + таким образом определяем ширину экрана, чтобы увидеть размер в цифрах кликаем вверху Окно (Window)
из выпадающего списка меню выбираем Инфо.
Далее от края с (+) кликнув, по нему тянем вниз к нижнему краю и смотрим на Инфо размер высоты экрана на ноутбуке. После полученных размеров экрана мы кликаем по пиктограмме Прямоугольник и из выпадающего
списка выбираем Прямоугольник. Далее, кликнув в любом месте мышкой открываем, окно Создать прямоугольник.
Куда вносим полученные нами размеры вручную: ширины и высоты. Нажимаем на ОК при этом появится прямоугольник.
Создание документа смарт- объекта.
После чего производим заливку прямоугольника любым цветом на ваше усмотрение. В моем случае это зеленый цвет.
После чего по слою с прямоугольником нажимаем правой кнопкой мышки и в открывшемся контекстном меню
кликаем Преобразовать в смарт- объект.
Настройка изображения под размеры нового документа
Далее Прямоугольник перетаскиваем на изображение экрана ноутбука. Выравниваем с помощью инструмента Трансформирование- Искажение
При выравнивании прямоугольника необходимо Непрозрачность уменьшить до 60-65%.
Это облегчит точность выравнивания.
По окончании выравнивания прямоугольника нужно Непрозрачность восстановить.
Выделение объекта- изображения на экране ноутбука.
Далее временно отключаем этот слой нажав, на глазок.
Теперь будем выделять объект- изображение доступными инструментами в фотошопе. В моем случае с помощью Прямолинейного лассо. После чего кликаем вверху Выделение где выбираем Модификация-Сглаживание
и ставим радиус примерно 4
и нажимаем ОК.
Далее включаем глазок слоя с прямоугольником преобразованным в смарт- объект.
Выбираем этот же слой с прямоугольником и включаем маску слоя.
После чего зеленый прямоугольник занимает полностью экран ноутбука где будет только наше изображение.
Перемещение изображения на экран ноутбука.
Теперь чтобы поместить свое изображение кликаем дважды смарт-объект с маленьким экраном и зеленым прямоугольником.
В результате этого открывается новый документ в виде зеленого прямоугольника.
Далее находим изображение, которое хотим поместить внутрь экрана ноутбука.
Найденное изображение перемещаем на новый документ. Настраиваем, под его размеры с помощью инструмента Трансформирование – Искажение. Или Свободное трансформирование Ctrl+T
После чего нажимаем Enter и кликаем Файл и в выпадающем меню жмем Сохранить или Ctrl+S,
Теперь отправляемся в основной документ, который редактировали, кликаем по нему
и перед нами готовый мокап.
Размещение изображения с использованием созданного мокапа.
Теперь после создания мокапа мы можем легко поместить на экран ноутбука дизайн любого документа. Все что захотим. Достаточно дважды кликнуть по смарт- объекту
перед нами появится прямоугольник с изображением.
Открываем подобранное изображение как
и в первом случае помещаем на прямоугольнике изображение подогняем, под его размеры. Нажимаем Enter и сохраняем как и в первом случае Ctrl+S.
Далее переходим к основному редактируемому документу, кликаем по нему и наше изображение внутри ноутбука.
После создания мокап сохраняем документ в формате PSD. По сути это шаблон для создания подобных мокапов. Также можно сохранить документ в формате JPEG.
