Jak vytvořit animovaný obrázek pro vaši publikaci Střední

Od CSS po GIF

Tento úžasný GIF byl nalezen zde

Líbilo se nám, že jsme měli animovaný obal pro naši publikaci. Médium neumožňuje uživatelům plně přizpůsobit rozvržení publikace, ale stále můžete hrát s některými vizuálními prvky, abyste dosáhli původních výsledků a aby vaše publikace vynikla.

V tomto článku vám ukážeme, jak jsme vytvořili naši hlavičku animované publikace. Budeme také sdílet některé tipy a pokyny k používání souborů GIF na médiu.

GIF na středních publikacích

Střední umožňuje nahrát dva obrázky do záhlaví publikace: jeden je obrázek na pozadí a druhý je obrázek loga.

V obou případech je podporován formát GIF, takže můžete naplnit obal publikace několika pěknými animacemi.

Zde jsou dva inspirativní příklady:

  • Backchannel (GIF jako obrázek na pozadí)
  • Magenta (GIF jako obrázek loga)

Od CSS po GIF

GIF lze vytvořit pomocí mnoha nástrojů. Cesta, po které jsme se vydali, nemusí být nejjednodušší, ale chtěli jsme použít jeden prvek, který již na našem webu existuje, a přizpůsobit ji pro střední obal.

Animace na našem webu byla provedena pomocí CSS, proto jsme se rozhodli vylepšit existující část kódu a najít způsob, jak jej převést do GIF.

Aktuální animovaný obal Radaru

Krok 1 - html a CSS

Prvním krokem bylo přizpůsobení existujícího kódu a vytvoření stránky html obsahující naši animaci a stejné pozadí jako obrázek na pozadí, který jsme chtěli použít v naší publikaci.

Pokud byste chtěli hrát s podobnými efekty animace slov, můžete si toto pero rezervovat od Amrit Leone.

Krok 2 - Nahrajte obrazovku

Přehrávač Quicktime Player má praktickou funkci nahrávání obrazovky, která vám umožňuje vybrat oblast obrazovky, kterou chcete zaznamenat. Video je zachyceno rychlostí přibližně 30 FPS, takže vaše animace by neměla být delší než 15 sekund (15 sekund = 450 snímků).

Pokud používáte Windows, můžete také vyzkoušet jeden z těchto programů pro nahrávání obrazovky.

Krok 3 - Transformace .mov na GIF

Po dokončení nahrávání budete mít soubor .mov.

Otevřete aplikaci Photoshop a přejděte do nabídky Soubor> Importovat> Video rámečky do vrstev.

Můžete si vybrat část nahrávky, kterou chcete importovat a převést na vrstvy. Nezapomeňte zaškrtnout políčko „Make Frame Animation“.

Photoshop omezí počet snímků na 500 a vy byste neměli mít víc než to, jinak bude soubor příliš těžký.

Pokud otevřete panel časové osy ve Photoshopu, uvidíte všechny vaše snímky.

Nyní stačí exportovat snímky jako GIF. Chcete-li to provést, přejděte do nabídky Soubor> Uložit pro web.

Velikost souboru můžete zmenšit omezením počtu barev v dialogu exportu.

Je důležité, aby rozměry vašeho GIF byly dvojnásobné oproti velikosti, kterou potřebujete, protože velikost média se změní na polovinu.

„Předpokládáme, že všechna loga jsou sietnice, což znamená, že logo je nahráno ve dvojnásobné velikosti, než předpokládáme, že se zobrazí. Pokud nahrajete logo s šířkou 2 000 a 1 000 pixelů vysoké, médium jej interpretuje jako šířky 1 000 pixelů a 500 x vysoké. “
- Střední blog

Náš konečný GIF má 475 snímků a kolem 2 MB.

Krok 4 - Nahrajte jej na médium

Nahrajte obrázek na pozadí a obrázek loga do své publikace a to je vše.

Nyní máte animovaný obrázek obálky!

Doufáme, že vám to pomůže. Dejte nám a dejte nám vědět, pokud používáte také GIF v publikaci Média. Rádi bychom viděli další skvělé příklady! Chcete-li si přečíst více příběhů, stačí stisknout tlačítko „Následovat“.