Как редактировать мокап в фотошопе. Мокап ликбез — все что нужно знать про мокапы

"Мокап" - это узкоспециальный термин, которым пользуются в основном дизайнеры. В прямом значении слово мокап означает макет . С его помощью профессионал создает трехмерную визуализацию чего угодно, например упаковки или полиграфии. Часто он используется в рекламе. Простой пример: сеть быстрого питания «Макдональдс». Аппетитный гамбургер на изображении - не фотография, а визуальная идеализация того, что хочется купить и съесть. Если предлагаемый товар находится внутри среды, то смотрится лучше и выгоднее, чем обычный скриншот (снимок).

Что это?

Мокап - это макет, который используется дизайнерами для того, чтобы продемонстрировать заказчику изделие или продукт. Например, будущую обложку компакт-диска, фотоальбом, открытку, содержание или внешний вид книги. Благодаря этому способу заказчик визуально оценивает предлагаемый специалистом дизайн в рабочей среде. Получается не просто плоская фотография, а уже наложенный макет на продукт. позволяет увидеть конечный результат в реальности. Он упрощает взаимодействие заказчика и дизайнера. Визуальные макеты позволяют тестировать продукцию на стадии разработки, вносить изменения, поправки до печати.

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

Зачем он нужен?

Мокапы нужны профессиональным дизайнерам, фрилансерам, художникам, которые трудятся на заказ и создают удивительно красивые работы. Позже они презентуются клиенту в лучшем виде. Мокап создается с целью продемонстрировать историю картинки или надписи, которая улучшает продукт и помогает покупателям сделать выбор в его пользу. Технически мокапы - PSD-файлы с редактируемыми смарт-объектами (слои в программе "Фотошоп", которые позволяют вставить дизайн в нужное место). Мокапами могут быть и фотографии. Например: блокнот, лежащий на столе, или визитка. Мокап можно сделать самостоятельно, купить или бесплатно скачать готовый.

Как его создать?

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

Следует открыть фотографию в Photoshop и файл с готовой надписью. Ее нужно грамотно поместить на визитку так, чтобы создавалось ощущение реальности. Для этого используются все доступные инструменты программы. Для такой работы требуется начальное знание графического редактора. Если не знаете, как сделать мокап самостоятельно, изучите теорию, а также постоянно тренируйтесь.

Существует особый алгоритм самостоятельного создания мокапа. Хотите продемонстрировать заказчику надпись или цитату? Приготовьте фотоаппарат и предметы для сцены: блокнот, красивый нейтральный фон. Выставите правильное освещение, расположите объекты и сделайте несколько снимков.

Сферы применения

Теперь читатели знают, что мокап - это макет визитки, журнала, книги, открытки, на который дизайнер накладывает конкретную картинку, фотографию или надпись. Этот процесс помогает визуализировать работу (например, сделать надпись на карточке) и позволяет заказчику понять, как будет выглядеть результат. Мокап применяется в создании сайтов, веб-приложений, полиграфии, рекламных баннеров, вывесок, меню и многого другого. Часто к нему обращаются дизайнеры интерьеров, когда готовят проект помещения.

Мокап сайта

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

Каркас сайта создается в черно-белом цвете, что позволяет разработчику наметить расположение главных элементов: логотипа, меню, контента, После каркаса дизайнер разрабатывает прототип сайта: цвет и стиль. На помощь приходят одиннадцать полезных инструментов. Они выручат при создании всех деталей сайта. Обратите внимание на программы InVision, UXPin, Marvel App, Gliffy, OmniGraffle, Moqups, Axure, JustinMind, Mockingbird, HotGloo, Mockplus.

Например, Mockplus - простой инструмент дизайнера. Он помогает создать каркас, перейти от черно-белого варианта к цветному. Данный инструмент позволяет использовать более двухсот компонентов, которые намного упрощают создание сайта. На помощь дизайнеру приходят и другие программы. С их помощью легко создавать элементы сайта, прорабатывать детали, учиться. Самый распространенный и простой способ получить навыки - сделать мокап визитки.

Графический редактор

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

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

Легкий и популярный вариант среди новичков - это мокап визитки. Откройте скачанный файл, надпись и текст. Перейдите к готовому мокапу, нажмите на значок "Смарт-объект" (это должно быть изображение выберите в меню "Редактировать содержимое". В откроется объект, готовый для изменения. Далее активируйте созданную надпись или текст и перенесите на поверхность визитки. Надпись можете трансформировать, поменять размер, выбрать наиболее подходящее место ее расположения. Сохраните проект.

Источники

Нет ничего сложного в создании мокапов. Они упрощают основную работу дизайнера, экономят силы и время. Если есть желание, создайте собственную базу таких файлов и займитесь их продажей. Но для этого понадобится хороший фотоаппарат, навыки съемки, предметы, знание освещения, чувство хорошо развитого вкуса и стиля. Источниками изображений могут стать ресурсы, которые за определенную плату продают готовые картинки для демонстрации дизайна чего-либо. Если нет свободных денежных средств для покупки мокапов, дизайнеру предлагается большое количество бесплатных источников. Там c легкостью можно найти для скачивания тысячи красивых картинок на любую тематику.

Минусы готовых мокапов: однотипность, отсутствие индивидуальности, шаблонность. Плюсы - доступность, красота, минималистичность, максимальный реализм, удобство. Если занимаетесь дизайном профессионально, обязательно имейте наработанную базу мокапов. Она должна подчеркивать стиль автора, выгодно демонстрировать предмет продажи, привлекать заказчика.

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

Архив автоматически сохранится на вашем компьютере и теперь его нужно распаковать.

В появившейся папке найдем файл glass-bottle-mockup-psd и откроем его в Фотошопе:

Во вкладке «слои» расположены папки с названиями, в которых сложены файлы. Все папки соответствуют своему элементу.
Откроем ту, что принадлежит зеленой бутылке, нажмем на стрелку, которая расположена рядом с папкой, и перед нами окажется несколько слоев:

Нам интересен слой со смарт-объектом, который обведен на рисунке красным. Чтобы отредактировать его, нам надо дважды кликнуть левой кнопкой мыши по значку.
И тут нам откроется еще одно окошко смарт-объекта, которое теперь мы можем редактировать как душе угодно. Этот слой ничем не отличается от обычного файла.

Теперь нужно убрать все лишнее на этом слое. Можно просто скрыть объекты, либо вовсе удалить их, если они больше не понадобятся. Кому как нравится. После чего нажимаем Файл → Сохранить (Ctrl+S), и все изменения сохранятся автоматически.

А теперь можно добавить что-то свое, например, логотип, надпись, или рисунок. И снова сохраним.

Все оказалось совсем несложно. На этот слой можно помещать любые файлы, как векторные, так и растровые, с множеством возможных разрешений AI, EPS, PNG, JPEG. А также можно делать текстовые слои, в общем тут куда уже приведет ваша фантазия. Только не забывайте сохранять изменения.
Ну и теперь пришло время поменять фон. Это можно сделать разными способами. В некоторых мокапах можно добавить свой фон, в некоторых можно поменять цвет. В любом случае, разобраться какой из способов подходит вам не сложно. В нашем примере мы просто поменяем цвет.
Для начала разблокируем слои, отвечающие за фон, и скроем один из них.

Затем перейдем на слой белого цвета, в панели инструментов выберем нужный нам цвет и закрасим кисточкой, можно так же использовать инструмент заливка (Alt+ Backspace).

Часто нам хочется показать свои работы красиво и интересно, но не всегда это получается сделать, просто выложив саму работу. Гораздо интереснее выглядит подача, где картинки как будто нарисованы в альбоме или используются на этикетках продуктов, для этого как раз и нужны мокапы.

Мокап (или mock-up на английском) - это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном. Бывают и просто JPEG картинки, называемые мокапами, но работать с ними сложно, нужно долго искажать картинку и вписывать ее в окружение.

Смарт-объекты - очень крутая штука. Если вы хоть раз уменьшали картинку в фотошопе, а потом растягивали ее на большой размер, наверняка получалась примерно такая история, потому что Фотошоп искажает файлы.

То же самое и с шрифтами и с эффектами. Для того, чтобы этого избежать, стоит превращать все элементы в смарт-объекты. Для того чтобы создать смарт-объект, откройте любое изображение в фотошопе. Далее преобразуйте фоновый слой в обычный (редактируемый), для этого двойным щелчком мыши кликните по нему и нажмите ОК либо создайте его дубликат, для этого нажмите комбинацию клавиш Ctrl+J. Затем, щелкнув правой кнопкой мыши по преобразованному/дублированному слою из контекстного меню выберите «Преобразовать в смарт-объект». После того, как Вы это сделали, на миниатюре Вашего слоя появится небольшая иконка, которая означает, что слой является смарт-объектом.

По сути смарт-объект - это контейнер, изменения которого не затрагивают объект внутри. Можно растягивать, уменьшать, применять эффекты не теряя качества картинки или шрифта. По умолчанию кстати все картинки, которые перетаскиваются в ФШ, становятся смарт-объектами.

Редактирование смарт-объектов происходит как редактирование отдельного файла в отдельном окне (создается временный файл в формате.psb, привязанный к основному файлу). Изменение и сохранение этого файла приводит к изменению основной картинки.

Пользоваться мокапами очень просто.

• Скачиваем нужный PSD, открываем его и ищем слой с примерным названием «Your design here» или что-то подобное.
• Дважды щелкаем на иконке смарт-слоя - открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
• После этого закрываем это окно, выбрав «Да» при вопросе нужно ли сохранить.

Все, в исходном файле ваша картинка искажается и вписывается в объект. В любой момент картинку можно заменить или подвинуть, опять же повторив все действия выше.

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

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

Показывайте свои работы красиво - пользуйтесь мокапами

Довольно часто на мой сайт заходят по запросу: «Как работать с мокапами в фотошопе?» А статьи, посвященной этому вопросу на моем сайте нет. Вернее до сегодняшнего дня не было, т.к. я решил восполнить этот ужасный пробел и написать небольшой мануал по работе с мокапами. В своей статье я решил использовать бесплатный мокап керамических бутылок, на которых можно изменять этикетку и цвет заднего фона всей композиции. Хочу, однако, предупредить, что все мокапы разные — в том плане, что изменяться могут другие детали изображения — не обязательно этикетки или фон… Но общий принцип работы с мокапами вам будет понятен после ознакомления со статьей и в дальнейшем вы без труда сможете пользоваться любым мокапом.

Итак, приступим. Как я уже сказал, в качестве «подопытного кролика» у нас будет Скачать совершенно бесплатно его можно там же на странице с описанием.

Первое, что мы должны сделать — распаковать архив. Нам нужен непосредственно файл Ceramic Bottle PSD MockUp.psd

Открываем его в Фотошопе и смотрим:

Открыли файл и смотрим на панель со слоями

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

Смарт-объект имеет свою пиктограмму

• Смарт-объект с надписью или изображением, которую можно поменять (он обведен на рисунке красной рамкой)
• Керамическая или сургучная нашлепка на бутылке
• Собственно, сама бутылка
• Тень от бутылки для придания пущей реалистичности.

Нас интересует слой со смарт-объектом. Для наглядности откроем папку слоев Regular Color, а не Ceramic label — там такой же смарт-объект, только цветом темнее и будет лучше нам виден.

Для его редактирования ДВАЖДЫ щелкаем на его значке. Именно на значке — эта область выделена рамкой на рисунке выше.

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

Смарт-объект в режиме редактирования

Вырежем надпись «Ceramic». Неважно как. Кто как привык. Ластиком или рамкой + Del. Главное убрать надпись в середине. И нажимаем Ctrl+S — сохраняем этот слой.

После сохранения надпись исчезла и на бутылке

Как видите удаленная нами надпись в смарт-объекте пропала и с бутылки.

А теперь напишем что-нибудь свое. Например ИНФОРМ-ДЕПО. Красивым таким поносным цветом. И снова сохраним слой (Ctrl+S). Смарт-объект можно при этом не закрывать. Смотрим:

Наша надпись оказалась на бутылке

Как видите, надпись оказалась там, где надо. Несложно, правда? Слой смарт-объекта может содержать свои слои как текстовые, так и графические. Вы можете загрузить в этот слой сторонний AI, EPS, PNG и т.д. Главное — нажимать Ctrl+S всякий раз, когда вы в нем что-то поправили.

Теперь поменяем цвет фона. Раз мы закончили с надписью, закроем смарт-объект с надписью и ДВАЖДЫ щелкнем на пиктограмме корректирующего слоя. Да-да. В данном примере это не что иное, как корректирующий слой с фильтром Photo Filter.

Корректирующий слой для фона

Тычем в квадратик с цветом и выбираем требуемый. Все.

Меняем цвет фона на поносный

Спасибо за внимание.

Здравствуйте, сегодня я опишу как делаются шаблоны (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Д, мобильный и карандаши сразу убираю, т.к. они имеют толщину, и нужно будет заново создавать эти объекты, исходя из угла обзора, это долго. Оставляю диск и визитки.