Гифки для фотошопа: Создание GIF-анимации в Photoshop | Руководства по Adobe Photoshop

Внимательно смотрим на этот свиток и видим, что под каждым «кадром» есть время (в данном случае установлено 0,17 секунд).

Если нет – продолжайте менять длительность показа кадров, пока не получите желаемого.

Вот и все!

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

На анимированном аватаре (картинке) пишем слова.

Открываем в Adobe ImageReady анимированный аватар: File (Файл) – Open (Открыть) — …

Данный гиф имеет всего 2 кадра (и 2 слоя). И нам надо-то всего добавить надпись. Делается это очень быстро.

Вот у нас остался всего один их кадров. «Настроим» его – мы хотим видеть первую картинку (Layer 1) и надпись – оставляем их включенными (глазик рядом со слоем включен), а «ненужный» пока слой отключаем (нажать левой кнопкой мыши).

Создаем его копию (выбрав Copy Frame в выпадающем списке или соответствующую кнопочку справа от «проигрывателя»).

Если вас все устраивает, то сохраняем полученный результат: File — SaveOptimizedAs…

Можно выключать на втором кадре слово – тогда «мерцать» будет и оно.

А если я хочу, чтоб при «мерцании» картинки постепенно добавлялись буквы слова ?

Разрезаем слово на отдельные буковки (копируем слой со словом и на каждом последующем слое стираем на одну букву меньше – первый слой – оставлена от слова первая буква, второй слой – 2 буквы и т.д. по полного слоя). Для этого хватаем слой со словом и тащим его на иконку внизу списка слоев – слой копируется и появляется в списке.

Теперь осталось создавать новые кадры и на каждом последующем включать слой с добавленной буквой. При этом попеременно вкл/выкл Layer 1 и Layer 2 (чтоб менялось не только слово, но и картинка).

Как наложить текст (или что-нибудь еще) поверх анимированных GIF-файлов в Photoshop

Автор Архипов Егор На чтение 2 мин. Просмотров 177 Опубликовано 21.06.2019

Иногда одного GIF недостаточно; иногда вы хотите добавить немного текста. Photoshop может справиться с этой задачей, но этот процесс не такой интуитивно понятный, как вы себе представляете, особенно если вы никогда раньше не редактировали анимацию в Photoshop.

Когда вы импортируете GIF в Photoshop, вы заметите, что каждый кадр отображается в «Слоях». Примечательно, что изменение порядка слоев не меняет порядок воспроизведения кадров. Что именно происходит?

Чтобы выяснить это, вам нужно открыть окно временной шкалы, которое вы найдете в меню «Окно»> «Временная шкала».

Это добавит новое окно, где вы можете увидеть кадры в вашем GIF, и даже нажать кнопку воспроизведения, чтобы просмотреть воспроизведение.

Все может стать немного запутанным, так что давайте рассмотрим. Для целей нашего упражнения …

• Окно Временная шкала позволяет вам контролировать порядок воспроизведения кадров и просматривать анимацию.
• Окно Слои определяет, какие рамки прозрачных наложений будут отображаться поверх. Например, наложение в верхней части списка будет отображаться во всех кадрах.

Имея доступ к этому, давайте продолжим и добавим наш оверлей. В этом примере мы добавим текст, поэтому создайте текстовое поле, как обычно.

Как всегда, ваш текст будет добавлен в новом слое. Идите и перетащите это наложение в верхнюю часть списка слоев.

Точно так же, ваш текстовый оверлей будет отображаться над всем вашим GIF.

Если это все, что вы хотите сделать, вы сделали! Но если вы хотите, чтобы наложение отображалось в определенный момент анимации, все становится немного сложнее. Перетащите текстовое поле в середину, чтобы понять, что я имею в виду.

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

Вероятно, это противоположно тому, что вы хотите, и единственный способ исправить это – переставить все ваши слои. Перетащите ранние рамки в верхнюю часть списка, поместите текст в середину.

Это позволяет вашему тексту появляться в середине GIF. Вы даже можете добавить еще немного текста, позже.

Возьми?

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

Когда вы будете готовы, я предлагаю вам нажать Файл> Сохранить для Web, чтобы экспортировать GIF; Вы получите большой контроль над качеством, что поможет уменьшить размер файла. Наслаждайтесь своим новым завершенным GIF!

Как экспортировать гиф из фотошопа

Оптимизация и сохранение изображений в формате GIF

После создания анимации в Фотошопе ее необходимо сохранить в одном из доступных форматов, одним из которых является GIF. Особенностью данного формата является то, что он предназначен для отображения (воспроизведения) в браузере.

Если Вас интересуют другие варианты сохранения анимации, то рекомендуем прочитать вот эту статью:

Урок: Как сохранить видео в Фотошопе

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

Урок: Создаем простую анимацию в Фотошопе

Сохранение GIF

Для начала повторим материал и ознакомимся с окном настроек сохранения. Открывается оно нажатием на пункт «Сохранить для Web» в меню «Файл».

Окно состоит из двух частей: блока предпросмотра

и блока настроек.

Блок предпросмотра

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

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

В левой верхней части блока находится небольшой набор инструментов. Мы будем пользоваться только «Рукой» и «Масштабом».

При помощи «Руки» можно перемещать изображение внутри выбранного окна. Выбор также производится данным инструментом. «Масштаб» выполняет одноименное действие. Приближать и удалять картинку можно и кнопками в нижней части блока.

Чуть ниже находится кнопка с надписью «Просмотр». Она открывает выбранный вариант в браузере по умолчанию.

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

Блок настроек

В данном блоке происходит настройка параметров изображения, рассмотрим его подробнее.

1. Цветовая схема. Данная настройка определяет, какая таблица индексированных цветов будет применена к изображению при оптимизации.
   • Перцепционная, а попросту «схема восприятия». При ее применении Фотошоп создает таблицу цветов, руководствуясь текущими оттенками изображения. По мнению разработчиков, эта таблица максимально приближена к тому, как человеческий глаз видит цвета. Плюс – наиболее приближенное к оригиналу изображение, цвета максимально сохранены.
   • Селективная схема похожа на предыдущую, но в ней преимущественно используются цвета, относящиеся к безопасным для web. Здесь также сделан упор на отображение оттенков, приближенных к исходным.
   • Адаптивная. В данном случае таблица создается из цветов, которые чаще встречаются в изображении.
   • Ограниченная. Состоит из 77 цветов, часть образцов которых заменены белым цветом в виде точки (зерна).
   • Заказная. При выборе этой схемы появляется возможность создать собственную палитру.
   • Черно-белое. В этой таблице используются только два цвета (черный и белый), также с использованием зернистости.
   • В градациях серого. Здесь применяются различные 84 уровня оттенков серого цвета.
   • MacOS и Windows. Данные таблицы составляются на основании особенностей отображения картинок в браузерах под управлением этих операционных систем.

   Вот несколько примеров применения схем.

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

2. Максимальное количество цветов в цветовой таблице.

   Количество оттенков в изображении напрямую влияет на его вес, а соответственно и на скорость загрузки в браузере. Чаще всего применяется значение 128, поскольку такая настройка почти не влияет на качество, при этом уменьшая вес гифки.

3. Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.

   Пример:

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

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

   Пример:

5. Прозрачность. Формат GIF поддерживает только абсолютно прозрачные, либо абсолютно непрозрачные пиксели.

   Этот параметр, без дополнительной подстройки, плохо отображает кривые линии, оставляя пиксельные лесенки.

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

6. Чересстрочно. Одна из самых полезных для Web настроек. В том случае, если файл имеет значительный вес, позволяет сразу показывать картинку на странице, по мере загрузки улучшая ее качество.

7. Преобразование sRGB помогает сохранить максимум оригинальных цветов изображения при сохранении.

Настройка «Дизеринг прозрачности» значительно ухудшает качество изображения, а о параметре «Потери» мы поговорим в практической части урока.

Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.

Практика

Цель оптимизации изображений для интернета – максимальное снижение веса файла при сохранении качества.

1. После обработки картинки переходим в меню «Файл – Сохранить для Web».
2. Выставляем режим просмотра «4 варианта».

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

   Настройки параметров следующие:

   • Цветовая схема «Селективная».
   • «Цвета» – 265.
   • «Дизеринг» – «Случайное», 100 %.
   • Убираем галку напротив параметра «Чересстрочное», поскольку конечный объем изображения будет довольно маленьким.
   • «Web-цвета» и «Потери» – ноль.

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

4. Переходим на картинку ниже только что настроенной. Попробуем ее оптимизировать.
   • Схему оставляем без изменений.
   • Количество цветов уменьшаем до 128.
   • Значение «Дизеринга» снижаем до 90%.
   • Web-цвета не трогаем, так как в данном случае это нам не поможет сохранить качество.

   Размер гифки снизился с 36,59 КБ до 26,85 КБ.

5. Поскольку на картинке уже присутствует некоторая зернистость и небольшие дефекты, попробуем увеличить «Потери». Данный параметр определяет допустимый уровень потери данных при сжатии GIF. Меняем значение на 8.

   Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.

   Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.

6. Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить».

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

   Обратите внимание, что существует возможность вместе с GIF создать и HTML документ, в который будет встроена наша картинка. Для этого лучше выбрать пустую папку.

   В результате получим страницу и папку с изображением.

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

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

Помогла ли вам эта статья?

Как создать анимированное GIF-изображение с помощью Photoshop

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

В этом руководстве по созданию анимированных GIF-файлов я использую Photoshop версии Creative Cloud 2015.

Как создать и сохранить GIF-анимацию в фотошопе (Photoshop)?

Ниже приведен пример анимированного GIF-изображения, которое можно создать, используя данное руководство:

Шаг 1. Загрузите изображения в Photoshop

Если у вас уже есть изображения …

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

Затем нажмите кнопку «Обзор» и выберите файлы, которые хотите использовать в создаваемом GIF-изображении. Нажмите «ОК».

После этого Photoshop создаст отдельный слой для каждого добавленного изображения. Далее перейдите к шагу 2.

Если у вас еще нет набора изображений …

Создайте каждый кадр анимированного GIF-изображения в виде отдельного слоя. Чтобы добавить новый слой, выберите Слой> Создать> Слой.

Чтобы дать название слою, перейдите в палитру «Слои», дважды кликните по имени слоя, используемому по умолчанию, и введите имя, которое хотите задать. Нажмите Enter, чтобы сохранить его.

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

Профессиональный совет: Если хотите объединить слои так, чтобы они отображались в GIF-изображении в одном кадре, включите видимость для слоев, нажав на «глаз» слева от названия каждого нужного слоя. Затем нажмите Shift + Command + Option + E (Mac) или Shift + Ctrl + Alt + E (Windows). Photoshop создаст новый слой, содержащий объединенный контент, его также необходимо будет переименовать.

Шаг 2. Откройте окно «Временная шкала»

Чтобы открыть окно «Временная шкала», перейдите в верхнее меню и выберите Окно> Шкала времени. Она позволяет задействовать различные слои в разные периоды времени, тем самым превращая статическое изображение в GIF-анимацию.

В нижней части экрана появится окно «Шкала времени». Вот как оно выглядит:

Шаг 3: В окне «Шкала времени» нажмите кнопку «Создать анимацию кадра»

Если этот пункт не выбран автоматически, выберите его в раскрывающемся меню.

Теперь окно «Шкала времени» должно выглядеть примерно так:

Шаг 4. Создайте новый слой для каждого кадра

Сначала выберите все слои, перейдя в главное меню, а затем в Выбрать> Все слои. Затем кликните по иконке меню, расположенной справа от временной шкалы.

В раскрывающемся меню выберите пункт «Создать новый слой для каждого нового кадра».

Шаг 5: Нажмите на ту же иконку меню и выберите пункт «Создать кадры из слоев»

В результате каждый слой будет использован как кадр GIF-изображения.

Шаг 6: Под каждым кадром задайте, как долго он должен отображаться до момента перехода к следующему

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

Шаг 7: В нижней части панели инструментов выберите, сколько раз необходимо воспроизводить анимацию

По умолчанию будет использоваться значение «Однократно». Кликните по пункту «Другое», если  хотите указать произвольное количество повторений.

Шаг 8: Просмотрите созданное GIF-изображение, кликнув по иконке воспроизведения

Шаг 9: Сохраните и экспортируйте GIF-изображение

Осталось понять как сохранить анимированный GIF в фотошопе  для последующего использования. Для этого нужно перейти в верхнее меню и выбрать в нем пункт Файл> Сохранить для Web.

Затем выберите тип GIF-файла, который вы хотите сохранить. Число рядом с обозначением GIF определяет, насколько точно цвета GIF-изображения будут соотноситься с оригинальными JPEG или PNG изображениями. Согласно документации Adobe, более высокий процент сглаживания дает большее количество цветов и большую детализацию. Но это увеличивает размер итогового файла.

Нажмите «Сохранить», чтобы сохранить созданный GIF-файл на компьютере. Теперь можно использовать это GIF-изображение в маркетинговых мероприятиях.

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

Как использовать GIF-изображения в маркетинге

В социальных сетях

Pinterest был первым, кто позволил использовал анимированные GIF-файлы, затем за ним последовал Twitter. А к лету 2015 года к ним присоединился Facebook. Затем Instagram изменил формат работы с Boomerang, который теперь позволяет пользователям снимать и делиться своими GIF-изображениями. На любом из этих социальных ресурсов анимированные GIF-файлы могут стать отличным способом выделиться из общей массы.

В электронных письмах

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

Используйте GIF-изображения, демонстрируя товары,  и анонсируя события. Ниже приведено GIF-изображение из рекламной кампании магазина женской одежды Ann Taylor LOFT. Они создали красивый эффект, похожий на дрожание, чтобы заинтриговать получателей электронных писем и заставить их «развернуть» свой подарок.

В постах на блоге

Например, вот простой, анимированный GIF-файл, созданный маркетологом Джинни Минео, который объясняет, что такое призыв к действию, размещенный в постах блога:

И, наконец, одна из наших самых любимых гифок: анимированное GIF-изображение из поста с рецептами домашней кулинарии.

Как вы будете использовать GIF-изображения в маркетинге? Расскажите об этом в комментариях.

Перевод статьи «How to Make an Animated GIF in Photoshop [Tutorial]» был подготовлен дружной командой проекта Сайтостроение от А до Я.

Экспорт изображений и анимированных файлов GIF

В этой статье рассматривается экспорт изображений и анимированные файлы GIF.

В Animate добавлены функции «Экспорт изображения» и «Экспортировать анимированный GIF», которые помогают без труда экспортировать ресурсы .png, jpeg, статические и анимированные файлы GIF в интерактивном режиме.

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

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

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

В Animate для сохранения изображений в форматах GIF, JPEG и PNG используется команда «Сохранить как». В зависимости от формата файла можно задать качество изображения, настроить прозрачность фона или обработку краев, отображение цветов и способ загрузки. Однако любые добавленные в файл веб-функции (например, ссылки и анимация) не сохраняются.

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

Диалоговое окно «Экспорт изображения» («Файл» > «Экспорт» > «Экспорт изображения» и «Файл» > «Экспорт» > «Экспортировать анимированный GIF»), чтобы выбрать параметры оптимизации и предварительно просмотреть оптимизированную монтажную область.

Чтобы выбрать вариант отображения, щелкните вкладку над областью изображения.

Отображение изображения без оптимизации.

Отображение изображения, к которому применены текущие настройки оптимизации.

Одновременное отображение двух вариантов изображения.

Если в диалоговом окне «Экспорт изображения» графический объект отображается не полностью, то с помощью инструмента «Рука» можно перемещать область просмотра, чтобы отобразить другую часть объекта. Для увеличения или уменьшения масштаба изображения используется инструмент «Масштаб».

• Чтобы перемещаться по изображению для отображения нужной его части, выберите инструмент «Рука») (или удерживайте клавишу «Пробел») и перетащите область просмотра.
• Чтобы увеличить масштаб, выберите инструмент «Масштаб»  и щелкните в области просмотра. Чтобы уменьшить масштаб, щелкните в области просмотра, удерживая клавишу «Alt» (Windows) или «Option» (Mac OS).

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

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

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

• В диалоговом окне «Экспорт изображения» в меню «Просмотр» выберите один из приведенных ниже параметров.

Гамма изображения не изменяется. Значение «Цвет на экране монитора» задано по умолчанию.

Старая версия Macintosh (без управления цветом)

Моделирует стандартную гамму 1.8, применявшуюся в Mac OS 10.5 и ранее.

Windows (без управления цветом)

Моделирует стандартную гамму 2.2, использованную в Windows и Mac OS 10.6 и позже.

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

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

1. Выберите «Файл» > «Экспорт изображения» или «Файл» > «Экспортировать анимированный GIF».

2. Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна: «Оптимизированный» или «2 варианта».

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

4. В меню «Наборы параметров» выберите предопределенные настройки оптимизации или укажите собственные. Доступность параметров зависит от выбранного формата файла.

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

   Примечание.

   Чтобы вернуть оптимизированное изображение в окне предварительного просмотра к исходному варианту, выберите изображение, затем в раскрывающемся меню «Наборы параметров» выберите пункт «Исходное».

6. Чтобы цвета оптимизированного изображения гарантированно выглядели одинаково в разных браузерах, преобразуйте цвета изображения в sRGB.

   Примечание.

   Метаданные вывода соответствуют стандартам Рабочей группы Метаданных поэтому некоторые метаданные JPEG хранятся форматах EXIF и IIM, а не XMP.

7. Выберите следующие параметры.

   Метаданные не сохранены (кроме уведомления об авторских правах в формате EXIF в файлах JPEG). Позволяет сохранить наименьший размер файла.

   Сохраняет сведения об авторских правах, условия использования, состояние авторских прав URL-адрес сведений об авторских правах.

   Авторские права и контактная информация

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

   Сохраняет все метаданные, кроме данных EXIF о параметрах настройки камеры, например, о выдержке, дате и времени, фокусном расстоянии, компенсации экспозиции, схемы измерения и использовании вспышки.

   Сохраняет в файл все метаданные.

8. Нажмите кнопку «Сохранить».

9. В диалоговом окне «Сохранить оптимизированный как» выполните описанные ниже действия и нажмите кнопку «Сохранить».

   1. Введите имя файла и выберите расположение для конечных файлов.

   2. В меню «Формат» укажите формат сохраняемых файлов: HTML-файлы и файлы изображения, только файлы изображения или только HTML-файлы.

   3. (Необязательно) Установите настройки вывода для HTML-файлов и файлов изображений.

   4. Если изображение содержит несколько фрагментов, выберите в меню «Фрагменты» параметры для сохранения фрагментов. «Все фрагменты» или «Выделенные фрагменты».

      Примечание.

      Чтобы сбросить настройки оптимизации и восстановить последнюю сохраненную версию, зажмите клавишу «Alt» (Windows) или «Option» (Mac OS), затем нажмите кнопку «Сбросить». Для использования этих же настроек при следующем открытии диалогового окна «Сохранить для Web» нажмите и удерживайте клавишу «Alt»/«Option», затем нажмите кнопку «Запомнить».

   Видеоролик о сохранении файлов для Интернета в Illustrator см. по адресу www.adobe.com/go/vid0063_ru.

Настройки оптимизации можно сохранить как именованный набор и применять их к другим изображениям. Сохраняемые настройки отображаются в раскрывающемся меню «Наборы параметров» вместе с предопределенными именованными настройками. При изменении именованного набора или предопределенного набора в меню «Наборы параметров» отображается значение «Безымянный».

1. Установите необходимые настройки оптимизации и выберите в меню палитры «Оптимизировать» пункт «Сохранить настройки».

2. Укажите имя для настроек и сохраните набор в соответствующей папке:

   (Windows XP) Document and Settings\[Имя пользователя]\Application Data\Adobe\AdobePhotoshop CS5\Optimized Settings

   (Windows Vista) Users\[Имя пользователя]\AppData\Roaming\Adobe\Adobe Photoshop CS5\Optimized Settings

   (Mac OS) Users/[Имя пользователя]/Library/Preferences/AdobePhotoshop CS5Settings/Optimized Settings

   (Windows XP) Document and Settings\[Имя пользователя]\Application Data\Adobe\AdobeIllustrator CS5 Settings\[Язык]\Save for Web Settings\Optimize

   (Windows Vista) Users\[Имя пользователя]\AppData\Roaming\Adobe\AdobeIllustrator CS5 Settings\[Язык]\Save for Web Settings\Optimize

   Пользователи (Mac OS)/[имя_пользователя]/Library/ApplicationSupport/Adobe/Adobe Illustrator CS5/[язык]/Save for Web Settings/Optimize

   Примечание.

   При сохранении настроек в другой папке они не будут отображаться в раскрывающемся меню «Наборы параметров».

3. Чтобы удалить стиль, выберите его в меню «Наборы параметров», затем в меню палитры «Оптимизировать» выберите пункт «Удалить настройки».

1. Выберите «Файл» > «Экспорт» > «Экспорт изображения» или «Файл» > «Экспорт» > «Экспортировать анимированный GIF».

2. Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна «Экспорт изображения» или «Экспортировать анимированный GIF»: «Оптимизированный» или «2 варианта». 

3. (Необязательно) Выберите фрагменты для оптимизации и нужный формат файла.

4. В меню «Оптимизировать» (справа от меню «Наборы параметров») выберите пункт «Оптимизировать по размеру файла».

5. Введите нужный размер файла.

6. Выберите параметр «Начать с».

   Используется текущий формат файла.

   Автовыбор формата GIF/JPEG

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

7. Выберите параметр «Использование», который определяет применение указанного размера файла только к текущему фрагменту, к каждому фрагменту в изображении или ко всем фрагментам. Нажмите кнопку «ОК».

В диалоговом окне «Экспорт изображения» можно изменить размер изображения до заданных размеров в пикселях или процентах от исходного размера.

1. В диалоговом окне «Экспорт изображения» щелкните вкладку «Размер изображения».

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

   Сохраняются текущие пропорции ширины и высоты.

   Примечание.

   К форматам SWF и SVG не применяется ни один из параметров палитры Размер изображения, за исключением параметра «Обрезать по монтажной области».

3. Введите новые размеры в пикселях или укажите процент от исходного изображения и нажмите кнопку «Применить».

Можно предварительно просмотреть оптимизированное изображение в любом веб-браузере, установленном в системе, через диалоговое окно «Экспортировать анимированный GIF» («Файл» > «Экспорт» > «Экспорт изображения» или «Файл» > «Экспорт» > «Экспортировать анимированный GIF»). Просмотр в браузере позволяет вывести изображение с сопроводительной подписью, где будет указан тип файла изображения, размеры в пикселях, размер файла, характеристики сжатия и другая информация в формате HTML.

• Для просмотра изображения в веб-браузере по умолчанию щелкните значок браузера в нижней части диалогового окна «Экспорт изображения».
• В диалоговом окне «Браузеры» можно найти все установленные браузеры и задать браузер по умолчанию для просмотра изображений.

7 советов по созданию GIF анимаций

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

Дизайн GIF изображений

1. Секретный ингредиент

2. Меньше цветов = больше веселья

3. Используйте размытие в движении (motion blur), если возможно

4. Будьте (отчасти) ленивыми

Экспорт GIF анимаций

5. Удалите кадры-дубликаты

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.

6. Меньше цветов

7. Измените параметр Lossy* (потери)

Ничего не изменилось! Помогите!

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

• gif
• оптимизация изображений

Создание gif картинки из нескольких фото. Урок фотошопа.

Создание gif картинки из нескольких фото. Урок фотошопа.

Многие из вас помнят мою статью о Salers, в которой все свои фотографии я показала вам в виде gif-картинок, в виде маленького слайд-шоу, которое, на мой взгляд гораздо интересней смотреть,  нежели длинный ряд фотографий. Из ваших комментариев я поняла, что многим понравилась такая презентация, поэтому решила написать урок фотошопа «Создание gif картинки из нескольких фото».

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

Не будем забегать вперед и начнем наш урок.

1. Я специально подготовила 4 фотографии и положила их в отдельную папку. Лучше, если эти фотографии будут одного размера, тогда вашу гифку будет сделать гораздо легче. Но я взяла фото разного размера, предварительно их уменьшив до 550 пк в ширину для широких фото, и 310 пк в ширину — для узких. Все фотографии получились одной высоты в 413 пк.

2. Открываем программу фотошоп и в ней меню — файл — открыть.

3. Ищем свою папку с подготовленными фото и кликаем левой кнопкой мыши на первую фотографию, зажимаем клавишу Shift, и кликаем по последней, тогда они выделяются все. Жмем ОТКРЫТЬ.

4. В вашем фотошопе открываются все фотографии. Начинаем создавать слои, которые нам понадобятся для анимации или создания gif картинки. Я открыла специально широкую фотографию. И она будет 1-ым слоем.

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

5. Чтобы создать второй слой, нам нужно кликнуть по иконке, на которую показывает стрелка. На втором слое мы будем располагать другую фотографию.

6. Топаем в наши фотографии, которые открыты рядом с первой, и выбираем узкую фотографию. Напоминаю, что это необязательно… С одинаковыми фотографиями легче работать.  Итак, находим нужную фотографию, идем в меню — выделение — выделить ВСЕ.

7. После этого вокруг картинки начнут бегать маленькие тире, это и есть выделение. Теперь идем в меню — редактирование — скопировать.

8. Возвращаемся к нашей первой фотографии, которая уже со слоями, идем в меню —  редактирование — вставить. И наша узенькая фотка вставляется на новый слой. Но она не может оставаться такой узкой. Нам нужно добавить фон под нее. Для этого кликаем по иконке (1), перетаскиваем слой под узкое фото, затем пипеткой (2) подбираем любой понравившийся вам цвет, кликнув курсором по фото. Я выбрала светло-зеленый. И заливаем новый слой, для чего мы активизируем инструмент заливка (3) и потом кликаем левой кнопкой мыши по рабочему полю фотографии. Обратите внимание, что в этот момент активным должен быть новый прозрачный фон. Активные слои выделяются синим цветом. После ваших действий прозрачный слой окрасится.

9. Теперь нам надо объединить два слоя (узкую фотографию и фон). Наступаем левой кнопко мыши на первый слой. Зажимаем клавишу Shift и кликаем по второму слою. Они выделились синим цветом. Идем в меню — слои — объединить слои.

10.  Получаем такую картинку.

11. Повторяем пункты 6 — 10 моего урока, чтобы создать слой с еще одной узкой фотографией. Он у меня слой 2. И создаем еще один новый прозрачный слой для размещения там последней широкой фотографии (слой 3).

12. Для этого выполняем пункты  урока 6, 7, 8. Все. Готово. Слои для нашей gif картинки мы создали.

13.  Можно начинать анимирование и с вашими слоями, но я решила создать подложку под нашу картинку. Для этого топаем в меню — изображение — размер холста.  Увеличиваем наш холст на 50 пк по ширине и высоте. Жмем ОК.

14. У нас получилось вот так.

15. Создаем новый слой (у меня слой 4), перетаскивам его в самый низ под все фотографии, вы можете сделать подложку того же цвета, что и фон в ваших узких фотографиях. Я выбрала цвет подложки немного темнее.

Оформляете вашу подложку любым способом. Надеюсь, что вы знаете, как выставляются параметры слоя, но если нет, то это просто. Наступаете на нужный слой и кликаете по нему дважды левой кнопкой мыши и у вас открывается окно с параметрами вашего слоя, а там отдельно открываете каждый отдельный параметр и вы применяете или изменяете его настройки.  Я применила эффект в параметрах слоя Внутренняя тень и Внутреннее свечение  с параметром слоя Умножение… Цвет тени немного темнее тона подложки. Но здесь я не берусь навязывать вам мое мнение. У вас есть свое видение. Пробуйте, меняйте настройки. Это не страшно. Всегда можно вернуться к первоначальному результату, для чего идете в меню — редактирование — вернуться назад.

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

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

16.  Настало время поставить свой логотип, особенно это важно, если ваша картинка будет располагаться на вашем сайте. Для обычных пользователей это можно не применять. Напомню, что я делала урок фотошопа о логотипе. Пробегусь вкратце: идем в меню — файл — поместить. Ищем свой файл PSD с подготовленным заранее логотипом, наступаем на него и кликаем  по кнопке Поместить.

17.  Перетаскиваем слой с логотипом на самый верх, как у меня. При необходимости увеличиваем логотип до нужного размера, для чего идем в меню — редактирование — масштабирование. С зажатой клавишей Shift растягиваем или уменьшаем логотип. Активируем инструмент «перемещение» (самый верхний инструмент со стрелкой и + в панели инструментов) и перемещаем логотип на нужное место.

Все подготовлено с созданию анимации.

17. В самом первом кадре анимации у вас должна быть открыта видимость со слоем подложки, первый слой с вашей фотографией ( в моем случае слой 0) и логотип (позиция 1). Для хорошего просмотра вашей фотографии устанавливаем время задержки 5 сек (позиция 2). После определения времени задержки и установки его в первом кадре, все последующие кадры будут с заданным временем 1 кадра, т.е. 5 сек в моем случае. Для создания второго кадра жмем на иконку, показанную на позиции 3.

18.  Во втором кадре меняем видимость слоя с первой картинки на вторую, так же, как показано на моем скрине.

Последующие кадры делаем также.  Главное запомните: 1 кадр — 1 фото, 2 кадр — 2 фото и так далее..

19. Все, мы выставили все кадры анимации. Остается только просмотреть наше творение.

20. Для просмотра изображения жмем на иконку,  знакомую нам у плееров (См. скрин).

21. Если вам понравилась ваша работа и вы не собираетесь ее редактировать, то нужно ее сохранить. Идем в меню — файл — сохранить для Web  и устройств и выставляете параметры сохранения как на моем скрине.

Безусловно, что можно увеличить количество цветов до 256, но это увеличит вес нашей картинки, а хостинг «не резиновый».  Сохраняйте вашу картинку и с удовольствием используйте ее для своих статей.  У вас должно получиться нечто подобное.

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

Надеюсь, что моя статья «Создание gif картинки из нескольких фото. Урок фотошопа.»  и другие мои уроки фотошопа вам пригодятся, и что вы сможете делать красивые gif картинки из ваших фотографий. Удачи вам и процветания, терпения и упорства! И у вас  все получится.

Похожие записи:

Понравилась статья? Поделись с друзьями!

Форма поддержки блога может не отображаться в браузере Internet Explorer!

Как создать GIF в Photoshop — Полное руководство (+ другие альтернативы Photoshop) — Fallon Travels

Как использовать GIF-файлы в контент-маркетинге

Загрузите свою GIF-анимацию в любое место в Интернете, и она должна легко воспроизводиться большинство случаев. Некоторыми примерами распространенных маркетинговых стратегий GIF являются социальные сети, информационные бюллетени и кампании по электронной почте, сообщения в блогах и контент веб-сайтов.

использовать анимированные GIF-файлы в социальных сетях:

Анимированные GIF-файлы — отличный способ повысить вашу вовлеченность в различных социальных сетях.Однако важно отметить, что некоторые платформы не поддерживают формат файлов GIF. Например, (в настоящее время) Instagram не позволяет загружать GIF-анимацию — только файлы MP4 с точки зрения видеоконтента. Однако GIF-файлы будут работать на большинстве онлайн-платформ.

Следующие платформы социальных сетей действительно принимают загрузки в формате GIF :

Следующие платформы социальных сетей НЕ принимают загрузки в формате GIF :

Примечание. Хотя Instagram в настоящее время не принимает формат GIF, имеет формат . несколько функций GIF уже встроены в приложение.К ним относятся готовые GIF-анимации для Instagram Stories, а также Boomerang, который позволяет создавать и делиться своими собственными GIF-файлами.

Хотите узнать больше об Instagram Stories, GIF-стикерах и получить несколько бесплатных вкусностей, пока вы это делаете ?! Возможно, вас заинтересует это сообщение в блоге:

используйте анимированные гифки В вашем сообщении в блоге:

Мир блогов, кажется, становится все более и более насыщенным с каждым днем. Так почему бы не выиграть у конкурентов, добавив анимированный контент в формате GIF во все сообщения в блоге? Некоторые примеры могут включать:

• Изображение обложки вашего сообщения в блоге

• Анимированная инфографика вашего сообщения в блоге

• Анимированный шаблон с призывом к действию (CTA)

Используйте анимированные GIF-файлы в ваш информационный бюллетень по электронной почте:

Вы можете прикреплять анимированные GIF-изображения к своим кампаниям по электронной почте, и они будут отображаться так же, как обычное неподвижное изображение.Так почему бы не повеселиться со своей электронной почтой? Добавление GIF-анимации к вашим информационным бюллетеням не только поможет вам выделиться в многолюдном пространстве с уникальным видеоконтентом, но также повысит шансы вашего бренда на то, чтобы его запомнили читатели. Некоторые способы, которыми бренды в настоящее время используют GIF-анимацию в своих информационных бюллетенях по электронной почте, включают:

• Дисплей продукта

• Объявление о предстоящем мероприятии

• Предложение о продаже или скидке

• Описание продукта, которое может быть слишком сложно объяснить в словах.Например, сложный технический продукт, который можно было бы лучше описать с помощью визуального контента

Создание легких анимированных GIF-файлов в Photoshop

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

Шаг 1: Исходный фильм

Этот фильм о стремительной воде любезно предоставлен Луисом Руисом из Pexels, и вы можете посмотреть (и скачать) оригинальный фильм здесь.Откройте его в Photoshop и используйте «Окно»> «Временная шкала», чтобы открыть представление временной шкалы. Вы увидите, что это видео длится 20 секунд. Вам не нужно все это целиком; Вы можете почувствовать аромат движения воды всего за четыре секунды.