Как сохранить эффект в фотошопе
Большинство пользователей привыкли воспринимать Adobe Photoshop как программу, в которой можно редактировать изображения или рисовать статичные картинки. Однако с помощью этого редактора можно делать и анимацию. В этом материале мы расскажем, как создать GIF-анимацию двумя максимально простыми способами.
Покадровая анимация
Покадровая анимация — один из самых легких способов работы с анимацией в Photoshop . Однако стоит быть готовыми к тому, что этот несложный процесс окажется довольно долгим и трудоемким.
Для начала нужно создать новый документ, а затем зайти в меню Window («Окно») и установить галочку напротив пункта Timeline («Шкала времени») . После этого появится окошко, напоминающее видеоредактор. В нем будут отображены все слои, которые на данный момент открыты в документе.
Далее нужно кликнуть на кнопку Create Video Timeline («Создать шкалу времени для видео») , перейти в меню Layers («Слои») , выбрать пункт Video Layers («Слои видео») и создать пустой видеослой.
Теперь ваша задача — нарисовать анимацию покадрово. Это можно делать с нуля либо рисовать поверх готовой картинки, открытой в отдельном слое.
Берем кисть и создаем первый кадр анимации. Далее передвигаем ползунок времени и рисуем содержимое следующего кадра. Чтобы видеть свои действия на предыдущем этапе, нужно кликнуть по меню в правом верхнем углу и выбрать Enable Onion Skins («Перейти в режим кальки») .
Из таких простых, но монотонных действий состоит процесс создания покадровой анимации: шаг за шагом вы должны добавлять очередной элемент будущей движущейся картинки. В данном случае в каждом новом кадре мы рисуем цветной кружок.
Чтобы сделать плавную анимацию, поделите изображение на максимально короткие отрезки. Скорость каждого кадра можно изменить, кликнув по нему правой кнопкой мыши.
Когда основная работа будет закончена, можно поработать над эффектами. Например, добавить на шкалу времени слой с надписью или картинкой. Если понадобится изменить цвет анимации, делайте это так же, как у обычных слоев. Дважды кликните по слою, выберите команду Color Overlay («Наложение цвета»), возьмите нужный цвет, скопируйте стиль слоя и вклейте его на все остальные слои.
В конце нужно сохранить полученную анимацию как видео. Для этого перейдите в меню File («Файл») → Export («Экспортировать») → Render Video («Экспорт видео»). Если нужен формат GIF, выбираем пункт Save for Web («Сохранить для Web»). В открывшемся окошке можно поменять настройки, а затем нажать Save («Сохранить»).
Анимация при помощи «Марионеточной деформации»
GIF-анимацию в Photoshop можно создавать при помощи инструмента Puppet Warp («Марионеточная деформация») . Этот способ гораздо быстрей, чем рисовать анимацию вручную. Вы можете просто взять фотографию или картинку в формате PNG из интернета или личных архивов. Главное — проследить, чтобы у изображения не было фона. Если он все-таки есть, объект придется вырезать.
Итак, откройте изображение в Photoshop и перейдите в панель слоев. Кликните правой кнопкой мыши по созданному нулевому слою и преобразуйте его в смарт-объект. Если собираетесь использовать какие-то эффекты, например, тень или обводку, — примените их с самого первого кадра. Это будет гораздо проще и быстрее, чем позже добавлять что-то на все созданные слои. Далее в том же меню кликните Duplicate Layer («Создать дубликат слоя»).
Потом жмем на меню Edit («Редактирование») и выбираем пункт «Марионеточная деформация». В этот момент картинка покроется сеткой, состоящей из треугольников, а значок курсора превратится в кнопку.
Перед тем, как оживить нашу картинку, нужно «приколоть» ее с помощью кнопок и оставить свободной только те части, которые будут двигаться на GIF-анимации.
Теперь начинается самое интересное: левой кнопкой мыши зажимаем ту часть картинки, которая должна находиться в движении, и слегка тянем в нужную сторону. Затем отпускаем мышь и жмем Enter.
Чтобы анимация была плавной и реалистичной, придется двигать картинку постепенно. Для этого нужно несколько раз повторить весь процесс: копируем слой → двигаем изображение → жмем Enter. В нашем случае понадобилось создать 14 слоев, чтобы «поднять» ухо персонажа и вернуть его в исходное положение.
После того, как вы закончили двигать картинку, нужно выделить все слои, кликнуть по ним правой кнопкой мыши и нажать Rasterize («Растрировать слой») .
Далее начинается работа со «Шкалой времени». Кликаем на Create Frame Animation («Создать анимацию кадра»), переходим в меню, расположенное в правом верхнем углу, и выбираем команду Make Frames From Layers («Создать кадры из слоев»).
Итак, все слои собраны на одной шкале. Если щелкать по ним поочередно, можно увидеть, как картинка движется по заданной траектории. Далее нужно установить время для каждого движения и способ воспроизведения (однократно, постоянно или несколько раз). Можете выбрать из предложенных вариантов или добавить свои параметры. Чтобы посмотреть, как все работает, жмем кнопку воспроизведения.
Если все устраивает — сохраняем нашу анимацию в формате GIF. Для этого в меню «Файл» выбираем пункт «Сохранить для Web».
Теперь вы умеете делать анимацию в Photoshop двумя простыми и доступными способами. Их можно применять при создании баннеров или логотипов, которые помогут украсить любую веб-страницу и сделать ее более запоминающейся.
Если вы всерьез заинтересовались анимацией и дизайном — присмотритесь к профессии веб-дизайнера. Освоив ее, вы будете на профессиональном уровне создавать анимацию для сайтов и приложений, а при желании сможете углубить знания и получить специализацию моушн-дизайнера. Сделать первый шаг к интересной и востребованной профессии поможет курс «Веб-дизайн с 0 до PRO» от Skillbox.
В этом уроке мы узнаем, как правильно работать с инструментом Photoshop "Сохранить для Web" (Save for Web), т.е. как сохранять подготовленную и уменьшенную фотографию или изображение для загрузки на веб-сайте или отправки по электронной почте.
Надо отметить, что технология не изменилась с версии Photoshop CS4 до версии CC (Creative Cloud), так что данный урок подойдёт ко всем этим версиям.
Об уменьшении размера изображения в Photoshop для версий CS6 и ниже рассказывается здесь, а для как изменять размер картинки в новом Photoshop CC - здесь.
Я буду работать с этой фотографией:
Итак мы изменили размер изображения так. как нам надо. Теперь пришло время для его оптимизации и сохранения в одном из популярных графических форматов, чаще всего это JPG(JPEG) или PNG. Теперь нажмите на вкладку главного меню "Файл" (File) и выберите из списка пункт "Сохранить для Web. " (Save For Web & Devices) или нажмите мою любимою комбинацию клавиш Ctrl+Alt+Shift+S:
Это действие открывает в Photoshop большое диалоговое окно "Сохранить для Web", в котором область предварительного просмотра занимает большую часть пространства.
В левом верхнем углу области предварительного просмотра вы увидите серию из четырех вкладок. По умолчанию, выбрана вкладка "Оптимизация" (Optimized), которая означает, что вы не видите исходное изображение. Вместо этого, показан предварительный просмотр того, как изображение выглядит с текущими настройками оптимизации (которые мы рассмотрим чуть позже):
Как советуют веб-дизайнеры, лучше воспользоваться другой вкладкой, где в окне предпросмотра показываются сразу два изображения, оригинальное и оптимизированное, это вкладка "2 варианта" (2-Up):
При активной вкладке "2 варианта", теперь мы видим сразу два изображение, оригинальную версию слева и оптимизированную версию справа (если Ваша картинка имеет альбомную ориентацию, т.е. её ширина больше, чем высота, то тогда картинки будут показываться одна над другой):
Формат файла
С правой стороны диалогового окна находятся опции оптимизации изображения.
Первое, что нужно сделать, это выбрать правильный формат файла для нашего изображения. Если Вы открываете это окно в первый раз, по умолчанию установлен формат GIF. формат выбранного файла в верхней части (непосредственно под словом "Preset"). GIF в некоторых случаях используется для сохранения веб-графики, но для моей фотографии лучше подойдёт формат JPEG, поэтому я изменю GIF на JPEG:
Качество сжатия изображения
Непосредственно под опцией формата находится варианты выбора качества сжатия изображения, т.е. выходного качества самой картинки.
Мы можем выбрать из предварительно заданные параметров качества (низкое, среднее, высокое и очень высокое, и наилучшее, в англ. - Low, Medium, High, Very High, и Maximum) в выпадающем списке слева, либо можем ввести определённое значения качества в процентах справа.
Хотя довольно таки заманчиво задать максимальное качество для наших фотографий, оптимизация для интернета означает, что мы должны делать размер файла в мегабайтах как можно меньше, что означает поиск золотой середины между качеством изображения и размером файла. Значение качества "Высокое" почти всегда является оптимальным выбором, оно даёт нам приемлемое качество изображения при относительно небольшом размере файла. Выбор значения "Высокое" автоматически устанавливает значение качества на 60%:
Как только вы выбрали значение качества, убедитесь, что опция "Оптимизация" (Optimized) у Вас включена, т.к. она может помочь ещё несколько уменьшить размер файла. Опции "Прогрессивный" (Progressive) и "Встроенный (цветовой) профиль" (Embed Color Profile) включать не обязательно, т.к. всё-равно большинство веб-браузеров не поддерживают цветовые профили:
Цветовое пространство
Наконец, включите опцию "Преобразовать в sRGB" (Convert to sRGB), если она ещё не активна. Это позволит убедиться в том, что фотография сохраняется в цветовом пространстве sRGB, что, проще говоря, означает, что цвета на фотографии будут корректно отображаться на веб-сайте:
Размер изображения
Диалоговое окно также дает нам возможность изменить линейный размер изображения. Я рекомендую изменять размер изображения заранее, перед включением диалогового окна "Сохранением для Web", чтобы при сохранении для Web линейные размеры в пикселях были уже готовыми. Особенно это актуально для последней версии Photoshop CC с его
новым диалоговым окном "Размер изображения". Об изменении размера изображения в Photoshop CC рассказывается здесь, а в версиях CS6 и ниже - здесь.
Сравнение исходных и оптимизированных размеров файла
На данный момент, мы сделали все, что нужно, для оптимизации файла для Web, и теперь давайте посмотрим на размер файла в байтах в исходной и оптимизированной версиях. В моем случае, размер исходной фотографии (слева) был равен колоссальному для интернета значению - 1,29Mb что слишком велико для пользователей даже со средней скоростью интернета, а оптимизированная версия (справа), которая выглядит почти так же хорошо, как и оригинал, получилась всего 41,85 Kb :
Сохранение изображения
Чтобы сохранить оптимизированную версию Вашей фотографии, нажмите кнопку "Сохранить" (Save) в нижней части диалогового окна. Photoshop откроет новое диалоговое окно "Сохранить оптимизированный как" (Save Optimized As), которое позволяет при необходимости переименовать изображение, а также выбрать нужную папку на жёстком диске для сохранения. Когда закончите, нажмите кнопку "Сохранить", чтобы сохранить изображение и выйти из диалогового окна:
Ну вот, собственно, и всё. Фото теперь полностью оптимизировано и готово к оправке по электронной почте либо для размещения на сайте.
В графическом редакторе Photoshop начиная с версии CS2 имеется возможность массового сохранения слоёв как отдельные изображения в отдельные файлы.
Реализуется это с помощью готовых сценариев Photoshop через вкладку главного меню Файл (File). Интерфейс самого диалогового окна для сохранения слоёв практически одинаков во всех версиях, единственное, что нужно помнить, это то, что пути запуска сценария меняются в зависимости от версий.
Итак, запуск сценария в версиях Photoshop от CS2 до CS6 и до ранних СС:
Файл --> Сценарии --> Экспорт слоев в файлы (File --> Scripts --> Export Layers to Files)
Начиная с Photoshop СС 2015.5 и выше:
Файл --> Экспортировать --> Слои в файлы (File --> Export --> Layers to Files)
Примечание. Для запуска сценария у вас должен быть открыт документ с хотя бы одним слоем со включённой видимостью, иначе строка "Слои в файлы" будет неактивна.
Вот как выглядит путь запуска сценария на официальной русскоязычной версии Adobe Photoshop 2017:
Открываем диалоговое окно сохранения слоёв в файлы.
Открывается диалоговое окно, как я уже говорил, интерфейс, начиная с версии CS2 и по сегодняшний день (актуальна CC 2017) остался практически неизменным, меняется только фоновый цвет:
Диалоговое окно сохранения слоёв как файлы.
В начале, в разделе "Выходная папка" (Destination), нажав кнопку "Обзор" (Browse…), выбираете место сохранения файлов.
Если хотите, чтобы у файлов был префикс, введите его в соответствующее поле ввода. Если не хотите, очистите это поле, по умолчанию оно заполнено названием открытого в Photoshop документа. Названия файлов формируются как префикс_порядковый номер в стеке слоёв_имя слоя.
Опция "Включить ICC-профиль" актуальна, если в документе Photoshop вы используете определённый цветовой профиль, и хотите, чтобы файлы его унаследовали.
Далее выбираем тип сохраняемого изображения. Это может быть JPG, PNG-8, PNG-24, PSD, BMP и т.д..
После выполнения всех настроек нажимаем кнопку "Выполнить" (Run) и процесс сохранения слоёв в файлы начнётся.
Можно использовать команды сохранения в Photoshop для сохранения изменений в документов в зависимости от формата, который необходимо применить, или от того, как планируется использовать документ в дальнейшем.
Чтобы сохранить файл, откройте меню Файл и выберите любую из команд групп Сохранить : Сохранить , Сохранить как или Сохранить копию . При выборе команды сохранения открывается диалог Сохранение на компьютере (Сохранение в облачные документы) . Можно в любой момент переключиться на другие доступные варианты сохранения в поле выбора облачных документов — Сохранить в облачные документы и Сохранить на компьютер .
Установите флажок Больше не показывать , чтобы больше не видеть окно Сохранение на компьютере или в облачных документах . Photoshop запоминает поведение сохранения, выбранное в последнем сеансе, и интуитивно обеспечивает то же поведение при следующем сохранении документа.
Сохранить
Чтобы сохранить изменения в документе в текущем формате, выберите Файл > Сохранить .
Сохранить как
Чтобы сохранить файл под другим именем, в другом местоположении или формате, выполните следующие действия.
Выберите Файл > Сохранить как .
Выберите формат в меню Типы файлов .
В диалоговом окне «Сохранить как. » выберите параметры сохранения.Чтобы копировать изображение, не сохраняя его на жесткий диск, используйте команду Создать дубликат . Чтобы сохранить временную версию изображения в памяти, используйте панель История для создания снимка.
Сохранить копию
Если требуется сохранить многослойный файл как простой файл, необходимо создать новую версию документа. Кроме того, если не отображается нужный формат, например JPEG или PNG, используйте функцию «Сохранить копию», чтобы выбрать любой формат для создания законсервированной копии документа.
Для этого выберите:
- «Файл» > «Сохранить копию»
- Кнопка Сохранить копию под диалоговым окном «Сохранить как»
Начиная с Photoshop версии 22.4.2 вы можете вернуться к устаревшему рабочему процессу «Сохранить как» с помощью следующих параметров установок.
Включить устаревший процесс «Сохранить как»
При желании можно вернуться к устаревшему рабочему процессу Сохранить как и (или) не добавлять слово «копия» при сохранении в качестве копии.
Чтобы найти эти новые параметры установок, перейдите к:
- (macOS) Photoshop > Установки > Обработка файлов > Параметры сохранения файла
- (Windows) Редактирование > Установки > Обработка файлов > Параметры сохранения файла
- macOS: при использовании параметров Сохранить как и Сохранить копию теперь будет открываться устаревшее диалоговое окно сохранения с параметрами Сохранить как , доступными в Photoshop 22.3 и более ранних версий, в том числе с флажком Сохранить копию . Если включен устаревший рабочий процесс, при использовании параметра «Сохранить копию» для сохранения файла Photoshop флажок Как копию будет включен по умолчанию. При выборе параметра Включить устаревший процесс «Сохранить как» в установках в macOS отобразится диалоговое окно, предупреждающее вас о риске перезаписи файлов, возникающем при использовании устаревшего рабочего процесса Сохранить как , так как слово «копия» больше не будет интерактивно присоединяться к имени файла. Из-за этого при выборе установки Включить устаревший процесс «Сохранить как» установка Не добавлять слово «копия» к имени файла при сохранении копии будет включена автоматически и ее невозможно будет отключить, если установка Включить устаревший процесс «Сохранить как» не отключена.
- Windows: установка Включить устаревший рабочий процессс «Сохранить как» использует первоначальный режим сохранения, в том числе интерактивно добавляет слово "копия" к именам файлов, когда это необходимо. Таким образом, вы не увидите предупреждение при включение устаревших установок в Windows. Кроме того, поскольку устаревший рабочий процесс Сохранить как может добавлять слово «копия» к именам файлов, вы не увидите предупреждающее оповещение, а параметр установки Не добавлять слово «копия» к имени файла при сохранении копии можно включать или отключать по необходимости.
Не добавлять слово «копия» к имени файла при сохранении копии
macOS и Windows: установка Не добавлять слово «копия» к имени файла при сохранении копии управляет тем, будет ли присоединяться ли слово «копия» к имени файла документа Photoshop в ситуациях, когда для пользователя существует риск перезаписи файлов. Выбрав эту установку, термин "копия" больше не будет автоматически присоединяться к именам файлов при сохранении в качестве копии, как в новом интерфейсе Сохранить копию , так и в устаревшем процессе Сохранить как (macOS и Windows).
Кроме того, когда вы включите эту установку, будут отображены диалоговые окна с оповещениями, предупреждающими вас о потенциальном риске перезаписи файла Photoshop, так как в имени файла в macOS и Windows отсутствует слово «копия».
Можно задать различные параметры сохранения файла в диалоговых окнах Сохранить как и Сохранить копию . Доступность параметров зависит от характеристик сохраняемого документа и выбранного формата.
Сохраняет информацию об альфа-канале в данных изображения. Отключение этого параметра удаляет альфа-каналы из сохраненного изображения.
Сохраняет все слои в изображении. Если этот параметр отключен или недоступен, все видимые слои сводятся или совмещаются (в зависимости от выбранного формата).
Сохраняет комментарии к изображению.
Сохраняет информацию о плашечном канале в данных изображения. Отключение этого параметра удаляет плашечные каналы из сохраненного изображения.
Использовать параметры цветопробы, ICC-профиль (Windows) или встроенный профиль (Mac OS)
Создает документ с цветовым профилем.
Следующие параметры просмотра изображения и расширения файла доступны только в случае, если значение «По заказу» выбрано для параметров «Просмотры изображений» и «Добавлять расширение» (в Mac OS) в диалоговом окне «Установки обработки файлов».
Сохраняет данные миниатюры для файла.
Для расширения файла используйте нижний регистр (в Windows)
Обеспечивает начертание расширения файла строчными буквами.
Параметры просмотра изображений (Mac OS)
Сохраняет данные миниатюры для файла. Миниатюры отображаются в диалоговом окне «Открыть».
Параметры расширений файлов (Mac OS)
Задает формат для расширений файлов. Установите флажки «Добавить», чтобы добавить расширение формата к имени файла, и «Строчными буквами», чтобы расширение отображалось строчными буквами.
Начиная с версии Photoshop CC 2015 команда «Файл» > «Сохранить для Web» перемещена в пункт «Файл» > «Экспорт» > «Сохранить для Web» (старая версия) вместе с новыми параметрами экспорта. Дополнительные сведения об этих новых параметрах экспорта см. в разделе Экспорт монтажных областей, слоев и других ресурсов.
Читайте также: