Post.Scriptum ⟶ Articles ⟶ Post
Хочешь iPhone X?
Мокапы в помощь, а мы расскажем как с ними работать
Мокапы в помощь, а мы расскажем как с ними работать
Дизайнер, основатель P.S.
Пока Apple сильно лажает со сроками доведения своего флагманского продукта до покупателя, дизайнеры во всю используют mockup'ы iPhone X в качестве презентации своих работ (например, поиск по тому же Behance).
Что такое mockup?
Техника презентации своей digital-работы на реальных предметах называется mockup (далее мокап или мок). Сегодня мало кто делает собственные моки, ведь готовые PSD-файлы со смарт-объектами распространены по всей сети.
Преимущества мокапов очевидны:
- наглядность решения в боевых условиях за считанные минуты;
- огромная база готовых psd, готовых к работе сразу же.
Где брать мокапы?
Так как основным инфоисточником для многих - телеграм, есть канал PSD Mockup https://t.me/psdmockup. Большой архив, хорошая система тегов, постоянные подгоны - максимум что надо.
Пример поста из канала PSD Mockup
Как пользоваться сией чудесной техникой?
1
Сохраняем мокап
2
Открываем.
Советую делать дубликат файла. Если вдруг провтыкаете что-то где-то, то не понадобится качать еще раз.
Советую делать дубликат файла. Если вдруг провтыкаете что-то где-то, то не понадобится качать еще раз.
Мокап, открытый в Ps
3
Ищем нужный смарт-объект.
В сообществе мокап-мейкеров нет ГОСТов, а значит в слоях может быть по-всякому. Воспользуемся профессиональной фишкой и в панели "Layers" отфильтруем слои:
В сообществе мокап-мейкеров нет ГОСТов, а значит в слоях может быть по-всякому. Воспользуемся профессиональной фишкой и в панели "Layers" отфильтруем слои:
Фильтр "Оставить только слои смарт-объекты"
4
Помещаем нужный контент.
В виде подсказки нужного смарт-слоя используем названия, ищем что-то вроде "YOUR DESIGN HERE", двойной клик - открываем:
В виде подсказки нужного смарт-слоя используем названия, ищем что-то вроде "YOUR DESIGN HERE", двойной клик - открываем:
Открытый смарт-объект экрана
Для примера набросаем интерфейс для просмотра карточек PS Tips:
Набросок UI
5
Сохраняем изменения в смарте.
И сохраним "Ctrl + S". Сразу можно обратить внимание на звездочку у названия открытого родительского документа мока - это говорит нам, что были внесены изменения. Сохранив, мы обновили только смарт-объект, но не всю композицию.
И сохраним "Ctrl + S". Сразу можно обратить внимание на звездочку у названия открытого родительского документа мока - это говорит нам, что были внесены изменения. Сохранив, мы обновили только смарт-объект, но не всю композицию.
6
Наблюдаем нашу работу.
Вернемся к файлу моку.
Вернемся к файлу моку.
Файл мока с обновленным смартом
Опа - и мы видим результат нашей работы. Не забудем сохранить теперь уже сам мокап.
Каковы итоги?
Моки вещь незаменимая. Их использование массовое - защита своих решений дизайн-студиями, презентация на Behance, быстрое прототипирование.
Многое создано уже до нас, а значит надо только знать ресурсы где брать. Мы рекомендуем телеграм-канал PSD Mockup.
Качественные мокапы имеют оригинальные разрешения в смарт-объектах, поэтому вам не понадобится подгонять свое решение, достаточно закинуть его в мок.
Приятной работы.
Многое создано уже до нас, а значит надо только знать ресурсы где брать. Мы рекомендуем телеграм-канал PSD Mockup.
Качественные мокапы имеют оригинальные разрешения в смарт-объектах, поэтому вам не понадобится подгонять свое решение, достаточно закинуть его в мок.
Приятной работы.