книга Умный дом
Книга в подарок
Как создать электронную книгу в формате EXE.
Советы фотошоп
Советы фотошоп

Создание мокапов для просмотра в ноутбуках

Для чего нужны мокапы

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

В этом файле можем показать дизайн своего сайта или упаковки с чипсами то есть что угодно.

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

Определение размера экрана ноутбука

Чтобы поместить наше изображение на экране показанного ноутбука.

Ноутбук

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

Активируем в программе фотошопа пиктограмму Пипетка и из выпадающего меню выбираем Линейка.

Кликаем на экране вверху ноутбука и не отпуская передвигаем к другому краю при этом появится + таким образом определяем ширину экрана, чтобы увидеть размер в цифрах кликаем вверху Окно (Window)

Линейка

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

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

Прямоугольник

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

Создать прямоугольник

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

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

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

Прямоугольник зеленого цвета

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

Преобразование в смарт-объект

кликаем Преобразовать в смарт- объект.
Настройка изображения под размеры нового документа
Далее Прямоугольник перетаскиваем на изображение экрана ноутбука. Выравниваем с помощью инструмента Трансформирование- Искажение
При выравнивании прямоугольника необходимо Непрозрачность уменьшить до 60-65%.

Непрозрачность

Это облегчит точность выравнивания.

Выравнивание объекта

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

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

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

Отключение слоя

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

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

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

Сглаживание

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

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

Включение глазка слоя

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

Перемещение изображения на экран ноутбука.

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

Открытие нового документа

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

Новый документ

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

Изображение для размещения

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

Подгонка изображения под новый документ

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

Сохранение изображения

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

Основной редактируемый документ

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

Готовый мокап

Размещение изображения с использованием сзданного мокапа.

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

Использование созданного мокапа

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

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

Изображение для размещения

и в первом случае помещаем на прямоугольнике изображение подогняем, под его размеры. Нажимаем Enter и сохраняем как и в первом случае Ctrl+S.
Далее переходим к основному редактируемому документу, кликаем по нему и наше изображение внутри ноутбука.

Изображение внутри ноутбука

После создания мокап сохраняем документ в формате PSD. По сути это шаблон для создания подобных мокапов. Также можно сохранить документ в формате JPEG.

Комментарии закрыты.

Идеальный вес, онлайн калькулятор
Курмангалий Мухамеджанов
Лучшие книги ЛитРес
Архивы
наверх