Помните такие особенные книжки-раскладушки из детства, выполненные из прочного картона, где внутри иллюстрации только кажутся плоскими когда книга закрыта, но стоит ее открыть.. и... картинка сразу превращается в настоящий 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) для подтверждения действий и выходите из режима трансформации. Вот так выглядит тень на нашем изображении после всех трансформаций.
Изменение цвета фонового градиента
Если вы вдруг решили, что вас не устраивает цветовой эффект, примененный к градиентному слою и что он выглядит чужеродно, вы можете сделать выборку цвета непосредственно из вашего фото на ее основе составив новые цвета градиента. Во-первых, перейдите к основному слою градиента и дважды кликните на нем, чтобы его активизировать.
Откроется знакомое окно по настройке градиента. Нажмите на цветовом превью в его верхней части.
Войдите в окно редактирования цветов градиента. Дважды щелкните на нижнем маркере слева на линейке градиента.
Таким образом есть возможность изменить неустраивающий нас в градиенте серый цвет. Фотошоп вновь откроет палитру цветов. Но теперь вместо того, чтобы выбрать цвет из готовой цветовой палитры мы подвинем курсор мыши непосредственно на само изображение и заметим как курсор временно превратился в изображение пипетки. Этой пипеткой мы и будем забирать цвет с нашего фото. Просто нажмите на нужный участок картины и искомый цвет внутри пипетки! Заберем цвет с областей голубого на снежных участках.
Фотошоп дает мгновенный просмотр в превью будущего результата с новыми оттенками градиента! Выбрав цвет, жмите «ОК» и выходите из диалогового окна редактора градиентов и затем из редактора заливки градиента.
Вот для сравнения еще раз взгляните на исходник фотографии.
А вот наш окончательный результат после замены серого градиента нежно-голубым, чьи оттенки взяты прямо из фотографии.
Поздравляем, мы сделали все, что хотели!
Шаг 1. Мы будем использовать фоновое изображение в качестве основы размера для этой композиции. Откройте фоновое изображение и убедитесь, что его разрешение (resolution ) установлено на 300px/inch.
При активном слое «Фон» (Background) нажмите сочетание клавиш Ctrl+J, чтобы скопировать слой и изменить Режим смешивания (Blend Mode ) копии на Умножение (Multiply ).
Прим. переводчика: Параметр Режим смешивания ( Blend Mode ) слоя расположен в верхней части палитры слоев слева от параметра Непрозрачность ( Opacity ).
Шаг 2. Теперь откройте изображение с нашей девушкой - жертвой моды. Чтобы сохранить отдельный оригинал изображения и избежать повторного вырезания в случае ошибок, которые мы можем совершить в будущем, сохраним нашу жертву моды отдельным документом.
С помощью инструмента Перо (Pen ) создайте контур по внешнему краю девушки, включая куб, на котором она сидит. После того, как вы обведете края, создайте еще несколько контуров между ее лицом и серьгами, рукой и ногой, а также между обеими ногами. Как только все контуры будут нарисованы, кликните в любом месте правой кнопкой мыши и выберите Создать выделение (Make Selection ). Нажмите сочетание клавиш Ctrl+J, чтобы скопировать выделение на новый слой.
Прим. переводчика: Убедитесь, что выделение образовалось именно вокруг девушки, а не вокруг фона. Если у вас «бегающая дорожка» образуется по периметру документа, то у вас выделен фон. В этом случае вам надо воспользоваться сочетанием клавиш Ctrl + Shift + I или меню Выделение - Инвертировать ( Select - Invert ), чтобы инвертировать выделение, выделив тем самым девушку. Только тогда копируйте ее на новый слой.
Шаг 3. Переместите вырезанную жертву моды в нашу основную композицию. Измените название слоя на «Жертва моды» и поместите ее по левому краю, как показано на изображении ниже.
Нажмите сочетание клавиш Ctrl+J, чтобы копировать слой «Жертва моды», измените Режим смешивания (Blend Mode ) копии на Умножение (Multiply ) и уменьшите Заливку (Fill ) до 50%.
Шаг 4.
Создайте новый слой под слоем «Жертва моды» и назовите его «Тень модели». При выделенном слое «Тень модели» зажмите клавишу Ctrl и кликните по миниатюре слоя «Жертва моды» для создания выделения. Залейте выделение черным. Нажмите сочетание клавиш Ctrl+D, чтобы удалить выделение. Теперь нам нужно сместить черную тень модели, перейдя в меню Редактирование - Трансформация - Искажение (Edit> Transform>Distort).
Расположите два верхних маркера, как на рисунке ниже.
Примените Размытие по Гауссу (Gaussian Blur ) радиусом 40px, перейдя в меню Фильтр - Размытие - Размытие по Гауссу (Filter>Blur>Gaussian Blur).
Затем примените маску слоя (layer mask ). В качестве основного цвета установите черный цвет, а затем выберите инструмент Градиент (Gradient ) и проведите линейным (linear ) градиентом по маске слоя от головы на тени до модели.
Шаг 5.
Выберите копию фонового слоя и создайте над ним корректирующий слой (adjustment layer)
Цветовой тон/Насыщенность (Hue/Saturation).
В окне отметьте параметр Тонирование (Colorize),
установите Цветовой тон (Hue
)
на 0, а Насыщенность (Saturation
)
на 48 и Яркость (Lightness)
на 10.
Шаг 6. Создайте группу (group ) над корректирующим слоем (adjustment layer ) Цветовой тон/Насыщенность (Hue/Saturation) и назовите его «Правая граница»(right border). В этой группе нарисуйте продолговатый прямоугольник или длинную полоску с помощью инструмента Прямоугольник (Rectangle ), начинающийся с верхней части изображения, заканчивающийся в нижней. При активном новом слой-фигуре, нажмите сочетание клавиш Ctrl+J 5 раз, чтобы дублировать слой. Расположите их на небольшом расстоянии друг от друга. Теперь, начиная с первой фигуры, измените цвет у каждого прямоугольника, подбирая цвета к шортам нашей жертвы моды.
Прим. переводчика: убедитесь, что инструмент Прямоугольник (Rectangle ) установлен у вас в режиме слой-заливка (fill layer ).
Создайте новый слой в группе «Правая граница» (right border) под другими слой-фигурами и назовите его «градиент правой границы» (right_border_gradient). В качестве основного цвета установите черный, выберите инструмент Градиент (Gradient ) и проведите линейный градиент (linear gradient ) от правой границы до обуви модели.
Под слоем «градиент правой границы» (right_border_gradient) создайте пару текстовых слоев, чтобы написать свое сообщение. В данном случае я создал два. Первое гласит: «"Coming Soon!", используется шрифт Blackoak Std, а второе гласит - "to an over-sized city near you", используется шрифт Copperplate Gothic Bold, размер шрифта 30pt. Разверните каждый из них против часовой стрелки, перейдя в меню Редактирование - Трансформация - Развернуть на 90 градусов против часовой стрелки (Edit>Transform>Rotate 90 degrees CCW). Теперь изменим цвет каждого текстового слоя на цвет, подходящий по цветовой гамме к шортам жертвы моды.
Шаг 7. Затем откройте оба векторных набора в Illustrator. Начнем с брызг "splatters", скопируйте и вставьте несколько из них, или их все из Illustrator’а в Photoshop над группой «правая граница»(right_border) в качестве Смарт-объектов (Smart - Object ). Я оставил векторные объекты с их стандартными цветами, поскольку они хорошо сочетаются с нашей работой, но вы свободно можете их изменить, если захотите. Расположите их вокруг головы модели: сзади, справа и слева. Я разместил свои брызги на четырех отдельных слоях, таким образом, я могу контролировать положение каждого из них.
Как только вы скопируете и вставите все векторные брызги, какие захотите, повторите этот же процесс с цветочным векторным набором, расположив их вокруг модели. Снова изменяйте цвет любого векторного объекта по своему усмотрению.
Создайте новую группу над группой «правая граница» (right_border) и назовите ее «векторное искусство» (vector art). Переместите в нее все векторные изображения.
Шаг 8.
Так-так, я знаю, о чем вы думаете… Когда же мы будем делать 3D? И знаете что? Момент настал! Пришло время воплотить ваши задумки в реальность, так что возьмите свои 3D очки и положите их рядом с собой.
Для начала отключите видимость группы «правая граница» (right_border).
Теперь нам необходимо сохранить изображение, как два отдельных.jpeg/.png изображения. Для начала сохраните изображение с помощью сочетания клавиш Ctrl+Shift+S или Файл - Сохранить как (File>Save As).
Сохраните его где-нибудь, где вам потом его будет легко найти, поскольку мы его скоро будем использовать. Назовите его как «жертва_моды_слева» (fashion_victim_left).
Затем выделите слои «жертва моды» и «жертва моды копия», выделив один, а затем при нажатой клавише Shift другой. Нажмите клавишу V, чтобы активировать инструмент Перемещение (Move ). Зажмите клавишу Shift и нажмите клавишу со стрелкой влево дважды. Теперь, как и ранее, нажмите сочетание клавиш Ctrl+Shift+S или перейдите к меню Файл - Сохранить как (File>Save As), чтобы сохранить изображение. На этот раз назовите изображение «жертва_моды_справа» (fashion_victim_right).
Шаг 9. Откройте оба изображения «жертва_моды_слева» (fashion_victim_left) и изображение «жертва_моды_справа» (fashion_victim_right). В документе с изображением «жертва_моды_справа» (fashion_victim_right) разблокируйте слой «Фон» (Background) и дайте ему название «справа» (right). Нажмите сочетание клавиш Ctrl+Shift+S и сохраните его c расширением.psd под именем «жертва_моды_анаглиф» (fashion_victim_anaglyph).
Поместите изображение «жертва_моды_слева» (fashion_victim_left) в документ «жертва_моды_анаглиф» (fashion_victim_anaglyph).psd и дайте этому слою название «слева» (left).
Выделите слой «слева» (left), понизьте его непрозрачность (opacity ) до 50%, и вы заметите, что изображение девушки начнет немного выходить из фокуса. Используя клавиши стрелок, расположите слой «слева» (left) так, чтобы изображение снова стало чистым. Установите непрозрачность (opacity ) слоя «слева» (left) снова на 100%.
Шаг 10. Выключите видимость слоя «слева» (left). Сделайте активным слой «справа»(right) и нажмите сочетание клавиш Ctrl+L или перейдите к меню Изображение - Коррекция - Уровни (Image > Adjustments > Levels) , чтобы скорректировать уровни для слоя.
Выберите Красный (Red ) канал из выпадающего меню и измените значение 225 у внешних (output ) уровней на 0.
Это действие удалит красный из слоя, оставив сине-зеленое изображение.
Шаг 11. Верните видимость слоя «слева» (left). При активном слое «слева» повторите процесс, описанный в шаге 10, но на этот раз для синего (blue ) и зеленого (green ) каналов.
Теперь слой «слева» (left) должен отображаться у вас без зеленого и синего, как вы видите ниже.
Измените режим смешивания слоя «слева»(left) на Осветление (Screen ).
Оденьте свои 3D очки. Нажмите клавишу V, чтобы активировать инструмент Перемещение (Move ) и с помощью клавиш со стрелками перемещайте слой «слева» (left) до тех пор, пока жертва моды не «вылезет» из фона. Моя корректировка была следующей: удерживая клавишу Shift, я нажал правую стрелку на клавиатуре четыре раза и один раз стрелку вниз.
Шаг 12. В зависимости от положения вашего слоя, вам нужно убрать участок на изображении, который не покрывается нашим эффектом, посмотрите на пример ниже.
Прим. переводчика: Когда мы сдвигали влево слой «слева» (left ), он открыл нам видимую часть слоя «справа» (right ), именно эта часть теперь является лишней в нашем изображении. Чтобы все было идеально, его нужно обрезать, что и предлагает автор.
Нажмите клавишу С, чтобы вызвать инструмент Кадрирование (Crop ) для обрезания ненужного участка.
Создайте новую группу и назовите ее «Анаглиф» (anaglyph). Поместите в нее оба слоя «слева» (left) и «справа» (right).
Шаг 13. Вернитесь к основной композиции, отключите видимость для всех групп и слоев, кроме группы «правая граница» (right border). Поместите в этот основной документ группу «Анаглиф» (anaglyph), чтобы она располагалась ниже группы «правая граница» (right border).
Изображение не полностью перекрывает холст. Поскольку это довольно небольшие участки, увеличим его по размеру холста. Нажмите сочетание клавиш Ctrl+T, чтобы вызвать инструмент Трансформация (Transform ) и увеличьте масштаб изображения.
Благодаря 3D среде в фотошоп можно создать много интересных вещей. Используя её настройки и инструменты, вы можете легко и быстро создавать 3D эффекты. Этот урок покажет вам как создать простой и забавный текстовый эффект, используя 3D возможности, и даст вам полезные советы и рекомендации, которые вы сможете применять в своём творчестве.
Материалы для урока:
Используемое ПО Photoshop CS6
Шрифт - PoetsenOne
Создайте новый документ с размером 1150 x 825 пикс., напишите текст размером 200 пт, чёрным цветом, используя шрифт PoetsenOne.
Далее, нам нужно создать несколько направляющих возле верхней и нижней части текста. Для этого откройте линейки в меню Просмотр - Линейки (View -> Rulers) и отметьте эту опцию флажком. Затем кликните мышкой в области шкалы линейки и, не отпуская мышку, тащите направляющую, расположив её как на скриншоте. Отверстия, которые мы создадим внутри текста, будут находиться на этих направляющих.
Дублируйте текстовый слой и сделайте оригинал невидимым, нажав на глазик рядом с миниатюрой слоя. Затем кликните правой кнопкой мыши по копии и выберите опцию Преобразовать в кривые (Convert to Shape).
Установите цвет переднего плана на белый, активируйте инструмент Эллипс (Ellipse Tool), в верхней панели настроек нажмите указанную иконку и в меню задайте Заданный размер (Fixed Size) 7 пикселей, так же поставьте флажок на функции От центра (From Center).
Затем щёлкните и потащите немного по верхней направляющей чтобы создать круг в центре края первой буквы.
Нажмите на панели параметров на значок Объединить фигуры (Combine Shapes) и продолжите добавлять кружки по обеим направляющим на всех буквах. Когда закончите, можете убрать направляющие в меню Просмотр - Удалить направляющие (View -> Clear Guides).
Теперь идём в меню Редактирование - Определить произвольную фигуру (Edit -> Define Custom Shape) и вводим название новой фигуры (например Dots).
Активируйте инструмент Произвольная фигура (Custom Shape Tool), прокрутите список выбора фигур вниз и выберите фигуру, которую вы только что создали. После этого, в верхней панели настроек нажмите функцию Вычесть переднюю фигуру (Subtract Front Shape), а также включите опцию Сохранить размеры (Defined Size) и снимите флажок на функции От центра (From Center). Это создаст точки в своём исходном размере.
Выделите текстовый слой с фигурой, затем щёлкните и перетащите фигуру с точками так, чтобы первая точка фигуры расположилась точно так, как точка-кружок которая у вас уже есть. После того как вы отпустите кнопку мыши, точки будут вычтены из тестовой фигуры.
Установите цвет переднего плана на #b7b7b7, активируйте инструмент Прямоугольник (Rectangle Tool), создайте прямоугольник чуть больше самого документа и поместить его прямо под текст.
Вычтите фигуру с точками из прямоугольника, как вы делали ранее. На нижнем изображении скриншота слои невидимы, чтобы вы могли видеть результат.
Чтобы получить доступ к 3D настройкам вам необходимо открыть две панели - панель 3D и панель Свойства (Properties). 3D панель имеет все компоненты 3D-сцены, и при нажатии на имя любого из них, вы сможете получить доступ к его настройкам в панели свойств. Поэтому будьте уверены, что выбираете имя элемента, который требуется изменить в панели 3D, прежде чем изменить его настройках в панели свойств.
Выделите прямоугольник в панели слоёв и название его сетки в панели 3D, чтобы изменить Глубину экструзии (Extrusion Depth) до 10 в панели Свойства (Properties).
Выберите слой с формой текста в панели слоёв и название его сетки в панели 3D и измените Глубину экструзии (Extrusion Depth) до 5.
Нажмите на значок Капитель (Cap) в верхней части панели свойств и измените Ширину фаски (Bevel Width) до 2.
Выберите слой с точками в панели слоёв и название его сетки в панели 3D, щёлкните значок Капитель (Cap), а затем измените Ширину фаски (Bevel Width) до 20 и выберите Контур (Contour) Перевёрнутый конус (Cone - Inverted).
Дублируйте слой с текстовой фигурой дважды чтобы у вас было три слоя с фигурой текста. Затем выделите все 3D слои которые у вас есть и идите в меню 3D - Слияние 3D слоёв (3D -> Merge 3D Layers). Это действие поместит все 3D сетки в одну сцену. Вы можете переименовать объединённый 3D слой как вам понравится, например Final Scene (Финальная сцена).
Активируйте инструмент Перемещение (Move Tool). В верхней правой части панели настроек вы найдёте бар с 3D режимами (3D Modes). Когда вы выбираете один из них, вы можете двигать им, тем самым внося изменения выбранному элементу в панели 3D.
Итак, выберите вкладку Текущий вид (Current View) в панели 3D, затем нажмите и перетащите в любом пустом месте 3D-сцены, чтобы изменить вид камеры, но не перемещайте ещё какую-либо из сеток.
Выделите все материалы в сетке первой текстовой фигуры в 3D панели, затем в панели свойств кликните по иконке текстур напротив опции Рассеивание (Diffuse) и выберите Удалить текстуру (Remove Texture).
Измените остальные параметры, как показано ниже. Цвет Рассеивания (Diffuse) #d83054, Цвет блика (Specular) #bbb798, Свечение (Illumination) #1d0000 и Освещение (Ambient) #454545. Но вы можете выбрать абсолютно любой другой цвет для рассеивания, который вам нравится.
Выполните те же шаги, чтобы изменить настройки материала для других текстовых фигур. Вам нужно измените значение Рассеивания (Diffuse), если вы хотите разные цвета на каждом текстовом слое. В уроке для второго текста автор применяет цвет #32dae5.
Для третьего слоя цвет #bde640.
Что касается сетки с точками, после удаления текстуры в иконке текстур напротив опции Рассеивание (Diffuse) измените настройки как показано ниже на скриншоте. Цвет Рассеивания (Diffuse) #e8dfca, Цвет блика (Specular) #fff7e5, цвет Свечения (Illumination) и Освещения (Ambient) поставьте #000000.
Теперь выберите сетку прямоугольника в 3D панели и его Материал передней выпуклости (Front Inflation Material). Установите Цвет блика (Specular), цвет Свечения (Illumination) и Освещения (Ambient) на #000000. Затем измените остальные значения, как показано ниже.
Нажмите на иконку текстур напротив опции Рассеивание (Diffuse) и выберите опцию Редактировать текстуру (Edit Texture).
После этого вы можете изменить текстуру. Поместите изображение с текстурой выше слоя с прямоугольником, при необходимости измените размер, затем щёлкните по слою правой кнопкой мыши и выберите Создать обтравочную маску (Create Clipping Mask). Это нужно для того, чтобы текстура применилась только к прямоугольнику и не закрывала отверстия в нём.
Далее идём в меню Изображение - Коррекция - Цветовой тон/Насыщенность (Image -> Adjustments -> Hue/Saturation) и меняем значение Насыщенности (Saturation) на минус 100, а Яркости (Lightness) на 13. Теперь сохраните файл в меню Файл - Сохранить (File -> Save), затем нажмите Сохранить как (Save As), чтобы сохранить этот файл в папке исходного файла с которым вы работаете и дайте ему название Bump. Затем закройте его и вернитесь к документу с которым работаете.
Кликните на иконке папки напротив опции Рельеф (Bump), выберите Загрузить текстуру (Load Texture) и загрузите файл Bump, который сохранили в предыдущем шаге.
Снова кликните на иконке папки напротив опции Рельеф (Bump) и выберите Редактировать текстуру (Edit Texture).
Создайте новый слой выше всех в палитре слоёв, активируйте инструмент Кисть (Brush Tool) и выберите кисточку Брызги 46 пикс (Spatter 46 pixels).
Откройте панель настроек кисти в меню Окно - Кисть (Window -> Brush) и в Динамике формы (Shape Dynamics) поставьте Колебание размера (Size Jitter) на 25% и Колебание угла (Angle Jitter) на 100%.
Кликните правой кнопкой мыши по новому созданному слою и выберите Создать обтравочную маску (Create Clipping Mask), затем сделайте слой с текстурой невидимым. Установите цвет переднего плана на чёрный, установите размер отпечатка кисти на 25 пикселей, затем кликните один раз в середине каждой точки. Настройки динамики формы помогут создать результаты немного разных размеров и углов.
Тёмный цвет кисти создаст на текстуре иллюзию более плоской поверхности в областях, которые кажутся более глубокими по сравнению с исходной поверхностью. Сохраните файл и закройте его, чтобы вернуться к исходному документу.
Выделите название сетки переднего текстового слоя и перейдите в меню 3D - Разделить экструзию (3D -> Split Extrusion). Это действие разделит надпись на отдельные сетки для каждой буквы и позволит перемещать отдельно каждую из них. Настройте камеру так, чтобы текст поместился в пределах документа и под углом который вам нравится.
Выделите все группы с сетками в 3D панели кроме группы с прямоугольником, затем активируйте инструмент Перемещение (Move Tool) и слегка поверните текст так, как будто он падает со стены.
Вы можете изменить вид камеры, чтобы увидеть, как выглядит текст и убедиться в том, что сторона букв, которая выше, прикреплена к отверстию в стене.
Если необходимо, то вы можете изменить глубину экструзии на сетке с эллипсом в панели свойств.
Как только закончите, окончательно установите желаемый вид камеры для последующего рендеринга. Затем в панели свойств во вкладке Вид (View) выберите внизу выпадающего меню Сохранить (Save), чтобы сохранить положение камеры.
Введите имя и нажмите кнопку ОК.
Теперь всякий раз, когда вы меняете вид камеры и захотите вернуться к финальному, вы можете выбрать его в панели 3D или в панели свойств в выпадающем меню во вкладке Вид (View).
А теперь в выпадающем меню выберите положение камеры Спереди (Front).
Увеличьте вид камеры до тех пор, пока вы сможете чётко видеть буквы. Выделите некоторые буквы переднего слоя с текстом, а затем поверните, переместив с исходного положения. С текущим видом камеры сделать это будет несложно.
Для некоторых букв примените незначительные изменения, не каждая должна полностью изменить своё положение. Но конечно же вам решать, как в итоге вы хотите видеть свою работу. Когда закончите преобразования, верните камере тот вид, который ранее сохраняли.
Пришло время поработать с освещением. Кликните в 3D панели по слою Бесконечный свет 1 (Infinite Light), затем в панели Свойства (Properties) выберите цвет #fffdf5, Интенсивность (Intensity) 80% и Тень Сглаживание (Shadow Softness) 30%.
Кликните по иконке Координаты (Coordinates) в панели свойств и введите значения, показанные ниже.
Так же для изменения положения источника света в сцене, вы можете использовать инструмент Перемещение (Move Tool).
Кликните внизу 3D панели на значок Добавить новый свет на сцену (Add new Light to Scene) и выберите Новый точечный свет (New Point Light).
В панели Свойства (Properties) измените цвет на #fff8ea, Интенсивность (Intensity) 100% и Тень Сглаживание (Shadow Softness) 30%.
Свет может показаться очень ярким и вам нужно будет его сдвинуть так, чтобы он коснулся стены. Расположите его выше текста, как вам больше нравится.
Теперь в сетке Прямоугольник выберите слой Материал экструзии (Extrusion Material). Удалите его текстуру в папке напротив Рассеивания (Diffuse), как это делали ранее, и внесите настройки как показано ниже. Цвет Рассеивания (Diffuse) #676767, Цвет блика (Specular) #333333, Свечение (Illumination) #000000 и Освещение (Ambient) #000000. Это затемнит отверстия.
Выберите фоновый слой и залейте его цветом # 362f2d.
Если уже нет ничего, что бы вы хотели изменить, то снова выделите 3D слой Final Scene (Финальная сцена) и идите в меню 3 D - Рендеринг (3D -> Render). Рендеринг может занять некоторое время, но вы в любой момент можете остановить его, кликнув в любом месте внутри сцены, или нажав клавишу Esc.
Когда рендеринг завершен, нажмите на иконку внизу палитры слоёв, чтобы добавить Новый корректирующий слой Карта градиента (Gradient Map).
Настройте градиент, используя цвета # 4b0082 слева и # 00a86b справа. Затем измените режим наложения корректирующего слоя на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 50%. Это улучшит цветопередачу и контрастность изображения.
Подведём итог. Теперь вы знаете, что 3D инструменты в Photoshop CS6 являются отличным способом для достижения удивительных 3D-эффектов. Играя с цветами и положением букв, вы можете достичь различных эффектов.
Часто стереоскопический эффект создается при помощи необычных уловок фотографа, но сегодня мы добьемся его, отредактировав уже готовую фотографию. В первой части статьи рассказано о том, как сделать простую 3D фотографию, с этим справится даже новичок. Вторая часть для более профессиональных пользователей, она подскажет, как сделать картинку более живой.
Часть первая. Для новичков: простой 3D эффект
Существует специальная методика изготовления 3D изображений - анаглиф, которая обычно заключается в том, чтобы снять предмет с разных точек и потом объединить изображения. Но сегодня мы достигнем того же самого эффекта, используя цветовые каналы фотографии. Откройте подходящее фото, приступим.
Использовать можно любое изображение, но вам обязательно нужно перейти в режим RGB Color. Если вы находитесь в режиме Grayscale, Indexed Color или CMYK, то нужно перейти в RGB (Photoshop: Image > Mode > RGB Color).
Примечание: Этот метод подходит для тех редакторов изображений, которые позволяют возиться с цветовыми каналами, например, Photoshop или GIMP. Photoshop Elements и Paint.NET не позволяют применять данный метод редактирования фото.
Для начала сделайте несколько копий фотографии (левый скриншот). Самый простой способ сделать это - кликнуть правой клавишей на «Background Layer» и нажать «Duplicate Layer». Сделав 2 копии, выберите верхнюю и перейдите на панель каналов. Увидеть её можно, нажав Window > Channels. В панели каналов выберите Red channel, как это показано на правом скриншоте.
Нажмите Ctrl+A (и в Photoshop, и в GIMP), чтобы выделить весь холст полностью. Фото должно получиться в серых тонах, если ваше фото выглядит, как на рисунке, значит вы движетесь в верном направлении.
Нажмите V, чтобы выбрать Move Tool (в GIMP нажмите М), и переместите слой красного канала влево, как показано на рисунке.
Передвигая слой канала, убедитесь, что фон черный, как показано слева. Установить цвет фона можно, кликнув на переключатель в панели инструментов.
У GIMP похожие инструменты в Toolbox, почти как в Photoshop.
В Photoshop CS5 сочетание клавиш Ctrl+2 вернет вас в режим RGB. В других версиях просто вернитесь к панели слоёв и выберите новый активный слой. На этом можно остановиться, так как вы уже получили достойное 3D изображение, но можно ещё немного поработать и добавить ему глубины.
Часть вторая. Добавьте глубины вашей фотографии
На этом этапе у вас должно быть несколько копий вашего оригинального фото, вернемся к верхнему слою, в котором мы создали 3D эффект.
Создайте маску, как показано на скриншоте справа, выбрав слой и кликнув на кнопку вверху панели слоёв. В GIMP кликните правой клавишей по слою и выберите «Add Layer Mask» и «White for Full Opacity».
Используйте soft brush для маскировки некоторых областей в верхнем слое. Цель - вернуть часть фона к исходному виду.
Вот фото до и после. В слое с 3D эффектом фон из слоя без 3D эффекта.
На картинке вы можете увидеть, как выглядит маска.
Теперь переходим к самому нижнему слою и отредактируем его. Выберем для этого слоя красный канал.
А теперь совершим похожие действия. Выделим весь холст (Ctrl+A), но применим немного другой эффект к фону.
Клавишами Ctrl+T выберем функцию «Free Transform». И свободно изменим слой красного канала. Можно искажать, увеличивать, вращать, в общем, нужно сделать так, чтобы передний план и фон отличались друг от друга.
В GIMP этот инструмент называется «Scale Tool», горячие клавиши: Shift + T.
Вот и всё! Фотография готова. Надевайте 3D очки и наслаждайтесь результатом! А если у вас их нет, то смотрите видео на Youtube о том, как сделать 3D очки самостоятельно.
Вы наверняка уже видели фотографии с эффектом 3D, когда какой-то фрагмент на фото выглядит объемным. Такой оптический обман смотрится интересно и может сделать из обычной фотографии эксклюзивную и притягательную для глаз. Прямо сейчас и научимся делать 3D-эффект в Фотошопе.
Выбор исходного фото
- 1. Для начала вам нужно смириться с тем, что часть изображения будет обрезана.
- 2. Выбирайте такое фото, чтобы на нем была какая-то интересная деталь или часть композиции, которую можно обыграть. Например: свесившаяся лапа кота, поезд, который едет по направлению к объективу или что-то в этом роде.
Мы возьмем фото яблок на ветке и обрежем его таким образом, чтобы образовалась белая рамка, а за пределами рамки будет висеть яблоко:
Шаг 1: обрезаем изображение
Шаг 2: делаем тень под объектом
Вариант 1: тень только под объектом. Подходит преимущественно для темных фото.
Рамку можно оставить белой, а можно сделать интереснее. Например, наложить градиент, цвет или узор. Для этого перейдите на слой с белым фоном и внизу окошка нажмите на черно-белый круг и выберите вид корректирующего слоя, который вам нужен.
Вариант 2:
сделать тень вокруг всей картинки, не копируя объект отдельно. То есть достаточно применить «Тень» в стилях слоя изображения, с которого мы удалили часть фона. Эти фото обработаны именно так:
