Работа с 3D-объектами
Я обожаю 3D-объекты! Более того, мне кажется, в фотоманипуляции ими нужно пользоваться больше и чаще.
3D-объекты – это картинка с прозрачным фоном, созданная с помощью 3D-редактора. Иногда это обычные повседневные объекты, например, бутылки или машины, а иногда это что-то фэнтезийное, сказочное и т.д.
Подпись к картинке: Карета-тыква на сайтеEnvato Elements
Такие сайты, как Envato Elements, поддерживают работу с 3D-объектами. В некоторых уроках я достаточно много их использую (включая урок про карету Золушки).
Перед использованием 3D-кареты я предварительно подобрала в редакторе на сайте нужный угол и сохранила его в виде обычной картинки с прозрачным фоном в формате PSD или PNG.
После этого такую картинку можно вставить в композицию и подкорректировать детали.
Как выбрать фото для фотоманипуляции
Определившись с идеей, пора переходить к подбору картинок!
Я могу уверенно сказать, что потратила тысячи часов на поиски стоковых фото. Понимаю, что это звучит грустно. Но есть множество причин, почему вам следует настолько тщательно подходить к подбору фото.
Далеко не все стоковые фото одинаковые. Качество, размер, тематика, композиция могут разительно отличаться.
Где найти стоковые фото
Чтобы избежать проблем с нарушением авторских прав, используйте фото с бесплатных стоков, по премиальной подписке или свои собственные снимки. Большое количество качественных исходников за ежемесячную оплату можно найти на Envato Elements и других премиум-стоках.
Но если вы не хотите тратить средства на премиум-аккаунт, по ссылкам ниже можете узнать, где скачать бесплатные исходники.
- Как найти стоковые фотографии
- 30 сайтов для поиска бесплатных стоковых материалов
На данный момент сайты Unsplash и Pixabay – мои любимые. Pixabay – отличный бесплатный сток, но качество фото здесь разное. А на Unsplash можно найти отличные качественные снимки, добавленные самими пользователями.
Как искать стоковые фото
В процессе работы с фотоманипуляцией может случиться множество непредсказуемых ситуаций. Например, автор может удалить фото со стока, а порой очень сложно найти что-то подходящее.
Поэтому я поделюсь с вами несколькими советами по эффективному поиску фото на стоках:
Держите рядом список слов, описывающих идею.
Сперва просто добавляйте в закладки те фото, которые по вашему мнению могут подойти.
Попробуйте использовать одновременно несколько ключевых слов в поисковом запросе, чтобы максимально сузить тематику поиска
Например, по запросам «девушка», «женщина» и «ребенок» вам выдадут множество снимков в совершенно разных категориях.
Обращайте внимание на название/метки/тэги под фото.
Добавьте в закладки несколько запасных фото, чтобы при необходимости можно было быстро и легко что-то заменить.
Сразу скачивайте те снимки, которые вам на 100% нравятся и подходят.
И не загоняйте себя в рамки. Будьте гибкими!
Подпись к картинке: Посмотрите, как авторы отмечают свои фото. Стоковое фото с сайтаPixabay.
Использование своих фото
Также вы можете воспользоваться своими собственными снимками. Я очень это рекомендую!
В прошлом году я запустила личный проект по созданию автопортретов, в котором использовала свои фото. Это позволило мне не только улучшить свои навыки, но и развить в себе уверенность. Медленно, но четко, мои знания увеличивались, потому что для каждого фото я придумывала что-то новое.
Использование своих фото даст вам больший простор для творчества. А в наши дни хороший снимок можно сделать даже на обычном смартфоне, если немного повозиться с освещением.
Ниже по ссылкам можете посмотреть уроки, в которых я использовала собственные портреты:
- Создаем космическую манипуляцию в Фотошоп
- Делаем в Фотошоп коллаж Селфи в лесу
Многие новички недооценивают тщательный подбор стоковых фото. Конечно, вы можете взять и некачественные снимки, но это неизбежно отразиться на вашем коллаже. В таком случаем вам понадобятся хорошие знания Photoshop, чтобы максимально скрыть разницу в качестве.
Сохранение изображения
Сделайте невидимым фоновый слой, щелкнув на иконку в виде глаза напротив слоя. Находясь на группе слоев active в палитре слоев, нажмите Ctrl+Shift+Alt+E, чтобы создать новый слой, который включит в себя все видимые части изображения (в нашем случае это кнопки). Затем перейдите на этот слой. После этого, используя любой инструмент выделения, создайте область выделения вокруг изображения, как на рисунке:
Нажмите Ctrl+C, чтобы скопировать изображение и создайте новый документ:
Обратите внимание, что документ создается уже с теми размерами, которые включают в себя все видимые части скопированного изображения. После создания изображения, нажмите Ctrl+V, чтобы вставить наши кнопки
Сделайте невидимым фоновый слой и перейдите Save for Web. Сохраните файл под названием buttons.png.
Итак, мы сохранили наши кнопки. В итоге у нас получился так называемый «спрайт». Что такое спрайт? Это одно большое изображение, которое включает в себя все маленькие картинки, используемые в верстке страницы. Это изображение используется в качестве фона определенного блока с заданными размерами. Единственное отличие от обычных изображений, использующихся в качестве фона, спрайт имеет четкое позиционирование относительно координат XY. Подробнее в следующей части урока.
Верстка кнопки, используя стили CSS
Откройте Ваш html-файл. Сначала создадим ссылку:
<a href="сайт">Нажми меня!</a>
Вот что получается:
Как мы видим, ссылка не отформатирована и т.д. Теперь добавьте стили (в связи с тем, что ссылка у нас одна, да и это только пример, то оборачивать в тег div не обязательно):
a {
display: block; /*Говорим браузеру, чтобы он отображал ссылку, как блочный элемент*/
width:202px; /*Определяем ширину блока*/
height:47px; /*Определяем высоту блока*/
text-indent: -9999px; /*Отступ первой строки*/
background-position: left top; /*Выравниваем фон по левому (X) верхнему (Y) углу*/
background-repeat: no-repeat; /*Не "размножать" картинку*/
background-image: url(buttons.png); /*Спрайт*/
}
Обратите внимание на значение параметра text-indent. Такой большой отступ сделан для того, чтобы сам текст было не видно, а ссылка была
Текст оставляется для поисковых роботов, так сказать для получения SEO-эффекта )). Вот, что мы получим:
Теперь нам необходимо указать нашей ссылке, как вести себя при наведении и клике по ней. Для этого используются псевдоклассы :hover и :active. В этом шаге понадобится вооружиться калькулятором. Объясню почему: так как изображение у нас одно, то для подстановки определенной его части в качестве фона блока с ссылкой, нам необходимо указать точное число пикселей, на которое будем смещать изображение. Посмотрите на рисунок:
Мы создавали кнопку высотой 45px. После применения стиля Stroke, согласно параметрам у нас с каждой стороны кнопки прибавилось по 1px. Итого, получается, что высота кнопки стала 47px. Если учесть, что первоначальное смещение фона равно 0, то при наведении мыши на кнопку, нам необходимо сместить фон на 47px вверх, т.е. подставить в значение Y, которое отвечает за смещение по вертикали, параметра background-position -47px. Аналогично и с нажатием на кнопку, только уже смещаем не на 47px, а на 47px+47px=94px.
a:hover {
background-position: left -47px;
}
a:active {
background-position: left -94px;
}
Вот и все! Использование спрайтов выгодно тем, что обычно размер (вес) спрайта намного, в разы, меньше суммарного размера (веса) отдельных изображений. Но тут есть и негативный момент – чтобы подготовить спрайт, требуется большее количество времени. Решать Вам.
Добавление звука кнопке
Давайте добавим еще звук, чтобы он проигрывался при нажатии на кнопку. Для этого загрузите любой звуковой файл в библиотеку AdobeFlash.
Можно добавить обработчик события для кнопки, чтобы звук производился при нажатии, но мы сделаем проще, просто назначим кадру кнопки звук. Зайдите в объект Button, где расположены кадры состояния кнопки. Выберите кадр «Hit» , перейдите в свойства «properties» и в настройке «sound» , в параметре «Name» из списка выберите звук, который недавно загрузили в библиотеку.
Как только звук добавится кадру, то на временной шкале, кадр «hit» будет выглядеть следующим образом:
Почему же мы выбрали именно кадр «hit» , а не «down»? Дело в том, что обычно, если вы обратите внимание, звук при нажатии кнопки должен происходить не в момент самого нажатия, а в момент отпуска после нажатия, когда курсор находится на кнопке. Но вы можете добавить звук также к любому другому кадру
Это касается и обычных мувиклипов, а не только кнопок.
Скачать исходники по созданию анимированной кнопки в AdobeFlash на ActionScript 3.0 вы можете здесь.
Создание основной кнопки
Сначала нарисуем кнопку, добавим поверх нее текст. После выделим объекты и конвертируем их в символ-кнопку.
Теперь нужно войти в только что созданную кнопку и добавить ключевые кадры для состояния объекта. Чтобы сделать это выделите нужный кадр и нажмите правую кнопку мыши, чтобы вышло контекстное меню, в нем выберите пункт «Insert Keyframe» (создать ключевой кадр).
После того, как мы добавили ключевые кадры кнопке нужно изменить ее вид в некоторых кадрах, например, сделать светлее заливку. Так как при наведении курсора мыши будет происходить анимация, которая будет изменять вид кнопки, можно не изменять вид кнопки в кадре «Over», а изменить только в кадре «Down», который будет отображать кнопку при нажатии на нее.
Почему вам стоит использовать рисование в фотоманипуляции
Перед тем, как с головой погрузиться в процесс фотоманипуляции, я была художником. И я очень рада, что начала свой путь именно с этого, так как эти знания помогают мне во всех сферах творчества.
Но если вы новичок в рисовании, то советую изучить основы рисунка в контексте фотоманипуляции. В конце концов, гибкость ума и открытость к изучению нового – это ключ к развитию!
Свои навыки художника я применила в уроке Рисуем в фотошопе макияж в стиле Sugar Skull
Навыки работы с цифровой живописью дадут вам хорошую базу для проработки композиции, работе с цветом, освещением и другими деталями коллажа. Кроме того, с помощью рисования можно подчеркнуть какие-то детали на фото, добавить глубины или атмосферности.
В общем, если вы не можете создать иллюзию с помощью фото, тогда нарисуйте ее! Только не спешите и не забывайте о терпении!
Инструменты, которые нужны в работе
Собрать все части пазла помогут правильные инструменты.
Удивительно осознавать, что большинству, если не всем, инструментам в Adobe Photoshop можно найти применение в сфере фотоманипуляции. По крайней мере, я верю в это всем сердцем.
После 10 лет изучения программы и увеличивающегося в ней количества инструментов, я поняла, что чем больше инструментов ты знаешь, тем проще становится творческий процесс.
Основные инструменты
Давайте вернемся к основам. В Photoshop есть множество инструментов, подходящих для фотоманипуляций. Это мой личный список:
- Инструменты выделения;
- Кисть/Ластик;
- Слой-маски;
- Обтравочные маски;
- Режимы наложения;
- Корректирующие слои.
С помощью этих инструментов уже можно получить неплохой результат. Например, маски необходимы для удаления фона или других объектов. Изучение принципов работы с этими инструментами займет у вас не больше времени, чем поиск в Google примеров их использования.
Подпись к картинке: В этом уроке Создаём готический портрет в Фотошоп Jenny Le использовала маски для вырезания головы.
Учтите, что многие из этих инструментов – это совокупность различных функций и параметров. Например, корректирующими слоями называют Brightness/Contrast(Яркость/Контрастность), ColorBalance (Цветовой баланс), Levels (Уровни) и другие. Также существует множество режимов наложения, которые отвечают за то, как слои накладываются друг на друга. Уделите достаточно внимания изучению всех инструментов, не пожалеете!
Изучить основы можно с помощью этих уроков:
- Корректирующие слои
- Выделение объектов
- Почему слой-маска лучше, чем ластик
- Режимы наложения
- Кисть
Продвинутые инструменты
Освоив базовые инструменты, можете переходить к экспериментам с более сложными. Некоторые из них используются в фоторетуши, 3D и даже анимации.
Вот некоторые из них:
- 3D-инструменты;
- Шкала времени;
- Галерея фильтров;
- Пластика.
С помощью Пластики можно, например, очень сильно деформировать черты лица. Для этого есть специальные «умные» инструменты.
Обратите внимание, как я обработала лицо на фото ниже:
Самостоятельно определите для себя в каком режиме и темпе вам удобнее работе. Например, завтра займитесь изучением 3D-инструментов, а затем сразу примените полученные знания на практике.
Вот несколько уроков, которые помогут вам разобраться в теме:
- Создаем эффект кривых зеркал в Фотошоп
- Создаем эффект карандашного наброска на фотографии в Фотошоп
- Создаем металлический 3D-текст с шипами в Фотошоп
Как создать иллюзию глубины и движения с помощью размытия
В фотоманипуляции часто приходится хитрить, чтобы добиться реалистичности. Например, если мне нужно создать эффект расфокусировки, я четко разделяю задний, средний и передний планы.
Это можно сделать с помощью инструментов размытия в Photoshop. Позвольте им сделать всю магию за вас!
Недавно я закончила осенний коллаж. Для создания эффекта глубины, я заменила фон на осенние листья и слегка размыла его.
Затем на переднем плане я вставила размытый кленовый 3D-лист. Благодаря размытию, этот лист кажется ближе к зрителю, чем модель.
Подпись к картинке: С помощью нескольких стоковых фото я превратила обычную девушку в эльфа. Оригинальное фото находилось на Unsplash, но сейчас оно, к сожалению, недоступно.
Также это помогло сфокусировать внимание на главном объекте композиции. Подобные техники могут за считаные секунды преобразить вашу работу!. Так что, если вам нужно добавить размытие, используйте фильтры Filter– BlurGallery(Фильтр – Галерея размытия)
Подвигайте ползунки и подберите подходящий для вашей работы вариант размытия. Обратите внимание на разницу между незначительным и сильным уровнем размытия, как он выглядит на фото
Так что, если вам нужно добавить размытие, используйте фильтры Filter– BlurGallery(Фильтр – Галерея размытия). Подвигайте ползунки и подберите подходящий для вашей работы вариант размытия
Обратите внимание на разницу между незначительным и сильным уровнем размытия, как он выглядит на фото
Подпись к картинке: Разница между слабым и сильным размытием. Кленовый лист можно скачать наEnvato Elements.
Иногда я специально увеличиваю степень размытия, чтобы сразу определиться нужно ли оно. Это позволяет сузить варианты обработки и не тратить время на лишние действия.
В уроках ниже вы можете подробнее узнать об инструментах размытия:
- Создаем динамичный коллаж с падающими камнями в Фотошоп
- Создаем в Фотошоп сюрреалистическую сцену с повелителем молний