Flamio.ru

Работа и деньги
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Гифки для сайта

Гифки для сайта

Создание gif анимации на онлайн конструкторе Gifius.ru происходит в три простых шага:

Шаг 1. Загрузите картинки. Можно просто перетащить картинки в браузер или воспользоваться зеленой кнопкой «Загрузить картинки». Изображения можно загружать как по очереди, так и все сразу. Обязательно дождитесь пока все каринки будут загружены.

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

  • Ширина. Задает ширину анимации. Можно изменять как двигая ползунком, так и вписывая числовое значение (для этого кликните по цифре)
  • Высота. Задает высоту анимации. Аналогично ширине, данным параметром можно управлять либо ползунком, либо вводя цифры с клавиатуры.
  • Пропорции. Если в данном поле стоит галочка, то включен режим пропрциональности. Это означает, что высота изображения всегда пропорциональна его ширине, т.е. при изменении ширины, высота будет подгоняться автоматически. Пропорции берутся из оригинальных размеров самого большого загруженного изображения. Если выключить режим пропорциональности (снять галочку), то появится отдельный ползунок высоты и каждый параметр размера можно будет задать индивидуально.
  • Сбросить всё. Данная восстанавливает настройки по умолчанию, т.е. сбрасывает любые изменения, которые вы вносили с момента загрузки изобажений в конструктор.
  • Позиционирование. Включает в себя три режима. По центру — выравнивает каждый кадр по центру. Не позиционировать — оставляет каждый кадр «как есть», т.е. позиция исходит из левого верхнего угла. Растянуть — растягивает каждый кадр на полную ширину и высоту анимации.
  • Скорость. Задает скорость смены кадров. Проще говоря, задержку междку ними. Наименьшее значение означает наименьшкую скорость смены. Параметр можно регулировать как ползунком, так и вписывая значения с помощью клавиатуры (поле редактируется при клике на цифру). Максимальная скорость: 60.
  • Изменения порядка кадров. Для того, чтобы изменить порядок кадров — просто поменяйте миниатюры местами (в нижней панели). Т.е. возьмите миниатюрку левой кнопкой мыши и перетащите на нужное место. Мы проиллюстрировали этот процесс:

Шаг 3. Скачайте готовую анимацию. Для этого нажмите на зеленую кнопку «Скачать GIF» или просто сохраните гифку через «Сохранить как. «

Создание GIF анимации онлайн теперь проще.

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

Благодаря использованию технологиги ajax, создание гиф анимации происходит без обновления страницы. Это ускоряет достижение поставленной перед приложением задачи и устраняет ненужное мелькание страниц, медленную загрузку и т.д. По сути, Gifius.ru — это полноценная программа для создания gif анимации онлайн, ничем не уступающая своим декстопным аналогам.

Создать gif онлайн быстрее, чем оффлайн.

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

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

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

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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

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

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

Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow, который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

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

Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький — это менее 1MB)

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

Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

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

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

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

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

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

Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.

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

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

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

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

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

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

*«Потери» (Lossy) — допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения

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

Если вы попробовали все, что было сказано выше, но так и не смогли уменьши размер GIF анимации, то нужно сделать шаг назад. Может вы хотите невозможного? Есть ли другой способ добиться желаемого? Можно ли разбить файл на две GIF анимации? Будет лучше, если ваша GIF анимация сделает акцент на одном аспекте.

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

Руководство по гифкам: где искать, как создавать и как использовать в соцсетях

Время чтения: 6 минут Нет времени читать? Нет времени?

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

Как использовать гифки

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

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

А еще они закольцованы, и это бывает забавно.

Кстати, для записи видео с экрана я использовала бесплатную программу iSpring Free Cam. А видео превратила в гифку при помощи сервиса Ezgif.com. Все это заняло чуть больше пяти минут.

Как самому создать гифку

Об этом на «Текстерре» уже есть подробная статья: «Как создать гифку: 7 простых способов» и мне нечего к ней добавить.

Где искать готовые гифки

  • «ВКонтакте». Во «ВКонтакте» гифкам посвящено чудовищное количество пабликов. Ищите их в поиске по сообществам по запросу «гиф», «гифка», «gif». А еще в соцсети есть прямой поиск по гифкам. При создании поста выберите прикрепление документа, а потом в строке «Поиск документа» введите ключевое слово и метку gif.

Дурной тон

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

Гифки и соцсети

«ВКонтакте»

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

Как скачать. Об этом было написано выше, но повторюсь, если вы не заметили. Нажмите на гифку правой кнопкой мыши – Открыть ссылку в новой вкладке – Сохранить картинку как.

Facebook

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

Как скачать. Только в формате MP4. В браузере Google Chrome нажмите на гифку правой кнопкой мыши – Просмотреть код. Скопируйте ссылку и из нее уже сохраните видео.

Преобразовать MP4 в GIF может условно-бесплатный сервис Convertio:

Instagram

Как загрузить. К сожалению, «Инстаграм» гифки не поддерживает совсем. Их туда можно загрузить, только предварительно переведя в формат MP4. Сделать это может тот же сервис GIPHY. Действуйте так же, как при загрузке в «Фейсбук», но в конце нажмите значок Instagram и введите свой e-mail, куда придет готовый файл.

Twitter

Как загрузить. «Твиттер» зато вообще не чинит препятствий. Гифки туда загружаются просто как фотографии.

Как скачать. Тем же методом, что и с «Фейсбука».

«Одноклассники»

Как загрузить. Просто как фото.

Как скачать. Тем же методом, что и с «Фейсбука».

Напоследок. Немного об авторском праве

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

И хотя в научных целях можно цитировать любые произведения, вам вряд ли удастся доказать, что вы запостили во «ВКонтакте» гифку с Джоном Траволтой исключительно во благо науки.

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

Мораль: решение, использовать чужие гифки или нет, как обычно остается на вашей совести.

Читать еще:  Простой одностраничный сайт на html
Ссылка на основную публикацию
Adblock
detector