Фотошоп изогнуть как лист бумаги

Обновлено: 07.07.2024

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

Финальное изображение




Возьмите Pollygonal Lasso Tool (Прямолинейное Лассо) и выделите правый нижний угол страницы, как показано на рисунке ниже.


Нажмите Ctrl+J, чтобы создать слой из выделенной области и назовите его ‘Угол’. Чтобы лучше просматривалось, залейте этот слой любым цветом.



С еще активным выделением вернитесь к слою ‘Угол’. Перейдите в меню Edit>Transform>Warp (Редактирование>Трансформирование>Деформация) и исказите угол, чтобы создать эффект загиба страницы.


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


Теперь переместите указанные контрольные линии как на рисунке ниже.


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


Результат деформации должен смотреться, как показано ниже.



Добавим стили для обоих слоев. Давайте начнем со слоя ‘Угол’, добавьте Gradient Overlay (Наложение градиента) и Drop Shadow (Тень), чтобы создать 3D эффект.




Преобразованный угол должен выглядеть так:



С помощью стилей (Gradient Overlay (Наложение градиента), Drop Shadow (Тень)) вы можете изменить свет и тени в соответствии с вашим цветом бумаги, цветом фона, скручиванием угла бумаги и т.д.; чтобы они выглядели более реально, вы может добавить мягкий эффект тени. Скопируйте и слейте два слоя. Назовите получившийся слой ‘Тень’ и добавьте стиль слоя Drop Shadow (Тень). Переместите этот слой назад.


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


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

Сложность урока: Легкий


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

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

Шаг 1

Откройте Photoshop и создайте новый файл любого размера. В этом случае я использую размер 1600 x 1070 пикселей.


Шаг 2

Идем в меню Layer – New Fill Layer – Solid Color (Слои – Новый слой-заливка – Цвет). Назовите слой «Background Paper» («Фон») и нажмите ОК.


Шаг 3


Шаг 4

Инструментом Lasso Tool (Лассо) создайте нужную форму для рваной бумаги.


Шаг 5

При активном выделении перейдите в меню Layer – New Fill Layer – Solid Color (Слои – Новый слой-заливка – Цвет). Назовите слой «Paper Shadow» («Тень») и нажмите ОК.


Шаг 6


Шаг 7

Дублируйте слой (Ctrl+J) и назовите копию «Torn Color» («Цвет»).


Шаг 8


Шаг 9

Снова дублируйте слой (Ctrl+J) и назовите копию «Torn Paper» («Порванная бумага»).


Шаг 10


Шаг 11

Активируйте маску слоя «Paper Shadow» («Тень») и нажмите Ctrl+T.


Шаг 12

Наверху в панели настроек установите ширину 105% и высоту 101%. Убедитесь, что Reference Point Location (Положение центра преобразования) наверху по-середине, после этого подтвердите преобразование.

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


Шаг 13

Идите в меню Filter – Blur – Gaussian Blur (Фильтр – Размытие – Размытие по Гауссу). Установите радиус размытия на 2 и нажмите ОК.


Шаг 14

Установите режим наложения слоя «Paper Shadow» («Тень») на Multiply (Умножение) и снизьте Opacity (Непрозрачность) до 10%.


Шаг 15

Активируйте маску слоя «Torn Color» («Цвет») и идите в меню Filter – Filter Gallery (Фильтр – Галерея фильтров). А разделе Artistic (Имитация) выберите эффект Cutout (Аппликация). Установите следующие значения и нажмите ОК.


Шаг 16

Активируйте маску слоя «Torn Paper» («Порванная бумага») и нажмите Ctrl+F, чтобы снова применить тот же эффект.


Шаг 17

При активной маске слоя, нажмите Ctrl+T и в верхней панели настроек установите ширину 101% и высоту 99%. Убедитесь, что Reference Point Location (Положение центра преобразования) наверху слева, после этого подтвердите преобразование.

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


Шаг 18

Теперь выберите слой «Torn Color» («Цвет») и идите в меню Layer – Layer Style – Inner Shadow (Слои – Стиль слоя – Внутренняя тень). Установите следующие значения и нажмите ОК.


Шаг 19

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


Шаг 20

Теперь выберите слой «Torn Paper» («Порванная бумага») и поместите над ним другое изображение.


Шаг 21

Чтобы завершить создание эффекта порванной бумаги, идите в меню Layer – Create Clipping Mask (Слои – Создать обтравочную маску).

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

Обновлено в Photoshop 22.5 (выпуск за август 2021 г.)

Использование деформации в Photoshop

Использование деформации

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

Сделав выбор, выполните одно из следующих действий.

Выберите Редактирование > Трансформирование > Деформация или

Нажмите клавиши Control + T (Win) / Command + T (Mac), затем нажмите кнопку Переключение между свободной трансформацией и режимами деформации на панели параметров.

Щелкните значок шестеренки на панели «Параметры», чтобы просмотреть дополнительные параметры визуальных направляющих . В Photoshop 22.4.1 (выпуск за май 2021) визуальные направляющие стали еще лучше благодаря дополнительным параметрам направляющих.

Варианты отображения направляющей деформации преобразования

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

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

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

Для трансформирования объекта с использованием набора настроек деформации выберите стиль деформации во всплывающем меню Деформация на панели выбора параметров.

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

  • Выберите один из размеров сетки по умолчанию: 3 x 3, 4 x 4, 5 x 5.
  • Выберите Заказная , а затем укажите число столбцов и строк в диалоговом окне Пользовательский размер сетки .

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

  1. Выполните одно из следующих действий.
    1. На панели параметров нажмите любую кнопку в группе Разделить .
    2. Выберите Редактирование > Трансформирование > Разделить деформацию по горизонтали , Разделить деформацию по вертикали или Разделить деформацию крестообразно .

    Дополнительные сведения о параметрах разделения деформации см. в разделе Разделение деформации.

    • Для манипуляций с фигурой можно перетаскивать контрольные точки, сегмент ограничительной рамки или сетки, а также область внутри сетки. Кривая настраивается с помощью рукоятей опорных точек. Это аналогично настройке рукоятей искривленного сегмента в векторной графике.
    • Щелкните линию сетки, чтобы активировать контрольные точки для редактирования деформации. Щелкните опорную точку (на пересечении линий сетки), чтобы редактировать окружающие ее контрольные точки. Перетащите контрольные точки для деформации изображения.
    • Чтобы выбрать несколько точек, щелкайте опорные точки или перетаскивайте над ними указатель, удерживая клавишу Shift. При выделении двух и более точек вокруг них появляется прямоугольная рамка.
    • Чтобы отменить выделение нескольких точек, щелкайте активные опорные точки или перетаскивайте над ними указатель, удерживая клавишу Shift. Размер прямоугольной рамки вокруг выделенных точек автоматически меняется при выделении или отмены выделения точек.
    • Чтобы удалить выделенную линию сетки (вдоль нее видны контрольные точки), нажмите клавишу Delete или выберите Редактирование > Трансформирование > Удалить разделения деформации .
    • Чтобы удалить горизонтальную и вертикальную линии сетки, проходящие через опорную точку, щелкните эту точку, затем нажмите клавишу Delete или выберите Редактирование > Трансформирование > Удалить разделения деформации .
    • Чтобы изменить ориентацию стиля деформации, выбранного в меню «Деформация», нажмите кнопку «Изменить ориентацию деформации» на панели параметров.
    • Чтобы сместить центр преобразования, щелкните квадрат на координатном манипуляторе контрольной точки на панели параметров.
    • Чтобы задать интенсивность искажения в числовом виде, введите на панели выбора параметров значения изгиба (поле «Изгиб») и искажений по горизонтали («Х») и вертикали («Y»). Если в выпадающем меню «Стиль деформации» был выбран параметр «Заказной» или «Нет», то числовые значения задать нельзя.

    Работа с формой деформации в Photoshop

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

    Нажмите клавишу «Ввод» (Windows), или Return (Mac OS), или кнопку «Выполнить» на панели выбора параметров.

    Чтобы отменить трансформацию, нажмите клавишу Esc или нажмите кнопку «Отмена» на панели параметров.

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

    В выпуске Photoshop 22.5 за август 2021 теперь можно использовать клавишу-модификатор Control (Win) / Command (Mac) для быстрого переключения вариантов разделения деформации без помощи строки меню.

    • Удерживая клавишу «Control» (Win) / «Command» (Mac), щелкните в любом месте сетки деформации, чтобы разделить ее крестообразно в этом месте.
    • Удерживая клавишу Control (Win) / Command (Mac), переместите указатель к краю существующей горизонтальной линии сетки. Щелкните, чтобы разделить деформацию по вертикали в этом месте.
    • Аналогично, удерживая клавишу Control (Win) / Command (Mac), переместите указатель к краю существующей вертикальной линии сетки. Щелкните, чтобы разделить деформацию по горизонтали в этом месте.

    Преобразование деформации с разными опорными точками

    Можно перемещать маркеры (также называются маркерами Безье ) управления независимо друг от друга. Эти маркеры прикрепляются к опорным точкам при применении команды Разделение деформации для трансформирования с использованием сочетания клавиш.

    В настоящее время доступно два варианта перемещения с помощью маркеров Безье:

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

    Удерживая клавишу «Alt» (Win) / «Option» (Mac), щелкните точку, чтобы переключить состояние элемента управления Безье (независимое движение или согласованное). Также можно щелкнуть опорную точку, удерживая клавишу «Ctrl» (или щелкните правой кнопкой мыши), и выберите «Преобразовать опорную точку деформации» в контекстном меню.

    • Угловые опорные точки: по умолчанию для угловых опорных точек задано независимое перемещение.
    • Краевые/боковые опорные точки: по умолчанию для опорных точек по краям установлено согласованное перемещение горизонтальной / вертикальной пары.
    • Внутренние опорные точки: по умолчанию для опорных точек по краям установлено согласованное перемещение горизонтальной / вертикальной пары.

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

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

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

    Узнайте, как в Photoshop работать с инструментом «Прямоугольник».

    Инструмент «Прямоугольник» позволяет рисовать прямоугольники и прямоугольники со скругленными углами на холсте.

    Выберите инструмент Прямоугольник


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

    Настройте свойства фигуры инструмента «Прямоугольник»

    Инструмент «Прямоугольник»

    Настройка свойств прямоугольника

    На панели параметров инструментов группы «Фигура» можно задать следующие настройки:


    • «Режим»: задайте режим для инструмента «Прямоугольник» — «Фигура», «Контур» и «Пиксели».
    • «Заливка»: выберите цвет заливки прямоугольной фигуры.
    • «Обводка»: выберите цвет, ширину и тип обводки фигуры.
    • «Ширина обводки»: вручную укажите ширину обводки прямоугольника.
    • Stroke type (Тип обводки): выберите тип обводки для построения прямоугольника.
    • Shape W&H (Ш и В фигуры): вручную задайте ширину и высоту фигуры.
    • «Операции с контуром»: используйте операции с контуром для настройки взаимодействия нарисованных прямоугольников друг с другом.
    • «Выравнивание контура»: используйте этот параметр для выравнивания и распределения прямоугольников.
    • «Упорядочение контура»: используйте этот параметр для настройки порядка расположения создаваемых прямоугольников.
    • Дополнительные параметры фигур и контуров: щелкните значок шестеренки () для доступа к дополнительным параметрам прямоугольных фигур и контуров, чтобы задать такие атрибуты, как ширина и цвет отображаемого на экране контура, и параметры соблюдения пропорций при построении прямоугольника.
    • Radius of rounded corners (Радиус скругления углов): вручную задайте радиус скругления углов прямоугольника.

    Рисование прямоугольника

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

    Создание прямоугольника

    В выпуске за март 2021 г. Photoshop 22.3 инструмент «Прямоугольник со скругленными углами» удален. Однако вы можете использовать улучшенный инструмент «Прямоугольник», чтобы рисовать прямоугольники со скругленными углами и задавать радиусы углов в соответствующем поле.

    Редактирование свойств прямоугольной фигуры

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

    Рисование прямоугольника

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

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

    На панели Параметры обводки выполните любое из следующих действий.

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

    Срезанные концы Создает квадратные концы, которые заканчиваются в конечных точках.

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

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

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

    • Щелкните значок Угол для отображения обводки в угловых точках.

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

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

    Скошенные стыки Создает скругленные углы, которые заканчиваются в конечных точках.

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

    Читайте также: