К большой радости дизайнеров и фотохудожников, средствами Photoshop можно не только преобразовывать, ретушировать и создавать изображения, но и существенным образом изменять их, внося свои добавления, например управлять падением света, помещать блики на поверхность рельефов, имитировать отражение выбранного изображения на поверхности и т.д. В действительности подобные эффекты приходится использовать очень часто, без них немыслим фотомонтаж, ведь именно блики и отражения придают ему столь необходимую естественность.
Представим, например, ситуацию, когда вам нужно гармонично вписать в пейзаж
озеро, или нарисовать стекло либо прозрачный пластик с отражениями на поверхности,
или наполнить живым блеском елочные шары, в которых отражаются окружающие предметы.
А может быть, добавить в фотографию морского побережья полузатонувший корабль
или украсить гладь тенистого пруда плавающими растениями. В общем, ситуаций,
когда необходимо сымитировать отражение, бесконечное множество, и некоторые
из них мы рассмотрим подробнее.
Отражение текста
Как и любой другой эффект, создание отражения лучше всего рассмотреть на достаточно простом объекте - тексте. Способов отражения текста разработано сегодня немало, некоторые из них вы можете найти во Всемирной сети, например, интересные варианты есть по адресам: http://photoshoptoday.com/Tutorials2003/February/PSReflShad/default.asp , http://www.adesdesign.net/php/tutorials/photoshop/reflectionObj.php или http://www.teamphotoshop.com/photoshop/tutorials/techniques/reflect/reflect.php . Следует признать, что первый вариант, в отличие от второго и третьего, обеспечивает не совсем реальное, но, пожалуй, самое эффектное отражение текста и может пригодиться Web-дизайнерам при разработке красочных заголовков. Второй и третий способы, в свою очередь, помогут освоить сам принцип создания эффекта отражения как для текста, так и для любых прочих объектов на произвольных поверхностях.
Рассмотрим первый из предлагаемых вариантов. Для его реализации напечатайте произвольный текст крупными буквами (рис. 1).
Рис. 1. Исходный текст
Выделите изображение вне текста обычной «волшебной палочкой» и сделайте инверсию, чтобы все буквы оказались выделенными. Сместите выделенную область слегка вправо и вниз, примерно как на рис. 2.
Рис. 2. Смещение выделенной области
Создайте новый слой Layer1 и заполните на нем выделенную область черным цветом для формирования тени. После этого перетащите слой Layer1 под слой с оригиналом текста (рис. 3).
Рис. 3. Текст с тенью
Вновь вернитесь на слой с оригиналом, выделите текст и скопируйте его в буфер обмена, после этого вставьте его из буфера, что автоматически приведет к появлению нового слоя Layer2 . Зеркально отобразите текст на новом слое, применив команду Edit->Transform->Flip Vertical (Редактировать->Трансформация->Поворот по вертикали), и переместите отраженный текст немного ниже, чтобы изображение стало похоже на рис. 4. Воспользуйтесь командой Edit->Transform->Skew (Редактировать->Трансформация->Наклон) для искажения отраженного текста на слое Layer2 (рис. 5).
Рис. 4. Текст после применения зеркального отражения
Рис. 5. Внешний вид текста после искажения его отражения
Теперь необходимо добиться нужной степени размытости отражения. Для этого на слое Layer2 придется последовательно выполнить целый ряд действий. Вначале примените фильтр Filter->Distort->Wave (Фильтр->Искажение->Волна) с параметрами, как на рис. 6. После этого дважды размойте изображение по Гауссу при радиусе размытия в 1,5 пиксела командой Filter->Blur->Gaussian Blur (Фильтр->Размытие->Размытие по Гауссу) и уменьшите значение параметра Opacity (Непрозрачность) данного слоя до 50%. Теперь для достижения большего впечатления размойте в движении слой Layer1 , применив команду Filter->Blur->Motion Blur (Фильтр->Размытие->Размытие в движении) при следующих параметрах: Angle - 0 и Distance - 5. В результате текст будет напоминать рис. 7.
Рис. 6. Окно настройки параметров фильтра Wave
Рис. 7. Внешний вид текста после размытия
На заключительном этапе останется позаботиться об эффектном фоне. В данном случае предлагается выбрать подходящие цвета фона для основного текста и его отражения, а затем на ту часть фона, в которой находится отражение, наложить ряд эффектов: Filter->Noise->Add Noise (Фильтр?Шум?Добавить шум) с параметрами, как на рис. 8; Filter->Distort->ZigZag (Фильтр->Искажение->Зигзаг) с параметрами, как на рис. 9; Filter->Stylize->Wind (Фильтр->Стилизация->Ветер) при включенных опциях Blast (Сильный) и From the Right (Направо) и Filter->Blur->Motion Blur (Фильтр->Размытие->Размытие в движении) при следующих параметрах: Angle (Угол) - 0 и Distance (Дистанция) - 56. Полученный результат может напоминать рис. 10.
Рис. 8. Окно настройки параметров фильтра Add Noise
Рис. 9. Окно настройки параметров фильтра ZigZag
Рис. 10. Окончательный вид текста с отражением
Совершенно другой способ имитации отражения предлагается на сайте http://www.adesdesign.net/php/tutorials/photoshop/reflectionObj.php . В этом случае, взяв в качестве оригинала тот же самый текст (см. рис. 1), вы получите иной результат.
Для этого вновь напечатайте текст, выделите его и скопируйте в буфер обмена. После этого вставьте скопированный текст в качестве отражения - появится слой Layer1 . Зеркально отобразите текст на новом слое, применив команду Edit->Transform->Flip Vertical (Редактировать->Трансформация->Поворот по вертикали), и переместите отраженный текст немного ниже (рис. 11). Затем для искажения отраженного текста воспользуйтесь перспективой Edit->Transform->Perspective (Редактировать->Трансформация->Перспектива) и немного уменьшите его высоту с помощью команды Edit->Transform->Scale (Редактировать->Трансформация->Масштаб) (рис. 12).
Рис. 11. Результат зеркального отражения текста
Рис. 12. Изменение отражения в результате искажения
Остался самый ответственный этап - нужно придать отражению естественность и выразительность. Для этого создайте новый слой Layer2, который должен находиться поверх слоя с отраженным текстом, выберите инструмент Reflected Gradient, установите в качестве основного цвета белый, а в качестве фонового - подходящий к цвету отражаемого оригинала (в данном случае взят красный) и на слое Layer2 заполните градиентом предварительно выделенную в слое Layer1 область текста (рис. 13). А в заключение удалите слой Layer1 и отрегулируйте параметр Opacity (Непрозрачность) слоя Layer2, значение которого в каждом случае индивидуально и зависит как от оригинала, так и от результата применения градиента. Возможно, что результат будет напоминать рис. 14.
Рис. 13. Область, выделенная для заполнения градиентом
Рис. 14. Окончательный вид текста с отражением
Отражение в воде
Все, конечно, не раз обращали внимание на то, что любые объекты, находящиеся вблизи воды, отражаются в ней, и при внедрении в пейзаж водной поверхности это приходится учитывать. Естественно, фотодизайнеры давно придумали немало технических приемов реализации этого эффекта. В поисках информации стоит заглянуть, например, по адресам http://www.nicolag.com/psd1day/reflection.htm и http://a4u.tomsk.ru/texts/show_text.phtml?tid=11 .
Попробуем поместить водную поверхность со всеми отражающимися в ней объектами перед коттеджем на рис. 15.
Рис. 15. Исходное изображение
Для этого вначале обведите контур будущего водоема, воспользовавшись, например, «лассо». Создайте новый слой Layer1 , выберите цвета для тонирования воды из самой светлой и самой темной точек на небе исходного изображения и залейте на слое Layer1 выделенную область градиентом снизу вверх в направлении от темного к светлому (рис. 16).
Рис. 16. Результат заполнения имитируемой водной поверхности градиентом
После этого воспользуйтесь фильтром Add Noise: Filter->Noise->Add Noise (Фильтр-> Шум-> Добавить шум) при включенной опции Uniform (Однородный) и индивидуально подобранном в каждом конкретном случае количестве (в данном случае параметр Amount (Количество) равен 3 (рис. 17), что обеспечивает появление на воде мельчайшей ряби).
Рис. 17. Появление ряби на воде
Откажитесь от выделения и сделайте копию исходного фотоснимка, в результате у вас появится дополнительный слой Background copy , который затем следует переместить на самый верх. Теперь на новом слое нужно приступить непосредственно к созданию отражения в воде. Для этого вначале получите зеркальное отображение слоя, применив команду Edit->Transform->Flip Vertical (Редактировать-> Трансформация-> Поворот по вертикали), а затем из слоев Layer1 и Background copy сформируйте срезаемую группу. Для этого, удерживая нажатой клавишу Alt, щелкните по линии, разделяющей эти слои в палитре Layers. Щелкать следует в тот момент, когда курсор примет форму двух кружков со стрелкой посередине. В результате палитра слоев примет вид, как на рис. 18, а изображение будет напоминать рис. 19.
Рис. 18. Окно палитры слоев после отсечения группы
Рис. 19. Внешний вид изображения после отсечения группы
На следующем этапе отредактируйте положение отражения, просто переместив его нужным образом, например как на рис. 20.
Рис. 20. Результат сдвига отражения
Теперь попытайтесь добиться некоторой реалистичности. Для этого вначале на слое Background copy измените режим наложения с Normal на Multiply, что обеспечит эффект затемнения слоя. Затем уменьшите параметр Opacity (Непрозрачность) слоя с отражением в пределах от 50 до 90%, в зависимости от светлости и яркости исходного изображения. В нашем случае взят вариант 60%. Полученный результат может напоминать рис. 21.
Рис. 21. Внешний вид изображения после изменения режима и непрозрачности
Но пока нельзя не признать, что полученное изображение выглядит слишком идеальным и правильным - на самом деле так не бывает, поэтому размойте его в движении с помощью команды Filter->Blur->?Motion Blur (Фильтр-> Размытие-> Размытие в движении) при значениях Angle (Угол) - 90 и Distance (Дистанция) - 4-8. В примере значение Distance равно 6 (рис. 22).
Рис. 22. Результат размытия отражения
Напоследок можно наложить на водную поверхность слабую рябь, применив фильтр Filter/Distort/Ocean Ripple (Фильтр-> Искажение-> Океанская дрожь) с параметрами, индивидуально подобранными в каждом конкретном случае. В рассматриваемом примере взят вариант, как на рис. 23. Готовое изображение может быть похоже на рис. 24.
Рис. 23. Окно установки параметров фильтра Ocean Ripple
Рис. 24. Окончательный вид изображения
Плавающие объекты
Плавающим объектом будем считать любой частично погруженный в воду предмет. При этом части объекта, оказавшиеся в воде, естественно, искажаются. Автор наиболее известной в Сети вариации на эту тему - Алисия Джонсон (Alicia Johnson), а с рекомендуемым ею способом имитации плавающих объектов в оригинале можно ознакомиться по адресу: http://www.rain.rainey.net/photoshop/cooltype/articles/floating_objects/index.html .
Чтобы воспользоваться этим способом, откройте файл, содержащий предмет, который будет частично погружен в воду (рис. 25).
Рис. 25. Исходное изображение
Выделите объект любым способом и скопируйте в буфер обмена, затем создайте новый документ и вставьте скопированный объект. В итоге будет создан слой Layer1 . Создайте новый слой Layer2 и сгенерируйте на нем подходящий фон. Можно, например, воспользоваться фильтром Filter->Render->Clouds (Фильтр-> Рендер-> Облака) с предварительно подобранными основным и фоновым цветами или вставить в качестве фона поверхность воды с другого изображения - в данном примере был выбран второй вариант. После этого измените параметр Opacity (Непрозрачность) фонового слоя - он очень сильно будет зависеть от конкретной картинки и ожидаемого результата и может колебаться в интервале от 50 до 70%. Отрегулируйте положение объекта, переместив его нужным образом и при необходимости повернув (рис. 26).
Рис. 26. Цветок на воде
Выделите на слое Layer1 верхнюю часть объекта, которая должна будет располагаться над водой, например как на рис. 27, и скопируйте ее в буфер обмена. После этого вставьте скопированную часть из буфера, в результате появится дополнительный слой Layer3, переместите его поверх слоя Layer2 и отрегулируйте положение объекта в соответствии со слоем Layer1 .
Рис. 27. Выделение верхней части объекта
Перейдите на слой Layer1 , сделайте овальное выделение в области погруженной в воду половины объекта (рис. 28) и примените фильтр «Зигзаг» Filter->Distort->ZigZag (Фильтр-> Искажение-> Зигзаг) с указанными на рис. 29 параметрами для имитации искажения находящейся под водой нижней части объекта. Параметр Amount (Количество) в значительной степени определяется конкретным изображением, и разброс его значений при имитации плавающих объектов может быть чрезвычайно широк - в интервале от 10 до 100. На заключительном этапе воспользуйтесь этим же фильтром с указанными выше параметрами, но уже на слое Layer2 , чтобы обеспечить волнение самой водной поверхности. Полученный результат, возможно, будет напоминать рис. 30.
Рис. 28. Овальное выделение в нижней части объекта
Рис. 29. Окно установки параметров фильтра «Зигзаг»
Рис. 30. Окончательный вид плавающего на воде цветка
Отражение на пластике
Не менее актуальным, чем отражение на поверхности воды и под водой, является создание отражения на твердой поверхности, например на пластике или на стекле. В поисках примеров имитации подобных вариантов отражения стоит посетить, например, адреса: http://www.gasoline-prod.com/electro303/02-tech/Tutorial_bank/tips010/Tips010-FR.html , http://rus-arhiv.narod.ru/docs/Photoshop/MIRROR.HTM и http://lepers.chat.ru/photoshop/09/09.htm .
Попытаемся сформировать данный вид отражения, взяв за основу вазу на рис. 31 и поместив ее на искусственно сгенерированную пластиковую поверхность (рис. 32).
Рис. 31. Ваза
Рис. 32. Пластиковая поверхность
Для этого скопируйте вазу в буфер обмена и внедрите ее на рисунок с поверхностью - это приведет к появлению нового слоя Layer1 (рис. 33). Далее создайте копию слоя Layer1 слой Layer1 copy . Все дальнейшие действия будут относиться к новому слою Layer1 copy . Создайте зеркальное отображение вазы, применив команду Edit->Transform->Flip Vertical (Редактировать-> Трансформация-> Поворот по вертикали) и перетащите вазу-отражение вниз, пока не станет видна ваза-оригинал (рис. 34). Переверните изображение по часовой стрелке на 90°, воспользовавшись командой Image->Rotate Canvas->90->CW (Изображение-> Перевернуть холст-> 90-> CW) (рис. 35).
Рис. 33. Появление вазы на столе (пока без отражения)
Рис. 34. Начальный вариант изображения с зеркальным отражением
Рис. 35. Результат поворота всего изображения по часовой стрелке
После этого с помощью прямоугольного выделения Rectangular Marquee выделите прямоугольную область вокруг копии вазы так, чтобы со стороны верхней части отражения вазы захватить меньше пространства, чем со стороны нижней части, при этом крайне важно, чтобы сверху и снизу от вазы было выделено одинаковое пространство. Вариант выделенной области можно посмотреть на рис. 36.
Рис. 36. Выделенная прямоугольная область
Теперь нужно слегка исказить отражение вазы командой Filter->Distort->Shear (Фильтр-> Искажение-> Выгиб), включив опцию Wrap Around (Завернуть) и задав кривую для деформации изображения, примерно как на рис. 37. Для этого вначале перетащите верхнюю и нижнюю точки привязки в соответствии с рис. 37, потом щелкните в самом центре координатной сетки, тем самым создавая новую точку привязки, и перетащите ее нужным образом. Затем щелкните в центре каждого из полученных выгнутых участков дуги, вновь создавая новые точки, и переместите их в соответствии с рис. 37. Результат искажения будет напоминать рис. 38.
Рис. 37. Окно формирования кривой для фильтра Shear
Рис. 38. Изменение отражения в результате применения фильтра Shear
Верните изображение в исходное положение, повернув его против часовой стрелки на 90° с помощью команды Image->Rotate Canvas?90-> CCW (Изображение-> Перевернуть холст-> 90-> CCW). А затем поменяйте слои Layer1 и Layer1 copy местами слой с отражением должен оказаться под слоем с вазой-оригиналом (рис. 39).
Рис. 39. Ваза и ее отражение после поворота
Уменьшите параметр Opacity (Непрозрачность) у слоя Layer1 copy , чтобы отражение стало полупрозрачным. Значение параметра определятся экспериментальным путем и в каждом конкретном случае оно свое - в данном случае этот параметр равен 80%. Затем измените режим слоя с Normal на Screen или Soft Light (приоритетный режим зависит от конкретного изображения) - в примере выбран режим Soft Light (рис. 40).
Рис. 40. Изменение отражения вазы в результате изменения параметров слоя
Затем воспользуйтесь перспективой Edit->Transform->Perspective (Редактировать-> Трансформация-> Перспектива) и немного перетащите нижнюю точку по направлению к центру отражения, примерно как на рис. 41. После этого немного уменьшите длину вазы командой Edit->Transform->Scale (Редактировать-> Трансформация-> Масштаб), так как длина всегда увеличивается в результате применения перспективы. И напоследок выровняйте вертикальные границы отражения с помощью команды Edit->Transform->Distort (Редактировать-> Трансформация-> Искажение); при этом нужно добиться, чтобы вертикальные линии отражения стали параллельны границам оригинала. Данное действие необходимо, так как в результате примененной ранее перспективы происходит искажение границ. А затем откорректируйте положение отражения по вертикали. Полученный результат будет напоминать рис. 42.
Рис. 41. Настройка перспективы
Рис. 42. Окончательный вариант изображения с его отражением на пластиковой поверхности
Вместо заключения
На этом мы заканчиваем изучение Photoshop. За пределами нашего повествования оказались многие интересные возможности программы. Например, мы не рассматривали особенности 3D-имитации, формирования абстрактных волокнистых текстур (напоминающих волосы), всевозможных световых эффектов (молний, фейерверков, свечений и пр.), преобразования текста, имитации применения реальных оптических объективов, возможность создания GIF-анимаций прямо в среде Photoshop и многое другое. Но начало положено - первые шаги в изучении программы сделаны (все уроки по Photoshop вы найдете на данном диске), а остальное уже в ваших руках.
Дизайнеры часто используют в своих работах отражения предметов от различных поверхностей. Поверхности бывают разные – зеркала, спокойная вода горного озера или вода, слегка подернутая рябью, стекла окон, пластик, стол из полированного дерева или мраморный пол. И отражения предмета от разных поверхностей тоже разные.
Наши глаза могут смотреть на предмет сверху или снизу, и отражение предмета будет сильно отличаться в зависимости от этого. Законы зеркальных отражений необходимо знать и внимательно соблюдать их при создании своих робот.
Основные правила построения изображения мы смутно помним из школьного курса физики. Лучи света, падающие на матовую поверхность, отражаются под различными углами, и отражения мы не видим или видим очень слабо. Отраженные лучи от гладкой полированной поверхности идут в одном направлении, и поэтому мы видим четкое зеркальное изображение.
Лучи света отражаются от зеркальной поверхности под углами, равными углам падения этих лучей. Чем ярче источник света, тем сильнее будет сила света отраженного луча.
Зеркальное изображение находится на таком же расстоянии за зеркальной плоскостью, как и точка, дающая отражение. Отражения горизонтальных линий в воде также горизонтальные, отражения вертикальных линий - вертикальные. Законы перспективы нужно учитывать и при создании отражений.
В этой статье я хочу рассмотреть возможность и способы создания разных отражений в фотошопе.
Но вначале всем, кто давно забыл школьный курс физики, предлагаю рассмотреть несколько фотографий с отражениями и проанализировать изображенное на них отражение.
На фото 1 и 2 камера расположена почти на одном уровне с поверхностью, от которой отражается предмет. Линия схода изображения предмета и его отражения - прямая или точка, если предмет имеет сферическую форму (яблоко на фото 2). Сам предмет и его отражение в этом случае имеют практически одинаковый размер. Можно ли такое отражение создать в фотошопе? Легко!
На фото 3 камера находится немного выше, примерно на средней линии самого предмета. Как выглядит отражение? В случае с пластиковой картой все очень просто, карта плоская и расположена перпендикулярно к линии «взгляда» камеры. Искажение из-за перспективы незначительное, можно отражение немного уменьшить по вертикали, но если поверхность не зеркальная, то размытость или полупрозрачность слоя с отражением сделает это искажение несущественным. Отражение делаем точно так же как в первом случае. А если карту повернуть или наклонить?
Как расположится отражение карты? Как такое отражение сделать? Для этого в фотошопе есть возможность Transformation.
А как нарисовать отражение предмета кубической формы, параллелепипеда? Рассмотрим фото 5.
Изображение кубика и его отражение сходится по ломаной линии, грани отражаются зеркально. Можно использовать идею предыдущего урока и создать отдельно отражения каждой из граней.
На фото 6 все еще сложнее. Стакан цилиндрической формы и линия соприкосновения изображения и его отражения - кривая. Можно ли такое отражение сделать в фотошопе? Не так просто, как в первом случае, но можно!
А что насчет апельсина? Глазом мы видим срез апельсина и часть корки, а от поверхности отражается его наружная часть – оранжевая корка.
Рассмотрим еще фото 7, чашка с кофе. Уровень взгляда выше самого предмета. В данном случае от полированной поверхности отражается та часть предмета, которой вообще не видно на самом изображении, а именно нижняя часть чашки. При перспективе сверху вниз, изображение уменьшается книзу и отражение тоже. Вот только верх и низ у изображения и зеркального отражения разные!
Что в этом случае делать? Как сделать отражение? Да никак! На самом изображении нет того, что должно быть в отражении. Можно только нарисовать то, что вам подскажет ваше воображение с помощью обычных инструментов рисования.
Простой пример: вы используете в работе изображение стола, снятого камерой, расположенной выше поверхности столешницы, и хотите сделать в фотошопе его отражение от пола. Кажется все просто – скопировать, отразить, ножку к ножке придвинуть и радоваться? Но от полированного пола должна отразится внутренняя часть стола, то как там под столом ножки винтами крепятся к столешнице! Именно то, чего вообще нет на вашем фото! К сожалению, здесь программа бессильна.
Если очень нужно сделать что-то такое, можно создать отдельно отражение всех ножек стола, размытое и полупрозрачное, разместить их как положено, учитывая перспективу, а затем нарисовать полупрозрачное нечто, имитирующее отражение столешницы снизу.
Фотошоп это всего лишь программа, которая хранит определенный набор пикселей и не понимает, какие из них принадлежат предмету, а какие отражающей плоскости. Программа не знает, на каком уровне расположены ваши глаза при съемке или рисовании всей композиции, не знает, на каком расстоянии и под каким углом находится предмет по отношению к отражающей его плоскости, не может определить, по какому алгоритму строить это отражение, а потому и не может создать его автоматически.
Фотографируйте предметы с отражениями, рисуйте их или используйте программы 3D-графики.
1 голосДоброго времени суток, уважаемые читатели. Сегодня я расскажу вам о простом инструменте, который обязательно пригодится любому веб-дизайнеру: для создания лендинга или, если вы создаете интернет-магазин, для усовершенствования картинок в карточке товара.
Я покажу как сделать изображение зеркальным. Сначала при помощи двух кнопок, чтобы просто развернуть рисунок, а затем профессиональный способ отразить объект как будто он в зеркале или на стеклянном столе.
Приступим?
Две кнопки для зеркального эффекта
Итак, этот метод работает вне зависимости от того какой версией Photoshop вы пользуетесь, CS6, CS5 и даже в онлайн версии. Я работаю в CC.
После того как вы откроете в фотошопе фотографию, ее нужно разблокировать для редактирования. Без этого вы не сможете применять большинство функций. Щелкните на замок справа от эскиза слоя.
Теперь нажмите сочетание клавиш Ctrl+T.
Правой кнопкой мыши щелкните в любом свободном месте выделенного фрагмента. Откроется дополнительное меню с множеством функций для поворота: по вертикали, на 180, 90 градусов. Сейчас вы выбираете «Отразить по горизонтали».
Готово, вы перевернули изображение зеркально. Если на вашем фото есть какие-то логотипы или упоминание торговых марок и вы не хотите, чтобы читатели их видели, то это простой способ усложнить задачу. На многих телеканалах сейчас применяют именно его.
Если не нравится пользоваться сочетанием клавиш, можно в верхней панели выбрать «Редактирование», затем «Трансформирование» и «Отразить по горизонтали».
Ну вот и все, с простым методом разобрались. Настало время сделать что-то красивое. К концу второй части этого урока у вас появится привлекательное изображение, которое можно вставить в качестве элемента дизайна или просто как иллюстрацию к карточке товара в .
Эффект зеркала
Первым делом нужно подготовить фон. Как правило, профессионалы работают со светлым и черным, чтобы видеть результат в разной гамме. Для этого вам придется научиться работать с градиентами, . Если возникают проблемы – прочитайте мою подробную пошаговую инструкцию.
Создаете слой, затем под инструментом «Заливка» находите градиент и заполняете слой радиально в темных тонах. Можете использовать от цвета #655959 до #3f3535 .
Теперь нужно создать еще один слой со светлым цветом. Кликните на иконку рядом корзиной. Или во вкладке «Слой» верхнего меню выберите «Создать новый слой».
Можно использовать сочетание клавиш Shift+Ctrl+N. Кстати, рекомендую вам завести тетрадку, куда вы будете записывать все горячие клавиши. В фотошопе их много, но они существенно облегчают работу.
Первое время вы можете каждый раз записывать те сочетания клавиш, которые используете. Предположим, забыли – посмотрели и записали снова. Удалось вспомнить самостоятельно – честь, хвала и ручку искать не нужно. В свое время я изучал таким образом английский язык. Помогает. Сидишь до последнего, пока не вспомнить без подсказок, чтобы не писать по сто раз одно и то же.
Верхний слой заполняете в светлых тонах от #cdc6c6 до #948d8d .
Немного уменьшите рисунок. Чтобы он сжимался пропорционально, пока ведете мышью зажимайте shift на клавиатуре. После того как закончите, примените изменения, нажав Enter.
На эскизе слоя кликните правой кнопкой мыши и вызовите дополнительное меню, в котором выберите функцию «Растрировать слой».
В этом же меню щелкните еще и по «Создать дубликат слоя» или используйте сочетание кнопок Ctrl+J.
Теперь вам нужно нажать Ctrl+T, «Трансформация», а внутри объекта щелкнуть правой кнопкой мыши, как я описывал в предыдущем пункте. Выберите функцию «Отразить по вертикали».
Новый слой перетащите вниз, это можно сделать и в текущем состоянии. Либо нажмите Enter, чтобы закончить с трансформацией, выберите инструмент «Перемещение» (пересекающиеся стрелки) и потяните новый слой вниз.
Добавьте . Прямоугольник с кружочком внутри. Эту функцию я уже подробно описывал. Она чем-то напоминает ластик: стирает объекты или делает их прозрачными.
Теперь вам снова понадобится градиент. От черного к белому, но в этот раз зеркальный (на скриншоте обозначено цифрой 3).
Ведите линию где-то от середины объекта с первого видимого слоя и до конца «отражения», как показано на рисунке.
Будьте внимательны, когда вы применяете градиент, белая рамка должна находиться на маске-слоя, той, что находится справа от эскиза. Щелкните два раза ней и сможете настроить плотность, сделать отражение прозрачным.
Теперь нужно немного размыть объект, так как «чистого» отражения в природе не существует. Нажмите на эскиз самого слоя, чтобы применить редактирование именно к нему. В моем случае с изображением яблока. Далее переходите во вкладку «Фильтры» — «Размытие» — «Размытие по Гауссу».
Настройте радиус как вам понравится. Все зависит от разрешения исходника. В моем случае 5 идеально подходит.
Вы можете убрать видимость слоя со светлым градиентом, нажав на глаз рядом с ним, и посмотреть как фото будет выглядеть на темном. Осталось только выбрать лучший вариант.
Ну вот и все. Если вам понравился этот урок, подписывайтесь на рассылку и узнавайте о мире фотошопа больше. Теперь вы можете создавать очень красивые картинки самостоятельно. Ну а если у вас нет времени ждать, могу посоветовать курс «Photoshop уроки повышения мастерства ». В нем вы найдете целый сборник профессиональных приемов и методов.
Ну а если вы считаете, что ваших знаний еще недостаточно, чтобы повышать уровень, узнайте все о инструментах в курсе «Фотошоп с нуля в видеоформате ». Он поможет научиться не просто использовать какие-то приемы, а самостоятельно догадываться как применять тот или иной эффект непростой программы.
До новых встреч и удачи в ваших начинаниях.
Сегодня мы расскажем вам о том, как делать грамотные отражения в Photoshop . Трехмерные отражения, отражения товара, а также пару других типов отличных отражений. Мы обсудим все, начиная от трансформаций до режимов смешивания и так далее. Неважно, новичок вы или профессионал, вам всё равно можно кое-чему обучиться.
Вероятно, у вас промелькнет мысль о том, что отражения были крайне популярны пару лет назад, а сегодня они немного потеряли популярность, и вы будете правы. Тем не менее, вы можете наблюдать различные примеры на множестве веб-сайтов в интернете, включая Apple.com. Конечно же, нельзя перебарщивать с отражениями, пытаясь угнаться за тенденциями стилей web2.0, но стоит отметить, что порой отражения могут придать презентабельный вид какому-нибудь скучному элементу.
Отражение трёхмерного объекта
Что делать, если ваш объект сложен? Например, если наш объект – это коробка?
Если мы пойдём по этапам по перевороту объекта, то это может привести к катастрофе. Это даст нам совсем ужасное отражение.
В целом, отразить коробку гораздо легче, чем текст. Вам даже не придётся ничего трансформировать, вам просто нужно продублировать слой с коробкой и расположить коробки друг над другом.
Далее применяем маску и уменьшаем уровень отображения и таким образом у нас получается идеально отраженная коробка!
Данный трюк работает со множеством фигур. Например, снимок iPhone в самом начале статье может быть с легкостью отражен посредством данной техники. Далее понадобится лишь небольшая обработка, чтобы выстроилось правильное отражение. На всю доработку потребуется несколько секунд.
Отражаем снимок товара
И вот, мне уже слышатся восклицания: «Не так быстро!» Какова вероятность того что вам когда-нибудь придётся делать отражение старой плоской коробки? Когда-нибудь это может произойти внезапно и, к тому же, гораздо больше вероятность того, что вам нужно будет делать отражение фотографии товара или что-нибудь более сложное.
Именно с этой проблемой я столкнулся совсем недавно, когда работал над дизайном объявлений корма для собак. Посмотрите, что произойдет, если мы применим данную технику к настоящему снимку продукта.
Как видно, изображение на коробке портит весь эффект. Он должен быть перевёрнутым. Нам придётся это реализовать, чтобы получить правильное отражение.
Учтите, что в Photoshop есть множество трехмерных утилит, которые помогут вам в данной ситуации. Создав трехмерный объект, вы с легкостью сможете вертеть его, как только вам вздумается. Тем не менее, у вас не всегда будет время создавать трёхмерные объекты, и поэтому вам важно знать, как эффективно имитировать трехмерный эффект.
Первое, что вам нужно сделать – перевернуть изображение вертикально.
Далее, нажмите CTRL и кликните по превью слоя для того, чтобы создать выделение объекта. Удерживая кнопку ALT, снимите выделение со сторон коробки так, чтобы только лишь передняя часть осталась выделенной.
С данным активным выделением, осуществите функцию Free Transform (CTRL+T), а затем, удерживая CTRL, ухватите средний указатель на изображении ниже и перетащите таким образом, чтобы он аккуратно был подвинут ко дну основной коробки.
Теперь проделайте то же самое с остальными сторонами коробки. Здесь будьте уверены, что выделены лишь стороны коробки, и используйте средний левый индикатор при выделении. Это позволит вам создать идеальное отражение коробки. Теперь вы возможно будете обеспокоены нижней частью вашего отражения, так как здесь у нас все перемешалось.
Здесь хорошо то, что вы можете полностью проигнорировать этот момент. Не забывайте, что здесь у нас будет эффект затухания, поэтому нижней части даже не будет видно.
Вот так выглядит финальный вариант. Не так плохо, учитывая такую сложную форму и то, что это заняло лишь пару минут. Когда вы набьете руку, у вас будет уходить гораздо меньше времени.
Немного о режимах смешивания
Обязательно стоит отметить то, что при работе с отражения в Photoshop, вам не следует придерживаться режима смешивания по умолчанию. Экспериментируйте. Пробуйте разные режимы и смотрите, как они будут влиять на отражение.
Каждое созданное вами отражение может содержать разные цвета, и поэтому какой-то определенный режим смешивания может подойти гораздо лучше стандартного.
Если вам не терпится позабавиться, то вы можете попробовать даже сделать два дубля отражения с разными установками режимов смешивания. Это иногда помогает получить более реалистичное изображение отражения.
Заключение
В последние годы отражения использовались достаточно часто. Целью данной статьи является помощь в реализации грамотных отражений, отделив себя от тягостных ненужных задач и операций. Помните, что отражения в дизайне должны использоваться не так часто, что касается и остальных эффектов (теней, градаций, обрамления и т.д.).
Вы должны уметь определять – когда следует применить отражение, а когда оно будет лишним. Вы также должны уметь создавать отражения как простых элементов, так и сложных элементов.
С помощью зеркалирования фотографий можно изменить восприятие кадра и сделать его более выразительным. Считается, что люди, смотрящие на снимке вправо, воспринимаются более позитивно, чем люди, смотрящие влево. Влево - как бы назад, в прошлое. В пейзаже и городской съёмке примерно такая же ситуация: мосты, реки, улицы, уходящие вправо - это движение в будущее.
Но, кроме изменения восприятия снимка, с помощью зеркалирования и копирования можно добиться некоторых интересных эффектов.
Давайте наглядно рассмотрим, как в Фотошопе зеркально отобразить картинку.
Открываем изображение в Adobe Photoshop. Наша фотография будет открыта в виде слоя Background. И, по умолчанию, к такому слою нельзя применять никакие изменения. Это сделано специально, чтобы при работе у вас всегда оставался исходный кадр. Для того, чтобы базовый слой стало возможным изменять, надо дважды кликнуть на пиктограмму замочка справа на панели слоёв. Это позволит разблокировать слой. Ещё один вариант - просто скопировать слой и применять все изменения к копии.
Для того, чтобы зеркально отразить слой в Фотошопе, есть две команды. Они находятся в меню Edit/«Редактирование» → Transform/«Трансформирование» .
Flip Horizontal/«Отразить по горизонтали» - позволяет отразить фотографию по горизонтали.
Делает зеркалирование по вертикали.
Давайте разберём ещё один пример, который показывает, как зеркально отразить слой в Фотошопе и добиться эффекта калейдоскопа.
Сначала создадим копию исходного слоя. Для этого можно либо выбрать пункт меню Layer/«Слои» → Duplicate Layer…/«Создать дубликат слоя…» , либо мышкой перетащить пиктограмму слоя на пиктограмму создания нового слоя на панели слоёв.
Теперь давайте увеличим размер холста, чтобы все части будущего «калейдоскопа» были видны.
Нам понадобится пункт меню Image/«Изображение» → Canvas Size/«Размер холста» .
Надо выставить параметры таким образом, чтобы холст расширился вправо на величину, равную ширине исходного изображения - мы же будем с противоположной стороны добавлять зеркальное отражение. Поэтому настройки будут выглядеть следующим образом:
В качестве якорной точки Anchor/«Расположение» мы задали левый край изображения - он останется на месте. И указали, что ширина холста должна увеличиться на 200% относительно исходной ширины. Высоту пока оставим без изменений.
После нажатия на кнопку Ok и применения всех сделанных изменений окно Photoshop будет выглядеть как на снимке ниже.
Убеждаемся, что верхний слой активный, и зеркалируем его относительно вертикальной оси с помощью команды Edit/«Редактирование» → Transform/«Трансформирование» → Flip Horizontal/«Отразить по горизонтали» . После чего мышкой меняем расположение двух слоёв таким образом, чтобы они совмещались по одному из краёв.
Для точного и аккуратного позиционирования удобно воспользоваться клавишами «Вверх», «Вниз», «Вправо» и «Влево» на клавиатуре.
Теперь давайте сделаем зеркальное отражение в другой плоскости.
Объединим два текущих слоя в один. Это можно сделать командой *Layer/«Слои» → Merge Visible/«Объединить видимые» . Увеличим размер холста аналогично тому, как делали раньше, но на этот раз по вертикали. Якорная точка будет у нижней границы, а увеличивать на 200% мы будем высоту.
Получится вот так.
Создадим копию верхнего слоя (который уже включает в себя исходное и отзеркалированное изображения). И применим к этой копии команду отражения Flip Vertical/«Отразить по вертикали» . После этого мышкой поместим зеркалированный слой на новое место.
Вот такой эффект калейдоскопа можно получить с помощью зеркалирования картинок в Фотошопе.
