Купить за 79 руб.
ПОЛУЧИТЬ БЕСПЛАТНО !

Получите бесплатный комплект иконок

(Время действия акции ограниченно)

Иконок много не бывает, не так ли? Получи этот замечательный комплект иконок на свою электронную почту уже через несколько минут!

Для этого просто заполни форму ниже:

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

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

Присоединяйтесь к нам !

Зарегистрируйте Бесплатный Аккаунт или подключите Безлимитный Доступ всего от 180 руб./мес.

Узнать подробнее

Последние новости из мира веб-графики

Как создать Mock up в Adobe Photoshop CC

4 Мая 2014

 

Привет!

Сегодня я хочу поделиться с тобой простым, но очень полезным уроком по созданию Mock up в Photoshop CC. В наше время Mock up довольно часто используется дизайнерами, для демонстрации своих проектов заказчику. Я надеюсь тебе будет интересен данный урок и ты найдешь его полезным.

 

Шаг 1.

 

Найди фотографию ноутбука, персонального компьютера, планшета или любого другого девайса, для которого ты решил создать свой Mock up. Также ты можешь сделать фотографию своего собственного компьютера.

Изображение подобрано - отлично! Теперь открой его в программе Photoshop CC и заблокируй слой для надежности.

К примеру, я скачала изображение вот с этого сайта

http://www.bubblews.com/assets/images/news/1080551416_1392555745.png

 

Mock up ноутбук

 

Шаг 2.

 

После загрузки изображения в Photoshop, создай новый слой и назови его смарт_объект или любым другим именем.

 

Как cделать Mock up в Photoshop

 

Затем нажми горячую клавишу “U” или пройди в “shapes”, выбери “custom shape tool”  и затем выбери “grid shape”

 

Как cделать Mock up в Photoshop        Как cделать Mock up в Photoshop

 

Шаг 3.

 

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

 

Как cделать Mock up в Photoshop

 

 

Следующий очень важный момент – это конвертировать слой в смарт объект. Для этого кликни по нему правой кнопкой мыши и выбери “convert to smart object”.

 

Как cделать Mock up в Photoshop

 

Шаг 4.

 

Выбери слой, содержащий смарт объект, кликни правой кнопкой мыши по растянутому прямоугольнику на рабочей плоскости Photoshop и выбери “free transform” (или используй горячие клавиши ctrl+T), затем выбери “distort” настройку

 

Как cделать Mock up в Photoshop

 

Теперь  идеально впиши прямоугольную сетку под размер экрана ноутбука

 

Как cделать Mock up в Photoshop

 

 

Шаг 5.

 

Твой Mock up готов к использованию! Осталось только заменить изображение на экране ноутбука. Для этого просто кликни двойным щелчком по созданному смарт объекту и Photoshop откроет его в новом окне. В появившемся окне вставь свое изображение и сохрани файл.

 

Как cделать Mock up в Photoshop

 

 

Вуаля! Теперь твоя картинка появилась на экране ноутбука.

Конечный результат должен выглядеть вот так.

 

Как cделать Mock up в Photoshop

 

И совет напоследок:

 

Чтобы показать глубину и визуализировать дисплей ноутбука добавь эффекты такие, как внутренняя тень (inner shadow), размытие (gausian blur) или освещение (lighting).

 

Посмотрите mock up доступные на нашем сайте

 

Поделитесь с друзьями:

У Вас есть отличная идея, техническое задание и бюджет на ее реализацию ?

Заказать выполнение проекта