Мокапы визиток: 170+ мокапов визитки psd скачать бесплатно

Мокап – что это такое и зачем он нужен в дизайне

Мокап – что это такое и зачем он нужен в дизайне

Веб-дизайн

5 апреля 2021

3213

Учебное пособие по созданию вашего первого мокапа

Содержание:

1. Что такое мокап
2. Примеры мокапов
   • Moкап фирменного стиля
   • Мокап книги
   • Мокап для ресторана
   • Мокап футболки
   • Мокап флаконов
   • Мокап визиток
3. Где брать мокапы
   • Где скачать мокап (бесплатно и платно)
   • Как создать мокап самому
4. Как работать с готовым мокапом
5. Где используются мокапы
6. Мокапы в веб-дизайне
7. Мокапы в рекламе
8. Вместо вывода

Что такое мокап

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

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

• логотип;
• дизайн фирменного стиля на упаковке товара;
• товар на сайте;
• визитная карточка;
• книга.

Мокап значительно упрощает процесс взаимодействия заказчика и дизайнера и позволяет быстро оценить работу дизайнера, оперативно внести соответствующие корректировки, а специалиста избавляет от многочисленных правок.

Освойте графический дизайн и зарабатывайте удаленно

Примеры мокапов

Moкап фирменного стиля

Мокап книги

Мокап для ресторана

Мокап футболки

Мокап флаконов

Мокап визиток

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

Где скачать мокап (бесплатно и платно)

Мокапы можно купить или скачать бесплатно. Существует много бесплатных и платных ресурсов:

• PSD Freebies — много качественных мокапов;
• CSS Author — мокапы распределены по категориям;
• Mockup world — бесплатные и платные мокапы;
• Mockups-design — мокапы для визиток, буклетов;
• Mockup download — бесплатные и платные мокапы для различных дизайн-проектов;
• Freemockup — мокапы разделены на категории;
• Freepik — много бесплатных и платных мокапов.

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

Освойте графический дизайн с полного нуля

Как создать мокап самому

Самостоятельно мокапы можно создавать с помощью HTML и CSS или воспользоваться онлайн-ресурсам:

• Adobe Photoshop;
• Adobe Illustrator;
• Bohemiancoding;
• Gomockingbird;
• Mockups;
• Mockupbuilder.

Как работать с готовым мокапом

После скачивания архива с готовым мокапом, из архива нужно извлечь файлы и найти файл в PSD-формате. Далее его нужно открыть в программе Photoshop.

В макете можно менять картинки, изменять фон и цвет, добавлять тени. Объект можно поворачивать и перемещать.

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

Найдите слой, который называется «Your design here». Когда вы кликните на иконку этого слоя, откроется окно, куда и нужно загрузить вашу картинку.

Картинка впишется в макет, а далее с ней можно производить любые действия. За счет множества слоев в хорошем мокапе настраивается все достаточно просто и быстро.

Давайте рассмотрим алгоритм действий на конкретном примере:

• Выбираем и скачиваем мокап;

 

• В скачанном архиве находим psd файл и открываем в Photoshop;

 

• Файл открылся;

 

• Ищем слой «Your design here»;

 

• Два раза кликаем на иконку левой кнопкой мыши и открываем дизайн проекта;

 

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

 

• Нажимаем Файл, затем Сохранить, а затем открываем первоначальный проект;

 

• Чашка с кофе превратилась в чашку с апельсиновым соком.

 

Где используются мокапы

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

Мокапы используются в:

• полиграфии;
• упаковке;
• наружной рекламе;
• веб-разработке при создании сайтов, приложений;
• в интернет-рекламе при создании рекламных объявлений и баннеров.

Мокапами широко пользуются дизайнеры, чтобы показать свою работу заказчику в наилучшем свете.

Иногда заказчику бывает сложно представить, как будет выглядеть брендбук на упаковке товара или этикетке, что из себя будет представлять обложка брошюры, маркетинг-кита, как будет смотреться наружная реклама или сайт. Мокап ему в помощь!

Мокап помогает оптимизировать работу дизайнеру и сохранить денежные ресурсы заказчика.

Напечатать готовый образец даже небольшой этикетки стоит денег. А если будут правки и придется печать несколько раз? Денег будет затрачено немало. Мокап помогает решить все проблемы еще на берегу.

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

Освойте графический дизайн с полного нуля

Мокапы в веб-дизайне

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

Мокапы помогают правильно:

• разместить контент на сайте;
• выбрать шрифт и его размер;
• определить цветовую палитру сайта;
• подобрать наиболее подходящие картинки, фотографии, иллюстрации, видео.

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

Мокап адаптивного дизайна сайта на разных устройствах

Мокапы в рекламе

Трехмерная визуализация продукта чрезвычайно эффективна в рекламе. Например, реклама аппетитных гамбургеров ресторанов быстрого питания «McDonald’s». Ведь это не просто картинки.

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

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

Пример рекламного баннера McDonalds

Вместо вывода

Мокапы — это полезный инструмент для дизайнера. Они помогает клиенту создать четкий реальный образ своего продукта и своевременно внести корректировки, а дизайнеру сделать быструю презентацию, представляя результат своей работы.

Трехмерные изображения товаров очень эффективно использовать на продающих сайтах, баннерах и в рекламных объявлениях.

Как стать графическим дизайнером с нуля и работать удаленно на фрилансе

Регистрируйтесь на бесплатный онлайн-курс

Принять участие

Рекомендуемые статьи:

Веб-дизайн

11. 07.2021

HEX-код что это и как работает для обозначения цветов

Работа с цветом — это основной инструмент графического и веб-дизайнера. Каждое приложение и сайт подразумевает использование собственных оттенков, даже если выбран максимально лаконичный стиль. На этапе создания макетов подсказки по выбору цветовой гаммы есть во многих редакторах, та же компания Adobe предлагает для своих продуктов основные виды гармоний: колесо; комплементарность; контраст; оттеночные «гибриды» и многое […]

10091

Читать статью

Веб-дизайн

30.06.2021

Что такое favicon и зачем он нужен вашему сайту

Внешний вид вашего сайта может сыграть важную роль в повышении узнаваемости бренда и того, как пользователи воспринимают ваш бизнес. Хороший сайт — это сочетание множества элементов веб-дизайна, которые вместе создают профессиональный внешний вид. Каждый день появляются десятки и сотни тысяч сайтов, есть все тематики и направления, поэтому необходимо не просто рекламировать себя и использовать различные […]

1039

Читать статью

Веб-дизайн

19. 07.2021

Пагинация страниц сайта — что это и как ее сделать

Когда мы читаем книгу, информация в ней подается постранично. Прочитывая одну страницу, всегда можно перевернуть, чтобы перейти к следующей, поставить закладку на самом важном или интересном месте, открыть сразу на трехсотой или четыреста двадцать шестой. Это принцип не только «бумажных» книг — электронные работают аналогично, потому что подобный формат привычен и удобен всем людям. Что […]

2459

Читать статью

Веб-дизайн

18.02.2021

Что такое веб-дизайн и чем занимается веб-дизайнер?

Определение веб-дизайна Веб-дизайн — это один из этапов разработки сайта. Сайты создаются для e-commerce (интернет-магазины), для услуг или для информационных блогов, но все, что связано с внешним видом и визуальной составляющей сайта, подпадает под понятие «веб-дизайн». Чтобы создать полноценно работающий сайт, вам необходимо знать языки программирования: Язык гипертекстовой разметки, состоящий из HTML-тегов для создания структуры […]

3381

Читать статью

Веб-дизайн

19. 03.2021

Zero Block на Tilda — что это и как работает

Можно ли создать собственный дизайн на Tilda? Сервис Tilda многими воспринимается только в качестве обычного конструктора сайтов, на котором по-быстрому можно сложить сайт-визитку или незамысловатый лендинг. Что касается дизайнеров, то Tilda многие просто не воспринимают всерьез. Дизайн? Да, ну! О чем вы говорите? Какой может быть дизайн на конструкторе сайтов? Там стандартные, уже придуманные кем-то […]

2368

Читать статью

Веб-дизайн

14.03.2021

Figma — что это за программа и как она работает

Что такое Figma и для чего используется? Figma — это инструмент веб-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию. Веб-разработчики используют Figma в качестве библиотеки компонентов системы дизайна. Figma контролирует актуальность рабочих версий макета, поддерживает функцию совместной работы, режим демонстрации и генерации кода. Figma — это редактор векторной графики для совместного проектирования интерфейсов, используемых в веб-разработке […]

2006

Читать статью

Веб-дизайн

25. 02.2021

Что такое модульная сетка в дизайне и зачем она нужна

Секрет успеха в любом виде дизайна зависит от того, как расположены все элементы друго относительно друга. В этом и есть смысл создания дизайн-макета сайта или приложения. Важной составляющей дизайна являются сетки. Они — основа всех макетов, инфографики и презентаций. Дизайн макета предполагает использование одной сетки или группы сеток, в зависимости от того, какая у вас […]

4055

Читать статью

Веб-дизайн

15.02.2021

Краткое руководство, как стать веб-дизайнером с нуля

Часто ли вы задумываетесь о том, что могли бы улучшить дизайн посещаемых вами сайтов? Или, возможно, у вас уже есть личный блог, который вы активно ведете и заметили, что процесс проектирования и создания сайта вам очень импонирует. Если это так, и вы хорошо разбираетесь в деталях, обладаете талантом к креативу и творчеству, не боитесь технических […]

5257

Читать статью

Веб-дизайн

8.07.2021

Айдентика бренда — что это такое и как ее создать

«Выделиться из толпы» — то, что необходимо и человеку, чтобы его узнавали, и компании. Даже применительно к людям говорят о «личном бренде», и это означает не только черты лица, прическу, манеру одеваться, но и многое другое — от «тона голоса» в соцсетях и в жизни, до каких-либо поступков, например, участия в благотворительных фестивалях для поддержки […]

1212

Читать статью

Веб-дизайн

26.05.2021

Лучшие бесплатные и платные фотостоки (фотобанки)

Идеи для контента или готовые изображения и видео легко найти на фотостоках, а уникальные фото и видео с высоким качеством — в фотобанках. Среди сайтов нет четкого разделения, что такое фотобанк, а что такое фотосток. В этой статье примем их за синонимы. В фотобанке можно найти бесплатное изображение, в фотостоке — платное и наоборот. Одни […]

875

Читать статью

Веб-дизайн

9.04.2021

Что такое референсы и для чего они нужны

Что такое референсы Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер, чтобы начать и настроиться на нужный лад. Для чего нужны референсы Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. […]

942

Читать статью

Веб-дизайн

24.10.2021

Меню сайта — что это и зачем нужно

Когда мы приходим в ресторан или кафе, официант кладет список блюд, напитков, десертов, соусов. Во многих магазинах ассортимент предлагается по каталогам, особенно если это не супермаркет, в котором человек сам должен сориентироваться и выбрать, что ему купить, а формат мини-маркета. Меню сайта, как в ресторане и магазине, помогает посетителю выбирать «блюдо»: переходить из одного раздела […]

1181

Читать статью

определение, особенности и принципы создания

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

Что же такое мокап?

Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.

Давайте рассмотрим примеры мокапов.

Здесь мы видим мокапы книг. К примеру, вы разработали дизайн обложки книги. Дабы не тратить много времени, сил и денег на создание готового образца, вы можете наложить дизайн на макет и посмотреть, органично ли будет смотреться обложка до печати. 

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

Мокапы различных гаджетов тоже очень ценятся: зачастую их используют для визуализации веб-сайтов/приложений.

А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.

Как видите, мокапы бывают разными. Давайте разберемся, где эти мокапы искать и как правильно использовать!

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Лучшие библиотеки мокапов

Я отобрал 5 лучших сайтов с богатыми библиотеками мокапов. Итак, знакомьтесь:

• PSD Freebies – сайт с огромной коллекцией качественных мокапов (с него я и буду брать примеры). 

• CSS Author – сайт со множеством мокапов, разделенных по категориям.

• Mockup world – каталог качественных мокапов (представлено множество платных вариантов).

• Mockups-design – мокапы для рекламной продукции (для визиток, флаеров и т.п.).

• Mockup download – еще один хороший ресурс с платными и бесплатными шаблонами для дизайн-проектов. 

Работаем с мокапом в Photoshop

Давайте скачаем мокап по этой ссылке.

Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».

В архиве у нас лежит .psd файл, его и открываем в Фотошопе (я использую «CC 2020»).

Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «[YOUR IMAGE HERE]».

Два раза нажимаем на миниатюру возле имени слоя левой кнопкой мыши. Вуаля – дизайн обложки нашей книги открылся в новом проекте!

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

Теперь жмем Файл -> Сохранить, а затем открываем основной проект с мокапом.

Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!

Давайте рассмотрим другой пример. Я решил взять мокап магазинной вывески, в котором можно менять логотип.

Открываю проект.

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

С названием слоев у нас та же песня (оба мокапа с одного сайта).

Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.

Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.

Сохраняем файл и открываем основной проект. Готово!

Вот мы и разобрались со спецификой мокапов, рассмотрели лучшие библиотеки шаблонов и научились работать с ними в Photoshop.

Черная визитная карточка | Поставка образцов

Premium Black
макеты визитных карточек

778rem; line-height: 1.111rem;» data-font-size-xl=»0.778rem» data-line-height-xl=»1.111rem»> РАЗРАБОТАН В
SEMPLICE LABS

Описание предмета

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

Эксклюзивно для магазина Semplice Supply.

Дизайнеры для дизайнеров.

Формат: редактируемый PSD и JPG
Размеры: 3600x2025px
Сцены: 6 разных ракурсов

Включает следующие 6 сцен на стене

833rem; line-height: 2rem;» data-font-size-xl=»0.833rem» data-line-height-xl=»2.000rem»> Сцена 3 — Баланс карт на поверхности стола

Сцена 4 — Чистый снимок сверху, горизонтальный

Сцена 5 — Чистый снимок сверху, вертикальный

Сцена 6 — Мы называем это карточным лабиринтом

Высококачественная детализация для

любого увеличения или обрезки, которые вам нужны.

444rem; line-height: 2rem;»> Каждая деталь проработана с высоким разрешением, 
так же тщательно освещена и оформлена, как настоящая фотосессия.

Каждая деталь разработана с высоким разрешением, так же красиво освещена и оформлена, как настоящая декорация.

Photoshop® Ready с
слоями смарт-объектов

Photoshop®
Ready с Smart

Object Layers

Photoshop® Ready с Smart Object Layers

Photoshop® Ready со слоями смарт-объектов

Photoshop® Ready с
слоями смарт-объектов

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

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

Измените цвет, добавьте фильтр или обрежьте сцену в соответствии с вашим дизайном.

Измените цвет, добавьте фильтр или
обрежьте сцену по размеру
ваши проекты.

или добавить из медиатекиБиблиотека

Photoshop® Ready с
слоями смарт-объектов

Photoshop®
Ready с Smart
Object Layers

Photoshop® Ready с Smart Object Layers

Photoshop® Ready с Smart Object Layers

667rem; line-height: 2.778rem;»> Photoshop® Read y с
слоями смарт-объектов

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

Измените цвет, добавьте фильтр или

обрежьте сцену так, чтобы она соответствовала вашим
проектам.

Измените цвет, добавьте фильтр или обрежьте сцену в соответствии с вашим дизайном.

Измените цвет, добавьте фильтр или
обрежьте сцену по мере необходимости, чтобы она соответствовала вашим
проектам.

778rem»> Примеры дизайна
из нашей витрины

Присылайте нам свои проекты в Твиттере @Semplicelabs, чтобы получить шанс быть представленными здесь.

(?) Часто задаваемые вопросы

Могу ли я использовать эти макеты в другом инструменте или только в Photoshop?

Мы создали специальные маски для Photoshop, чтобы вы могли легко вставлять свои рисунки одним щелчком мыши. Вы, конечно, можете использовать наши JPG в любом другом инструменте, но без удобства существующих масок.

У вас есть разные цвета для этих визитных карточек?

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

Мне нравится то, что вы делаете с Semplice, как я могу поддержать вашу команду?

Спасибо! Мы небольшая независимая команда дизайнеров, которые любят создавать инструменты и ресурсы для других дизайнеров. Если вам нравится то, что мы делаем, и вы покупаете наши продукты, это вся поддержка, о которой мы когда-либо могли попросить <3.

→ Мокапы часов премиум-класса

Политика конфиденциальностиПравила и условияВыходные данные

Как сделать макеты визитных карточек ЛЕГКИМ способом

Шаг первый…

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

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

Создайте первый прямоугольник (85 мм x 5 мм), затем продублируйте его, нажав cmd + J или ctrl + J в зависимости от вашего ПО.

 

 

Шаг второй…

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

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

Для этого:

• Щелкните правой кнопкой мыши на каждом прямоугольнике
• Преобразуйте в смарт-объект
• Переименуйте каждый прямоугольник по своему усмотрению

Теперь они у нас есть как смарт-объекты, мы можем добавить к ним то, что мы хотим, и это также сохранит все преобразования, которые мы добавим к каждому из них.

 

Шаг третий…

 

Дважды щелкните каждый прямоугольник и добавьте изображение. У меня уже есть некоторые работы, которые я создал.

Увеличьте изображение, чтобы убедиться, что оно подходит. Нажмите «Сохранить» в этот момент, чтобы применить иллюстрацию к слою смарт-объекта.

Повторите процесс со второй визитной карточкой с иллюстрацией, которую вы хотите вставить на вторую сторону. Нажмите «Сохранить» еще раз или нажмите cmd + S в качестве ярлыка. Вы можете закрыть эту страницу и увидеть, что в исходном документе обе иллюстрации нанесены на каждую сторону визитной карточки.

 

Шаг четвертый…

 

Добавление глубины и теней к прямоугольникам, чтобы они выглядели более реалистично.

Для этого нам нужно щелкнуть правой кнопкой мыши по каждому прямоугольнику, перейти к параметрам наложения.

Это можно сделать двумя способами.

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

Или другой способ — использование Inner Glow, это дает очень похожий эффект.

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

Повторите процесс для другой стороны. Возможно, вам придется немного изменить их, чтобы добавить туда свою текстуру. Еще одна причина, по которой мне нравится использовать Bevel & Emboss , заключается в том, что угол, который вы можете использовать для затенения вашего произведения искусства, тогда как Inner Glow , на мой взгляд, более ограничен.

 

Шаг пятый…

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

Когда вы довольны затенением, нам нужно перейти к расположению карт.

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

Для этого: Щелкните правой кнопкой мыши слой карты, перейдите к Параметры наложения , а затем добавьте тень . Затем можно просто настроить тень в соответствии с тем, как она будет выглядеть на поверхности.

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

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

 

Шаг шестой…

 

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

Есть несколько способов сделать это:

Первый, лично я не фанат, но вариант, который может вам подойти.

Итак, снова перейдите в Blending Options , добавьте Drop Shadow . Причина, по которой я не в восторге от этого способа, заключается в том, что он добавляет вокруг карты артефакты, которые не кажутся естественными.

Итак, я бы сосредоточился на создании тени, которая находится поверх нижней карты.

 

 

Шаг седьмой…

 

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

Если вас устраивает расположение, нажмите, чтобы:

Фильтр > Размытие > Размытие по Гауссу

Затем поэкспериментируйте с местом, которое вас устраивает, чтобы определить, как будет падать тень. Затем нажмите ОК.

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

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

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

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

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

Как только мы добавим все наши тени, вы можете преобразовать их, используя cmd + T , может появиться сообщение об ошибке из-за смарт-фильтров, которые у нас есть, но как только мы изменим размер фильтров, они будут добавлены повторно, когда вы подтвердите преобразование.

Измените размер карточек как одну, чтобы она была немного меньше внутри артборда, и у нас было две визитные карточки, падающие на поверхность.

 

 

Шаг восьмой…

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

 

Шаг девятый…

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

 

 

Шаг десятый…

Мы сохранили первый дизайн довольно простым и двумерным.