Hur får man mer från GIF

Feb 7, 2026
Hur

Gifs arbetar i sömlösa cykler, vilket Rebecca mock beskriver som "den perfekta slingan". Denna slinga bör helst radera den första och sista ramen, så att någon ram kan vara den första. Vid utformning av din egen GIF, gör det prioriterat en prioritet - det orsakar mindre distraktion för betraktaren och lägger till mesmerisering, visuellt intresse. Mock föreslår också att lägga till en extra ram: "Låt pausen vara lite längre," säger hon. "Utrymmet mellan två handlingar kan innebära mycket."

This GIF was made for PC World to accompany an article about the app Evernote

Denna GIF gjordes för PC World att följa med en artikel om appen Evernote (Bildkredit: Rebecca mock)

Grundläggande tekniker

Grunderna för rörelse kan utökas och byggas i komplexa animationer. När du börjar skapa din bild i Photoshop cc , var noga med att hålla den organiserad. Arbeta i lager och animera varje bit separat. På det sättet, om du måste byta ett element senare, är det lätt att isolera det utan att behöva ångra resten av ditt hårda arbete.

Positionering kan göras manuellt eller genom att ställa in start- och slutpunkter och låta photoshop göra jobbet - allt beror på vilken typ av rörelse du vill ha din gif att ha. Använda markören och dra objektramen med ram kommer att producera en oregelbunden väg. Tweening - Generera mellanliggande ramar mellan två bilder - kommer att ge den en stadig rörelse.

Bild 2 av 7

Select which frame to tween and the number of frames you want to add.

Välj vilken ram till Tween och antalet ramar du vill lägga till.

02. Välj en ram

Bild 3 av 7

Start the flicker effect by creating a straight line with a rough edge.

Starta flimmereffekten genom att skapa en rak linje med en grov kant.

03. Starta effekten

Bild 4 av 7

Copy and paste the rough edge at the top of your original line.

Kopiera och klistra in den grova kanten överst på din ursprungliga linje.

04. Kopiera och klistra in

Bild 5 av 7

Create a layer mask to obscure part of the line. When animated, it will resemble a flicker.

Skapa en lagermask för att dölja en del av linjen. När det är animerat kommer det att likna en flimmer.

05. Lagmask

Bild 6 av 7

Hold down the Shift key to rotate a shape in 15 degree increments.

Håll ned Shift-tangenten för att rotera en form i 15 graders steg.

06. Vrid formen

Bild 7 av 7

The Save for Web panel allows you to customise your saved colours. By unclicking a hue, you can remove it from your palette.

Med webbpanelen kan du anpassa dina sparade färger. Genom att klicka på en nyans kan du ta bort den från din palett.

07. Spara

Mock gillar att använda flimmer / blekande effekten för ångstigande och flammor. För att skapa det, dra en rak linje med en grov borste. Lägg till en lagermask (t.ex. en flamma) så att den del av den är dold. Sedan, gör en ren slinga med en mönstermöjningsmetod - skära din linje i hälften och flytta sin grova bottenkant till toppen av sin linje, fyll i mitten och överlappa lagmasken. Använd Tween-kommandot för att se till att linjen rör sig vertikalt med en konsekvent hastighet. Vid denna tidpunkt bör slingorna vara sömlösa.

Den spinn- och roterande rörelsen är skapad med små, inkrementella varv av ett objekt. Gör en oregelbunden cirkel och flytta den i 16 till 24 steg tills du har en hel tur; Håll ned Shift-tangenten för att rotera det i 15-graders steg.

Creation Can Change The World was made for Sony Digital Entertainment.

Skapandet kan förändra världen gjordes för Sony Digital Entertainment. (Bildkredit: Rebecca mock)

Exportera ditt arbete

Exportera din GIF kan vara det sista steget, men det är något du borde tänka på under hela processen. Ju fler pixlar som flyttar desto större är filstorleken, och helst, du vill ha en gif som är under 1 MB. GIF-filer är begränsade till att använda 256 färger, och saker som tunga texturer och gradienter komprimerar inte bra - du är bättre med plana färger och skarpa kanter, vilket kommer att hålla filer hanterbara och lätta att ladda upp på webben.

Denna artikel uppträdde ursprungligen i Datorkonst utgåva 259; köp det här !

Ämnen
Grafisk design

Hur - Mest populära artiklar

Komposition i animering: Lär dig grunderna

Hur Feb 7, 2026

(Bildkredit: Blackmagic Design) I den här artikeln kommer vi att dyka in i konsten att kompositera för 3D. Att utfo..

Bygg en blogg med rutnät och Flexbox

Hur Feb 7, 2026

De senaste två till tre åren har sett layout gå vidare i språng. Nu när dessa moderna tekniker har ett så konsekvent result..

Förbättra dina konceptkonstkunskaper i Photoshop

Hur Feb 7, 2026

För den här workshopen skulle jag vilja visa dig ett riktigt roligt sätt att skissa karaktärer från bara din fantasi. Jag sk..

Slå på dina menyer med animering med CSS

Hur Feb 7, 2026

Det är genom animering att vi gör världens känsla: dörrarna svänger öppna, bilar kör till sina destinationer, läppar cur..

Måla ett porträtt i oljor

Hur Feb 7, 2026

Inlärning Hur man målar Ett porträtt är inte lätt, men det finns några steg du kan följa för att hjälpa d..

Gör en logotyp i Illustrator

Hur Feb 7, 2026

Den här veckan såg utgåvan av några nya videoklipp på Adobes gör det nu spellista, en samling klipp allt om hur man skapar designprojekt med kreativa molnprogram på en minut eller mind..

Hur man skapar en vintermiljö

Hur Feb 7, 2026

Innan jag börjar arbeta med en personlig bild börjar jag vanligtvis tänka på vad jag vill se i det färdiga arbetet. I de fle..

Hur man får din Zbrush-modell till Maya

Hur Feb 7, 2026

För detta Maya Tutorial Jag ska visa dig hur jag fick den här Grumpy Link-modellen från Zbrush till Maya för �..

Kategorier