Sådan opretter du et animeret billede til din Medium-publikation

Fra CSS til GIF

Denne fantastiske GIF blev fundet her

Vi kunne godt lide ideen om at have et animeret omslag til vores publikation. Medium tillader ikke brugere at tilpasse publikationslayoutet fuldt ud, men du kan stadig lege med nogle visuelle elementer for at opnå originale resultater og få din publikation til at skille sig ud.

I denne artikel viser vi dig, hvordan vi oprettede vores animerede publikationshoved. Vi vil også dele nogle tip og retningslinjer for brug af GIF-filer på Medium.

GIF'er på medium-publikationer

Medium giver dig mulighed for at uploade to billeder til din publikationshoved: det ene er baggrundsbilledet, og det andet er logoet.

I begge tilfælde understøttes GIF-format, så du kan udfylde dit publikationsomslag med nogle dejlige animationer.

Her er to inspirerende eksempler:

  • Backchannel (GIF som baggrundsbillede)
  • Magenta (GIF som logobillede)

Fra CSS til GIF

GIF'er kan oprettes med mange værktøjer. Stien, vi fulgte, er måske ikke den letteste, men vi ønskede at bruge et element, der allerede findes på vores websted, og tilpasse det til Medium-omslaget.

Animationen på vores hjemmeside blev udført med CSS, så vi besluttede at finpudse det eksisterende stykke kode og finde en måde at omdanne den til en GIF på.

Aktuelt animeret omslag til Radar

Trin 1 - html og CSS

Det første trin var at tilpasse den eksisterende kode og oprette en html-side, der indeholder vores animation og den samme baggrund som det baggrundsbillede, som vi ønskede at bruge i vores publikation.

Hvis du gerne vil lege med lignende ord-animationseffekter, kan du tjekke denne pen af ​​Amrit Leone.

Trin 2 - Optag skærmen

Quicktime Player har en praktisk skærmoptagelsesfunktion, så du kan vælge det område på skærmen, du vil optage. Videoen er taget med ca. 30 FPS, så din animation bør ikke være længere end 15 sekunder (15 sekunder = 450 rammer).

Hvis du bruger Windows, kan du også prøve en af ​​disse software til skærmoptagelse.

Trin 3 - Transformer .mov til GIF

Når du er færdig med optagelsen, har du en .mov-fil.

Åbn Photoshop og gå til Filer> Importer> Videorammer til lag.

Du kan vælge den del af optagelsen, du vil importere og konvertere til lag. Glem ikke at markere afkrydsningsfeltet "Lav ramanimation".

Photoshop begrænser rammerne til 500, og du skal ikke have mere end det, ellers bliver filen for tung.

Hvis du åbner tidslinjepanelet i Photoshop, vil du se alle dine rammer.

Nu skal du bare eksportere rammerne som GIF. For at gøre dette skal du gå til Filer> Gem til web.

Du kan reducere filstørrelsen ved at begrænse antallet af farver i eksportdialogen.

Det er vigtigt at holde dimensionerne på din GIF dobbelt så stor som det, du har brug for, fordi Medium ændrer størrelse til det halve.

”Vi antager, at alle logoer er nethinden, hvilket betyder, at logoet uploades til dobbelt så stort, som vi antager, at det vises. Hvis du uploader et 2000px bredt og 1000px højt logo, fortolker Medium det som 1000px bredt og 500x højt. ”
- Medium blog

Vores sidste GIF har 475 rammer og omkring 2 MB.

Trin 4 - Upload det til Medium

Upload dit baggrundsbillede og logo-billede til din publikation, og det er det.

Du har nu et animeret coverbillede!

Vi håber, du finder det nyttigt. Giv det en , og lad os vide, om du også bruger GIF'er i din Medium-publikation. Vi vil meget gerne se nogle flere gode eksempler! Hvis du vil læse flere historier, skal du bare trykke på knappen "Følg".