Как сделать мокап в фотошопе: Как создать, свой, реалистичный Mock-up айдентики — DesignLessons – все о дизайне

Содержание

Как создать, свой, реалистичный Mock-up айдентики

Здравствуйте, сегодня я опишу как делаются шаблоны ( 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, добавляю тень:

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

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

Замечание – соблюдаем размеры, этот телефон примерно 59×124 мм, но мы его переворачиваем на 90 градусов.

Структура слоев телефона (в смарт объекте):

Рисуем тень телефона. Опускаем конверт вниз и ищем оптимальное расположение нашей продукции:

Аналогично всем выше написанным, создаю «карандаши», работаю над их цветом и «брендированием»:

Добавляю блик на пленке конверта, и смотрим финальный результат:

Вот и наш Mock-up создан, переходим к второй части статьи.

Как редактировать Mock-up

Открываем документ mock-up.psd, заходим на нужный нам слой, пусть это будет «диск»:

Нажимаем два раза мышкой на смарт слое, выскакивает предупреждение:

Нажимаем «ок», открывается новое окно с нашим диском. Дальше редактируем, что пожелаем, например цвет (меняем на темно красный):

Закрываем документ с диском, выскакивает предупреждение:

Нажимаем «Да», смотрим как изменился наш Mock-up:

Вот так просто, редактируем наш реалистичный шаблон.

Подумав, я решил сделать третью часть статьи.

Вкратце, опишу как сделать иллюзию 3Д шаблона.

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

Выделяю все слои , и изменяю их перспективу инструментом «искажение» (можно это делать другими инструментами), подгоняю «наклон». Подгоняю размер инструментом «рамка».

Работаю над приданием объема для диска, добавляю на слой эффект тиснение, с настройками:

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

Перехожу к редактированию визиток, применяю эффект тиснение с настройками:

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

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

Получаем аккуратные «стопочки» визиток и реалистичный 3Д Mock-up.

Редактирование выполняем уже описанным выше способом, перспектива и замена (в копии визиток) выполнится автоматически.

Для наглядности записал видео о редактировании двух Mock-up’ов:

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

Скачать Mock-up айдентики

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

С уважением Чубаров Н.

<= поделись статьей с друзьями ;3

Please enable JavaScript to view the comments powered by Disqus.

Как сделать mockup в фотошопе. Создаем mockup-файл для логотипа на текстуре в Photoshop

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

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

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

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

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

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

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

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

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

Mockup или mock —up (макет) — модель того или иного продукта, выполненная в естественных пропорциях, созданная для быстрого предоставления дизайна продукта в готовом виде, с целью более чёткого представления дизайна конечного продукта.

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

— Мне нравиться, но я не уверен будет ли это смотреться хорошо на поём продукте…

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

Опять же, для тех, кто не знает, расскажу…

Как это работает?

1. Вы загружаете Ваш mockup (psd ) в фотошоп и в области управления слоями ищите слой с таким значком: . Чаще всего этот слой подписан «Put your design here », «Your design », «Double click me », «Edit me » и т.п.

2. Кликаете в область отмеченную красным облаком на картинке ниже, а именно на значок смарт слоя
3. У Вас откроется новое окно, в которое следует поместить Ваш дизайн, после чего нажимаете Ctrl+S (сохранить)
Возвращаетесь в предыдущее окно, ВУА-ЛЯ! Ваш дизайн на продукте!

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

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

Как сделать свой mock-up?

Для начала найдём картинку хорошего качества какого-нибудь необычного предмета без рисунков, а лучше белого цвета.
Здесь, как говорится, Google в помощь, или Яндекс – кому что нравится.
Для своего мокапа я решил взять чайник.

Итак, начнём…

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

Затем создаём новый пустой слой, и преобразуем его в смарт-объект. Как я уже говорил, в основе работы мокапа лежит именно смарт-объект.

Опять же. Для тех. Кто не знает, на пустом слое нажимаете правый клик и выбираете «Преобразовать в смарт-объект», после чего иконка вашего слоя будет с таким значком: .

Далее, применяем маску предыдущего слоя к пустому слою. На иконке предыдущего слоя кликаем правой кнопкой мыши (ПКМ) и нажимаем: «Выделить пикселы ». Затем не снимая выделения нажимаем пустой слой и кликаем под областью слоёв вот этот значок: . Если Вы всё сделали правильно, то к Вашему пустому слою добавится слой с белым силуэтом предыдущего слоя, в моём случае с силуэтом чайника.

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

Для удобства работы примените к слою с сеткой (Пустой слой ) эффект «Умножение ».

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

Для этого на Вашем слое с сеткой (Пустой слой ) нажмите на значок в виде звеньев цепи между самим слоем и слоем-маской. Если звенья пропали, то Вы всё сделали правильно.

Теперь нажимаем на слой с сеткой, чтобы он выделился белыми уголками и идём по пути: Редактирование → Марионеточная деформация.

Мы видим. Что наш слой покрылся непонятной сеткой. Теперь. Нам нужно прокликать его по контуру расставляя узлы для фиксации нашего фона. Не бойтесь ошибиться, программа не даст Вам поставить узел не там, где нужно, о чём сообщит вам содержимое этого окна:

Это трудоёмкий процесс, запаситесь терпением.

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

Дальше всё тем же инструментом расставляем маркеры и деформируем наш слой с сеткой (пустой слой) так, чтобы сетка естественно облегала сам предмет. По окончании деформации нажмите Enter . Если Вы допустили ошибки при деформации, то скорее всего то, что заметно на сетке, не будет видно на продукте с другим дизайном, если, конечно, в основе Вашего дизайна нет сетки.

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

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

Главное помните, что качество Вашего мокапа зависит только от Ваших способностей.

В этом уроке мы узнаем, как создать реалистично выглядящий мокап упаковки (коробки) в Adobe Photoshop.

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

Шаг 1.

Вначале создадим новый документ, с размерами 1588х1191px и зальем фон #d2d3d5 цветом.

Шаг 2.

Для того чтобы все получилось аккуратно, лучше всего использовать Линейку и Сетку . Для того чтобы активировать Линейку зайдите в Просмотр > Линейка (Ctrl + R) , а чтобы активировать сетку зайдите в Просмотр > Показать > Сетка (Ctrl + ,) .

Также вот мои настройки сетки.

Шаг 3.

Создадим новую Группу и назовем ее Right Side . Затем создаем новый слой и также назовем его Right Side . Используя инструмент Прямоугольное выделение , выделим прямоугольник размером 795х1078px . Этот прямоугольник можно залить любым цветом, я для примера залил белым (#FFFFFF) .

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

Шаг 4.

Теперь я создаю по примеру правой стороны, такую же группу но называю ее Left Side . А затем создаю в ней новый слой и тоже называю его Left Side . Точно также как и с правой стороной я делаю выделение размером 483х1078px и заливаю ее любым цветом. После этого преобразую этот слой в Смарт-объект .

Шаг 5.

После этого я начинаю преобразовывать свои слои по форме приблизительно в 3д форму коробки. Для начала беру Right Side , затем выбираю Свободную трансформацию (Ctrl + T) и уменьшаю одну сторону примерно на 75% по высоте. Меньшая сторона у меня приблизительно получилась 815px по высоте.

Шаг 6.

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

Шаг 7.

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

Вот пример моего дизайна.

Шаг 8.

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

Шаг 9.

В принципе уже выглядит неплохо. Добавим тени чтобы добавить реалистичности.

Создадим новую группу которую назовем Shadows. И в ней создадим новый слой который назовем Back . Далее сделаем выделение по форме упаковки, проще всего это сделать нажав по слоям левой и правой стороны зажав одновременно Ctrl и Shift . У вас должно получиться выделение по форме коробки. Затем залейте это выделение черным цветом. А после этого трансформируйте и сожмите по вертикали и верх тени сдвиньте влево. Как показано на рисунке. И после этого используйте на этом слое Размытие по Гауссу и уменьшите прозрачность этого слоя.

Шаг 10.

Теперь создадим новый слой и назовем его Bottom . После этого выберем инструмент Кисть (B) и выберем настройки примерно как у меня.

Теперь нарисуем с помощью этой кисти нарисуем еще одну тень, в месте соприкосновения коробки с поверхностью.

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

Шаг 11.

Теперь перейдем к группе Right Side создадим в ней новый слой и назовем его Shadows . К этому слою нужно обязательно добавить маску по размеру правой стороны либо сгруппировать со слоем на котором у нас дизайн. После этого этот слой переводим в Режим наложения Мягкий свет . И выбираем инструмент Кисть (B) делаем у нее мягкие края и аккуратно рисуем нижний полукруг по форме английской буквы U.

Должно получиться нечто подобное.

Шаг 12.

Тоже самое повторяем и для левой стороны коробки.

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

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

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

Рабочий процесс

В рамках этого урока мы охватим следующие темы:

Разработка дизайна визитки/листовки. Для этого можно использовать любое программное обеспечение, но для печатных материалов лучше всего подойдут Illustrator и InDesign.
Как фотографировать визитку. Разместите карточку, или что-то похожее на поверхности и сфотографируйте ее.
Выбор и редактирование фотографии в Photoshop. Выбираем наилучший снимок и редактируем его.
Добавление смарт-объектов на фотографии. Мы будем вставлять дизайн на мокап внутри трансформированного и настроенного смарт-объекта.

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

Не у всех есть профессиональное оборудование для фотосъемки, но, тем не менее, я дам вам несколько советов, как получить качественный мокап. Для работы нам понадобится Adobe Photoshop CS5 (или выше) и самая лучшая камера, которую вы сможете найти (подойдет даже хорошая камера смартфона).

1. Создаем дизайн визитки

Шаг 1

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

Скорее всего, вы планируете работать в Illustrator или InDesign, потому что эти программы специально созданы для такой работы. Однако в Photoshop тоже можно создавать материалы для печати.

Шаг 2

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

Для этого урока я разработал вот такой минималистичный дизайн.

2. Подготовка фото с белыми карточками

Шаг 1

Темное фото всегда лучше светлого. С недоэкспонированным фото всегда проще работать, чем с засвеченным. Темные области проще ретушировать, чем светлые, так как в Photoshop гораздо проще восстановить детали в затененных участках, чем в светлых, которые иногда просто белые.

Шаг 2

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

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

Шаг 3

Захватите больше фона. Это мое мнение, но основанное на личном опыте. Лучше захватить больше фона, чем может понадобиться. Лишнее всегда можно обрезать в Photoshop, а во время создания снимка сосредоточить внимание не на фоне, а на композиции и освещении.

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

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

Шаг 4

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

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

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

3. Ретушируем фото

Шаг 1

Закончив с этапом фотографирования, переносим снимки на компьютер и открываем Photoshop. Если вы работаете в Lightroom, то можете настроить в нем освещение и контрастность, но нам все равно понадобится Photoshop для работы со смарт-объектами.

Продолжаем работу с фото. Мы уже определились, как будем обрезать фото, поэтому берем инструмент Crop Tool (C) (Кадрирование) или выделяем нужную часть с помощью Rectangular Marquee Tool (M) (Прямоугольное выделение) и переходим Image — Crop (Изображение — Кадрировать).

Шаг 2

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

Шаг 3

Далее берем Clone Stamp Tool (S) (Штамп), зажимаем клавишу Alt и берем образец фона и переносим его на деталь, которую хотим удалить. Также для этой задачи подойдет инструмент Healing Brush Tool (J) (Лечащая кисть). Ниже готовое фото после ретуши.

Шаг 4

Чтобы уменьшить красноватый оттенок на фото, создаем корректирующий слой Layer — New Adjustment Layer — Black & White (Слой — Новый корректирующий слой — Черно-белый) и настраиваем его.

Шаг 5

Также в центре добавляем светлое пятно с размытыми краями, чтобы сделать композицию немного поярче. Для этого мы активируем Brush Tool (B) (Кисть), выбираем максимально мягкую кисточку с Hardness (Жесткость) 0% и на новом слое (Ctrl+Shift+N) ставим белое пятно в центре рабочего полотна. Переключаем режим наложения этого слоя на Soft Light (Мягкий свет) и получаем вот такой результат.

Шаг 6

Теперь пришло время создать смарт-объект, внутри которого будет дизайн визитки. Для начала нам нужен шаблон такого же размера, как и визитка. Мы берем Rectangular Marquee Tool (M) (Прямоугольное выделение), на верхней панели переключаемся на режим Fixed Ratio (Задан. пропорции) и вводим пропорции нашей карточки — 3,5 х 2 дюйма.

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

Шаг 7

С помощью Paint Bucket Tool (G) (Заливка) на новом слое заливаем выделение любым цветом и называем слой «Фронтальная сторона». На этом слое и будет добавлен дизайн визитки.

Шаг 8

На панели слоев кликаем правой кнопкой по слою и выбираем Convert to Smart Object (Преобразовать в смарт-объект).

Шаг 9

Переключаем режим наложения слоя «Фронтальная сторона» на Multiply (Умножение), чтобы мы могли видеть, что происходит под ним. Активируем свободную трансформацию (Ctrl+T) и трансформируем прямоугольник по форме карточки на фото. В углах рамки трансформации находятся специальные опорные точки, с помощью которых и происходит изменение формы. Зажимаем клавишу Ctrl и хватаем точку, чтобы переместить ее.

Шаг 10

Далее кликаем по объекту правой кнопкой мышки и переключаемся в режим Warp (Деформация), так как карточка слегка согнута, а в этом режиме можно трансформировать прямые края. Обратите внимание, что этот режим работает со смарт-объектами только в Photoshop не ниже версии CS5.

Шаг 11

Кликаем по нему правой кнопкой мышки и выбираем New Smart Object Via Copy (Создать смарт-объект путем копирования). В результате появится редактируемая копия первого смарт-объекта.

Шаг 12

Открываем содержимое копии смарт-объекта (для этого на панели слоев кликаем по нему правой кнопкой мышки и выбираем Edit Contents (Редактировать содержимое)) и заливаем прямоугольник другим цветом (например, красным, как у меня), чтобы обе карточки отличались. Называем красный слой «Задняя сторона». Далее повторяем все этапы трансформации прямоугольника, стараясь как можно точнее выставить опорные точки в углах. Вот так должен выглядеть текущий результат.

Шаг 13

Для слоя «Задняя сторона» нам нужно применить маску и скрыть часть, которая частично закрывает фронтальную сторону. Для этого мы зажимаем клавишу Ctrl и кликаем по миниатюре слоя «Фронтальная сторона» на панели слоев, чтобы загрузить его выделение.

Шаг 14

Затем выбираем слой «Задняя сторона» и в нижней части панели слоев нажимаем на кнопку Add layer mask (Добавить слой-маску).

Шаг 15

Шаг 16

При необходимости дорабатываем детали. Ниже я вручную удалил часть задней визитки, которая не попала в выделение. С помощью Lasso Tool (L) (Лассо) мы выделяем нужный фрагмент и на маске закрашиваем его черным цветом.

Шаг 17

Теперь мы должны доработать созданные прямоугольники, чтобы они реалистично смотрелись на мокапе. Режим наложения Multiply (Умножение) уже сделал часть работы, и кажется, что обе карточки действительно изначально окрашены в синий и красный цвета. Но есть деталь, которая нарушает иллюзию и делает композицию нереалистичной — это эффект расфокусировки.

Чтобы создать такой эффект, мы должны размыть границы смарт-объектов, которые попадают в зону расфокусировки. Выбираем слой «Задняя сторона» (именно слой, не маску), переходим Filter — Blur — Gaussian Blur (Фильтр — Размытие — Размытие по Гауссу) и выбираем подходящее значение для Radius (Радиус), которое будет соответствовать степени размытия фото (в данном примере 2-3 пикселя).

Шаг 18

Ниже показан результат до и после размытия границ. Не забывайте, что фильтр нужно применять именно к смарт-объекту, чтобы Gaussian Blur (Размытие по Гауссу) трансформировался в смарт-фильтр, который в любой момент можно удалить или отредактировать, не нарушая при этом целостность слоя. По-английски такой метод называют non-destructive, что можно перевести как «неразрушающий», потому что содержимое смарт-объекта не меняется, а фильтр добавляется, по сути, в виде отдельного слоя.

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

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

Шаг 19

Переходим к слою «Задняя сторона», кликаем по нему правой кнопкой мышки и выбираем Edit Contents (Редактировать содержимое). В результате в отдельном документе откроется смарт-объект с красным прямоугольником.

Шаг 20

Вот так должно выглядеть содержимое смарт-объекта.

Шаг 21

Сейчас нам нужно вставить сюда подготовленный дизайн визитки. Для этого переходим File — Place (Файл — Поместить) и находим на компьютере нужную картинку.

Шаг 22

Сохраняем смарт-объект (Ctrl+S) и закрываем документ. В результате на основном рабочем документе смарт-объект автоматически обновится, и вместо красного цвета мы увидим наш дизайн, автоматически трансформированный и с примененной цветокоррекцией.

Шаг 23

Таким же образом вставляем дизайн на слой «Фронтальная сторона» и получаем профессиональный и настраиваемый мокап.

Отличная работа! Наш мокап готов

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать мокап в Фотошопе

Этап 1: Выбор дизайна и фона

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

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

Этап 2: Работа с цветом

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

Подробнее: Замена цвета объектов и кожи в Adobe Photoshop

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

Этап 3: Подготовка объектов

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

Через главное меню «Файл» на верхней панели программы произведите открытие нужного изображения. Сложность и дальнейший порядок действий, как уже было сказано, зависит от выбранного объекта.

Выберите инструмент «Прямоугольник» на панели в левой части экрана и создайте соответствующую форму поверх области на изображении, где должен находиться заменяемый элемент. Лучше всего за основу брать броские цвета, чтобы не было проблем на следующем шаге.
Подробнее: Создание прямоугольников и фигур в Adobe Photoshop

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

На верхней панели разверните список «Редактирование», перейдите в «Трансформирование» и выберите «Искажение». С помощью данного режима необходимо выровнять фигуру на оригинальном изображении.
Подробнее: Трансформирование объектов в Adobe Photoshop
Основной акцент необходимо делать на углах, по необходимости используя и другие инструменты.
Если объект имеет округлую форму, через то же самое «Трансформирование» необходимо включить режим «Деформация». Далее следует в точности повторить нужную форму, так как после применения внести какие-либо другие изменения будет весьма проблематично.

Завершив редактирование и убедившись в отсутствии нежелательных артефактов, выберите тот же файл из списка слоев и на нижней панели воспользуйтесь кнопкой «Добавить слой маску». В результате рядом с миниатюрой должен будет появиться новый пустой слой.
Подробнее: Работа со слоями-масками в Adobe Photoshop

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

Мокап нескольких размеров и форм на одном и том же изображении, особенно если добавляется рисунок без фиксированных пропорций, следует делать путем дублирования основного смарт-объекта и последующего редактирования. Это является отличным способом создания, к примеру, визиток, положение которых отличается, но дизайн должен оставаться прежним.
Читайте также: Создание визитки в Adobe Photoshop
Для указанной задачи нужно кликнуть правой кнопкой мыши по первоначальному слою и воспользоваться опцией «Создать дубликат слоя». Во всплывающем окне нажмите «ОК», не меняя каких-либо параметров, и можете смело редактировать формы и расположение новых объектов.

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

Этап 4: Добавление изображений

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

Находясь в ранее подготовленном файле, дважды кликните по миниатюре смарт-объекта на панели слоев. Также можете щелкнуть правой кнопкой мыши и выбрать «Редактировать содержимое».

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

Чтобы применить изменения, воспользуйтесь сочетанием клавиш «CTRL+S» или пунктом «Сохранить» в меню «Файл». При возращении к изначальному файлу можно сразу заметить результат проделанной работы, так как ранее пустая область изменится соответствующим образом.
Кроме прочего, на смарт-объект продолжают воздействовать различные эффекты, и потому можно не беспокоиться насчет цвета, эффектов наложения, или, например, теней.

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

Этап 5: Коррекция, освещение и тени

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

Щелкните ЛКМ по слою и на нижней панели в той же колонке воспользуйтесь кнопкой «Создать новый корректирующий слой или слой-заливку» и выберите пункт «Кривые».

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

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

Этап 6: Завершение работы

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

Подробнее: Сохранение изображений в Adobe Photoshop

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

Помогла ли вам эта статья?

ДА НЕТ

Мокап как сделать в фотошопе

Создаем мокап для 3D коробки в Фотошоп

В этом уроке вы узнаете, как создать Mock-Up 3d коробки для программного обеспечения, но его можно использовать для разных задач.

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

Вот так выглядит готовый мокап, который мы будем рисовать. Он содержит отражение, настраиваемый цвет фона и смарт-объект с обложкой.

Шаг 1. Подготовка

Чтобы в результате мокап получился привлекательным, для начала нам необходимо продумать композицию. Навык рисования и понимание перспективы поможет нам сделать грубый набросок. Как вариант, вы можете сфотографировать готовые коробки и использовать такой снимок в качестве референса. Либо в любом 3D-редакторе смоделировать сцену из простейших фигур, выполнить рендеринг и точно также использовать получившуюся картинку. Подойдет любой способ.

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

В программе создал новый файл размером 1000 х 600 пикселей и вставил на него отсканированный набросок.

Шаг 2

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

Шаг 3. Рисуем основу

Для работы мы будем использовать векторные инструменты. Активируем Pen Tool (P) (Перо), выбираем любой яркий цвет и на верхней панели устанавливаем режим рисования на Shape (Фигура). Яркий цвет заливки нужен для того, чтобы основа коробки не сливалась с фоном и выглядела контрастно.

Шаг 4

Кликаем мышкой и рисуем фронтальную часть первой коробки. Убедитесь, что эта часть находится в группе «Коробка 1».

Шаг 5

Рисуем боковую сторону коробки. В этот раз выбираем другой яркий цвет.

Шаг 6

Теперь мы должны добавить освещение на фронтальной части коробки. Для этой задачи лучше всего подойдут стили слоя, так как их легко применять и редактировать. Дважды кликаем по слою, чтобы открыть окно Layer Style (Стиль слоя).

Шаг 7

В появившемся окне выбираем Gradient Overlay (Наложение градиента). Используем стандартный черно-белый градиент в режиме смешивания Overlay (Перекрытие). Устанавливаемый нужный угол в зависимости от воображаемого источника света. С помощью параметра Opacity (Непрозрачность) можно регулировать насыщенность эффекта.

Шаг 8

Повторяем те же действия для боковой стороны и добавляем Gradient Overlay (Наложение градиента).

Шаг 9. Рисуем тень

Чтобы добавить реалистичности, мы нарисуем тень под коробкой. Под слоями с гранями коробки добавляем новый слой. С помощью Polygonal Lasso Tool (L) (Прямолинейное лассо) создаем выделение по форме нижней части коробки. Заливаем выделение черным цветом.

Шаг 10

Применяем к заливке фильтр Filter – Blur – Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу). Устанавливаем такой радиус, чтобы мягко растушевать края тени. В данном случае мы устанавливаем значение на 1,6.

Шаг 11

В нашем случае источник света расположен достаточно близко к коробке, поэтому мы должны нарисовать длинные боковые тени. Для этого используем Polygonal Lasso Tool (L) (Прямолинейное лассо), чтобы нарисовать выделение, затем заливаем его черным цветом.

Шаг 12

Размываем тень с помощью фильтра Gaussian Blur (Размытие по Гауссу).

Шаг 13

Инструментом Eraser Tool (E) (Ластик) аккуратно проводим по кончику тени, чтобы создать мягкое затухание.

Шаг 14

Уменьшаем Opacity (непрозрачность) слоя с тенью примерно до 10-15%.

Шаг 15

Повторяем процесс и добавляем длинную тень на противоположной стороне коробки.

Шаг 16. Рисуем вторую коробку

Продолжаем работу со следующей коробкой. Скрываем группу «Коробка 1», чтобы она нам не мешала. Для этого на панели слоев кликаем по значку глаза напротив названия группы. Процесс рисования ничем не отличается от предыдущего раза, поэтому начинаем с основы. Для второй коробки нам нужно нарисовать три грани: фронтальную, боковую и нижнюю.

Шаг 17

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

Шаг 18

Рисуем тень под коробкой. Под слоями с основой создаем новый слой и рисуем выделение, используя Polygonal Lasso Tool (L) (Прямолинейное лассо). Заливаем выделение черным цветом и размываем его фильтром Gaussian Blur (Размытие по Гауссу).

Шаг 19

Чтобы добавить реалистичности, мы создадим еще один слой тени, в это раз больше и с сильным размытием. Дублируем предыдущий слой (Ctrl+J), затем применяем фильтр Gaussian Blur (Размытие по Гауссу) с большим радиусом, в данном случае 6 пикселей.

Шаг 20

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

Шаг 21

На данный момент наши заготовки для мокапа выглядят вот так:

Шаг 22. Рисуем третью коробку

Переходим к третьей коробке. Отключаем видимость предыдущих коробок, чтобы они не мешали. Используем Pen Tool (P) (Перо), чтобы нарисовать основу.

Шаг 23

Добавляем стиль слоя Gradient Overlay (Наложение градиента).

Шаг 24

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

Шаг 25

Создаем новый слой. Между второй и третьей коробками рисуем тонкую тень с размытыми краями. Для этого используем маленькую кисточку (В).

Шаг 26

Удаляем лишние концы, используя Eraser Tool (E) (Ластик). Попробуйте уменьшить непрозрачность слоя, чтобы тень выглядела мягче и аккуратнее.

Шаг 27

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

Шаг 28

Сглаживаем тень с помощью фильтра Gaussian Blur (Размытие по Гауссу).

Шаг 29

С помощью Blur Tool (Размытие) и Eraser Tool (E) (Ластик) создаем плавное затухание на кончике тени. Затем уменьшаем непрозрачность слоя.

Шаг 30

Давайте сделаем тень еще мягче. Выделяем внешнюю половину тени и с помощью команды Select – Modify – Feather (Выделение – Модификация – Растушевка) разглаживаем выделение.

Шаг 31

Повторно применяем Gaussian Blur (Размытие по Гауссу) со значением 7,6.

Шаг 32

Создаем новый слой. Рисуем размытую тень на противоположной стороне второй коробки. С помощью ластика (Е) удаляем лишние детали.

Шаг 33

Получаем вот такой результат.

Включаем видимость всех коробок, чтобы увидеть текущий результат работы.

Шаг 34

Мне кажется, на второй коробке стоит добавить длинную тень. Добавляем новый слой внутри группы «Коробка 2». Создаем треугольное выделение, заливаем его черным цветом и размываем фильтром Gaussian Blur (Размытие по Гауссу).

Шаг 35

Уменьшаем непрозрачность слоя с тенью.

Шаг 36. Добавляем обложку

Для данного мокапа нам нужно три детали обложки: фронтальная, боковая и нижняя.

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

Эти три части обложки мы и будем использовать в мокапе. Каждая из них должна находиться на отдельном слое.

Шаг 37

Трансформируем каждую деталь обложки в смарт-объект. Для этого кликаем по слою правой кнопкой мыши и выбираем Convert to Smart Object (Преобразовать в смарт-объект).

Шаг 38

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

Шаг 39. Применяем дизайн к мокапу

Для первой коробки нам понадобятся только фронтальная и боковая части обложки. Дублируем соответствующие слои нажатием клавиш Ctrl+J. Переносим обе копии в группу «Коробка 1».

Шаг 40

Выбираем слой с фронтальной частью. Жмем Ctrl+T, чтобы активировать режим свободной трансформации. Кликаем правой кнопкой по документу и выбираем Distort (Искажение).

Шаг 41

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

Шаг 42

Проверяем, чтобы слой с обложкой находился сразу над слоем с фронтальной частью коробки. Затем жмем Ctrl+Alt+G, чтобы трансформировать обложку в обтравочную маску. Теперь наш дизайн идеально вписался в границы коробки. Увеличиваем Opacity (непрозрачность) до 100% и смотрим на результат.

Шаг 43

Повторяем те же действия для боковой грани коробки.

Шаг 44

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

Шаг 45

Жмем Ctrl+T, затем кликаем правой кнопкой мыши по документу и выбираем Warp (Деформация). Двигаем опорные точки, чтобы выровнять дизайн.

Шаг 46

Повторяем предыдущие шаги и добавляем обложку на второй коробке.

Шаг 47

Затем на третьей.

Шаг 48

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

Шаг 49. Простой способ изменить цвет фона

Мы должны добавить возможность быстрой и простой смены цвета фона. Для этого создаем корректирующий слой Solid Color (Цвет), нажав на кнопку Create new fill or adjustment layer (Создать новую заливку или корректирующий слой) в нижней части панели слоев. В появившемся диалоговом окне выбираем серый цвет.

Шаг 50

Добавляем стиль Gradient Overlay (Наложение градиента) к предыдущему корректирующему слою.

Шаг 51

Над слоем Solid Color (Цвет) добавляем корректирующий слой Hue/Saturation (Цветовой тон/Насыщенность). Активируем параметр Colorize (Тонирование). Теперь, двигая ползунки, вы с легкостью можете изменить цвет фона.

Шаг 52. Как заменить обложку

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

Шаг 53

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

Шаг 54

Сохраняем обновленный дизайн и закрываем документ. Возвращаемся к основному рабочему файлу. Обратите внимание, что после редактирования дизайн коробки изменился автоматически. Причем на всех трех коробках.

Шаг 55

Меняем дизайн на боковых гранях.

Шаг 56. Добавляем отражение

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

Шаг 57

Добавляем их в отдельные группы «Коробка 1» и «Коробка 2», а их в свою очередь в общую группу «Отражение». Это поможет нам не запутаться в многочисленных слоях.

Шаг 58

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

Шаг 59

Делаем то же самое с передней частью обложки.

Шаг 60

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

Шаг 61

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

Шаг 62

Внутри группы «Отражение» для группы с первой коробкой добавляем маску. Удерживая кнопку Alt, жмем на кнопку Add layer mask (Добавить слой-маску) в нижней части панели слоев. При этом должна появиться полностью черная маска и все содержимое группы скроется. После этого берем большую мягкую кисточку (В) и проводим под коробкой, чтобы восстановить часть отражения и создать плавное затухание.

Шаг 63

Делаем то же самое с отражением второй коробки.

Шаг 64

Уменьшаем непрозрачность группы «Отражение», чтобы получить аккуратный и мягкий эффект.

Шаг 65. Оптимизация файла-исходника с мокапом

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

Шаг 66

Для начала мы можем объединить сложные многослойные объекты в один слой. Например, тень состоит из нескольких слоев. Выделяем слои, которые хотим объединить, и жмем Ctrl+E. Если нужные слои находятся в отдельной группе, то мы можем просто выделить саму группу и нажать Ctrl+E, чтобы объединить ее в один слой.

Шаг 67

Также нам не нужен оригинальный фоновый слой. У нас уже есть корректирующий слой Solid Color (Цвет) с заливкой, поэтому мы можем удалить слой Background (Фон), перетащив его на значок корзины в нижней части панели слоев.

Шаг 68. Возможности мокапа

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

Чтобы убрать отражение, мы просто кликаем по значку глаза напротив группы «Отражение».

Также мы можем скрыть третью коробку, оставив только первую и вторую.

Или скрыть вторую и третью, оставив только первую.

Или скрыть первую, оставив вторую и третью.

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

Также можно вернуть отражение второй коробки.

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

Финальный результат

Автор: Mohammad Jeprie

Как сделать редактируемый мокап для визитки в Фотошоп

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

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

Рабочий процесс

В рамках этого урока мы охватим следующие темы:

Разработка дизайна визитки/листовки. Для этого можно использовать любое программное обеспечение, но для печатных материалов лучше всего подойдут Illustrator и InDesign.
Как фотографировать визитку. Разместите карточку, или что-то похожее на поверхности и сфотографируйте ее.
Выбор и редактирование фотографии в Photoshop. Выбираем наилучший снимок и редактируем его.
Добавление смарт-объектов на фотографии. Мы будем вставлять дизайн на мокап внутри трансформированного и настроенного смарт-объекта.

1. Создаем дизайн визитки

Шаг 1

Шаг 2

Для этого урока я разработал вот такой минималистичный дизайн.

2. Подготовка фото с белыми карточками

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

Шаг 1

Шаг 2

Шаг 3

Шаг 4

3. Ретушируем фото

Шаг 1

Продолжаем работу с фото. Мы уже определились, как будем обрезать фото, поэтому берем инструмент Crop Tool (C) (Кадрирование) или выделяем нужную часть с помощью Rectangular Marquee Tool (M) (Прямоугольное выделение) и переходим Image – Crop (Изображение – Кадрировать).

Шаг 2

Шаг 3

Далее берем Clone Stamp Tool (S) (Штамп), зажимаем клавишу Alt и берем образец фона и переносим его на деталь, которую хотим удалить. Также для этой задачи подойдет инструмент Healing Brush Tool (J) (Лечащая кисть). Ниже готовое фото после ретуши.

Шаг 4

Чтобы уменьшить красноватый оттенок на фото, создаем корректирующий слой Layer – New Adjustment Layer – Black & White (Слой – Новый корректирующий слой – Черно-белый) и настраиваем его.

Шаг 5

Также в центре добавляем светлое пятно с размытыми краями, чтобы сделать композицию немного поярче. Для этого мы активируем Brush Tool (B) (Кисть), выбираем максимально мягкую кисточку с Hardness (Жесткость) 0% и на новом слое (Ctrl+Shift+N) ставим белое пятно в центре рабочего полотна. Переключаем режим наложения этого слоя на Soft Light (Мягкий свет) и получаем вот такой результат.

Шаг 6

Теперь пришло время создать смарт-объект, внутри которого будет дизайн визитки. Для начала нам нужен шаблон такого же размера, как и визитка. Мы берем Rectangular Marquee Tool (M) (Прямоугольное выделение), на верхней панели переключаемся на режим Fixed Ratio (Задан. пропорции) и вводим пропорции нашей карточки – 3,5 х 2 дюйма.

Шаг 7

С помощью Paint Bucket Tool (G) (Заливка) на новом слое заливаем выделение любым цветом и называем слой «Фронтальная сторона». На этом слое и будет добавлен дизайн визитки.

Шаг 8

На панели слоев кликаем правой кнопкой по слою и выбираем Convert to Smart Object (Преобразовать в смарт-объект).

Шаг 9

Переключаем режим наложения слоя «Фронтальная сторона» на Multiply (Умножение), чтобы мы могли видеть, что происходит под ним. Активируем свободную трансформацию (Ctrl+T) и трансформируем прямоугольник по форме карточки на фото. В углах рамки трансформации находятся специальные опорные точки, с помощью которых и происходит изменение формы. Зажимаем клавишу Ctrl и хватаем точку, чтобы переместить ее.

Шаг 10

Далее кликаем по объекту правой кнопкой мышки и переключаемся в режим Warp (Деформация), так как карточка слегка согнута, а в этом режиме можно трансформировать прямые края. Обратите внимание, что этот режим работает со смарт-объектами только в Photoshop не ниже версии CS5.

Шаг 11

Далее выполняем те же действия и создаем прямоугольник красного цвета для визитки с задней стороной. Чтобы ускорить процесс, мы продублируем слой «Фронтальная сторона».

Кликаем по нему правой кнопкой мышки и выбираем New Smart Object Via Copy (Создать смарт-объект путем копирования). В результате появится редактируемая копия первого смарт-объекта.

Шаг 12

Открываем содержимое копии смарт-объекта (для этого на панели слоев кликаем по нему правой кнопкой мышки и выбираем Edit Contents (Редактировать содержимое)) и заливаем прямоугольник другим цветом (например, красным, как у меня), чтобы обе карточки отличались. Называем красный слой «Задняя сторона». Далее повторяем все этапы трансформации прямоугольника, стараясь как можно точнее выставить опорные точки в углах. Вот так должен выглядеть текущий результат.

Шаг 13

Шаг 14

Затем выбираем слой «Задняя сторона» и в нижней части панели слоев нажимаем на кнопку Add layer mask (Добавить слой-маску).

Шаг 15

Далее нам просто нужно инвертировать маску. Для этого на панели слоев выбираем маску и нажимаем сочетание клавиш Ctrl+I.

Шаг 16

При необходимости дорабатываем детали. Ниже я вручную удалил часть задней визитки, которая не попала в выделение. С помощью Lasso Tool (L) (Лассо) мы выделяем нужный фрагмент и на маске закрашиваем его черным цветом.

Шаг 17

Теперь мы должны доработать созданные прямоугольники, чтобы они реалистично смотрелись на мокапе. Режим наложения Multiply (Умножение) уже сделал часть работы, и кажется, что обе карточки действительно изначально окрашены в синий и красный цвета. Но есть деталь, которая нарушает иллюзию и делает композицию нереалистичной – это эффект расфокусировки.

Чтобы создать такой эффект, мы должны размыть границы смарт-объектов, которые попадают в зону расфокусировки. Выбираем слой «Задняя сторона» (именно слой, не маску), переходим Filter – Blur – Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу) и выбираем подходящее значение для Radius (Радиус), которое будет соответствовать степени размытия фото (в данном примере 2-3 пикселя).

Шаг 18

Ниже показан результат до и после размытия границ. Не забывайте, что фильтр нужно применять именно к смарт-объекту, чтобы Gaussian Blur (Размытие по Гауссу) трансформировался в смарт-фильтр, который в любой момент можно удалить или отредактировать, не нарушая при этом целостность слоя. По-английски такой метод называют non-destructive, что можно перевести как «неразрушающий», потому что содержимое смарт-объекта не меняется, а фильтр добавляется, по сути, в виде отдельного слоя.

Шаг 19

Переходим к слою «Задняя сторона», кликаем по нему правой кнопкой мышки и выбираем Edit Contents (Редактировать содержимое). В результате в отдельном документе откроется смарт-объект с красным прямоугольником.

Шаг 20

Вот так должно выглядеть содержимое смарт-объекта.

Шаг 21

Сейчас нам нужно вставить сюда подготовленный дизайн визитки. Для этого переходим File – Place (Файл – Поместить) и находим на компьютере нужную картинку.

Шаг 22

Шаг 23

Отличная работа! Наш мокап готов

Автор: Gianluca Giacoppo

Узнать больше интересного:

Создаем mockup в фотошопе

6 879 просмотров Автор: Басманов Максим Видео уроки, Уроки Photoshop, Эффекты 17 Авг 2015

В этом уроке вы узнаете как создать текстовый mockup в фотошопе.

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

Скачать исходник в psd

Понравилось видео? Тогда пожалуйста сделайте следующее… 1. Поставьте «лайк». 2. Поделитесь этим постом с друзьями в социальных сетях.

3. И конечно же, оставьте свой комментарий ниже 🙂

Собственный мокап для презентации дизайна из JPG картинки

Как часто вы ищете psd мокапы (mockups) для презентации своих дизайнов? А что если я скажу, что сделать такой мокап самому — проще простого и даже покажу, как? Достаточно найти «ту самую классную JPG картинку, на которой мой дизайн выглядел бы супер».

Смотрите короткий видеоурок и кто знает, может быть вы начнете продавать свои мокапы? 🙂

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

Выкладывайте в комментариях мокапы, которые у вас получились, и делитесь друг с другом 🙂

— с любовью, Юлия

Понравилась статья?

Кликайте “Мне нравится”, сохраняйте статью себе на стену. Это лучший способ не потерять ее и сказать мне “спасибо 🙂

10 бесплатных инструментов для создания мокапов

Автор: Диана Сиддикви Рейтинг топика: +7 IT-копирайтер, переводчик, контент-менеджер.

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

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

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

MOCKUPER

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

Количество макетов: 155+

Среда: десктоп, мобильные устройства, книги, баннеры, визитки и многое другое

Формат: PNG

Разрешение по ширине: 700-3800 пикселей.

SMARTMOCKUPS

Smartmockups это бесплатный генератор мокапов с большим количеством сцен в различном разрешении. Созданные мокапы можно использовать как угодно: в цифровом или печатном виде, при наличии нужных навыков можно создавать новые сцены, готовые макеты разрешается использовать в личных и коммерческих проектах. Все предметы, с помощью которых можно продемонстрировать дизайн, разбиты на категории для удобства пользователя. Чтобы найти нужный макет, можно воспользоваться функцией поиска по тегу. Также можно отфильтровать изображения по запросам iOS, Android, Windows Phone и так далее.

Количество макетов: 150+

Среда: десктоп, ноутбук, планшет, смартфон, часы

Формат: PNG

Разрешение по ширине: 880-2500 пикселей.

MAGIC MOCKUPS

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

Количество макетов: 25+

Среда: ноутбук, телефон, планшет, рамки

Формат: JPEG

Разрешение по ширине: 960-5000 пикселей.

DUNNNK

Бесплатный генератор мокапов Dunnnk содержит более 55 уникальных предметов. В основном создатель генератора сосредоточился на демонстрации дизайна для iPhone. Это специализированный генератор, поэтому выбор изображений компьютеров и ноутбуков весьма невелик. За дополнительную плату можно скачать некоторые готовые мокапы в формате PSD.

Количество макетов: 55+

Среда: iPhone, Android, MacBook, iMac, Apple Watch

Формат: JPEG

Разрешение по ширине: 2000 пикселей.

MOCKUPJAR

Количество макетов в генераторе MockupJar невелико, но это действительно качественные изображения, идеально подходящие для демонстрации дизайна. Помимо электронных устройств в MockupJar можно также найти рамки, бумажные стаканы и футболки. Эти макеты можно использовать, к примеру, для показа логотипа сайта. Всего в генераторе насчитывается 20 реалистичных изображений, доступ к дополнительным макетам платный, 10 евро в месяц. В отличие от других генераторов, в MockupJar можно продемонстрировать, как будет выглядеть сайт в браузере, при этом есть возможность изменения цвета фона.

Количество макетов: 20+

Среда: iPhone. Android, MacBook, браузеры, физические носители

Формат: JPEG

Разрешение по ширине: 320-2560 пикселей.

MOCKUPHONE

Главным отличием бесплатного генератора мокапов MockUPone является большое количество исходных изображений. К примеру, если нужно показать, как будет смотреться приложение на экране iPhone, то у дизайнера есть широкий выбор: представлены модели 7, 7 Plus, 6, 6 Plus и так далее до 5С. Однако есть и минусы, все макеты сделаны в одном ракурсе, в фас, что несколько ограничивает возможности реалистичного показа. Готовые изображения можно сохранить в форматах JPEG, PNG или PSD, рекомендуемый размер файла 1242х2208 для iPhone. Помимо смартфонов от Apple в генераторе есть множество других макетов электронных устройств, в том числе телевизоров.

Количество макетов: 80+

Среда: iOS, Android, Windows Phone, ноутбуки, десктопы, телевизоры

Формат: PHG, JPEG

Разрешение по ширине: 2000+ пикселей.

MOCKDROP

В MockDrop можно найти одну из самых больших коллекций бесплатных макетов, генератор предлагает на выбор более 100 изображений. Чтобы использовать этот инструмент, потребуется установить на компьютер последнюю версию браузера Chrome, Firefox или Safari. Сервис очень быстрый, создатели сервиса постарались максимально сократить время работы над мокапом. Пожалуй, это самый быстрый генератор мокапов из всех и при этом он совершенно бесплатный.

Количество макетов: 100+

Среда: смартфон, ноутбук, десктоп, часы, планшет, телевизор

Формат: JPEG

Разрешение по ширине: 3000 пикселей.

MEDIAMODIFIER

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

Количество макетов: 10+

Среда: компьютеры, смартфоны, ноутбуки, физические носители

Формат: JPEG

Разрешение по ширине: 2400.

GRAPHICTWISTER ONLINE MOCKUP CREATOR

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

Количество макетов: 20+

Среда: iPhone, iMac, iPad, телевизор, постер, рамка

Формат: PNG

Разрешение по ширине: 1200 пикселей.

GETMOCKY

Генератор GetMocky содержит более 100 качественных макетов, для удобства пользователей разбитых на несколько категорий. Поиск подходящего исходника осуществляется по тегам. Это позволяет найти нужный макет в самые короткие сроки. Среди бесплатных шаблонов можно выбрать файлы малого и среднего размера. Если же нужно создать изображение в формате HD (1440 пикселей), Full HD (1920) или Original Size (4000+), придется заплатить.

Количество макетов: 100+

Среда: десктоп, ноутбук, планшет, смартфон, часы.

Формат: PNG

Разрешение по ширине: 480 и 720 пикселей.

ВМЕСТО ЗАКЛЮЧЕНИЯ

Эти 10 бесплатных генераторов мокапов позволяют существенно сэкономить рабочее время дизайнера и при этом не требуют хороших навыков работы с Photoshop. Пользователю достаточно найти подходящий макет, загрузить скриншот или логотип и сохранить готовое изображение. Все работает очень просто. И, что самое важное, у дизайнера есть огромный выбор – можно найти ноутбук или смартфон в любом ракурсе. Огромный выбор сред повышает шансы на создание качественной презентации – заказчик получит возможность увидеть, как будет смотреться дизайн на устройстве любого типа.

Как сделать мокап для демонстрации сайта

Привет, друзья. Сегодня поговорим о том, как сделать мокап для демонстрации вашего landing page. Думаю, тем, кто делает посадочные страницы на постоянной основе пригодится экшен для

Photoshop, который в несколько кликов сделает из макета отличный mockup, который даже посредственный дизайн превращает в стильный и презентабельный.

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

UI100Day-01 by Arche阿北

Давайте посмотрим, как установить себе такой экшен и разберемся с настройками. Для начала скачайте и распакуйте архив:

Mockup

Размер: 24 мб

Скачать исходник

Ссылка на скачивание появится через сек. А пока, поддержи, пожалуйста, лайком!

Затем, запустите Photoshop и откройте 2 окна «Операции» и «Стили». Если в правом меню их нет, то можно включить. Для этого, в верхнем меню перейдите в «Окно» и поставьте галочки напротив «Стили» и «Операции». Тогда соответствующие иконки появятся на экране.

Теперь раскройте окно «Операции» и нажмите на иконку меню этого окна.

Перед вами откроется контекстное меню, в котором выбираем «Загрузить операцию».

Перейдите в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric Mock-UP».

Теперь, перейдите в «Стили» и проделайте туже операцию, только добавьте файл стилей.

Далее, как и в прошлый раз, переходим в папку «mockap», затем в «[экшн] — Изометрия (горизонтальная)» и выберите файл «Isometric_MockUP_styles».

Обратите внимание на то, что в папке есть документация в формате PDF.

Делаем мокап дизайна сайта

Настало время для творчества. Но впереди еще несколько нюансов.

Экшен работает только с картинками или группами. То есть 1 картинка — 1 слой. или объединяем элементы картинки в группу.
Работать можно и с несколькими картинками одновременно, но все они должны быть цельным объектом и располагаться на отдельном слое либо разделены по группам.
Документ должен иметь разрешение 72 dpi.

Открывайте картинку в Фотошопе и давайте познакомимся с настройками.

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

Изначально картинка выглядит следующим образом:

Rexchange Currency Exchange Website
by uithemes

С этим изображением и будем работать. Давайте откроем окно экшенов и посмотрим на настройки плагина.

Если все сделали правильно, то у вас должно получиться, примерно, так:

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

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

Я выбираю левую сторону. «ONE», «TWO» как раз и означает количество картинок в проекте. Мы договорились, что начнем, пока, только с 1.

Кликните по строке «(ONE) Image — Transform LEFT», а затем по значку «►» в нижней строке. Начнется магия, а на самом деле, работа экшена (записанного порядка действий разных команд).

Добавлю белый фон и в результате получаем такое отображение сайта:

Даже на белом фоне и в уменьшенном виде смотрится достаточно интересно. А если добавим цветной фон?

Как по мне, получилось еще интереснее. А весь процесс занял секунд 15. Вручную такая перспектива делалась бы дольше.

https://youtu.be/mPgQFPeOny4Демонстрация работы экшна

Но это не все настройки. Еще есть возможность изменять глубину или высоту элемента. Возьмем несколько иконок для наглядности. А заодно покажу как работать с несколькими изображениями

Создаю проект, в котором 3 слоя. На каждом слое по 1 иконке.

Убедитесь, что находитесь на первом слое и переходите в окно «Операции». Выберите пункт «(THREE) Images — Transform LEFT » и жмите «►».

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

Для этого, убеждаемся, что находитесь на нужном слое и выбираем одну из команд «EXTRUDE ADD (+) «, например, я сделаю глубину на 30 пикселей больше.

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

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

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

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

Делаем активным нужный слой;
находим настройку размытия;
применяем с нужным параметром;

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

Как создать, свой, реалистичный Mock-up айдентики

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

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

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

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

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

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

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

Количество макетов: 155+

Среда: десктоп, мобильные устройства, книги, баннеры, визитки и многое другое

Формат: PNG

Разрешение по ширине: 700-3800 пикселей.

Количество макетов: 150+

Среда: десктоп, ноутбук, планшет, смартфон, часы

Формат: PNG

Разрешение по ширине: 880-2500 пикселей.

Количество макетов: 25+

Среда: ноутбук, телефон, планшет, рамки

Формат: JPEG

Разрешение по ширине: 960-5000 пикселей.

Количество макетов : 55+

Среда : iPhone, Android, MacBook, iMac, Apple Watch

Формат: JPEG

Разрешение по ширине : 2000 пикселей.

Количество макетов: 20+

Среда: iPhone. Android, MacBook, браузеры, физические носители

Формат: JPEG

Разрешение по ширине: 320-2560 пикселей.

Количество макетов: 80+

Среда: iOS, Android, Windows Phone, ноутбуки, десктопы, телевизоры

Формат: PHG, JPEG

Разрешение по ширине: 2000+ пикселей.

Количество макетов: 100+

Среда: смартфон, ноутбук, десктоп, часы, планшет, телевизор

Формат: JPEG

Разрешение по ширине: 3000 пикселей.

Количество макетов: 10+

Среда: компьютеры, смартфоны, ноутбуки, физические носители

Формат: JPEG

Разрешение по ширине: 2400.

Количество макетов: 20+

Среда: iPhone, iMac, iPad, телевизор, постер, рамка

Формат: PNG

Разрешение по ширине: 1200 пикселей.

Количество макетов: 100+

Среда: десктоп, ноутбук, планшет, смартфон, часы.

Формат: PNG

Разрешение по ширине: 480 и 720 пикселей.

ВМЕСТО ЗАКЛЮЧЕНИЯ

Здравствуйте, сегодня я опишу как делаются шаблоны (Mock-up или Mockup) для презентаций своих работ. Основные плюсы Mock-up – быстрое редактирование макетов продукции, без затрат времени на создание всех эффектов презентации, но нужно сначала создать шаблон, приступим.

Основной файл подготовлен, начинаем создавать нашу продукцию – делаем визитки.

Все было создано за короткий строк, и поэтому все делалось сразу, «экспромтом». Заливаем градиентом файл:

Создаем квадраты, переворачиваем ромбами, уменьшаем, дублируем, получаю результат:

Вставляю текст, работаю с типографикой:

Одна сторона готова, делаем по аналогичному принципу сторону «б»:

Визитки готовы.

Переводим слои визиток в «смарт обьекты».

Смотрим на результат:

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

Визитки расположены на документе, приступаем к созданию СД(ДВД) диска.

Создаем новый документ:

Делаем разметку диска, не забывая соблюдать правильные размеры:

Вставляем наши объекты и текст, созданный в визитках:

Диск готов, вставляем его в основной документ, рисуем ему тень (по аналогичному принципу, как в визитках):

У нас заканчивается место на «холсте», добавляем высоты и поправляем горизонтальную направляющую:

Вставляем конверт в наш Mock-up, добавляю тень:

Замечание – соблюдаем размеры, этот телефон примерно 59×124 мм, но мы его переворачиваем на 90 градусов.

Структура слоев телефона (в смарт объекте):

Рисуем тень телефона. Опускаем конверт вниз и ищем оптимальное расположение нашей продукции:

Аналогично всем выше написанным, создаю «карандаши», работаю над их цветом и «брендированием»:

Добавляю блик на пленке конверта, и смотрим финальный результат:

Вот и наш Mock-up создан, переходим к второй части статьи.

Как редактировать Mock-up

Открываем документ mock-up.psd, заходим на нужный нам слой, пусть это будет «диск»:

Нажимаем два раза мышкой на смарт слое, выскакивает предупреждение:

Закрываем документ с диском, выскакивает предупреждение:

Нажимаем «Да», смотрим как изменился наш Mock-up:

Вот так просто, редактируем наш реалистичный шаблон.

Подумав, я решил сделать третью часть статьи.

Вкратце, опишу как сделать иллюзию 3Д шаблона.

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

Что это?

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

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

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

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

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

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

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

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

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

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

Мокап сайта

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

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

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

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

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

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

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

Источники

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

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

Простой способ создания макетов продуктов в Photoshop

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

Шаг первый:

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

Шаг второй: нарисуйте свою форму

Нарисуйте простую форму с помощью инструмента «Фигура» на панели инструментов. Необязательно, чтобы он идеально совпадал, но убедитесь, что он полностью покрывает всю фигуру.

Pro Подсказка: Использование направляющих упростит этот процесс и сделает его более надежным.

Шаг третий: преобразование вашей формы в смарт-объект

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

Присоединяйтесь к нашему творческому сообществу

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

Шаг четвертый: настройте перспективу

Теперь мы собираемся подогнать наш смарт-объект к экрану монитора на фотографии с помощью инструмента «Трансформировать». Перейдите в Edit> Transform> Distort , чтобы начать редактирование формы вашего смарт-объекта.

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

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

Щелкните ENTER , чтобы применить изменения и вернуть непрозрачность слоя до 100%.

Шаг пятый: Добавьте свое изображение

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

Откройте изображение продукта в Photoshop (ФАЙЛ> ОТКРЫТЬ) . Теперь перетащите новое изображение на этот экран с помощью инструмента «Перемещение». Измените размер изображения, чтобы заполнить экран. Теперь нажмите СОХРАНИТЬ и закройте окно. Убедитесь, что вы не закрыли все окна Photoshop, потому что нам все еще нужно исходное фоновое изображение!

Pro Совет: Если вы удерживаете нажатой клавишу Shift, новое изображение будет перетаскиваться прямо в центр смарт-объекта.

Шаг шестой: Вуаля!

Когда вы вернетесь к исходному фоновому изображению, вас ждет сюрприз! Вот ваше изображение, волшебным образом вставленное и скорректированное в исходное фоновое изображение!

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

Экран слишком яркий? Если исходное изображение имело черный фон, просто уменьшите непрозрачность на слое смарт-объекта, чтобы затемнить его.
Поиграйте с затемнением, умножением и другими параметрами изображения на панели слоев.
Добавьте тени. В Photoshop есть много способов сделать это, но один из самых простых — использовать эффект затемнения цвета с кистью. Однако будьте осторожны, чтобы не слишком сильно изменить изображение. Если напортачили, всего Ctrl + Z !

Бонусный раунд!

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

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

Что вы создадите?

Узнайте, как создать шаблон макета в Photoshop

Mockups — ваш лучший выбор при демонстрации ваших работ.

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

«Итак, я владелец бизнеса, чем это может мне помочь?»
Хороший вопрос.

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

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

Проще говоря, мокапы дают представление о «реальной жизни».

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

«А если я дизайнер? Как макеты делают мою карьеру лучше? »
Ну, напрямую они не улучшают вашу карьеру.

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

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

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

Это можно сделать с помощью макетов.

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

Но деньги не должны быть вашей единственной конечной целью.
Удовлетворенность клиентов должна.

И способ добиться этого — завоевать доверие клиентов. Если ваши клиенты увидят, что вы проявили инициативу и профессионализм в области дизайна, чтобы создать копию дизайна в «реальном мире», они успокоятся еще до того, как они пойдут в производство.

Многие клиенты хотели бы увидеть, как это выглядит, еще до того, как они его сделают.

И так вы сможете сделать свою карьеру лучше с помощью мокапов.

Быстрое создание мокапов [шаг за шагом]

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

В этом уроке основное внимание будет уделено тому, как создавать быстрые, но красивые мокапы менее чем за 30 минут.

Шаг 1. Сделайте снимок с высоким разрешением (5 минут)
Сделайте снимок объекта, для которого вы хотите создать макет (так называемый «эталонный макет»), с помощью мощной камеры, такой как зеркалка.Причина в том, чтобы сохранить макет с высоким разрешением, когда вы применяете свой дизайн.

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

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

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

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

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

Шаг 2. Примените свой дизайн (20 минут)
Следующим шагом, который вам нужно будет сделать, является открытие Photoshop и загрузка фотографии с высоким разрешением, которую вы сделали ранее.

Когда это на экране, возьмите созданный вами файл дизайна (файл .PSD), сохраните его копию как файл изображения (.JPEG или .PNG) и вставьте ее как новый слой на фотографию с высоким разрешением.

Используйте инструменты преобразования (CTRL + T в Windows), чтобы подогнать дизайн под ваш макет фотографии.

Я рекомендую использовать следующие инструменты:
• Перспектива
• Искажение (в основном это то, что вы будете использовать)
• Наклон

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

Шаг 3. Сохраните свою работу (5 минут)
Когда вы будете удовлетворены своей работой, теперь вы можете сохранить свой файл как другой (.PSD). Сохранение файла .PSD гарантирует, что у вас будет управляемый файл, который вы сможете отредактировать позже, если вам понадобится что-то заменить в шаблоне макета.

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

Вот еще несколько вариантов использования дизайнерских макетов:
• Упаковочные материалы
• IPhone / iPad / Mac / Android / PC
• Рекламные щиты
• Кружки
• Плакаты
• Поздравительные открытки
• Сумки
• Подушки
• Одеяла
• Свитера и худи
• Зонты
• Брелки

Как видите, существует множество различных целей для создания шаблона макета в Photoshop.

Но всегда помните, что для начала лучше всего работать с чистой, хорошо освещенной фотографией.

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

Вот несколько сайтов, где вы можете скачать бесплатные шаблоны мокапов:
• https://www.mockupworld.co
• https://freebiesbug.com/psd-freebies/mockups/
• https: //www.freepik. ru / free-photos-vectors / mockup
• https://originalmockups.com/free-mockups

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

Как создать мокап (с помощью генератора мокапов или Photoshop)

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

Основным преимуществом использования макета является то, что он может воплотить проект в жизнь (даже до его завершения) для клиентов или служить образцом портфолио для выделения различных приложений определенного дизайна.

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

Как использовать генератор мокапов

Один из самых простых способов сделать мокап — использовать инструмент-генератор. PlaceIt — отличный вариант для этого из-за большого разнообразия их каталога макетов.

Давайте разберемся, как это сделать.

Выберите макет, который хотите использовать. (Здесь мы хотим увидеть логотип Design Shack на рубашке.Здесь вы можете найти макет, который мы использовали.
Выберите цвет рубашки и фон, который хотите показать.
Используйте кнопки загрузки текста и изображения, чтобы настроить дизайн.
Сохраните, используя значок в правом верхнем углу.
Поделитесь своим макетом. Вот как выглядит наш.

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

Как самому сделать мокап

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

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

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

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

Вот как это сделать (супер упрощенная версия):

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

Учебники и идеи для создания мокапов

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

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

Как создавать свои собственные мокапы

В этом уроке от Designalot.net вы узнаете, как использовать фотографию — вы можете сделать ее сами — и вставить в нее информацию как макет.Здесь в руководстве используется фотография рекламного щита. В этом руководстве вы научитесь использовать фильтры и смарт-объекты для создания макета, который вы можете использовать и использовать повторно.

Создание адаптивного макета с помощью смарт-объектов в Photoshop

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

Как создать макет в Photoshop

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

Как вставить фотографию в макет продукта

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

Как создать мокап логотипа кожаного штампа

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

Заключение

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

Надежный макет для типовых витрин — это инструмент, который нужен каждому в своем наборе.

Шаблоны мокапов

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

Прочитать статью →

Как создать мокап футболки в Photoshop

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

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

Mockup — модель или точная копия машины или конструкции, используемая в учебных или экспериментальных целях

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

Маркетинг
Презентация
Сайт Витрина
Справочник по принтерам для одежды

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

Генераторы мокапов

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

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

У вас также есть перечисленные ниже генераторы для создания ваших дизайнов.

http://shirtmockup.com/(Free/Paid)

https: //www.theprintful.com / generator (Бесплатно)

Готовые шаблоны

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

Пользовательские мокапы

Необходимых материалов:

Тема — Футболка / Модель
Сцена — Любая обстановка при хорошем освещении
Камера, делающая хорошие снимки

Вот шаги по созданию собственного мокапа в Photoshop!

1.Сфотографировать

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

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

После того, как вы сделали несколько хороших фотографий, перенесите их в Photoshop.

2. Вырезание рубашки

В этом уроке мы будем вырезать рубашку с фотографии. Для этой работы я использовал инструмент Quick Selection (W). Щелкните и удерживайте указатель мыши над рубашкой, пока все не будет выделено. Когда вы будете удовлетворены, нажмите Select and Mask на верхней панели, чтобы уточнить края.

Теперь уточните свой выбор как можно лучше.Наличие солидного опыта действительно помогает в достижении этой цели. Как только я закончил, я экспортировал выделение на слой N ew с маской слоя на случай, если мне понадобится внести правки позже.

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

3. Карта смещения

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

Дублируйте слой, выбрав значок «Гамбургер» в правом верхнем углу панели «Слои». Выведите новый слой в новый документ и назовите его смещение. Вы перейдете к новому документу.

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

Обесцветьте выделение, перейдите к Image > Adjustment> Desaturate , чтобы преобразовать изображение в черно-белое. Перейдите в меню «Файл »> «Сохранить как » и выберите, где сохранить этот файл, и назовите его «displace-map.psd». Теперь вы можете закрыть эту вкладку.

Теперь вы готовы разместить свои изображения.

4. Разместить изображение

Есть несколько шагов для размещения изображений на вашем макете.

Смарт-объект

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

Если вы хотите зарезервировать место для ваших дизайнов, вы можете взять инструмент «Прямоугольник» (U) и нарисовать прямоугольник любого размера на передней части рубашки. Когда вы закончите, щелкните слой правой кнопкой мыши и выберите в меню пункт «Преобразовать в смарт-объект».

Теперь дважды щелкните слой. Вы попадете на другую вкладку, где сможете редактировать.psb файл. В этом файле вы можете разместить столько дизайнов, сколько вам нужно. Просто нажав CRTL + S , вы сохраните файл, и исходный макет обновится до изображения, которое вы разместили!

Рабочий объем

Теперь мы хотим использовать карту смещения. Выделив слой, перейдите в меню Filter> Distort> Displace и установите горизонтальный и вертикальный масштаб на 3, затем нажмите «ОК». Это загружает созданную нами карту смещения. Вы увидите смещение в зависимости от информации с карты смещения.

Маска (опционально)

Наконец, мы хотим создать маску, чтобы ваш дизайн ограничивался рубашкой. Это хороший шаг, особенно если у вас есть выкройки или рисунки, которые подходят ко всей рубашке. Я создал группу для слоя «Design Here». Выделив слой, нажмите CTRL + G . Теперь создайте выделение рубашки, перейдя к исходному слою с рубашкой. Удерживая CTRL, щелкните маленькую часть изображения слоя. Это вызовет выбор рубашки.Теперь вернитесь к созданной вами группе, выберите слой и выберите Layer Mask внизу панели слоев.

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

5. Свет и тени

Теперь мы будем работать над выделением бликов и теней макета. Сначала убедитесь, что вы обесцвечиваете изображение / оттенки серого, если ваша рубашка еще не черная или белая. Дублируйте исходный слой с рубашкой, дважды нажав CTRL + J .Переименуйте эти новые слои в «Света» и «Тени», чтобы не было путаницы. Теперь сделайте видимым только один из этих слоев, выбрав значок «глаз».

Выделив слой, перейдите в меню Image> Adjustments> Levels .

Мы начнем со слоя Shadows, используя настройки ниже или аналогичные.

132, 0,87, 248

Этот слой будет установлен на Умножение и будет помещен поверх слоя Highlights.

Затем со слоем Highlights используйте настройки ниже или аналогичные.

48, 1.54, 146

По завершении я установил для этого слоя значение Luminosity.

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

6. Изменить цвета

Наконец, мы настроим цвета объекта.Мы делаем это, добавляя корректирующий слой Photo Filter Adjustment Layer. Выбрав групповую папку, созданную на последнем шаге, в нижней части панели слоев выберите значок настроек, затем выберите параметр «Фотофильтр». Когда настройка присутствует и окно настроек открыто, выберите значок обтравочной маски. Это коробка со стрелкой вниз. Это закрепит эту настройку только на нижнем слое, в конечном счете, на слоях рубашки.

Открыв параметры, установите для параметра «Плотность» значение 100% и снимите флажок «Сохранить яркость».Теперь перейдите в поле «Цвет», и здесь вы сможете настроить цвета по своему усмотрению.

Отделка

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

Есть вопросы? Оставляйте свои комментарии ниже!

Как создавать мокапы для печати в Photoshop ~ Elan Creative Co.

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

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

Смотрите на YouTube

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

Перенесите свои печатные формы в Photoshop

Я хочу создать закрепляемое изображение для этого поста, поэтому я начну с холста 800 x 1200 пикселей и 72 пикселей на дюйм.

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

Импортируйте ваши печатные формы

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

Откройте ваши PDF-файлы и сохраните их как JPEG или PNG. Если у вас нет исходных файлов, вы можете открывать PDF-файлы в Photoshop и сохранять их в виде растровых файлов (JPEG или PNG).

Вернитесь к своему документу и импортируйте файлы, используя Файл> Поместить .

Вы заметите рамку вокруг вашего изображения. Вы можете использовать опорные точки для масштабирования изображения или переместить его с помощью инструмента «Перемещение» (V).Дважды щелкните изображение, чтобы разместить его.

Если вы хотите добавить больше изображений, снова используйте функцию Файл> Поместить или перетащите изображение на холст.

Масштабирование изображений

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

Чтобы масштабировать объекты, выберите слой, который вы хотите изменить, и перейдите в Правка> Трансформировать> Масштабировать (Ctrl + T).Вы можете использовать опорные точки для масштабирования изображения или ввести значения с помощью панели инструментов, которая находится в верхней части холста. Убедитесь, что вы помните значения, чтобы их можно было добавить к другим изображениям.

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

Повернуть изображения

Теперь, когда печатные формы стали меньше, я хочу переставить их. Я сложу их в стопку и поверну так, чтобы они оба были видны.

Чтобы повернуть изображения, выберите Edit> Transform> Rotate (Ctrl + T).Поместите курсор рядом с одним из углов изображения. Вы заметите, что курсор изменится на изогнутую стрелку. Просто нажмите на холст и поверните изображение. Дважды щелкните изображение, чтобы применить изменение.

Вы также можете повернуть второе изображение в другом направлении.

Добавьте стили слоя

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

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

На панели Layers дважды щелкните слой, который нужно отредактировать. Это откроет панель Layer Style . Вы также можете открыть его, выбрав «Слой »> «Стиль слоя ».

Добавить тень

Вы можете найти опцию Drop Shadow внизу меню Layer Style или вы можете перейти в Layer> Layer Style> Drop Shadow .

Мои настройки Drop Shadow :

цвет: # 949494
режим наложения: умножение
непрозрачность: 30%
угол: 0 (флажок Use Global Light)
расстояние: 5 пикселей
распространение : 5px
размер: 10px

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

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

Узнайте, как создавать красивые макеты для печати в Photoshop. Нажмите, чтобы твитнуть Добавьте последние штрихи
Теперь, когда ваши макеты готовы, все, что вам осталось сделать, это добавить текст с помощью инструмента «Текст». Чтобы сделать его еще более реалистичным, вы можете добавить такие предметы, как ручки, карандаши или цветы.
Совет: Сохраните копию своего макета в виде файла Photoshop (.psd). Изображения являются смарт-объектами, поэтому, если вы хотите заменить их другими печатными формами, все, что вам нужно сделать, это дважды щелкнуть слой изображения. Это откроет изображение в новом документе, и вы сможете разместить там новую печатную форму. Закройте и сохраните документ, и новая печатная форма появится в вашем шаблоне.
Вы создаете макеты для печати в Photoshop? Хотите узнать, как создавать другие мокапы? Пожалуйста, дайте мне знать в комментариях.
Как создать свой собственный макет продукта в Photoshop
Узнайте, как создать свой собственный реалистично выглядящий макет продукта в Photoshop с помощью этого очень простого урока. Это изображение было сделано, чтобы помочь читателям создать свой собственный макет продукта.Чтобы создать это, мы начнем с создания коробок. Затем мы добавим в коробку несколько дизайнов. Наконец, мы закончим его тенями и бликами, чтобы работа выглядела более реалистично. Вам понадобится Photoshop CS3 или новее, чтобы следовать этому руководству.
Учебные ресурсы
Шаг 1
Начнем с создания холста размером 1588×1191 пикселей, а затем изменим цвет фона на # d2d3d5; Чтобы эта графика выглядела более аккуратно и не беспорядочно работала, нам нужны линейки и сетки.Вы можете получить доступ к линейкам, выбрав «Просмотр»> «Линейки» (или нажав Ctrl + R), а для сеток выберите «Просмотр»> «Показать»> «Сетки» (или нажмите Ctrl +,). Вот мои настройки для сеток, обязательно измените ваши так же, как мои, чтобы следующие шаги не сбивали с толку.
Шаг 2
Создайте новую группу и переименуйте ее в «Правая сторона». Создайте новый слой и назовите его «Правая сторона». Используя инструмент Rectangular Marquee Tool, сделайте выделение размером 795×1078 пикселей. Как только вы это сделаете, залейте выделение случайным цветом.Я просто залил его белым (#FFFFFF). Затем сделайте смарт-объект, вы можете сделать это, щелкнув слой правой кнопкой мыши и выбрав «Создать смарт-объект». Это позволит нам изменить все, что мы хотим, в этом слое, фактически не «испортив» его.
Шаг 3
Создайте еще одну группу, но на этот раз назовите ее «Левая сторона». Создайте новый слой и назовите его «Левая сторона». Как и раньше, нам нужно сделать выбор, а затем заполнить его случайным цветом.На этот раз сделайте выделение размером 483×1078 пикселей. Затем, как и на предыдущем шаге, преобразуйте слой в смарт-объект.
Шаг 4
Перед тем, как приступить к дизайну, давайте настроим слои и преобразуем их в трехмерную реалистичную коробку. И начнем с правой стороны коробки. Выделите этот слой и нажмите Ctrl + T, нам нужно его трансформировать, и мы начнем с его фактического сжатия (сжатия на 75%), пока он не достигнет высоты 814 ~. Убедитесь, что вы не забыли щелкнуть значок цепочки при ее сжатии.Затем перейдите в Edit> Transform> Perspective и трансформируйте его так: (в основном вы просто хотите коснуться правой стороны ….) Затем нажмите Ctrl + T, удерживая клавишу Ctrl, вы хотите немного сжать правую сторону, чтобы она больше походила на прямоугольник, а не на толстый квадрат.
Шаг 5
Что касается левой части коробки, мы сделаем еще кое-что. Сначала, как и раньше, вы хотите уменьшить его на 75%. В этом разделе окна вы просто хотите удерживать клавишу Ctrl и трансформировать его, пока не получите то, что выглядит как трехмерный блок… Убедитесь, что высота искаженных сторон параллельна искаженной части правой части, не забудьте уменьшить левую часть коробки. В итоге получится что-то подобное …
Шаг 6
Теперь, когда это сделано, мы можем наконец приступить к проектированию. Мы начнем с правой части поля, поэтому с учетом сказанного выберите этот слой и дважды щелкните смарт-объект, чтобы открыть его. В этой части вы можете создать свой собственный дизайн или следовать тому, что я делаю.В своем дизайне я использовал небесно-голубую цветовую схему коробки. Итак, если вы хотите следовать моему дизайну, начните с изменения цвета фона на # e1ebe4; мой на самом деле просто простой. После фона давайте приступим к созданию заголовка (размещенного в центре верхней части дизайна ..). Для заголовка я использовал следующие шрифты (я использовал цвет # 1f1f20;):
Чтобы добавить больше деталей, я добавил галочку (# 009a81;) и зарегистрированный символ с помощью инструмента Custom Shape Tool. Затем, чтобы продолжить, я добавил случайный текст под заголовком с помощью инструмента «Абзац» (к нему можно получить доступ, выбрав и перетащив произвольно с помощью инструмента «Текст»).Я использовал для него следующие настройки:
Я закончил, добавив еще один текст в нижнем центре, а затем выделил его рамкой с помощью инструмента формы.
Как создать макет в перспективе в Photoshop — Меган Мартин Креатив
Недавно я поделился в блоге записью о том, как проектировать графику на экране компьютера с прокруткой, и многие люди были очень увлечены этим. Включая меня! Когда АннаКейт показала мне, как создать эффект прокрутки на макете экрана компьютера, я ОТКРЫЛСЯ от волнения.Сегодня я хочу поделиться с вами новой техникой графического макета , которую я недавно узнал, которая заставила меня задуматься над днями: Как создать макет в перспективе в Photoshop!
Связано: как создать прокручиваемую графику веб-сайта в Photoshop
Если вы не знали, я сотрудничал с моим дорогим другом и известным фотографом Лорой Фут, чтобы создать линию стиля жизни для моего любимого источника стоковых фотографий, The SC Stockshop.Я был клиентом Шэя в течение многих лет, но чего-то не хватало в моем арсенале изображений, которые можно было бы использовать для социальных сетей, маркетинга и графики на веб-сайтах: изображений, которые казались больше реальной жизнью .
Не поймите меня неправильно, я все еще ВСЁ о ПОТРЯСАЮЩИХ плоских макетах Шэя и стоковой фотографии для настольных компьютеров и до сих пор использую набор Brand Builder, который я купил 5 лет назад (неужели 5 лет прошло! Ого!). Но когда дело доходит до общения с реальными людьми в Интернете, также важно смешивать изображения, которые создают ощущение, что вы действительно можете общаться с человеком на другой стороне экрана.
Итак, мы создали линейку стоков Lifestyle. Вы увидите изображения, которые были сняты прямо у меня дома, чтобы создать уютную рабочую среду в стиле домашнего офиса, а также аксессуары, которые могут быть рядом с вами. Когда мы намеревались создать линию стиля жизни, мы хотели, чтобы наша работа отличалась от работы Шэя. Шей уже усовершенствовал плоскую планировку и четкий макет рабочего стола. Серьезно, они просто завораживают! Итак, мы с Лорой сосредоточились на создании изображений с акцентом на более естественную и непринужденную эстетику.
В то время как элементы, которые я стилизовал под в , изображения были намеренно выбраны, чтобы передать более повседневный вид, Лаура также тщательно запечатлела элементы таким образом, чтобы они чувствовали себя так же. Это означало, что много изображений было снято под углом или, что мы называем перспективой , . Изображения в перспективе показывают глубину и кажутся более реалистичными, чем плоское сфокусированное изображение. В строке образа жизни вы увидите несколько изображений с плоским макетом экрана по центру, но многие изображения показывают экран компьютера или телефона в перспективе.
Итак, естественно, я хотел выяснить, как наложить снимок экрана веб-сайта, когда изображение макета находится в перспективе, и недавно я понял это! Я поделился своим волнением в Insta, и несколько других людей сказали, что тоже хотят узнать, как это сделать, поэтому я создал это обучающее видео, чтобы показать вам, как это делается в Photoshop! Обещаю, это проще, чем кажется.