Как сделать пазл в фотошопе: Добавляем ПАЗЛЫ в Фотошопе / Creativo.one
Создаём эффект пазлов в Photoshop
Автор Дмитрий Евсеенков На чтение 5 мин Просмотров 2.6к. Обновлено
В этом материале, как понятно из названия, мы рассмотрим, как любую фотографию можно превратить в головоломку из пазлов, причём, для усиления эффекта, мы сделаем так, что некоторые пазлы, составляющие фотографию, будут находится отдельно от общего изображения.
Как мы увидим далее, большая часть работы по созданию эффекта пазлов уже сделана для нас благодаря штатному фильтру Photoshop «Текстуризатор» (Texturizer) и бесплатным текстурам, которые Вы можете загрузить самостоятельно, подробнее о загрузке добавочных текстур и фильтров рассказывается здесь.
Но мы сделаем несколько больше, чем просто добавление фильтра, правда, для этого придётся немного поработать инструментом «Перо» (Pen Tool) для вырезания отдельных фрагментов мозаики.
Для работы в этой статье я буду использовать фотографию автомобиля mazda CX5:
И вот что я получу в итоге:
Итак, давайте приступим.
Открываем фотографию в Photoshop, и, первое, что нам нужно сделать, это создать копию фонового слоя этой фотографии, для того, чтобы всегда иметь под рукой незатронутый изменениями оригинал. Для этого надо всего-лишь нажать комбинацию клавиш Ctrl+J. Если теперь мы посмотрим в панель слоёв, то увидим в ней два имеющихся слоя, фон и копию:
Хорошим тоном при работе в Photoshop считается придание слоям названий с описательными именами. Имена слоёв, дающие информацию о слое, могут быть не столь важным, когда вы работаете не более, чем с несколькими слоями, но не редко бывают ситуации, когда в одном документе Photoshop используются 50, 100 и более слоёв, и если все ваши слои имеют названия типа «Layer 1», «Слой 56» или «Слой 83 Копия 4», то вы будете испытывать некоторые затруднения.
В моём случае, я переименую «Слой 1» в «Puzzle».
Далее нам необходимо добавить новый пустой слой ниже «Puzzle». В настоящее время в панели слоёв у нас выбран «Puzzle» (подсвечен синим цветом). Как правило, всякий раз, когда мы добавляем новый слой, Photoshop автоматически ставит его выше слоя, активного на данный момент. Для добавления нового слоя ниже активного, зажмите клавишу Ctrl и кликните по кнопке добавления нового слоя:
Зальём новый слой чёрным. Для этого сперва нажмём клавишу клавиатуры «D», чтобы цвета на палитре цветов стали дефолтными (чёрный — основной, белый — фоновый), а затем нажмём комбинацию клавиш Alt+Delete, чтобы залить слой основным. т.е. чёрным цветом.
Заодно переименую его в «Background color», т.к. этот слой будет отображать цвет фона. В окне рабочего документа никаких изменений не отобразится. т.к. видимость слоя «Background color» перекрывается верхним слоем с фотографией, но в панели слоёв сразу видны изменения:
Теперь необходимо выбрать слой, к которому мы будем добавлять текстуру пазлов, для этого кликаем по слою «Puzzle»:
Сейчас нам нужно добавить фильтр с пазлами из галереи фильтров.
По умолчанию, в Photoshop CS6 в галереи фильтров нет текстуры пазлов, но это не проблема, данную текстуру несложно скачать и добавить в галерею, как это сделать, подробно рассказывается здесь.
Для картинки размером 900 на 600 пикселей я применил следующие настройки:
Текстура (Texture) — Puzzle
Масштаб (Scaling) — 100%
Рельеф (Relief) — 9
Свет (Light) — Вверху справа (Top Right)
Параметры показаны на картинке:
</a
Для применения действия фильтра нажмите ОК. Вот как теперь выглядит мой рабочий документ:
Основной эффект головоломки завершен, но давайте пойдём дальше и удалим некоторые из элементов, как будто пазл еще находится в стадии разработки. Для этого нам понадобится инструмент «Перо» (Pen Tool):
С помощью «Пера» мы сделаем выделение вокруг отдельных частей головоломки, т.к. именно «Пером» легче всего построить криволинейные контуры, гораздо удобнее, чем например, инструментами группы «Лассо» (Lasso Tool или Polygonal Lasso Tool).
Выберите какой-нибудь отдельный пазл и постройте вокруг него такой контур, используйте «Перо» в режиме «Контур» (Paths):
После того, как вы закончили создавать контур, преобразуйте его в выделенную область, нажав Ctrl + Enter:
Теперь вырежем выделение на новый слой (заметьте, не скопируем, а вырежем), для этого нажимаем комбинацию Ctrl+Shift+J. Панель слоёв теперь выглядит так, обратите внимание, на слое «Pussle» появился белый участок, это вырезанный сегмент:
С помощью инструмента «Свободная трансформация» (Free Transform) поверните и измените положение вырезанного пазла:
Для того, чтобы отдельный пазл смотрелся несколько выше основного холста, придадим ему объём с помощью стиля слоя «Тень».
Выделим ещё один произвольный сегмент и просто удалим его, нажав клавишу Delete:
Уберём выделение, нажав Ctrl+D.
Таким образом можно удалить или переместить несколько пазлов головоломки.
И для завершения эффекта, сделаем границу головоломки/ очерченную краями пазлов.
Для этого с помощью «Пера» очертите всю картинку, как показано на рисунке. Границы контура плохо видны на скриншоте, поэтому я обвёл контур оранжевой линией:
Преобразуйте контур в выделение (Ctrl+Enter), инвертируйте выделенную область (Ctrl+Shift+I) и удалите лишнее (Delete). В результате у Вас получится примерно такое изображение:
Теперь осталось только изменить фон по вкусу. Я применил к слою «Background color» стандартный стиль слоя «Наложение узора» (Pattern Overlay) с узором из стартового комплекта Photoshop и масштабом 50%.
Ну и для придания объема придадим слою «Puzzle» стиль слоя «Тень».
Кроме того, мне пришлось подчистить артефакты на крах слоя «Puzzle» с помощью
маски слоя.
Вот что у меня получилось в результате:
Для лучшего понимания материала, желающие могут скачать готовый файл PSD со всеми слоями, настройками и контурами:
Скачать с Depositfiles.comСоздаем пазл из фото в Фотошопе
В этом уроке мы сделаем пазл из фото с помощью Фотошопа.
Для этого будем использовать чудную фотку малыша.
Шаг 1. Открываем фото в Фотошопе (Ctrl+N) и дублируем слой с фотографией на Панели Слоев, нажав Ctrl+J (это один из возможных вариантов получения копии слоя). Появившийся слой автоматически будет называться «Layer 1», переименовываем его для удобства в «Puzzle».
Шаг 2. Создаем новый слой, для этого нажимаем на соответсвующую кнопочку на Панели Инструментов (см. рисунок), удерживая Ctrl (чтобы слой появился под тем на которым сейчас мы находимся).
Шаг 3. Заливаем новый слой черным цветом. Для этого переходим на этот слой и идем Edit>Fill (Редактировать>Залить). В появившемся окне выставялем значения, как на рисунке внизу (цвет заливки делаем черным). После чего переименовываем его в «Background color».
Шаг 4. Переходим на слой «Puzzle». И идем Filter>Texture>Texturizer, а в появившемся окне выбираем пункт Load Texture (Загрузить текстуру), кликнув по стрелочке.
Далее идем в папку с соответствующей текстурой (обычно в Windows она находится по такому пути: для начала C:\Program files\Adobe\Photoshop CS3 (для этой версии фотошопа), далее находим папку Presets, а в ней Textures, где уже и кликаем по файлу Puzzle. psd). Параметры для фильтра установите, как на рисунке внизу.
Шаг 5. Выбираем инструмент Pen Tool (Перо (P)) в режиме «Paths»(Контуры) и обводим подходящий пазл. После этого нажимаем Ctrl+Enter, чтобы перевести контур в выделение.
Шаг 6. Теперь идем Layer>New>Layer via Cut (Слой>Новый>Посредством вырезания). В результате чего получаем новый слой, который для удобства переимновываем в «First puzzle piece».
Шаг 7. Находясь на слое с пазлом, нажимаем Ctrl+T, чтобы вызвать инструмент Free Transform (Свободная Трансформация) и перемещаем этот пазл, как нам того захочется, по окончании нажимаем Enter.
Шаг 8. Для красоты добавляем тень. Идем в соответствующий Стиль Слоя (см. рисунок) и задаем параметры примерно, как на рисунке внизу.
Шаг 9. Добавляем еще сдвинутых или удаленных пазлов схожим образом.
Шаг 10. Пришло время обрезать лишнее. Выделяем Пером по периметру подходящую форму и, нажав Ctrl+Enter, получаем выделение. Инвертируем его (Select>Inverse) и удаляем лишнее (Delete). После этого снимаем выделение (Ctrl+D).
Шаг 11. После этого снимаем выделение (Ctrl+D). Переходим на слой «Background color» и заливаем его белым (или не заливаем, как хотите): Edit>Fill.
Шаг 12. Осталось только добавить общую тень, но это уже по желанию. Делаем точно также, как и для отдельного пазла. Наш пазл готов!
Эффект головоломки Photoshop
Автор сценария Стив Паттерсон.
В этом уроке Photoshop Effects
Как мы увидим, большая часть работы над нашим эффектом головоломки уже проделана за нас благодаря фильтру Texturizer Photoshop и бесплатной текстуре, которая поставляется с Photoshop, хотя нам нужно будет загрузить текстуру самостоятельно, что мы и сделали. научусь делать. Однако мы собираемся пойти немного дальше и посмотреть, как сделать так, чтобы некоторые части все еще отсутствовали, придавая нашей головоломке вид «незавершенного производства».
Я должен сразу отметить, что хотя этот фотоэффект очень легко сделать, некоторые части этого урока включают использование Pen Tool , и поскольку для объяснения того, как работает Pen Tool в Photoshop, потребуется отдельный учебник, я предполагаю, что вы уже знакомы с тем, как его использовать. Хорошей новостью является то, что инструмент «Перо» , а , имеет собственное отдельное руководство, поэтому, если вам нужна помощь с инструментом «Перо», обязательно ознакомьтесь с нашим полным руководством «Выделение с помощью инструмента «Перо» », которое вы можете найти в нашем Раздел Основы Photoshop .
Вот фотография, которую я буду использовать для этого урока, маленький парень, который явно очень взволнован тем, что его фотография превратилась в пазл:
Оригинальное фото.
А вот как это будет выглядеть с примененным эффектом головоломки Photoshop:
То же изображение после применения эффекта головоломки Photoshop.
Этот урок из нашей серии фотоэффектов. Давайте начнем!
Шаг 1: Дублируйте фоновый слой
С нашей фотографией, недавно открытой в Photoshop, первое, что нам нужно сделать, это сделать копию нашего фонового слоя, который содержит нашу фотографию и в настоящее время является единственным слоем, который у нас есть. Создание копии этого слоя позволит нам делать с нашим изображением все, что мы захотим, не нанося ему вреда, поскольку у нас всегда будет оригинал на фоновом слое, к которому можно вернуться при необходимости. Самый простой способ сделать копию слоя — использовать сочетание клавиш Ctrl+J (Win)/Command+J (Mac). Если мы посмотрим на нашу палитру слоев после нажатия сочетания клавиш, мы увидим, что теперь у нас есть два слоя. Исходный фоновый слой находится внизу, а копия слоя, который Photoshop автоматически назвал «Слой 1», находится над ним:
Палитра «Слои», показывающая недавно созданный «Слой 1», расположенный над фоновым слоем.
Шаг 2: переименуйте новый слой в «Головоломка»
Отличная привычка при работе в Photoshop — давать слоям более описательные имена.
Это может показаться не таким уж важным, когда вы работаете только с несколькими слоями, но нередко вы внезапно обнаруживаете, что работаете с 50 слоями, 100 слоями или более, и если все ваши слои имеют такие имена, как «Слой 1», « Layer 56» и «Layer 83 Copy 4», вы будете корить себя за то, что не потратили несколько секунд, чтобы дать своим слоям более полезные и описательные имена. В этом случае мы будем использовать «Слой 1» в качестве основного эффекта головоломки, поэтому я собираюсь дважды щелкнуть непосредственно по имени слоя и переименовать его в «Головоломка»:
Измените название «Слой 1» на «Головоломка».
Нажмите Enter (Win)/Return (Mac), когда вы закончите, чтобы принять изменение имени.
Шаг 3: добавьте новый пустой слой ниже слоя «Головоломка»
Далее нам нужно добавить новый пустой слой под слоем «Головоломка», чтобы он появился между слоями «Головоломка» и фоновым слоем. В настоящее время у нас есть слой «Головоломка», выбранный в палитре слоев.
Мы знаем, что он выбран, потому что он выделен синим цветом. Обычно, всякий раз, когда мы добавляем новый слой, Photoshop автоматически размещает его на 9-м месте.0011 выше
Удерживая нажатой клавишу «Ctrl» (Win) / «Command» (Mac), щелкните значок «Новый слой» в палитре «Слои».
Добавляя к шагу клавишу Ctrl/Command, мы говорим Photoshop добавить новый слой и поместить его ниже текущего выбранного слоя. Теперь мы видим в палитре «Слои», что у нас есть новый пустой слой, снова названный «Слой 1», расположенный между слоями «Головоломка» и «Фон»:
.Между слоями «Головоломка» и «Фон» появляется новый пустой слой.
Шаг 4: Залейте новый слой черным цветом
Этот слой будет использоваться в качестве фона для нашего эффекта, и я собираюсь использовать черный цвет в качестве цвета фона, по крайней мере, на данный момент, что означает, что мне нужно заполнить этот слой черным цветом (позже мы посмотрите, как изменить цвет фона, если это необходимо).
В Photoshop есть команда, созданная специально для такой задачи, и она просто называется командой «Заливка». Вы найдете его, зайдя в меню «Правка» в верхней части экрана и выбрав «Заливка: 9».0003
Выберите Правка > Заполнить.
Откроется диалоговое окно «Заливка». Установите для параметра «Содержание» в верхней части диалогового окна значение «Черный», затем нажмите «ОК», чтобы выйти из диалогового окна:
Установите для параметра «Содержимое» значение «Черный».
В нашем окне документа ничего не произойдет, поскольку фотография на слое «Головоломка» в данный момент блокирует все остальное, но если мы посмотрим на миниатюру предварительного просмотра слоя для «Слой 1» в палитре слоев, что дает нам небольшой предварительный просмотр того, что находится на слое, мы можем видеть, что «Слой 1» на самом деле был заполнен черным цветом:
Миниатюра предварительного просмотра слоя «Слой 1» теперь отображается черным цветом.
В соответствии с тем, что я только что сказал о переименовании слоев, я собираюсь дважды щелкнуть имя этого слоя («Слой 1») и переименовать его в «Цвет фона»:
Переименуйте новый слой в «Цвет фона».
Шаг 5: снова выберите слой «Головоломка»
Далее мы собираемся создавать кусочки головоломки, но нам нужно выбрать правильный слой, а в данный момент мы этого не делаем. У нас выбран слой «Цвет фона», но нам нужен слой «Головоломка», поэтому щелкните слой «Головоломка» в палитре слоев, чтобы выбрать его:
Нажмите на слой «Головоломка» в палитре слоев, чтобы выбрать его.
Теперь мы готовы превратить фотографию в пазл!
Шаг 6. Откройте диалоговое окно фильтра Photoshop «Texturizer»
Как я упоминал в начале этого урока, большая часть работы по фактическому созданию кусочков головоломки уже сделана за нас благодаря одной из текстур, которые устанавливаются бесплатно вместе с Photoshop. К сожалению, даже несмотря на то, что текстура находится на вашем жестком диске и готова к использованию, на самом деле она не загружается в Photoshop, по крайней мере, автоматически. Нам нужно будет загрузить его самостоятельно, но прежде чем мы сможем это сделать, нам нужно вызвать фильтр Photoshop Texturizer, поэтому перейдите в меню «Фильтр» в верхней части экрана, выберите «Текстура», а затем выберите Texturizer:
Выберите «Фильтр» > «Текстура» > «Текстуризатор».
Шаг 7: Загрузите текстуру «Головоломка»
Откроется большое диалоговое окно фильтра Texturizer с окном предварительного просмотра слева и параметрами фильтра справа. Нам нужно загрузить текстуру «Головоломка», которую Photoshop установил на ваш жесткий диск, поэтому щелкните маленькую стрелку справа от параметра «Выбор текстуры» в правой части диалогового окна, которое вызывает меню только с одним параметром. , Загрузить текстуру. Нажмите на него, чтобы выбрать его:
Нажмите на маленькую стрелку справа от параметра выбора текстуры, затем выберите «Загрузить текстуру».
Это открывает диалоговое окно «Загрузить текстуру», позволяя нам перейти к нашей текстуре. Текстура «Головоломка», которую мы ищем, находится в каталоге Photoshop на вашем жестком диске, где бы вы ни установили Photoshop. На ПК (Windows) место установки по умолчанию — диск C:, поэтому сначала перейдите на диск C:, а затем откройте папку Program Files. Внутри папки Program Files вы найдете папку Adobe, а внутри папки Adobe вы найдете папку Photoshop.
Фактическое имя папки Photoshop будет зависеть от того, какую версию Photoshop вы используете. Так, например, если вы используете Photoshop CS3, как я здесь, и вы установили Photoshop в папку по умолчанию, ваша папка Photoshop будет находиться в C:\Program files\Adobe\Photoshop CS3.
На Mac все немного проще. Вы найдете папку Photoshop в папке «Приложения» на жестком диске. Опять же, фактическое имя вашей папки Photoshop будет зависеть от того, какую версию Photoshop вы используете.
Найдя папку Photoshop, дважды щелкните ее, чтобы открыть. Внутри папки вы найдете папку Presets. Дважды щелкните по нему, чтобы открыть, и теперь найдите папку «Текстуры». Дважды щелкните по нему, чтобы открыть, и вы увидите все текстуры, которые Photoshop установил для нас. Их довольно много на выбор, но для эффекта головоломки нам нужна текстура головоломки. Нажмите на нее, чтобы выбрать, затем нажмите кнопку «Загрузить», чтобы загрузить текстуру:
Перейдите к папке «Текстура» внутри каталога Photoshop, затем выберите текстуру «Головоломка».
Шаг 8. Настройте параметры текстуры
После загрузки текстуры головоломки вы должны увидеть, что для параметра «Текстура» в диалоговом окне «Текстуризатор» теперь установлено значение «Головоломка». Если по какой-то причине это не так, выберите текстуру Puzzle из списка. Затем, используя в качестве руководства окно предварительного просмотра в левой части диалогового окна, отрегулируйте параметры текстуры. Используемые вами настройки будут во многом зависеть от вашего изображения и от того, насколько большими вы хотите видеть кусочки головоломки. В моем случае я хочу, чтобы кусочки головоломки казались как можно большими, поэтому я собираюсь увеличить параметр «Масштабирование» до 200%. Параметр «Рельеф» под ним определяет, насколько сильным будет внешний вид кусочков головоломки на изображении. Я собираюсь установить свой на 6. Опять же, настройки, которые вы используете, могут отличаться. Наконец, установите для параметра «Свет», который определяет источник света для частей головоломки, значение «Верхний правый»: 9.
0003
Настройте параметры текстуры головоломки, используя область предварительного просмотра в левой части диалогового окна в качестве ориентира.
Когда закончите, нажмите OK, чтобы выйти из диалогового окна Texturizer и применить текстуру к изображению. Вот мое фото с нанесенной текстурой пазла:
Теперь фотография разделена на кусочки головоломки.
Базовый эффект головоломки завершен, но давайте пойдем немного дальше и удалим некоторые части, как будто головоломка все еще находится в стадии разработки. Мы сделаем это дальше!
Шаг 9. Выберите инструмент «Перо»
Это часть урока, в которой вам нужно знать, как использовать Pen Tool в Photoshop. Причина, по которой мы будем использовать Pen Tool, заключается в том, что нам нужно иметь возможность рисовать выделения вокруг отдельных частей головоломки, а части имеют много кривых. Вы можете попробовать выделить части с помощью инструмента Лассо или Многоугольного лассо, но вы, скорее всего, обнаружите, что ваши результаты выглядят неаккуратно и неровно, в то время как инструмент Перо был разработан специально для рисования кривых и дает вам много возможностей.
лучше выглядящие результаты.
Если вы уже освоились с инструментом «Перо», оставшаяся часть этого урока будет легкой, поскольку перо действительно очень простой инструмент для использования, как только вы почувствуете, как оно работает. Если такие термины, как «пути», «точки привязки» и «дескрипторы направления», являются для вас новыми или вы не совсем уверены, что понимаете их, обязательно ознакомьтесь с нашим полным учебным пособием «Выделение с помощью инструмента «Перо» » в нашем . Раздел «Основы Photoshop », где вы найдете все, что вам нужно знать.
Во-первых, прежде чем мы сможем использовать Pen Tool, нам нужно выбрать его, поэтому либо возьмите его из палитры инструментов, либо просто нажмите букву P на клавиатуре:
Выберите инструмент «Перо».
Шаг 10. Выберите параметр «Пути» на панели параметров
Выбрав инструмент «Перо», посмотрите на панель параметров в верхней части экрана и убедитесь, что выбран параметр «Пути», так как нам нужно нарисовать контур с помощью пера, а не векторную форму или фигуру на основе пикселей:
Выберите параметр «Пути» на панели параметров.
Шаг 11. Нарисуйте путь вокруг одной из частей пазла
Используйте Pen Tool, чтобы нарисовать путь вокруг одной из частей головоломки. Мы собираемся вырезать этот кусок из головоломки и сделать так, чтобы он парил прямо над головоломкой, готовый к установке на место. На самом деле не имеет значения, какой кусок вы выберете. Я выберу кусок над правым глазом мальчика (его правым, нашим левым). Обойдите фигуру, добавляя опорные точки и перетаскивая маркеры направления, пока не нарисуете контур вокруг всей фигуры. При необходимости вы можете увеличить фрагмент, нажав Ctrl+пробел (Win)/Command+пробел (Mac) для временного доступа к инструменту масштабирования, а затем несколько раз щелкнув фрагмент, чтобы увеличить его. Путь может быть немного трудно увидеть на скриншоте, поэтому я обвел часть, которую обвел:
Теперь вокруг одной из частей головоломки нарисована дорожка.
Шаг 12: преобразование пути в выделение
Когда вы закончите рисовать путь вокруг первой части головоломки, нажмите Ctrl+Enter (Win)/Command+Return (Mac) на клавиатуре, чтобы преобразовать путь в фигуру.
Вы увидите, как ваш сплошной контур контура превратится в контур выделения:
Нажмите «Ctrl+Enter» (Win) / «Command+Return» (Mac), чтобы преобразовать путь в выделение.
Шаг 13. Вырежьте выделение на отдельный слой
Мы собираемся вырезать выбранный фрагмент головоломки из слоя «Головоломка» и поместить его на отдельный слой, оставив на своем месте пустое отверстие в слое «Головоломка». Убедитесь, что у вас по-прежнему выбран слой «Головоломка» в палитре «Слои», затем перейдите в меню «Слой» в верхней части экрана, выберите «Создать», а затем выберите «Слой через вырез:
».Выберите «Слой» > «Создать» > «Слой через вырез».
Это вырезает кусок из слоя «Головоломка» и помещает его на отдельный слой над слоем «Головоломка», который мы можем видеть в палитре слоев. Фрагмент теперь находится на верхнем слое, который Photoshop снова назвал «Слой 1». Я собираюсь переименовать этот слой «Первая часть головоломки»:
Теперь часть головоломки появляется на отдельном слое над слоем «Головоломка».
Шаг 14. Перемещение и вращение кусочка пазла с помощью свободного преобразования
Мы собираемся сделать так, чтобы эта часть головоломки выглядела так, как будто она вот-вот встанет на место. Нажмите Ctrl+T (Win)/Command+T (Mac) на клавиатуре, чтобы открыть окно «Свободное преобразование» Photoshop и маркеры вокруг кусочка головоломки, затем щелкните в любом месте за пределами поля «Свободное преобразование» и перетащите мышь, чтобы повернуть кусок. После того, как вы повернули его, щелкните в любом месте поля «Свободное преобразование» и перетащите мышь, чтобы переместить фрагмент из исходного положения. Помните, что мы хотим, чтобы было очевидно, что эта фигура принадлежит этому месту, поэтому не перемещайте ее слишком далеко и не поворачивайте слишком сильно.
Перемещая фигуру, вы заметите, что то место, где она стояла минуту назад, теперь кажется черным. Это потому, что мы прорезали дыру в слое «Головоломка», и черный цвет из слоя «Цвет фона» под ним просвечивает:
Используйте Свободную трансформацию, чтобы перемещать и вращать часть головоломки.
Нажмите Enter (Win) / Return (Mac), когда вы закончите, чтобы принять преобразование и выйти из команды Free Transform.
Шаг 15: Добавляем Тень
Чтобы придать кусочку головоломки более трехмерный вид, чтобы он выглядел так, как будто он парит над головоломкой, давайте добавим тень. Щелкните значок «Стиль слоя» в нижней части палитры «Слои», затем выберите «Тень» из списка:
.Выберите «Тень» из списка стилей слоя.
Откроется диалоговое окно «Стиль слоя» с параметрами «Тень» в средней колонке. Уменьшите непрозрачность тени примерно до 60%, чтобы она не была такой интенсивной. Снимите флажок «Использовать глобальное освещение» и установите угол тени на 120°. Увеличьте Расстояние примерно до 16 пикселей, затем также увеличьте Размер примерно до 16 пикселей. Как обычно, вам может потребоваться настроить следующие параметры изображения:
Измените параметры, обведенные красным.
Когда закончите, нажмите OK, чтобы выйти из диалогового окна Layer Style.
Вот мое изображение после применения тени к части головоломки:
Теперь кажется, что тень парит над остальной частью головоломки.
Шаг 16: снова выберите слой «Головоломка»
Мы вырезали один из кусочков головоломки, и теперь он парит над головоломкой. На этот раз давайте полностью удалим одну из частей. Нам нужно выделить слой «Головоломка», поэтому щелкните его в палитре «Слои»:
Выберите слой «Головоломка» в палитре слоев.
Шаг 17. Нарисуйте путь вокруг другого кусочка головоломки с помощью инструмента «Перо»
Выберите другой фрагмент головоломки и с помощью инструмента «Перо» нарисуйте вокруг него контур, как мы делали это раньше:
Нарисуйте путь вокруг другого кусочка головоломки с помощью инструмента «Перо».
Шаг 18: преобразование пути в выделение
Снова, как и раньше, нажмите Ctrl+Enter (Win)/Command+Return (Mac), чтобы быстро преобразовать путь в выделение:
Преобразовать путь в выделение.
Шаг 19: Удалить выделение
Все, что мы собираемся сделать с этой частью, это полностью удалить ее из головоломки, и для этого все, что нам нужно сделать, это нажать Delete на клавиатуре. Это удалит часть головоломки, оставив дыру в слое «Головоломка», через которую будет виден черный цвет фона:
Нажмите Удалить, чтобы удалить часть головоломки с изображения.
Нажмите Ctrl+D (Win)/Command+D (Mac), чтобы отменить выделение и удалить контур выделения. Вот мое фото после удаления второй части пазла:
Нажмите Удалить, чтобы удалить часть головоломки с изображения.
Продолжайте удалять еще несколько частей головоломки, либо вырезая часть и перемещая ее над головоломкой (шаги 11-15), либо просто полностью удаляя часть (шаги 16-19). Всегда убедитесь, что у вас выбран слой «Головоломка» в палитре слоев каждый раз, когда вы вырезаете или удаляете часть.
Вот мое изображение после вырезания и удаления еще нескольких кусочков пазла:
Вырежьте или удалите больше кусочков головоломки, чтобы усилить эффект.
Шаг 20. Нарисуйте контур вокруг всех краев (необязательно)
Последние несколько шагов являются необязательными, но я собираюсь придать своей фотографии более интересную рамку, удалив все кусочки головоломки по краям. Опять же, это необязательно, но если вы хотите продолжить, используйте Pen Tool, чтобы нарисовать один непрерывный путь вдоль внутренних краев всех частей, которые проходят по краям фотографии, как я сделал здесь. Так как на скриншоте сложно увидеть путь, я выделил свой путь желтым цветом:
Нарисуйте путь с помощью инструмента «Перо» вдоль внутренних краев всех частей по краям фотографии.
Шаг 21. Преобразование пути в выделение
После того, как вы нарисовали свой путь, нажмите Ctrl+Enter (Win)/Command+Return (Mac), чтобы быстро преобразовать путь в выделение:
Нажмите «Ctrl+Enter» (Win) / «Command+Return» (Mac), чтобы преобразовать путь в выделение.
Шаг 22: инвертировать выделение
Мы хотим удалить все части, которые проходят по краям головоломки, а это значит, что нам нужно выбрать крайние части.
На данный момент, однако, у нас есть все , кроме выбранных кромок. Нам нужно инвертировать наш выбор, чтобы все, что в данный момент выбрано, было снято, а все, что в данный момент не выбрано, стало выбранным. Для этого перейдите в меню «Выбор» в верхней части экрана и выберите «Инверсия»:
Выберите Select > Inverse, чтобы инвертировать выделение.
Теперь будут выделены все кусочки пазла по краям фотографии:
Фрагменты по краям головоломки выбраны.
Шаг 23. Удаление краев
Теперь, когда краевые части выбраны, убедитесь, что у вас выбран слой «Головоломка» в палитре «Слои», затем нажмите «Удалить» на клавиатуре, чтобы удалить их. Нажмите Ctrl+D (Win)/Command+D (Mac), чтобы удалить контур выделения:
Фрагменты ребер теперь удалены.
Если вы предпочитаете использовать белый фон вместо черного, просто нажмите на слой «Цвет фона» в палитре «Слои», чтобы выбрать его, затем перейдите в меню «Правка» в верхней части экрана и выберите «Заливка».
вызвать диалоговое окно «Заливка». Выберите «Белый» для параметра «Содержимое» вместо черного, затем нажмите «ОК», чтобы выйти из диалогового окна:
Чтобы изменить цвет фона на белый, выберите слой «Цвет фона», затем выберите команду «Заливка» в меню «Правка» и установите для параметра «Содержимое» значение «Белый».
Это заполняет фон белым цветом:
Фон изменен на белый.
Шаг 24. Добавьте тень к основной головоломке (необязательно)
Этот последний шаг необходим только в том случае, если вы решили использовать белый цвет фона вместо черного. Мы собираемся добавить небольшую тень к основной головоломке, и, очевидно, если ваш цвет фона черный, а тень черная, вы не сможете увидеть тень, поэтому вы можете пропустить этот последний шаг. если вы все еще используете черный цвет для фона.
Чтобы добавить тень к основной головоломке, сначала выберите слой «Головоломка» в палитре «Слои», затем щелкните значок «Стиль слоя» в нижней части палитры «Слои» и выберите «Тень» из списка:
Выберите слой «Головоломка», затем щелкните значок «Стили слоя» и выберите «Тень».
Это еще раз вызывает диалоговое окно «Стиль слоя Photoshop», в котором установлены параметры «Тень» в среднем столбце. Уменьшите параметр «Непрозрачность» до 60%, чтобы уменьшить интенсивность тени, затем снимите флажок «Использовать глобальное освещение» и установите угол на 120°. Остальные параметры можно оставить по умолчанию:
Измените параметры тени, применяемой к основной головоломке.
Когда закончите, нажмите OK, чтобы выйти из диалогового окна Layer Style, и готово! Вот, после применения тени к моей основной головоломке, мой окончательный эффект:
Финальный эффект «Фотошоп-головоломка».
И вот оно! Вот как можно создать эффект головоломки с изображением в Photoshop! Посетите наш раздел «Фотоэффекты» для получения дополнительных руководств по эффектам Photoshop!
Получите все наши уроки Photoshop в формате PDF! Загрузите их сегодня!
Как создать эффект головоломки в Photoshop
от Adrian Scheff
В этом уроке Photoshop мы превратим обычную фотографию в пазл.
Пазл — это головоломка, состоящая из различных частей разной формы, которые нужно собрать вместе.
Это руководство предназначено для начинающих, и ему довольно легко следовать. Однако для этого потребуются знания об инструменте «Перо», поэтому, если вы не знакомы с ним, следуйте этому руководству о выделении Photoshop для ознакомления.
Окончательное изображение
Ресурсы
- Пляж
Шаг 1
Откройте изображение « Пляж ». Давайте создадим слой, на который мы поместим нашу головоломку. Создайте новый слой, нажав Ctrl + Shift + Alt + N и залейте этот слой светло-серым цветом ( #a2a2a2 ). Назовите этот слой « background ».
Шаг 2
Выберите инструмент Brush Tool (B) и выберите черный в качестве цвета переднего плана .
Уменьшите непрозрачность кисти до 10% и несколько раз проведите по краям только что созданного слоя, чтобы добавить немного вариации.
Шаг 3
Дважды щелкните фоновый слой и нажмите Ok в появившемся окне New Layer , чтобы преобразовать его в обычный слой. (Фоновые слои — это специальные слои, которые Photoshop создает каждый раз, когда вы открываете новое изображение. По умолчанию они заблокированы и имеют определенные ограничения — например, невозможность расположить их над другими слоями).
Переместите этот слой над фоновым слоем, нажав Ctrl + ] (квадратная скобка) или просто перетащив слой мышью.
Шаг 4
Теперь нам нужно применить текстуру мозаики к нашему изображению. Поскольку Photoshop CS6 Adobe не предоставляет определенные пресеты, нам приходится загружать их вручную.
Перейдите по этой ссылке и скачайте папку плагинов .
Откройте архив (он заархивирован, поэтому у вас должен быть Winrar или Winzip, чтобы его можно было открыть) и откройте папку Presets. Внутри этой папки будет Папка текстур – открыть ее .
Внутри этой папки вы должны увидеть файл с именем « Puzzle.psd ». Перетащите этот файл куда-нибудь на свой компьютер — например, на рабочий стол — и запомните, куда вы его положили.
Шаг 5
Вернитесь к нашему изображению в Photoshop и с выбранным изображением пляжа выберите Filter > Filter Gallery , чтобы открыть окно галереи фильтров. Здесь перейдите в Texture > Texturizer и щелкните маленький значок со стрелкой, указывающей вниз, чтобы загрузить пользовательскую текстуру. Выберите « Puzzle.psd », который вы нашли на предыдущем шаге.
Выберите следующие настройки и нажмите Ok . У вас должно получиться что-то похожее на мои результаты ниже.
Шаг 6
Давайте начнем придавать нашей головоломке реальный вид, спрятав некоторые части. Во-первых, давайте спрячем все фигуры в верхнем ряду и левом ряду. Чтобы скрыть части нашего слоя, нам нужно сначала создать выделение. Обычные инструменты выделения (Quick Selection Tool, Lasso Tool) будут совершенно неэффективны, потому что части головоломки имеют размытые края, поэтому нам придется использовать более продвинутый метод выделения.
Этот расширенный метод выделения включает инструмент «Перо» (если вы не знаете, как использовать инструмент «Перо», следуйте этому руководству здесь). Выберите Pen Tool ( P ) и создайте контур, как показано ниже:
Шаг 7
Нажмите Ctrl + Enter , чтобы преобразовать контур в выделение.
Щелкните слой Beach в палитре слоев, чтобы сделать его активным, и добавьте к нему маску слоя, выбрав Layer > Layer Mask > Reveal All .
Шаг 8
Нажмите D , чтобы восстановить цвета по умолчанию, и щелкните один раз по маске слоя , чтобы сделать ее активной. Теперь нажмите Ctrl + Backspace , чтобы заполнить выделение черным цветом, и обратите внимание, как исчезает левая часть слоя (руководство по слоям и маскам слоев находится здесь).
Шаг 9
Создайте путь в верхней части изображения и используйте шагов с 7 по 8 в качестве ссылки на замаскируйте выделенную область в маске слоя . К настоящему времени вы должны быть знакомы с процессом создания выделения из пути и маскирования, поэтому я не буду повторять инструкции о том, как это сделать в следующих шагах.
Шаг 10
Давайте скроем некоторые части пазла с картинки, чтобы она выглядела более реалистично. Используйте инструмент Pen Tool от до , создайте выделение и заполните этим выделением маску слоя нашего слоя (обратитесь к шагам 7-8), чтобы скрыть определенные части головоломки, как показано на изображении ниже.
Шаг 11
Выглядит уже неплохо! Но давайте еще немного улучшим его. Давайте возьмем часть головоломки и поместим ее поверх нашей картинки-головоломки. Сначала выберите Pen Tool и сделайте выделение части пазла.
Шаг 12
Преобразуйте контур в выделение, нажав Ctrl + Enter .
Шаг 13
Нажмите на слой пляжа в палитре слоев, чтобы сделать его активным, и нажмите Ctrl + J , чтобы создать новый слой из выделения. Эта команда создаст новый слой с выбранным фрагментом головоломки. Назовите этот слой « головоломка 1 ».
Шаг 14
У нас есть кусочек головоломки на новом слое, но мы должны скрыть его на нашем слое с пляжем, иначе мы не сможем добиться желаемого эффекта. Нажмите на слой « beach », чтобы выделить его, и нажмите на маску слоя, чтобы сделать его активным.
Теперь нажмите Ctrl + Backspace , чтобы заполнить маску фоновым цветом (это должен быть черный , но если это не так, нажмите D , чтобы сбросить цвета к значениям по умолчанию).
Кажется, ничего не происходит, потому что, хотя мы скрыли часть головоломки на нашем слое с пляжем, слой « Puzzle1 » все еще виден. Если вы отключите видимость слоя « Puzzle1 » (нажав на значок маленького глазного яблока слева от значка слоя), вы увидите, что наша маскировка сработала. Включите видимость « Puzzle1 ”слой.
Шаг 15
Создайте еще 3 части пазла (используя шаги с 12 по 14 в качестве справки) и дайте им соответствующие имена ( пазл2 , пазл3 , пазл4 ). Не забудьте скрыть кусочки пазла в маске слоя « beach » (нажав Ctrl + Backspace в маске слоя с черным цветом переднего плана).
Вот как должна выглядеть ваша палитра слоев, как показано на изображении ниже.
Шаг 15
Давайте распределим кусочки, которые мы создали, поверх пазла. Щелкните слой « Puzzle1 », чтобы сделать его активным, и нажмите Ctrl + T , чтобы войти в режим Free Transform. Поверните и расположите этот слой, как показано на изображении ниже.
Повторите этот шаг с остальными 3 частями головоломки. Разместите их, как я сделал на изображении ниже.
Шаг 16
Мы почти закончили. Головоломка выглядит хорошо, но упускает важную вещь: тень . Давайте добавим тень к нашей головоломке. Сначала Ctrl-клик на маске слоя « beach », чтобы выделить маску.
Создайте новый слой ( Ctrl + Shift + Alt + N ) и нажмите Ctrl + Backspace , чтобы заполнить выделение цветом переднего плана (не имеет значения, какой цвет переднего плана — мой черный).
