Часто нам хочется показать свои работы красиво и интересно, но не всегда это получается сделать, просто выложив саму работу. Гораздо интереснее выглядит подача, где картинки как будто нарисованы в альбоме или используются на этикетках продуктов, для этого как раз и нужны мокапы.
Мокап (или mock-up на английском) — это специальным образом подготовленный файл, в котором можно свой дизайн размещать на реальных предметах. Они нужны, чтобы показать как картинка будет выглядеть в реальной жизни. Обычно это PSD файл со смарт-объектом, на который и вставляется картинка с дизайном. Бывают и просто JPEG картинки, называемые мокапами, но работать с ними сложно, нужно долго искажать картинку и вписывать ее в окружение.
Смарт-объекты — очень крутая штука. Если вы хоть раз уменьшали картинку в фотошопе, а потом растягивали ее на большой размер, наверняка получалась примерно такая история, потому что Фотошоп искажает файлы.
Что такое мокап/mockup и для чего он нужен?
То же самое и с шрифтами и с эффектами. Для того, чтобы этого избежать, стоит превращать все элементы в смарт-объекты. Для того чтобы создать смарт-объект, откройте любое изображение в фотошопе. Далее преобразуйте фоновый слой в обычный (редактируемый), для этого двойным щелчком мыши кликните по нему и нажмите ОК либо создайте его дубликат, для этого нажмите комбинацию клавиш Ctrl+J.
Затем, щелкнув правой кнопкой мыши по преобразованному/дублированному слою из контекстного меню выберите “Преобразовать в смарт-объект”. После того, как Вы это сделали, на миниатюре Вашего слоя появится небольшая иконка, которая означает, что слой является смарт-объектом.
По сути смарт-объект — это контейнер, изменения которого не затрагивают объект внутри. Можно растягивать, уменьшать, применять эффекты не теряя качества картинки или шрифта. По умолчанию кстати все картинки, которые перетаскиваются в ФШ, становятся смарт-объектами.
Редактирование смарт-объектов происходит как редактирование отдельного файла в отдельном окне (создается временный файл в формате .psb, привязанный к основному файлу). Изменение и сохранение этого файла приводит к изменению основной картинки.
Пользоваться мокапами очень просто.
- Скачиваем нужный PSD, открываем его и ищем слой с примерным названием “Your design here” или что-то подобное.
- Дважды щелкаем на иконке смарт-слоя — открывается новое окно, куда и нужно перетащить свой паттерн или картинку.
- После этого закрываем это окно, выбрав “Да” при вопросе нужно ли сохранить.
Все, в исходном файле ваша картинка искажается и вписывается в объект. В любой момент картинку можно заменить или подвинуть, опять же повторив все действия выше.
Технология mock up в стоматологии
Сейчас огромное количество ресурсов, где можно найти мокапы для собственных нужд, чтобы показать свои работы в лучшем свете. Вот несколько ресурсов, где можно найти неплохие мокапы бесплатно.
На самом деле мокапы не очень сложно сделать самому, владея элементарными навыками работы в фотошопе. Вот прекрасное видео, где на примере футболки показано как сделать мокап, последовательность работы можно перенести вместо футболки на любой другой предмет.
Источник artlab.clubЧто такое Мокап (mockup). Разбираемся в определениях
Здравствуйте, товарищи дизайнеры и близкие к ним люди. В понятиях мокапы, макеты, прототипы и так далее есть некая путаница. Мы часто путаем прототип с эскизом, а макет с мокапом. Давайте вместе разберемся в этой статье, что такое мокапы и как их использовать.
Для начала нам нужно википедиевское объяснение понятия мокапа (да и всех остальных дизайнерских понятий стадии готовой работы). Будем идти последовательно, начиная с идеи и заканчивая готовым продуктом
Эскиз
Это первое, что появляется после идеи. Ведь чтобы объяснить дизайнеру свою идею нужно ему её показать. И обычно, всё начинается с набросков, которые наспех заносятся в блокнот. Это и есть эскиз.
Схема (каркас)
Схема или, по другому, каркас — это уже выверенный рисунок/схема того эскиза со всеми деталями. Продумка структуры сайта, где какие блоки располагаются или арматура с силуэтами скульптуры — это всё схема (или каркас). Туда же входят такие понятия как Вайрфрейм, миндмап и другие, но на них мы останавливаться не будем.
Прототип
Прототип — это работающая версия каркаса. Если это сайт, то это полноценный сайт, только без дизайна и функционала, но покликать, повертеть, посмотреть на компьютере его можно. Если это прототип автомобиля, то у него скорее всего будет много работающих частей, но ездить он пока еще не будет уметь.
Дизайн-макет
Вот мы и подбираемся к нашему неоднозначному другу. Дизайн-макет — это готовая, с точки зрения визуала и функционала, работа, требующая внимания заказчика для последующих доработок и сдачи заказа. На английском языке это понятие пишется так — Mockup
Что же такое Мокап (mockup)?
Мокап (с анг. mockup — макет) — в производстве и дизайне это масштабная или полноразмерная модель конструкции или устройства, используемого для обучения, демонстрации, оценок дизайна и прочее. Мокапы используются, в основном, для получения отзывов от пользователей.
Примеры мокапа:
Mockup (макет) Boeing 2707 в музее авиации им. Гиллера
Mockup (макет) Американского шатла в полную величину
Mockup (макет) интерьера, выполненный в настоящую величину и сфотографированный.
Мокапы применяются в производстве, архитектуре, программировании, текстиле, военном деле и прочих сферах. Танк без двигателя и внутренностей, выполненный в полном размере из пластика и выглядищий как настоящий; кухня, с открывающимися дверцами, стеклами и выдвижными ящичками, но выполненная в миниатюре; дизайн интерьера, выполненный в 3D Max во всех деталях, очень похожий на фотографию — всё это mockup, то бишь макеты.
Из всего вышесказанного мы можем вычленить одно:
Mockup — это демонстрация почти готовой работы, виртуальной, как макет дизайна или осязаемой как проект дома из картона.
Получается, что в русском языке слово «мокап» уже не совсем то, что в английском mockup. Как мы уже узнали mockup c английского — это и есть макет, но в русском языке слово «мокап» приобрело иной характер. Это можно наглядно увидеть в поисковиках
Как мы видим, тут никаких шатлов или макетов домов в миниатюре нет. Здесь, в основном, фотографии дизайна кружек, текстиля с логотипами, и другими изображениями, которые можно менять с помощью Adobe Photoshop. Вот мы и подбираемся к определению слова «Мокап».
Мокап — это изображение готовой работы (фотография или реалистичная иллюстрация), выполненная в формате psd и имеющая смарт-слой, в котором можно заменить тот или иной рисунок на своё изображение, получив, таким образом, демонстрацию работы в реалистичной фотографии (или иллюстрации)
Кто-то может со мной не согласиться. Определение слова «мокап» в такой форме не каждому может показаться правильным, но согласитесь, когда мы вбиваем в поисковую строку «мокап визитки», мы хотим получить не дизайн готовой визитки, ни фотографию довольных клиентов с визиткой, а конкретный PSD файл, в котором будет фотография с изображением визитки в реальном мире, куда мы в 2 клика сможем поместить дизайн своей визитки. Так что определение выше имеет право на существование.
Может пора признать, что мы подразумеваем под словом «Мокап»? У меня всё! Мнения и негодования оставляйте в комментариях. Пока.
Источник psdmockup.ruЧто такое мокап, зачем он нужен и какие они бывают
Когда я работал в веб-студии, наш дизайнер для презентации будущего сайта делала макет его будущего вида на разных устройствах. Затем на встрече при присутствии менеджера она демонстрировала макеты клиентам. Это и были мокапы, о которых мы сейчас поговорим.
Что такое мокап
Это разновидность графического контента в виде PSD-файла со смарт-объектами и слоями. Простыми словами, мокап — это 3D-модель какого-либо объекта для демонстрации его дизайна еще до физического воплощения.
Смарт-объекты — это слои с данными изображения из векторных или растровых изображений.
В дальнейшем на такой шаблон можно наложить свою айдентику, создать дизайн упаковки и увидеть, как продукт отвечает рекламным запросам.
- Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
- Для этого вам необходимо подписаться на наш канал.
Зачем нужны мокапы
- Демонстрация заказчику проекта в том виде, в каком его сможет увидеть и протестировать конечный пользователь.
- Сокращение и упрощение коммуникативной цепочки между исполнителем и заказчиком.
- Перенос собственных идей и наработок на «боевые» объекты и тестирование их жизнеспособности. Например, можно посмотреть, как корешок будущей книги будет смотреться на книжной полке: ярко выделяться среди остальных изданий или безнадежно теряться.
- Допроизводственная дополнительная проверка прототипа и то, как смотрится дизайн при увеличении или уменьшении размеров объектов. Также можно еще на мокап-тестировании увидеть, что на блокнотах логотип хорошо различим, текст читается, а на ручках он же сливается в одно желто-зеленое пятно с закорючками.
- Ускорение работы с шаблонами. Например, у вас маркетплейс и надо показать одно и то же платье в карточке товара в восьми вариантах цвета. Согласитесь, куда проще на лету их «перекрасить» и «прифотошопить» другой фасон, чем нанимать фотографа, устраивать фотосессию и потом все это обрабатывать.
Примеры мокапов
Скажем так: о них нужно не рассказывать, а показывать.
Визитки
Надо быть уверенным, что ваша визитка даст о вас верное реноме — как текстом, так и дизайном.
Книги
При их подготовке важно понимать, каким будет внешний вид, ведь от этого тоже зависят продажи. Простой пример — творение Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай» многие называют «Оранжевая книга».
Канцелярские принадлежности
Такая демонстрация важна для людей, которые даже в этой сфере ценят бредовость. Тяжело спорить, что, например, на мокапы Parker вы обратите большее внимание, чем на никому не известную китайскую пластмассу.
Кружки
Все просто: я например, хочу кружку с любимым киногероем и до покупки смогу оценить, как изображение будет выглядеть на изогнутой поверхности.
Журналы
Приятно взять только что вышедший из типографии журнал,вдохнуть запах краски… Но и посмотреть на то, как будет сверстаны его полосы на макете — не менее интересно!
Гаджеты
Считаю, что такие мокапы крайне важны для верстальщиков, которые приводят свое видение и видение веб-дизайнера в жизнеспособную форму. И, конечно, клиенту тоже надо это показать!
Музыкальные носители
Те, кто постарше, покупали CD не только из-за музыки, хоть это главное, но и чтобы посмотреть состав песен, кто принимал участие в записи, почитать тексты и т. п. С мокапом это можно сделать без покупки 🙂
Как правильно выбрать мокап
Это нетривиальный вопрос. Дело в том, что то, что вы выдаете в качестве прототипа будущего предмета, может в корне не совпадать с видением заказчика или конечного пользователя.
Итак, когда мы выбираем мокап, необходимо:
- Смотреть на пропорции и размеры объектов. Это вроде и банально, но иногда из головы вылетает, что дизайн на листах A4 — вовсе не то, что на A5, и что полиграфические стандарты в разных регионах отличаются между собой. Отсюда вывод: показывать размеры именно те, о которых заявил клиент.
- Прорабатывать блики, тени и отражения, чтобы они подчинялись законам физики и геометрии. Если мокап хороший, а дизайнер — профессионал, все будет выглядеть так, как в реальности. В противном случае можно будет применить «костыли» в виде верного «Фотошопа» или вовсе все переделать заново.
- Делать картинки предельно реалистичными . Бывает, что даже не профессионал поймет, что перед ним дурно сделанная компьютерная графика, которая имеет отдаленное отношение к действительности. Напомним, что речь у нас идет не о дизайнах, а о мокапах!
- Следить за трендами и актуальностью создаваемых изображений. Как-то в нашей студии веб-дизайнер разработала мокап и предварительно показала ее начальнице. Та сначала ничего не заметила, но спустя некоторое время попросила его переделать. Дело в том, что еще и аккаунт-менеджер посмотрел и увидел, что присутствуют устаревшие версии iPhone и iPAD. Век живи, век учись, что называется!
Топ-5 лучших мокап-библиотек
К радости дизайнерского сообщества и тех, кому по каким-то причинам надо демонстрировать мокапы в интернете, есть библиотеки, где их можно найти и скачать на платной или бесплатной основе.
«Бесплатные мокапы»
Файлы разнесены по пяти типам устройств (все — Apple), брендингу (логотип, футболки, фирменный стиль), предметам (одежда, обувь, компьютеры, бумага, блокнот) и виду (сверху, изометрия и перспективным).
Все мокапы отсортированы по категориям. Радует, что везде русский язык.
MOCKUP DOWNLOAD
Файлы отсортированы по 20 категориям. Есть раздел с FAQ. Также есть раздел с новинками. Плюс — возможность скачать с сайта руководства «Как сделать Mockup с помощью программы Photoshop (Фотошоп)».
PSD MOCKUP.RU
Здесь вы найдете не только бесплатные мокапы, собранные в категории, но и PSD-макет, почитаете статьи и узнаете о проекте. Сервис уверенно говорит о себе: «PSDmockup.ru — самая большая и самая удобная в поиске база мокапов в рунете».
Mockupworld
Это уже зарубежный сервис, где файлы распределены по таким категориям как Paper Pictures, Signs https://kokoc.com/terminy/mokap-ehto-chto-takoe/» target=»_blank»]Источник kokoc.com[/mask_link]