3D поп-ап эффект в photoshop

Опубликовано: Автор: admin

3D поп-ап эффект в photoshop

Не забывайте такие особые книжки-раскладушки из детства, выполненные из особо прочного картона, где в иллюстрации лишь кажутся плоскими в то время, когда книга закрыта, но стоит ее открыть.. и… картина сходу преобразовывается в настоящий 3D объект, выскакивая нам навстречу с поверхности страниц? В этом уроке мы обучимся делать 3D поп-ап эффект в фотошоп.
Открыв фотошоп, в мыслях положим любимое домашнее фото на виртуальный стол, поставив себе подобную задачу провернуть данный фокус с превращением части неспециализированного плоского изображения – главных героев картины в 3D объект. Очевидно, понятие 3D тут выступает лишь в качестве зрительной иллюзии, но мы планируем еще подкрутить у фото уголки вверх для придания большей глубины отечественному объемному фантому!

Так что было сначала?

А сейчас наблюдаем в конце!

Ход 1

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

Копируем его, надавив Ctrl+J (в виндоус) / Command+J (на мак платформе) . Ура, у нас появился новый слой, поменяем его имя по умолчанию «Слой1» на что-то более красивое и очевидно идентифицирующее будущий функционал слоя, к примеру, на «Плоскость». Для этого перейдите в окно слоя и два раза кликните на нем и надавите «Enter» на клавиатуре (при работе в Windows либо Return на Mac) для подтверждения смены имени слоя. Это будет 1 слой.

По такому же методу действий продублируем слой «плоскость». Делаем 2 слой, он будет самым верхним. Назовем его «поп-ап».

Ход 2

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

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

Ход 3

Выделите слой бэкграунда надавив на него.

Выделенный слой подсвечивается голубым.

Ход 4

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

Раскрывается перечень из массы позиций, ищем вторую сверху – это «Градиент».

Ход 5

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

У вас обязана открыться панель «редактор градиентов». Выберите в том месте комплект «Тёмный, белый» ткнув по нему мышкой. Данный комплект третий по счету в верхнем окне готовых комплектов цветов.

Ход 6

Замените тёмный светло-серым.
Опустите взор ниже комплекта и отыщите градиентную линейку с двумя маркерами управления положений контрольных точек цвета: верхним и нижним. Два раза щелкните на нижнем.

Откроется окно палитры цвета узла градиента. Выберете собственный светло-серый цвет пипеткой в окне палитры либо отыщите значок # и введите номер цвета руками 929292.

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

На все окно – серый градиент…

Ход 7

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

Фото опять показалось, т.к. слой «плоскость» расположен сверху слоя градиентной заливки.

Ход 8

Заберите прямоугольный инструмент выделения.
Выделите слева на панели инструментов инструмент выделения прямоугольной области. Вот он — второй сверху в виде штрихового прямоугольничка. Либо надавите на клавиатуре M.

Ход 9

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

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

Ход 10

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

Ход 11

Переходим в модель «Возможность».
Когда вы выделили инструмент изменения выделенной области, то по краям выделения на углах показались мелкие квадратики. (в каждом углу: посередке, сверху, снизу, слева, справа). Мы будем применять их для переопределения формы изменения выделения. Но прежде перейдем в режим возможности.

Для этого надавите по экрану правой кнопкой в Windows либо Control-click (в Mac) и выберите в показавшемся меню опцию «Возможность».

Ход 12

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

Противоположный правый угол будет синхронно также перемещаться влево к центру!

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

Ход 13

Переходим в модель «Масштабирование».
Кликаем правой кнопкой мыши в Windows либо Control-click (в Mac) и выберем в показавшемся меню опцию «Масштабирование».

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

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

В то время, когда вы наконец станете довольны результатами ваших подвижек, надавите Enter (в Win) либо Return (в Mac) для подтверждения ваших выхода и трансформаций из режима изменения выделения.

Ход 14

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

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

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

Ход 15

Добавление белой обводки к стилю слоя.
Давайте используем белую обводку для добавления цвета рамки к слою фото.
Внизу панели слоев надавите «Добавить стиль слоя» (иконку “fx”).

После этого в показавшемся меню выберите 3 сверху параметр «Обводка».

Откроется диалоговое окно стиля слоя. Надавите «Цвет».

Выберите на палитре цветов белый цвет. Его кодовое цветовое значение #ffffff.

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

Измените размер ширины обводки – это и имеется белая окантовка около фото. Имеете возможность поставить к примеру 16 px.

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

Ход 16

Включите слой «поп-ап».
Выделите на палитре слоев верхний «поп-ап» и активизируйте его, надавив на иконке видимости слева него.

Ход 17

Выберите на фото ваш основной объект, над которым вы станете трудиться.
Определитесь на панели инструментов среди любого из инструментов выделения области: «Лассо», «Магнитное лассо», «Стремительное выделение», «Чудесная палочка» и т.д. Очертите около предмета, что вы планируете выделить соответствующий контур. На фото приведенном тут мы выбираем двух снеговика и детишек.

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

Ход 18

Добавьте слой-маску.
Не снимая выделение с основных объектов на фото и пребывав на слое «поп-ап» надавите внизу панели слоев на «Добавить слой маску».

Фотошоп мгновенно конвертирует отечественное выделение в маску слоя «поп-ап».

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

Ход 19

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

Ход 20

Загрузите заново область выделения маски.
Для этого при выделенном слое «плоскость» кликните на нем левой кнопкой мыши удерживая Ctrl (в Windows) / Command (Mac).

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

Ход 21

Добавьте новый слой ниже слоя «Плоскость».
При выделенном активном слое «плоскость» внизу панели слоев надавите на иконку «Создать новый слой», но в обязательном порядке наряду с этим удерживая левую кнопку мыши жмите на Ctrl (Win) / Command (Mac).

Новый слой покажется внизу слоя «плоскость»! Это необычное исключение из правил (в большинстве случаев при нажатии иконки нового слоя он появляется вверху активного слоя), и это исключение появляется лишь за счет того, что вы применяли клавишу Ctrl. Переименуйте новый слой в «тень» два раза кликнув на нем, введя наименование и подтвердив его Enter (Win) / Return(Mac)

Ход 22

Залейте область выделения на новом слое черным цветом.
Давайте закрасим тёмным отечественную область выделения на новом слое. Для этого перейдите в верхнее меню Редактирование и отыщите «Выполнить заливку».

Откроется диалоговое окно заливки. Выберите в пределах содержимого в выпадающем перечне «Применять» опцию «Тёмный». Покиньте в опциях наложения слоя непрозрачность слоя 100% и «Обычный» режим.

Надавите «Ок» и выйдите из окна. Тень в превью слоя окрасилась тёмным, но мы не видим этого на экране на самом изображении, т.к. нам загораживает область видимости слоя тени второй верхнележащий слой «плоскость».

Ход 23

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

Связь между содержимым слоя и содержимым его маски сейчас уничтожена!

Ход 24

Порвите сообщение слоя с его маской.
Сейчас оставаясь на слое «плоскость» кликните рядом справа на его слое маски. Связи между этими слоями уже нет.

Ход 25

Выберите в меню изменение объекта.
Перейдем в меню Редактирование, в том месте выберем Изменение, и дальше ее вид — Деформация.

Ход 26

Переместим 4 угловых точки на изображении вверх для заворачивающихся уголков.
Вы заметите деформационную сетку, показавшуюся около фото. Кликните на каждом из углов по ее краю и поднимите их вверх.
Когда вы передвинете любой из них вручную вверх, вы увидите, что кроме показавшегося на поверхности результата загнутых страниц весьма кстати раскрылся нижележащий слой «тень». В случае если сделанные вами трансформации вас устраивают подтвердите их, надавив Enter (Win) / Return (Mac).

Ход 27

Выделите слой «тень».
Перейдите в панель слоев и активизируйте слой тени, кликнув на нем.

Ход 28

Примените фильтр размытия по Гауссу.
Перейдите в верхнее меню Фильтр, выделите в том месте Размытие, и позже Размытие по Гауссу.

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

Надавите «Ок» и налюбуйтесь результатом размытой тени на вашем практически уже готовом изображении!

Ход 29

Уменьшите прозрачность тени.
Мы размыли края тени, но она все еще остаётся интенсивной и через чур чёрной. Отыщите параметр «Непрозрачность» в верхнем правом углу на панели слоев и уменьшите прозрачность слоя со 100% до 60%.

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

Ход 30

Измените форму тени с командой «Свободное трансформирование».
Одна последняя вещь. Давайте уберем тень мало, дабы все-таки она смотрелась более похожей на тень под фотографией. Идем в меню Редактирование, выбираем Свободное трансформирование.

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

В то время, когда габариты тени наконец вас устроят, жмите на клавиатуре Enter (в Win) либо Return (в Mac) для подтверждения действий и выходите из режима изменения. Вот так выглядит тень на отечественном изображении по окончании всех изменений.

Изменение цвета фонового градиента

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

Откроется привычное окно по настройке градиента. Надавите на цветовом превью в его верхней части.

Войдите в окно редактирования цветов градиента. Два раза щелкните на нижнем маркере слева на линейке градиента.

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

Заберем цвет с областей голубого на снежных участках.

Фотошоп дает мгновенный просмотр в превью будущего результата с новыми оттенками градиента! Выбрав цвет, жмите «ОК» и выходите из диалогового окна редактора градиентов и после этого из редактора заливки градиента.

Вот для сравнения еще раз посмотрите на исходник фотографии.

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

Поздравляем, мы сделали все, что желали!

Оставляйте ссылки на свои работы в комментариях!

Sketch Photoshop Action Tutorial (With 3D pop up effect)


Интересно почитать:

Самые интересный результаты подобранные по Вашим интересам:

Related posts