Анимация картинки. Как вставить гифку. Гиф для фотошопа


Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

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

Вот одна из анимашек которую я сделала в PixMix за 5 минут

 

Как начать пользоваться онлайн фоторедактором PixMix

Итак, идём на сервис фоторедактора Picmix и регистрируемся там – это для того, чтобы у вас было больше возможностей. Например, сохранять свои творения прямо в PicMix и делиться с друзьями. А ещё сервис позволяет убирать с картинок свой логотип абсолютно бесплатно! В отличии от других фоторедакторов, которые либо не дают убирать свой логотип с картинки, либо делают это за деньги.

 

(Чтобы сервис у вас работал в браузере нужно установить  Flash Player, который скорее всего у вас уже установлен, а если нет, то браузер об это вам сообщит и отправит по ссылке на сайт, где можно это сделать)

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

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

После того, как заполните все нужные строчки, и подтвердите регистрацию нажатием, вас тут же пригласят войти. Жмите на зелёную кнопку «Создать PICMIX» и жмите на кнопку «Фон» в левом верхнем углу.

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

 

Выбирайте на компьютере картинку и жмите «Открыть».

 

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

Наверху вы увидите 4 кнопочки с эффектами

  • Зеркальное отображение
  • Сепия
  • Негатив
  • Чёрно-белый эффект

Так же слева там есть инструменты:

  1. Заливка – заливает фон, но по-моему удобнее пользоваться кисточкой, которая размещена под значком заливки. Если нужен фон, то просто сделайте по-больше размер.
  2. Рука – предназначена для того, чтобы двигать gif изображения, которые мы будем добавлять на наш фон. Но она почему то не работает.
  3. Текст – это понятно, будем писать красивые надписи.
  4. Стирательная резинка – убирает лишние детали с будущей красивой анимашки.
  5. Уменьшение картинки
  6. Увеличение изображения
  7. Красный крестик – очистить всё, кроме фона
  8. Сохранить созданную анимационную картинку

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

Теперь об инструментах онлайн фоторедактора справа.

Там размещены так называемые марки или штампы. Так называются на сервисе PicMix анимированные детали, которые мы будем добавлять на фон и таким образом оживлять наши картинки.

Марки разделены по разделам, в выпадающем меню написаны названия на французском языке. Вы можете переводить названия и выбирать нужные наборы штампов.

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

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

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

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

 

Картиночки анимашки, которые вы будете размещать на картинке — не двигаются и не уменьшаются, они просто замостятся, то есть рядами поместятся на фоне. И чтобы оставить одну или несколько в нужных местах, вам надо будет просто подтереть их инструментом «Стирательная резинка».

Вы можете написать блестящий или однотонный текст с обводкой на своём анимированном шедевре. Для этого надо кликнуть на букву «T» (жёлтая стрелочка). Написать текст (синяя стрелка). Наверху выбрать стиль шрифта (Бирюзовая стрела) и обводку (сиреневая) или без обводки (красная).

Выбрать чернила слева (то есть заливку текста), когда вы нажимаете на текст в онлайн фоторедакторе автоматически выставляется раздел «Чернила»

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

Жмите на слово «Хорошо» и увидите текст на своей анимационной картинке.

Вокруг текста вы увидите прямоугольную рамку и инструменты в каждом углу этой рамки:

  1. Крестик – удалить
  2. Стрелочка с двумя наконечниками – сделать надпись больше или меньше
  3. Стрелочка закруглённая – наклонить в одну, либо в другую сторону
  4. Прямоугольник в кружке – размножение текста

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

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

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

Там же вы можете выбрать скорость анимации. По умолчанию там выставлена средняя.

А ещё вам надо нажать на чикбокс «Переслать этот PicMix». Иначе вы не сможете поделиться своей gif анимацией в соцсетях прямо с сервисе фоторедактора, не закачивая их на другой web ресурс (свой сайт например).

И в заключении надо нажать на зелёную кнопку «Реестр».

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

После этого фоторедактор PicMix сгенерирует вашу блестящую анимированную картинку. И под своей анимационной картинкой вы увидите вот такие функции:

  • Поделиться в соцсети фейсбук
  • Скачать эту картинку к себе на компьютер

В этом случае картинка сохранится к вам на компьютер и появится в социальной сети Facebook с логотипом PicMix. Как воспользоваться созданной анимированной картинкой без логотипа, читайте здесь.

  • Почта Мой PicMix – здесь можно менять скорость анимации
  • Экспорт в сайте – здесь вам предоставят коды для установки на web ресурс
  • Добавить в избранное

А ещё вы сможете добавить использованные в этой анимационной картинке блестяшки к себе в избранное. И они у вас появятся в разделе «Мои любимые марки» и вы их увидите когда начнёте создавать новую gif картинку. Для этого наводим на марку мышку и в выпавшем окне кликаем на слова «Добавить в избранное».

СОЗДАНИЕ GIF АНИМАЦИИ ОНЛАЙН БЕЗ ФОТОШОПА. ФОТОРЕДАКТОР PICMIX.

 

 

Марки вы можете так же добавить в избранное в разделе STAMPS на главном меню сайта ПикМикс.

Но вы ведь наверняка хотите поделиться и скачать на компьютер свой анимированный шедевр на компьютер без логотипа PicMix. Поэтому мы идём в раздел меню сайта «Мой счёт»

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

Далее «Мой PicMix»

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

Когда нас перекинет на другую страницу — нажимаем на слова «Версия без логотипа»

 

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

И наша анимированная картинка открывается в новом окне.

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

Или поделиться gif картинкой в социальных сетях. Для этого надо скопировать её URL и поделиться им в социальной сети.

Скорее всего на Фейсбуке картинка будет прочитана не сразу, а сначала появится вот такая публикация

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

Не спешите нажимать на слово «Опубликовать». Обновите страницу и поставьте ссылку туда ещё раз. Если опять появится то же самое, то опять обновите страницу.  И только когда появится ваша красавица анимированная картинка, кликайте на слово «Опубликовать».

 

Красиво смотрится анимированная картинка на Фейсбуке. Гугл+ и Одноклассниках. А вот ВКонтакте картинка получается маленькая и чтобы увидеть анимашку во всей красе надо кликать на неё. Мне это не очень нравится, если честно.

А ещё в разделе «Мой PicMix» вы можете установить аватар для вашей учётной записи в качестве любой, из созданных вами Gif картинок, для этого сервиса.

Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.

 

Теперь вы сможете создавать потрясающие анимационные картинки в онлайн фоторедакторе PicMix и выкладывать их в социальных сетях.

А если вам не слишком то понятны скриншоты и объяснения в моей статье, то предлагаю посмотреть видеоурок

  С Уважением, Татьяна Чиронова   

  

Сохраните пост к себе на стенку в соцсети

 

А здесь можно публиковать анонсы постов по теме:  

 

chironova.ru

Как открыть animated GIF в Photoshop CS3 | Mega

Ninja!!!!

С выходом Adobe Creative Suite 3 по какому только поводу не летели чепчики в воздух. Все стало намного удобнее, лаконичнее, а интеграция приложений сборника друг с другом достигла воистину невиданных высот. Одной из интересных особенностей новой версии стало исчезновение ImageReady — медленной и неудобной программы для создания веб-графики, чаще всего использовавшейся для анимации gif’ов. Этот шаг был предсказуем и ожидаем, ведь Photoshop уже давно позволяет сохранять оптимизированные для интернета изображения в форматах gif, jpeg и png (File › Save for Web & Devices), а с недавнего времени и создавать простенькую анимацию (Window › Animation). Оставалось только научиться открывать анимированные изображения. Photoshop animated gif timeline

В Photoshop CS3 появилась возможность даже создавать анимированные гифы, но не открывать их

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

style=”margin-left: 10px; padding-left: 30px; border-left: 3px solid #000;”>Update (спасибо lagrimos)В Photoshop CS3 для Windows существует недокументированная возможность открытия анимированных gif’ов: File › Import › Video Frames to Layers…. В диалоговом окне открытия файла в строке имени файла нужно ввести «*.gif» и наслаждаться редактируемой анимацией. В Mac OS X такой пункт меню тоже есть, но все файлы с раширением «gif» в диалоговом окне неактивны.</p>

Теперь если кто-то захочет редактировать анимированный файл в формате gif, ему придется пользоваться Fireworks CS3.

Fireworks CS3 panels <p

Fireworks позволяет не только редактировать анимацию покадрово (слева), но еще и четко отслеживать изменения между кадрами, разделяя каждый из них на слои

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

Files › Export

Достаточно выбрать в меню Files › Export, а в диалоговом окне Frames to Files, и Fireworks сохранит каждый кадр в отдельный файл, пронумеровав их по-порядку

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

✖✖✖

Компания Adobe не планирует делать открытие анимированных изображений в формате gif в Photoshop CS3 и рекомендует пользоваться для этих целей программой Fireworks. ninja from dirty.ru

genn.org

Gif фоны

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

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif фоны

Gif анимированные птички

birds-gif

birds-gif

birds-gif

birds-gif

Скачать одним файлом 307 кБ Понравилась статья?

Не хотите пропустить следующие материалы?

Подпиcывайтесь на обновления!

   

gikfo.ru

Анимация картинки. Как вставить гифку

Ольга 2016-01-26

Анимация картинки. Как вставить гифку.

Анимация картинки. Как вставить гифкуАнимация картинки с помощью готовой гифки уже рассматривалась в других уроках на этом сайте: Гифки. Настройка анимации, а также урок фотошопа:  Анимация картинки. Как вставить готовую анимацию. Этот урок фотошопа посвящен теме: как вставить гифку с фоном, если он не подходит к фону основной картинки, а вернее, в этом уроке анимации я расскажу, как удалить нежелательный фон с гифки, если ее нельзя вставить и обработать с помощью наложения слоев.

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

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

1.

Анимация картинки. Как вставить гифку1

2.

Анимация картинки. Как вставить гифку2

3.

Анимация картинки. Как вставить гифку3

4.

Анимация картинки. Как вставить гифку4

5.

Анимация картинки. Как вставить гифку5

6.

Анимация картинки. Как вставить гифку6

7.

Анимация картинки. Как вставить гифку7

8.

Анимация картинки. Как вставить гифку8

9.

Анимация картинки. Как вставить гифку9

10.

Анимация картинки. Как вставить гифку10

11.

Анимация картинки. Как вставить гифку11

12.

Анимация картинки. Как вставить гифку12

13.

Анимация картинки. Как вставить гифку13

14.

Анимация картинки. Как вставить гифку14

15.

Анимация картинки. Как вставить гифку15

16.

Анимация картинки. Как вставить гифку16

Скачать урок можно бесплатно, вместе с исходниками с Яндекс Диска.

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

Почитай, тебе понравится!

gylhataj.ru

Как создать анимированный gif в Adobe Photoshop - Ячайник

Очень красиво смотрятся шевелящиеся смайлики в аське, подмигивающие аватарки на форумах и почти живые фотографии. Что и говорить, статика в интернете давно уступила место динамике и анимации. Каждому из нас хочется удивить товарищей по всемирной паутине, нарисовав нечто «эдакое», непохожее на других. Если у вас есть программа Adobe Photoshop, то создать анимированную картинку в формате gif не составит труда. Рассматриваемый нами способ подойдет не только для аватар и смайликов, но и для любой анимации в формате gif: рекламных баннеров для сайтов, открыток и т.п.

{mosloadposition debug}

 

Для работы нам понадобится программа Adobe Photoshop и Adobe ImageReady. В первой мы подготовим кадры для будущей анимации, а во второй будем её оживлять. Но прежде скажем несколько слов о принципе работы анимации. Все мы смотрели мультики и знаем, что анимация – это сменяющие друг друга статичные кадры. Многие даже баловались в блокнотиках, рисуя на каждом его листочке по кадрику и быстро перелистывая странички – получалось нечто, похожее на ранние примитивные анимашки. Тот же принцип действует в Adobe Photoshop: сначала необходимо создать статичные кадры для нашего мультика. Кадров этих может быть 2-5, а может быть и 50. Чем больше кадров, тем красочнее анимация, но тем больше размер получаемого анимационного файла. Каждый кадр в Adobe Photoshop должен быть создан на отдельном слое. Слой – это как страничка блокнотика. В анимации все слои выстраиваются по порядку в логической последовательности, создавая законченное действие. Для каждого слоя-кадра определяется время его показа. Кроме того, анимацию можно просмотреть один или несколько раз, а можно сделать закольцованной – повторяющейся бесконечно. 

Единственный формат, в котором Adobe Photoshop сохраняет анимацию – это gif. GIF – от английского «Graphics Interchange Format» - формат для обмена изображениями. Формат gif хорошо сжимает графические файлы и широко используется в интернете, но способен качественно передавать изображения, содержащие только до 256 цветов. Обязательно учитывайте данную особенность при подготовке исходных изображений для анимации.

Пожалуй, с теорией мы на этом закончим, и перейдем к анимастроительству. Прежде всего, подготовим кадры будущей анимации в программе Adobe Photoshop. Для этого создадим новый документ (меню «Файл» - «Новый») с прозрачным фоном и размерами, например, 300 на 300 пикселей.

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

Обратите внимание, что в списке Слоев появился наш фон.

Если окошко со списком слоев не отображается, нажмите F7 на клавиатуре или отметьте в меню «Окно» пункт «Слои». 

Теперь создаем следующий кадр анимации – добавляем новый слой. Сделать это можно в окошке слоев, нажав маленькую кнопульку «Создать новый слой». Или через меню «Слои» – «Новый» – «Слой». 

Что будет на новом слое – решать вам. Можно скопировать туда какую-нибудь картинку, можно нарисовать узор специальными кистями. Мы просто добавим в новый кадр сердечко, которое тут же отобразится на слое в окошке Слоев.

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

Далее добавим еще несколько сердечек – каждое на новом слое. Принцип везде один и тот же – создаем слой и добавляем объект. Помните: каждому объекту – свой слой! Если добавленный слой вас не устраивает, его можно удалить – щелкните по нему правой кнопкой мыши и выберите «Удалить слой». Можно просто перетащить слой в корзинку, которая находится в нижней части окошка Слои. В результате у нас получилась валентинка со следующими составляющими: фон, 6 слоев с картинками и 3 текстовых слоя.

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

Перед созданием анимации необходимо растеризовать все текстовые слои. Наши кадры готовы. Отправляем их в программу Adobe ImageReady, которая поставляется совместно с Adobe Photoshop. Сделать это можно через меню «Файл» - «Редактировать в ImageReady»…

…или нажав соответствующую кнопочку на Панели.

Если и та и другая опции неактивны, сохраните изображение в формате PSD при помощи меню «Файл» – «Сохранить как», а затем откройте его в ImageReady через меню «Файл» – «Открыть». В Adobe ImageReady нам предстоит оживить слои и превратить наше изображение в полноценную gif-анимацию. Для комфортной работы у вас обязательно должны быть открыты окошки Слои, Оптимизация и Анимация: отметьте соответствующие пункты в меню «Окно» («Window») ImageReady.

В результате ваше рабочее пространство в ImageReady должно выглядеть следующим образом.

В окошке Animation мы будем настраивать последовательность кадров и время показа каждого из них. В окошке Layers мы будем включать и выключать слои для их отображения в кадрах. Окошко Optimize служит для оптимизации готовой анимации и её сохранения в приемлемом качестве в формате gif. И, наконец, в самом главном окошке просмотра с вкладками Original и Optimized мы будем наблюдать кадры нашей анимации в оригинальном и оптимизированном виде соответственно. Пока в окошке Animation мы видим единственный кадр – нашу картинку в полный рост. Чтобы создать новые кадры, прежде всего, отключим ненужные слои. Делается это в окошке Layers. Если напротив слоя вы видите значок глазика, значит, слой видим. Чтобы сделать его невидимым просто щелкните по глазику левой кнопкой мышки. Мы отключим все слои кроме Слоя 1.

Теперь создадим новый кадр анимации, щелкнув в окошке Animation маленькую кнопочку.

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

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

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

В окошке Animation кадры можно менять местами: наведите курсор мышки на кадр, нажмите левую кнопку и, не отпуская её, перетяните кадр в нужное место анимации. Теперь зададим время показа каждого кадра. Для этого щелкните стрелочку рядом с надписью 0 sec (0 секунд) и выберите нужное время. Если требуемого времени показа кадра нет в списке, выберите «Other…» и введите в поле необходимое количество секунд.

Мы задали для всех кадров время показа 1 секунду, выбрав в списке «1.0». Чтобы задать число повторений анимации нажмите на «Forever» и выберите из списка нужный пункт. «Forever» означает, что анимация будет повторяться бесконечно, «Once» – один раз, «Other» – вы сами устанавливаете количество повторений.

На этом подготовка анимации завершена. Чтобы просмотреть полученный результат в окне просмотра ImageReady нажмите кнопку «Preview Document».

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

Анимация будет показана в окне браузера. Ниже вы увидите html-код, который вставляет данное изображение на веб-страничку.

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

Заметим, что указанные опции индивидуальны для каждого изображения. Если качество оптимизированной анимации вас не устраивает, есть смысл поиграться с настройками. С изображениями, которые не вмещаются в палитру 256 цветов формата gif, придется попрощаться. С черно-белыми изображениями нет смысла использовать все 256 цветов, достаточно оставить 128 или оттенки серого. Здесь у вас большое поле для экспериментов. Наконец, сохраним анимацию в формате gif, выбрав в меню «File» пункт «Save Optimized» или «Save Optimized As». После этого программу можно закрыть.

Создание gif-анимации завершено. Конечно, мы рассмотрели самые основы работы в Adobe ImageReady, но уже этого достаточно, чтобы у вас получились красочные и интересные анимашки.

 

Специально для проекта Ячайник, Елена Карлтон

{mosloadposition cpanel}

yachaynik.ru


Смотрите также