Mockup или mock —up (макет) - модель того или иного продукта, выполненная в естественных пропорциях, созданная для быстрого предоставления дизайна продукта в готовом виде, с целью более чёткого представления дизайна конечного продукта.
Многие из нас знают, что это, а тем, кто не знает будет полезно.
Разыграем ситуацию, которая бывала, наверняка, у всех.
Вы посылаете заказчику макет на утверждение, а он Вам в ответ:
— Мне нравиться, но я не уверен будет ли это смотреться хорошо на поём продукте…
Тут-то Вам и пригодится Mockup . Суть его заключается в следующем, у Вас есть изображение продукта в нужном ракурсе, в нужной ситуации, и Вы как бы применяете к нему Ваш дизайн. В процессе его «как бы » применения происходят все нужные преобразования, это ракурс, всевозможные искажения, наложения эффектов и т.д.
Опять же, для тех, кто не знает, расскажу…
Как это работает?
1.
Вы загружаете Ваш mockup (psd
) в фотошоп и в области управления слоями ищите слой с таким значком: . Чаще всего этот слой подписан «Put your design here
», «Your design
», «Double click me
», «Edit me
» и т.п.
3. У Вас откроется новое окно, в которое следует поместить Ваш дизайн, после чего нажимаете Ctrl+S (сохранить)
Возвращаетесь в предыдущее окно, ВУА-ЛЯ! Ваш дизайн на продукте!
На просторах интернета можно найти великое множество мокапов разного качества, вида, стиля, платных и бесплатных .
Но, не редко бывает так, что нужный нам продукт мы не можем найти. Для этого и пригодится этот материал. В нём я расскажу о принципах создания и работы мокапов.
Как сделать свой mock-up?
Для начала найдём картинку хорошего качества какого-нибудь необычного предмета без рисунков, а лучше белого цвета.
Здесь, как говорится, Google
в помощь, или Яндекс
– кому что нравится.
Для своего мокапа я решил взять чайник.
Итак, начнём…
Для начала отделяем картинку от фона. Его можно удалить вовсе, фон у меня будет свой.
Затем создаём новый пустой слой, и преобразуем его в смарт-объект. Как я уже говорил, в основе работы мокапа лежит именно смарт-объект.
Опять же. Для тех. Кто не знает, на пустом слое нажимаете правый клик и выбираете «Преобразовать в смарт-объект», после чего иконка вашего слоя будет с таким значком: .
Далее, применяем маску предыдущего слоя к пустому слою. На иконке предыдущего слоя кликаем правой кнопкой мыши (ПКМ) и нажимаем: «Выделить пикселы ». Затем не снимая выделения нажимаем пустой слой и кликаем под областью слоёв вот этот значок: . Если Вы всё сделали правильно, то к Вашему пустому слою добавится слой с белым силуэтом предыдущего слоя, в моём случае с силуэтом чайника.
Теперь, открываем наш смарт-объект двойным кликом на этот значок: , и для удобства работы помещаем в него сетку (Свою я нарисовал в иллюстраторе), нажимаем CTRL+S и возвращаемся в предыдущую вкладку, где видим вот такую картину:
Для удобства работы примените к слою с сеткой (Пустой слой ) эффект «Умножение ».
Теперь начинается самая трудоёмкая часть создания мокапа, это искажение. Тут без пространственного мышления не обойтись.
Для этого на Вашем слое с сеткой (Пустой слой ) нажмите на значок в виде звеньев цепи между самим слоем и слоем-маской. Если звенья пропали, то Вы всё сделали правильно.
Теперь нажимаем на слой с сеткой, чтобы он выделился белыми уголками и идём по пути: Редактирование → Марионеточная деформация.
Мы видим. Что наш слой покрылся непонятной сеткой. Теперь. Нам нужно прокликать его по контуру расставляя узлы для фиксации нашего фона. Не бойтесь ошибиться, программа не даст Вам поставить узел не там, где нужно, о чём сообщит вам содержимое этого окна:
Это трудоёмкий процесс, запаситесь терпением.
Когда с контуром вы закончите, Ваш слой будет выглядеть примерно так:
Дальше всё тем же инструментом расставляем маркеры и деформируем наш слой с сеткой (пустой слой) так, чтобы сетка естественно облегала сам предмет. По окончании деформации нажмите Enter . Если Вы допустили ошибки при деформации, то скорее всего то, что заметно на сетке, не будет видно на продукте с другим дизайном, если, конечно, в основе Вашего дизайна нет сетки.
На этом этапе Вы можете поставить в Ваш смарт-объект любой дизайн, чтобы посмотреть хорошо ли Вы деформировали слой.
Закрывая глаза на кучу недочётов, мой вариант меня устраивает. Далее, Вам нужно проделать кучу операций со слоями таких, как дублирование, эффекты наложения, тени и прочее, чтобы Ваш мокап смотрелся органично. Кроме того, Вы можете создавать смарт-объекты для каждой части Вашего мокапа отдельно например: крышка, ручка и т.д. На этом, пожалуй, всё.
Главное помните, что качество Вашего мокапа зависит только от Ваших способностей.
Привет, друзья. Сегодня поговорим о том, как сделать мокап для демонстрации вашего landing page. Думаю, тем, кто делает посадочные страницы на постоянной основе пригодится экшен для
Photoshop, который в несколько кликов сделает из макета отличный mockup, который даже посредственный дизайн превращает в стильный и презентабельный.
Несколько лет назад, в одном из видеокурсов по веб-дизайну (в бонусах), наткнулся на урок с оформлением сайтов в перспективе. Выглядело это очень круто и вот о чем я говорю: UI100Day-01 by Arche阿北
Давайте посмотрим, как установить себе такой экшен и разберемся с настройками. Для начала скачайте и распакуйте архив:
Затем, запустите Photoshop и откройте 2 окна «Операции» и «Стили». Если в правом меню их нет, то можно включить. Для этого, в верхнем меню перейдите в «Окно» и поставьте галочки напротив «Стили» и «Операции». Тогда соответствующие иконки появятся на экране.
Теперь раскройте окно «Операции» и нажмите на иконку меню этого окна.
Перед вами откроется контекстное меню, в котором выбираем «Загрузить операцию».
Перейдите в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric Mock-UP».
Теперь, перейдите в «Стили» и проделайте туже операцию, только добавьте файл стилей.
Далее, как и в прошлый раз, переходим в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric_MockUP_styles».
Обратите внимание на то, что в папке есть документация в формате PDF.
Делаем мокап дизайна сайта
Настало время для творчества. Но впереди еще несколько нюансов.
- Экшен работает только с картинками или группами. То есть 1 картинка — 1 слой. или объединяем элементы картинки в группу.
- Работать можно и с несколькими картинками одновременно, но все они должны быть цельным объектом и располагаться на отдельном слое либо разделены по группам.
- Документ должен иметь разрешение 72 dpi.
Открывайте картинку в Фотошопе и давайте познакомимся с настройками.
Первым делом убедимся, что у нас открыта всего лишь одна картинка, позже я покажу как работать сразу с несколькими, но начнем с одной. У меня это дизайн, взятый у одного из участников Dribbble.
Изначально картинка выглядит следующим образом:
Rexchange Currency Exchange Website
by uithemes
С этим изображением и будем работать. Давайте откроем окно экшенов и посмотрим на настройки плагина.
Если все сделали правильно, то у вас должно получиться, примерно, так:
Давайте раскроем настройки горизонтального экшена и разберемся с основными параметрами, которые можно задать. Благо, их не так и много, всего 3.
Начнем с того, в какую сторону должна быть направлена изометрия.
Я выбираю левую сторону. «ONE», «TWO» как раз и означает количество картинок в проекте. Мы договорились, что начнем, пока, только с 1.
Кликните по строке «(ONE) Image — Transform LEFT», а затем по значку « » в нижней строке. Начнется магия, а на самом деле, работа экшена (записанного порядка действий разных команд).
Добавлю белый фон и в результате получаем такое отображение сайта:
Даже на белом фоне и в уменьшенном виде смотрится достаточно интересно. А если добавим цветной фон?
Как по мне, получилось еще интереснее. А весь процесс занял секунд 15. Вручную такая перспектива делалась бы дольше. https://youtu.be/mPgQFPeOny4 Демонстрация работы экшна
Но это не все настройки. Еще есть возможность изменять глубину или высоту элемента. Возьмем несколько иконок для наглядности. А заодно покажу как работать с несколькими изображениями
Создаю проект, в котором 3 слоя. На каждом слое по 1 иконке.
Убедитесь, что находитесь на первом слое и переходите в окно «Операции». Выберите пункт «(THREE) Images — Transform LEFT » и жмите « ».
Давайте теперь увеличим высоту одной из иконок. То есть сделаем цилиндр зеленой иконки чуть больше.
Для этого, убеждаемся, что находитесь на нужном слое и выбираем одну из команд «EXTRUDE ADD (+) «, например, я сделаю глубину на 30 пикселей больше.
Кроме этого, еще можно управлять тенью. То есть делать ее больше. Давайте попробуем сделать ее на 80 пикселей длиннее, чтобы была заметна разница.
Как видите, тень теперь стала намного больше и заметнее. Я не говорю, что стало лучше, просто для примера гиперболизировал результат.
Кликнув по иконке смарт-объекта можно отдельно поработать с тенью, изменить цвет, положение и т.д., но это уже детали работы с Photoshop и статья не об этом. Если возникнут вопросы, пишите в комментариях.
Еще есть настройка размытия, но я не нашел ей применения и не буду писать о ней в статье. Если кому-то интересно — попробуйте. Алгоритм работы с настройкой такой же как и выше.
- Делаем активным нужный слой;
- находим настройку размытия;
- применяем с нужным параметром;
Вот так просто, за считанные секунды можно сделать достойный мокап сайта в целом и отдельных его элементов. Как вам идея? Есть ли способы полегче? Какими плагинами и экшенами пользуетесь вы?
Здравствуйте, сегодня я опишу как делаются шаблоны (Mock-up или Mockup) для презентаций своих работ. Основные плюсы Mock-up – быстрое редактирование макетов продукции, без затрат времени на создание всех эффектов презентации, но нужно сначала создать шаблон, приступим.
Я решил сделать Mock-up для представления фирменного стиля и добавил в шаблон телефон, что бы показать и «ИТ» тематику. Вся работа выполнялась в программе Adobe Photoshop CS6.
Создаю документ с настройками – 297х210 мм (альбомный формат А4), 300dpi. Делаю разметку направляющими (середина по горизонтали и вертикали), вставляю текстуру бумаги:
Основной файл подготовлен, начинаем создавать нашу продукцию – делаем визитки.
Создаем новый документ с размерами 90х50 мм 300dpi (почему я не делаю, в основном документе, я опишу ниже), и начинаем делать визитку:
Все было создано за короткий строк, и поэтому все делалось сразу, «экспромтом». Заливаем градиентом файл:
Создаем квадраты, переворачиваем ромбами, уменьшаем, дублируем, получаю результат:
Вставляю текст, работаю с типографикой:
Одна сторона готова, делаем по аналогичному принципу сторону «б»:
Визитки готовы.
Вставляем наши визитки в основной документ, т.к. мы все создавали в размерах 1:1 (в соотношении уже напечатанной продукции) и 300 dpi, у нас получается правильное соотношение в Mock-up.
Переводим слои визиток в «смарт обьекты».
Почему я не делал визитки, сразу, в документе – можно было делать все сразу в документе, но конечный файл нашего Mock-up получится очень большим (и «тормознутым»), легче работать с отдельными файлами, так шаблон у нас получится маленького размера, и при этом совершенно не пострадает в функционале. Поэтому, я создаю шаблон каждой продукции в новом файле, а потом вставляю в Mock-up.
Смотрим на результат:
Делаем тень от визиток. Можно сделать разными способами, я делал так - создаем новый слой, инструментом «прямоугольное лассо» выделяем контуры тени, заливаем линейным градиентом, регулируем прозрачность слоя. Можно просто закрасить нужный участок «мягкой» кистью.
Не забываем, что вся «продукция» Mock-up"а должна быть смарт объектами.
Визитки расположены на документе, приступаем к созданию СД(ДВД) диска.
Создаем новый документ:
Делаем разметку диска, не забывая соблюдать правильные размеры:
Делаем обводки белым, с разным размером, делаем заливку градиентом основной части диска, прозрачную середину диска заливаем радиальным градиентом:
Вставляем наши объекты и текст, созданный в визитках:
Диск готов, вставляем его в основной документ, рисуем ему тень (по аналогичному принципу, как в визитках):
У нас заканчивается место на «холсте», добавляем высоты и поправляем горизонтальную направляющую:
Я решаю создать конверт, формата Е65, для документации. Создаю новый документ размерами 220х110 мм 300 dpi, дальше все делаю аналогично, как и с визиткой\диском.
Замечание – «вырубка» для прозрачного «окошка» должна находится с отступами от краев: слева – 20 мм, снизу – 15 мм.
Вставляем конверт в наш Mock-up, добавляю тень:
Начинаю работать с мобильным телефоном, тут я решил не создавать «велосипед», а нашел на бесплатных «миктостоках» уже нарисованный телефон. Вставляю в экран наш «стиль», добавляю сверху «блик» градиентом.
Решаю вставить телефон в основной документ со слоями, что бы вам, если вы решите использовать шаблон, не искать шаблон телефона.
Замечание – соблюдаем размеры, этот телефон примерно 59x124 мм, но мы его переворачиваем на 90 градусов.
Структура слоев телефона (в смарт объекте):
Рисуем тень телефона. Опускаем конверт вниз и ищем оптимальное расположение нашей продукции:
Аналогично всем выше написанным, создаю «карандаши», работаю над их цветом и «брендированием»:
Добавляю блик на пленке конверта, и смотрим финальный результат:
Вот и наш Mock-up создан, переходим к второй части статьи.
Как редактировать Mock-up
Открываем документ mock-up.psd, заходим на нужный нам слой, пусть это будет «диск»:
Нажимаем два раза мышкой на смарт слое, выскакивает предупреждение:
Нажимаем «ок», открывается новое окно с нашим диском. Дальше редактируем, что пожелаем, например цвет (меняем на темно красный):
Закрываем документ с диском, выскакивает предупреждение:
Нажимаем «Да», смотрим как изменился наш Mock-up:
Вот так просто, редактируем наш реалистичный шаблон.
Подумав, я решил сделать третью часть статьи.
Вкратце, опишу как сделать иллюзию 3Д шаблона.
Для начала разберемся, из чего мы можем сделать 3Д, мобильный и карандаши сразу убираю, т.к. они имеют толщину, и нужно будет заново создавать эти объекты, исходя из угла обзора, это долго. Оставляю диск и визитки.
В этой статье мы рассмотрим подробную инструкцию о том, как правильно работать с мокапами в программе фотошоп. Даже если у вас нет специальных навыков и вы новичок в этом деле, то вы с легкостью сможете создать прекрасную презентацию для своего проекта. В этой статье будет использоваться мокап, на котором мы будем менять этикетку и фон, но сразу надо пояснить, что все мокапы отличаются, и поменять можно различные элементы. Но сама структура станет понятной и можно будет с легкостью догадаться что и где находится.
Архив автоматически сохранится на вашем компьютере и теперь его нужно распаковать.
В появившейся папке найдем файл glass-bottle-mockup-psd и откроем его в Фотошопе:
Во вкладке «слои» расположены папки с названиями, в которых сложены файлы. Все папки соответствуют своему элементу.
Откроем ту, что принадлежит зеленой бутылке, нажмем на стрелку, которая расположена рядом с папкой, и перед нами окажется несколько слоев:
Нам интересен слой со смарт-объектом, который обведен на рисунке красным. Чтобы отредактировать его, нам надо дважды кликнуть левой кнопкой мыши по значку.
И тут нам откроется еще одно окошко смарт-объекта, которое теперь мы можем редактировать как душе угодно. Этот слой ничем не отличается от обычного файла.
Теперь нужно убрать все лишнее на этом слое. Можно просто скрыть объекты, либо вовсе удалить их, если они больше не понадобятся. Кому как нравится. После чего нажимаем Файл → Сохранить (Ctrl+S), и все изменения сохранятся автоматически.
А теперь можно добавить что-то свое, например, логотип, надпись, или рисунок. И снова сохраним.
Все оказалось совсем несложно. На этот слой можно помещать любые файлы, как векторные, так и растровые, с множеством возможных разрешений AI, EPS, PNG, JPEG. А также можно делать текстовые слои, в общем тут куда уже приведет ваша фантазия. Только не забывайте сохранять изменения.
Ну и теперь пришло время поменять фон. Это можно сделать разными способами. В некоторых мокапах можно добавить свой фон, в некоторых можно поменять цвет. В любом случае, разобраться какой из способов подходит вам не сложно. В нашем примере мы просто поменяем цвет.
Для начала разблокируем слои, отвечающие за фон, и скроем один из них.
Затем перейдем на слой белого цвета, в панели инструментов выберем нужный нам цвет и закрасим кисточкой, можно так же использовать инструмент заливка (Alt+ Backspace).
Часто нам хочется показать свои работы красиво и интересно, но не всегда это получается сделать, просто выложив саму работу. Гораздо интереснее выглядит подача, где картинки как будто нарисованы в альбоме или используются на этикетках продуктов, для этого как раз и нужны мокапы.
Мокап (или mock-up на английском) - это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном. Бывают и просто JPEG картинки, называемые мокапами, но работать с ними сложно, нужно долго искажать картинку и вписывать ее в окружение.
Смарт-объекты - очень крутая штука. Если вы хоть раз уменьшали картинку в фотошопе, а потом растягивали ее на большой размер, наверняка получалась примерно такая история, потому что Фотошоп искажает файлы.
То же самое и с шрифтами и с эффектами. Для того, чтобы этого избежать, стоит превращать все элементы в смарт-объекты. Для того чтобы создать смарт-объект, откройте любое изображение в фотошопе. Далее преобразуйте фоновый слой в обычный (редактируемый), для этого двойным щелчком мыши кликните по нему и нажмите ОК либо создайте его дубликат, для этого нажмите комбинацию клавиш Ctrl+J. Затем, щелкнув правой кнопкой мыши по преобразованному/дублированному слою из контекстного меню выберите «Преобразовать в смарт-объект». После того, как Вы это сделали, на миниатюре Вашего слоя появится небольшая иконка, которая означает, что слой является смарт-объектом.
По сути смарт-объект - это контейнер, изменения которого не затрагивают объект внутри. Можно растягивать, уменьшать, применять эффекты не теряя качества картинки или шрифта. По умолчанию кстати все картинки, которые перетаскиваются в ФШ, становятся смарт-объектами.
Редактирование смарт-объектов происходит как редактирование отдельного файла в отдельном окне (создается временный файл в формате.psb, привязанный к основному файлу). Изменение и сохранение этого файла приводит к изменению основной картинки.
Пользоваться мокапами очень просто.
- Скачиваем нужный PSD, открываем его и ищем слой с примерным названием «Your design here» или что-то подобное.
- Дважды щелкаем на иконке смарт-слоя - открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
- После этого закрываем это окно, выбрав «Да» при вопросе нужно ли сохранить.
Сейчас огромное количество ресурсов, где можно найти мокапы для собственных нужд, чтобы показать свои работы в лучшем свете. Вот несколько ресурсов, где можно найти неплохие мокапы бесплатно.
На самом деле мокапы не очень сложно сделать самому, владея элементарными навыками работы в фотошопе. Вот прекрасное видео, где на примере футболки показано как сделать мокап, последовательность работы можно перенести вместо футболки на любой другой предмет.
Показывайте свои работы красиво - пользуйтесь мокапами
