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

0

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

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

Привет! Меня зовут Антон и я веб-дизайнер(хлоп, хлоп, хлоп. ).


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

Как пользоваться мокапами. (снизу на картинке мокапы)

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

Простыми словами – если вам надо показать текст/картинку/логотип на какой-нибудь поверхности – вы используете мокап.

Что же нам понадобится?

1) Adobe Photoshop – скачиваем с торрента с официального сайта Adobe и пользуемся триалкой в 7 дней.

2) Сам мокап. Они легко гуглятся запросом “мокап+нужное слово”, например “мокап чашки”.

Нам нужен мокап для фотошопа, потому он должен быть в формате .psd, их часто так и ищут “PSD мокап чашка”.

3) Логотип, картинка, текст, который надо разместить на мокапе.

Решил я сделать пикабучашку.

Нашел вот такой вот мокапчик в интернетах:

Скачал архив, вытащил из архива “Mockup.psd”, открыл его в фотошопе.

Вижу я вот такую картину:

В нижнем правом углу мы видим раздел со слоями.

В этом разделе показаны все слои, которые есть в данном файле.

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

Обычно слой для редактирования выделяют цветом, как в данном случае.

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

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

Я нашел в этом посте хорошие пикабукартиночки и сохранил одну себе как раз для этого мокапа.

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

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

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

После этого я то же самое проделал со вторым слоем. Далее сохранил картинку через File -> Save as(Файл -> Сохранить как), выбрал формат JPEG и вот результат:

С удовольствием отвечу на ваши вопросы в коментариях.

Как создать макет (мокап) флаера в Photoshop?

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

Читать еще:  Меня раздражает мой годовалый ребенок. Я мать или мачеха? Почему меня бесит мой собственный ребенок

Как сделать макет (мокап) флаера в фотошопе (Photoshop)

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

Создание макета флаера в Photoshop — Техника

Создание макета флаера в Photoshop — Техника

1. Самое главное — продумайте, для чего вы собираетесь создавать макет ( мокап ) в фотошопе: для визитной карточки, брошюры, листовки, флаера или для чего-то еще. В рамках данной статьи мы разработаем макет флаера. Создайте новый документ с размером A4 , нажмите « ОК ».

2. Теперь создайте копию фонового слоя, нажав Ctrl + J , затем выберите инструмент « Кадрирование » ( C ) и сделайте весь документ немного больше, так, как показано на рисунке, приведенном ниже, в документе появятся области по краям, но не беспокойтесь! Выберите серый цвет в качестве цвета фона, залейте эти области серым цветом.

3. Назовите новый скопированный слой Placeholder , затем кликните по нему правой кнопкой мыши, преобразуйте его в Смарт-объект. Помните — не следует масштабировать этот слой до преобразования в Смарт-объект. После преобразования слоя в Смарт-объект можно будет вносить любые изменения. Я уменьшаю его, как показано на рисунке ниже.

4. Сделайте слой Placeholder меньшим, примените эффект « Тень »:

  • Режим смешивания – Нормальный;
  • Непрозрачность — 100%;
  • Угол — -45 градусов;
  • Расстояние — 85 пикселей;
  • Размер — 130 пикселей.

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

Создание макета флаера в Photoshop — Техника

5. Хорошо. Теперь согните нижний правый угол переднего слоя. Для этого выберите слой и нажмите Ctrl + T , будет активирован инструмент « Трансформация ». Далее нужно будет выбрать параметр « Деформация », размещенный в правой части меню параметров.

Параметр Деформация — Техника

Создание макета флаера в Photoshop

6. Теперь попробуйте сделать небольшую тень согнутого угла, используйте для этого инструмент « Кисть ». Затем продублируйте каждый слой и нажмите Ctrl + T , кликните по каждой копии слоя правой кнопкой мыши и выберите пункт « Отразить по вертикали », чтобы перевернуть ее. После этого переместите каждую копию ниже оригинального слоя, чтобы создать его отражение.

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

Создание макета флаера в Photoshop — Техника

8. Теперь дважды кликните по любому из верхних слоев, в результате чего откроется новый документ. Разместите флаер в этом документе и нажмите Crtl + s , чтобы сохранить его, и вернитесь в основной документ. Вау! Попробуйте поэкспериментировать с тенями и бликами. Теперь вы знаете, как делать самые разнообразные макеты ( мокапы ) в фотошопе.

Создание макета флаера в Photoshop — Техника

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

Данная публикация представляет собой перевод статьи « How To Create Flyer Mockup In Photoshop » , подготовленной дружной командой проекта Интернет-технологии.ру

Читать еще:  Плоды шиповника польза

Photoshop. Создание 3d мокапа.

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

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

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

Что для этого понадобиться.

В ладеть одним из 3д редакторов и владеть фотошопом.

Алгоритм действий.

Я нашёл два способа создавать подобные мокапы.

► Первый: создать 3д модель. Простую 3д модель (скажем мятый (развивающийся) флаг или несколько страниц газеты) сохранить её в формате OBJ, закинуть этот файл в фотошоп и уже в фотошопе играться с этим файлом.

Ф отошоп поддерживает 3д пространство. В нём можно настроить освещение, текстуру материала, выставить камеру. Т ак же загрузить текстура в UV развёртку модели. В загрузке текстуры в UV развёртку и заключается вся прелесть этого метода . К артинка будет повторять контуры 3д модели, тем самым вызывая эффект реалистичности. В общем-то как и в обычной 3д программе. Н о в очень примитивной 3d программе.

Ссылка на пример такой работы, найденной на просторах интернета.

Второй способ: похож на первый. Т ак же создаём 3д модель. Н о уже можно создавать модели любой сложности. С кажем сложный интерьер комнаты, в центре которой на столе лежит скатерть, а на скатерти лежит свёрнутый журнал. И нужно менять в дальнейшем текстуры скатерти и страниц журнала. И ли кровать с постельным бельём, чтобы быстро загружать разные текстуры ткани.

В фотошоп такую модель не загонишь. Н о можно схитрить. С делать рендер всей сцены. З агрузить её в фотошоп как фон. С охранить отдельно 3д модели скатерти и журнала и только их загрузить в фотошоп. И вот на этом этапе возникают трудности:

Нужно синхронизировать камеры в 3д редакторе и в фотошопе.

Я работаю в программе Rhinoceros 3D. Н о думаю и с другими программами будет примерно тоже самое +/-

► Ч то эти настройки камеры означают конкретно в программе Rhinoceros 3D?

В фотошопе другие настройки осей и положение камеры определяется по другому. П оворот камеры задаётся углом поворота в градусах.

Т еперь нужно настройки камеры из Rhino перенести в Photoshop. Предварительно в 3д редакторе выставляю нужный мне ракурс (который я хочу перенести в фотошоп). И строю в 3д пространстве расположение камеры и направление “взгляда” этой камеры, чтобы “вручную” получить настройки камеры для Фотошопа.

► У читывая оси и направления вращения в Фотошопе, получаем вот такие значения настроек камеры.

► Д елаем предварительный рендер брошюры в 3д редакторе.

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

Читать еще:  Полезные продукты при простатите

► Е сли есть возможность, то сразу настроить UV-развертку в 3д редакторе. Ч тобы развертка имела правильное расположение “вверх-низ” и имела правильную форму и размеры.

► С охраняем 3д модель в формате .OBJ

► З агружаем в фотошоп рендер в виде фона и 3д модель.

► В ыставляем полученные настройки камеры в фотошопе.

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

► Н о и такой результат тоже хорошо! И ногда, просто достаточно зажать Ctrl и сместить 3д модель немного вниз и всё идеально совпадёт. Н о не в этом случае. С ейчас придётся 3д модель сместить и подвергнуть деформации.

► П осле небольшой деформации, 3д модель идеально ложится на фон (практически).

► И как видно, контуры 3д модели ушли во внутрь картинки. В конце придётся кадрировать общий вид. З начит, заранее лучше делать такую картинку, которую в дальнейшем будет не жалко кадрировать.

Один этап пройден. 3d модель совпадает с фоном, и теперь можно накладывать текстуры и наводить лоск.

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

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

► Но предварительно их нужно немного настроить. У брать освещение. Это нужно для того, чтобы листы стали полностью белыми. Э то нужно для наложения 3d модели на фон. Р ежим наложения я ставлю “Умножение”. А в этом режиме, белый цвет никак не отображается. О станется только текстура страницы, которая наложится на фон. А страницы на фоне уже имеют свой цвет.

► П очему сейчас листы серые. П отому что ,если открыть файл с объектом листа, то увидим так серый фон и UV-развертку страницы. С ерый фон нужно заменить на белый.

► А вот с UV-разверткой отдельная история. У меня она отображается повернутая на 90 градусов. А значит, что и картинку (текстуру) нужно будет повернуть на 90 градусов. И ли создать сматр-объект. Н ад этой проблемой буду ещё думать.

► В общем получается довольно большая капуста из слоёв и смарт-объектов. Которые довольно затруднительно редактировать. Но не так уж и долго.

П осле загрузки картинок на страницы это выглядит вот так.

А готовый мокап (ну не совсем готовый) выглядит вот так.

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

► В начале, я сохранял элементы рендера. Отдельно блики, тени, освещение итд. И х можно использовать для пост обработки.

Источники:

http://pikabu.ru/story/dizayn_dlya_nedizaynerov_mokapyi_5727173
http://www.internet-technologies.ru/articles/kak-sozdat-maket-mokap-flaera-v-photoshop.html
http://zen.yandex.ru/media/id/5ad8b62aa936f4f329e8affe/5d3b320fc0dcf200ad3e1353

голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии