Хочешь iPhone X? Мокапы в помощь, а мы расскажем как с ними работать

Хочешь iPhone X? Мокапы в помощь, а мы расскажем как с ними работать

@pstips (ред. - Oleg Gorlachov)

Пока Apple сильно лажает со сроками доведения своего флагманского продукта до покупателя, дизайнеры во всю используют mockup'ы iPhone X в качестве презентации своих работ (например, поиск по тому же Behance).

Что такое mockup?

Техника презентации своей digital-работы на реальных предметах называется mockup (далее мокап или мок). Сегодня мало кто делает собственные моки, ведь готовые PSD-файлы со смарт-объектами распространены по всей сети.

Что такое смарт-объекты можно узнать из нашей карточки: https://t.me/pstips/507


Преимущества мокапов очевидны:

  • наглядность решения в боевых условиях за считанные минуты;
  • огромная база готовых psd, готовых к работе сразу же.

Где брать мокапы?

Так как основным инфоисточником для многих - телеграм, есть канал PSD Mockup https://t.me/psdmockup. Большой архив, хорошая система тегов, постоянные подгоны - максимум что надо.

Пример поста из канала PSD Mockup

Как пользоваться сией чудесной техникой?

.1 Скачиваем мокап

Для туториала взяли тот, что выше (https://t.me/psdmockup/218).

Сохраняем мокап

.2 Открываем

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

Мокап, открытый в Ps

.3 Ищем нужный смарт-объект

В сообществе мокап-мейкеров нет ГОСТов, а значит в слоях может быть по-всякому. Воспользуемся профессиональной фишкой и в панели "Layers" отфильтруем слои:

Фильтр "Оставить только слои смарт-объекты"

.4 Помещаем нужный контент

В виде подсказки нужного смарт-слоя используем названия, ищем что-то вроде "YOUR DESIGN HERE", двойной клик - открываем:

Открытый смарт-объект экрана

Для примера набросаем интерфейс для просмотра карточек PS Tips:

Набросок UI

.5 Сохраняем изменения в смарте

И сохраним "Ctrl + S". Сразу можно обратить внимание на звездочку у названия открытого родительского документа мока - это говорит нам, что были внесены изменения. Сохранив, мы обновили только смарт-объект, но не всю композицию.

.6 Наблюдаем нашу работу

Вернемся к файлу моку.

Файл мока с обновленным смартом

Опа - и мы видим результат нашей работы. Не забудем сохранить теперь уже сам мок.

Каковы итоги?

Моки вещь незаменимая. Их использование массовое - защита своих решений дизайн-студиями, презентация на Behance, быстрое прототипирование.

Многое создано уже до нас, а значит надо только знать ресурсы где брать. Мы рекомендуем канал PSD Mockup.

Качественные мокапы имеют оригинальные разрешения в смарт-объектах, поэтому вам не понадобится подгонять свое решение, достаточно закинуть его в мок.

Приятной работы 😉 

Report Page