Vigtig note. Hvis du har brug for at oprette hurtigt simpel animation fra flere rammer i Photoshop, gå til lektionen - .

Jeg har været interesseret i stop-motion animation i ret lang tid, selvom jeg har studeret lidt materiale. Alle de bøger, jeg begyndte at læse, var ret lange, svære og “tørre”.

Derfor, efter at jeg begyndte at forstå lidt om teknologien til at skabe animationer, begyndte jeg at lede efter måder at bringe dem til live ved hjælp af Photoshop.

Mange mennesker rådede mig til at skifte til andre programmer (f.eks. TVP Animation Pro), men jeg, der ikke ønskede at tilpasse mig de nye grænseflader i andre programmer, besluttede at gøre alt i Photoshop.

Og jeg skrev denne lektion specifikt til dem, der ikke forstod teknologien til at skabe frame-by-frame-animationer specifikt i Photoshop. Hvem ville ikke grave lidt og forstå, hvad der er hvad?

Jeg vil komme ind på to emner: korte animationer og lange. Du bør ikke rulle gennem den type animationer, der ikke er interessante for dig: der kan være oplysninger der, som vil være nyttige for dig til animationer af den type, du har brug for.

Korte animationer– disse er animerede avatarer, humørikoner osv.

Lange animationer– det er tegnefilm, videoer osv.

Først vil jeg fortælle dig teorien, og derefter vil vi skabe animation i praksis.

Vigtig tilføjelse

Mange mennesker spørger: "Hvorfor er min animation så ryk, hvorfor bevæger min karakter/objekt sig hurtigt/langsomt?"
Svaret er: din karakter/genstand bevæger sig hurtig fordi du tegnede få rammer.

Din karakter/objekt bevæger sig langsomt fordi du tegnede en masse rammer.

Din karakter/objekt rykker, fordi du ikke fulgte den forrige bevægelse og tegnede den næste, hvilket ikke stemmer overens med den forrige.

Husk: på et sekund 24 ramme!

Så når du gør dig klar til at lave din animation, så husk: 24 ramme = 1 anden, 24 ramme = 1 anden. Glem aldrig denne meget vigtige detalje.

Korte animationer

Jeg tror, ​​du ofte er stødt på animationer på avatarer, animerede humørikoner.
Nogle humørikoner er lavet ind Blitz, men jeg tegner min i Photoshop. Tro ikke, at så korte animationer er nemme at lave. På den ene side, ja, de er små i størrelsen, men på den anden side, mens du tegner disse 15 -30 rammer, får du travlt (forestil dig, hvis du vil lave et tre-minutters klip, så skal du gøre 4320 rammer!).

Hvad skal du huske og vide?

Lad os sige, at du ville tegne en pige med vindblæst hår til din avatar. Midler:

For det første er hår ikke pap - under påvirkning af en moderat vind vil det danne tværgående bølger.

Sådan er det nogenlunde vist i diagrammet:

Under påvirkning af en stærk vind vil håret være næsten lige, men din karakter bliver nødt til at lukke øjnene tæt og gribe fat i noget for at undgå at blive blæst væk, da de færreste i virkeligheden kan modstå sådan vind. selvom denne type animation kan bruges, når din karakter for eksempel kører på cykel.

Og endelig, en blid brise løfter og sænker blidt dit hår.

Let vind:

Middel vind:

Stærk vind:

Det samme gælder stof og tøj – de vil opføre sig på nogenlunde samme måde som hår.

Og nu ville du for eksempel tegne en animation med bevægelsen af ​​din karakter og objekt. Midler:

For det andet begynder enhver handling et sted. Har du nogensinde lagt mærke til, at du for eksempel for at rejse dig fra en stol først flytter den lidt og læner dig lidt frem, og først derefter rejser dig? eller at når man vil slå et slag med ketcheren, så flytter man den først væk og vender kroppen med den, og først derefter slår man?

Der er en enorm masse af sådanne eksempler, men det er bedre at se:

For at undgå at komme i problemer med disse bevægelser før handlinger(DPD), analyser og observer bevægelser af mennesker eller dyr oftere.

Lille tilføjelse

Generelt, glem aldrig fysik. Vægten af ​​genstande, de materialer, de er lavet af (elasticitet, blødhed, hårdhed osv.), Alt dette er nødvendigt.

Indse, at uden dette, vil din animation være død, forfærdelig og grim!

Bedre arbejde på det og aldrig haste.

Lange animationer

Åh, det er her det sjove begynder!

Har du ofte, mens du så tegnefilm eller anime, beundret animation og misundt dem, der ved, hvordan man laver dem? Alle disse vidunderlige scener, plastikbevægelser og meget mere. etc.? Jeg indrømmer ærligt - ja. Hver gang jeg ser noget, prøver jeg at forstå, hvordan animatorerne arbejdede med det? Hvordan skabte de alt dette?

Men på grund af det faktum, at jeg ikke ved, hvilke programmer de arbejder i, forsøger jeg at forstå hele processen ved hjælp af Photoshop-mekanismer.

Og du ved, jeg finder svar på alle mine spørgsmål!

Men lad os tage alt i orden.

Processen med at skabe en lang animation

1. I første omgang har vi brug for en IDÉ

For eksempel besluttede du dig for at lave en kort video, hvor flere piger vil danse.

Hvis du er en erfaren animator, kan du "få nogen til at danse" i din video fra 3 og flere piger.

Men i begyndelsen af ​​din animators rejse er det bedre at begrænse dig til en eller to.

2. Nu skal du oprette et scene-for-scene storyboard (RPS)

Hvad er det og hvad spises det med?

Forestil dig en film. Forestil dig nu tallet forskellige typer fra forskellige kameraer. Tæt på, landskab, kamera følger karakteren...

Det er okay, når der ikke er så mange af dem. Men når vi laver et helt klip kan der være flere af dem 30 ting!
Det er derfor, smarte animatorer bruger sådan en vidunderlig ting, der ligner en linjeret bog.

I den skildrer de scener.

Kun nogle tegner en scene i hver sektion af tabellen, så en anden, en tredje osv., mens andre tegner billeder i hver sektion af bordet efter et par sekunder (jeg undskylder, hvis jeg ikke forklarede det tydeligt).

Det er også meget praktisk, at du kan gøre det på siden af ​​beskrivelsen, ellers tegner du det nogle gange, så efter et stykke tid ser du på det og forstår ikke - hvad skildrede jeg her?

Så vi noterer os dette storyboard til scenerne og bruger disse bøger.
Du behøver ikke engang at lave en bog, men bare skabe stor fil i Photoshop og tegn alle scenerne der.

3. Nu skal du finde på en baggrund, karakterkoncept og bevægelse

Vi tegner bevægelserne i RPS-bogen.

Hvis du har mere end én scene i en video, skal du tegne flere forskellige baggrunde. Tegn dem i separate filer.
Og husk én ting - baggrunden vises ikke ud af den blå luft. Så hvis du vil have kameraet til at bevæge sig lidt til siden, så skal baggrunden også være der. de der. du bliver nødt til at tegne baggrunden i længden (eller bredden, eller måske begge dele) mere.

Så tænker du igennem udseende din karakter og begynd at skabe animation.

Gå fra teori til praksis

Lad os fra nu af tænke lidt over IDÉEN og generelt på punktet "Processen med at skabe animation." Hvad taler jeg om? Desuden skal du nu bruge et marsvin, som du vil tvinge til at flytte. Vi laver ikke en video, hvori 4320 rammer. Den bedste og nemmeste måde at forstå er, hvordan man opretter en frame-by-frame-animation ved hjælp af 24 -72 - ramme animation.

Nå, lad os begynde!

1. Vi skaber nyt dokument. Til min animation tog jeg en lille størrelse - 400 x 500 px.

2. Nu, hvis du ikke har et vindue nederst til venstre " Animation", slå op, åbn fanen" Vindue» - « Animation».*

* - Eksemplerne bruger den russificerede version Photoshop CS2.

På skærmbilledet ovenfor ser vi animationsvinduet, hvor der er den første ramme, under det er et lille panel, hvor knapperne er placeret:

Altid/en gang- ved at vælge "Altid" vil du sløjfe animationen. Hvis du vælger én gang, afspilles animationen kun én gang. (I min lektion er der begge versioner af animationer: looped - hvor princippet om DPD vises, gengivet én gang - hvor sceneskiftet vises).

Vælg første ramme- tager os tilbage til begyndelsen.

Vælger den forrige ramme- Lad os ikke ringe til Cap. (=

Afspiller animation/stopper animation- Afspil/Stop.

Vælger næste rammer- næste ramme. Din kasket!

Tweens animationsrammer- ved at bruge denne knap kan vi tilføje jævne overgange mellem to rammer ved at tilføje nye.

Dublerer valgte rammer- ikke helt det rigtige navn... Det ville være bedre at sige "Tilføjelse af en ny ramme".

Sletter valgte rammer- kurv.

3. Nu kan vi begynde at tegne. For at gøre dette skal du placere den baggrund, du oprettede tidligere Baggrund(Baggrund/Baggrund).

4. Opret derefter nyt lag(Ctrl+Shift+Alt+N), og tegn din karakter på den.

4. Nu kommer den svære del: vi skal tegne den samme karakter mange gange i træk i forskellige positurer.

Vi laver en ny ramme, og... Der er to muligheder:

EN) Enten begynder du at tegne din karakter på ny hver gang, eller...

B) Kopier det forrige lag og skift det (du er færdig med at tegne og slette, i stedet for at bruge transformation! Du får sjældent brug for et sådant værktøj, jeg skriver senere hvornår).

Når du har fået noget træning i animation, kan du bruge begge muligheder smertefrit. (Du kan prøve hver af dem i et separat dokument).

Mulighed A:

1. Vi tegnede vores første ramme.

2. For at se, hvordan du ændrer den næste, reducerer vi lagets opacitet til ca 30% og opret et nyt lag, hvorpå vi allerede tegner en kanin til den anden ramme.

3. Vi afslutter med at tegne den anden ramme og slukker for synligheden af ​​det forrige, første lag.

Mulighed B:

1. Lav en ramme med karakteren og gør dette lag usynligt.

2. Dupliker det derefter (Ctrl+J) ved at trække laget til knappen "Opret et nyt lag" til venstre for skraldespanden.

3. Nu gør vi det andet lag synligt og begynder at ændre det.

Ved at duplikere det forrige lag opretter du således nye rammer og ændrer dem, og ikke den samme.

5. Vi sidder og tegner rammer 10 -15 ...

6. Og lad os se, hvad der skete.

Det viste sig at være en løbende kanin.

Desuden kopieres ikke en eneste del af den: hver ramme tegnes på ny.

Se selv:

Når du laver en animation, skal du huske, at det er ret svært at skifte mellem hundredvis af lag, og du bør derfor ikke udsætte at male eller ændre noget før senere. Gør det med det samme.

Næsten slutningen

Ovenfor har jeg taget forbehold for værktøjet ().
Det er værd at bruge det, når du for eksempel vil zoome kameraet væk, bringe det tættere på, dreje det osv. (Hvis du kun skal flytte baggrunden, skal du bruge videoeditorer, det bliver nemmere for dig). Brug ikke forvrængnings-, tilt- eller andre transformationsværktøjer unødigt.

Og efter at vi har reddet vores gif-animation som videofilformat .avi, for eksempel kan du roligt gå til Windows Film Studio Direkte.
Derfra kan du gøre, hvad dit hjerte begærer med dit klip.

Og så kan du uploade dit klip til youtube.com og nyde det arbejde, du har udført.

MANGE TAK for din opmærksomhed, Lero-art var med dig. Undskyld mig for tungen, den mærkelige præsentation og andre fejl i lektionen, hvis nogen. Alle skyldes det, at tanker er forvirrede, og ord danner ikke sætninger...

Men jeg håber, du har lært noget nyt og interessant for dig selv!

Hilsen venner! Nogle gange støder jeg på spørgsmålet, er det muligt at lave animation i Photoshop? Så i denne lektion vil jeg vise, at dette er muligt, og at det slet ikke er svært. Herefter vil du forstå, at det slet ikke er nødvendigt at downloade og installere programmer til dig selv, hvis du pludselig skal lave et animeret banner eller en anden animation. Og tro mig, det er meget enkelt. Lad os som et eksempel lave vores egen simple preloader eller, som korrekt angivet i kommentarerne, en throbber. Og så lad os gå i gang!

Åbn Photoshop og opret en 9x9 pixel fil.

Lad os zoome ind for at øge vores lille firkant til det maksimale (Z-tast). Der er flere måder at forstørre. Først skal du højreklikke på billedet i rullemenuen og vælge Tilpas til skærmen. For det andet skal du blot klikke flere gange, indtil billedet er forstørret til maksimal værdi, og for det tredje den enkleste efter min mening, ved at klikke til venstre øverste hjørne lærred og holding venstre knap mus, flyt den ned og til højre, indtil vi krydser vores firkant.

Nu er det vigtigste, vi skal bruge for at lave en GIF-animation arbejdsrum Med de rigtige værktøjer. Gå til menuen Vindue -> Arbejdsområde -> Video. Det skal ligne skærmbilledet, men der kan være forskelle. Vi vil være interesserede i animationspanelet nederst.

Nedenfor kan vi lige se vores første animationsramme fremhævet.

Lad os nu tegne med en blyant (B) i nederste venstre hjørne, lad os sige orange 3x3 pixel kvadrat.

Dupliker vores lag (tag og træk vores lag til ikonet for at oprette et nyt lag.

Sluk for baggrundslaget (øjeikon), og flyt vores firkant til nederste højre hjørne på det nye lag. Fyld det åbnede gennemsigtige lærred med hvid farve (G).

Dupliker det øverste lag igen og flyt firkanten op til højre. Så endnu et tag, hvor firkanten bevæger sig op til venstre. Det skal se sådan ud:

Lad os derefter gå videre til arbejdet med vores animationspanel. Klik på ikonet Dubletter valgte rammer (ikonet ligner ikonet for at oprette et nyt lag) 3 gange, så vi får 4 rammer i alt. Ved at klikke på den første ramme, vælg den og lad kun det nederste lag være synligt på listen over vores lag. Klik derefter på den anden ramme og forlad synlig anden nederste lag. Og så videre. Du får følgende:

I princippet er vores animation næsten klar. Ved at klikke på Plays animationsikonet kan du se, hvad vi får. Lad os nu tilføje lidt glathed gennem mellembilleder. For at gøre dette skal du vælge den første og anden ramme (hold Ctrl-tasten nede) og klikke på ikonet, som Tweens-kuglerne er tegnet på. Klik på OK.

Lad os gøre det samme med frames 2-3, 3-4, 4-1.

Nu vælger vi alle vores frames, og på enhver frame vælger vi overgangstiden mellem frames, som du kan lide. Lad os sige 0,1 sek.

Tjek, at din animation går i loop:

Det er alt. Tilbage er blot at gemme vores banner i gif-format; for at gøre dette skal du i Photoshop gå til filmenuen og vælge menupunktet "Gem til web og enheder" (Gem til web og enheder) eller mere bekvemt, tryk på tastekombinationen Ctrl+Shift+Alt+S . Vælg i dialogboksen Gif-format. Her kan du lege med de indstillinger, der påvirker kvaliteten og størrelsen af ​​den resulterende Gif-fil. Efter at have gemt vores Gif-animation som en fil med Gif-udvidelsen, lad os nyde vores egen preloader! For eksempel kan du ende med disse smukke Loading Preloaders:

I dag kan du sikkert se Gif-banneret, som vi lavede i Photoshop med et hvilket som helst grafikprogram, hvoraf de mest almindelige er IrfanView, XNView, FastStone billede Seer og mange andre.

Jeg tror nu, du forstår, at der ikke er noget kompliceret i at skabe Gif-animationer i Photoshop, og du vil begynde at lave dine egne bannere og andre kreative ting, især da animationsrammer kan have nogen effekt takket være Photoshop selv.

Hvis du bare mangler trobbere/snippere, så er der specielle java script biblioteker til deres generation. Et udvalg til oprettelse af indlæsningsanimationer kan læses i min artikel

Hej læsere af min blog!

Som lovet fortsætter Photoshop-undervisningen!

I dag vil vi diskutere følgende spørgsmål: "Hvordan laver man animation i Photoshop?". Jeg vil prøve at give dig detaljerede instruktioner om at lave animation. Og til sidst vil jeg give en kort video tutorial...

Hvordan laver man animation i Photoshop?

Hvordan man laver animation i Photoshop: hvad betyder det og er det svært?

At lave animation i Photoshop er ret simpelt, hvis du ved, hvordan man gør det =) Men for at være ærlig, efter at have prøvet en gang, vil du gøre alt med lukkede øjne... Det er i denne artikel, under min klare vejledning, at du lærer at lave animation uden problemer!

Animation, bliver vi rigtige animatorer?

Vores animation er glat udseende indskrifter, som vi laver ved hjælp af værktøjet Animation i Photoshop er det præcis, hvad vi vil gøre. I dag kan du spille rollen som en nybegynder animator =)

Lad os starte?

Lad os først beslutte, hvad vi har brug for! Men vi har brug for Photoshop: det er lige meget hvilken version. Du kan bruge den version, jeg bruger, du kan downloade den!

Åbn Photoshop-programmet og vis fanen animation på arbejdsmiljø: Vindue - Animation. I min version af programmet hedder denne fane Tidsskala, så jeg gør dette ( sætte et flueben):

Som et resultat vil du have et panel som dette nedenfor:

P.S. Jeg trimmede den lidt...

Nå, bruger nu faner Fil - Opret..., eller ved at trykke CTRL+N - opret ny fil. Indstil størrelserne, klik Okay og skriv vores tekst, som vi vil lave animation af. Dette er hvad jeg fik:

P.S. Jeg legede lidt med deformation jeg =)

Denne ramme bliver automatisk vores Tidsskala, sæt den til hastighed 0,1 sek og med hjælp At lave en kopi dedikerede rammer opret 10 mere ( det afhænger af, hvordan du indstiller gennemsigtigheden - se længere, og du vil forstå alt):

P.S. Dette er et færdigt billede.

På det første billede slukker vi for billedet ( klik på det andet billede og i lag slå synligheden af ​​laget - inskription fra, og træk dette billede til det første sted). Som et resultat har jeg 10 billeder med en hastighed på 0,1 sekunder, og den sidste ( Ramme 11) — 1 sek.

På det andet billede skal teksten være slået til, vi ændrer kun gennemsigtigheden: i lag Højreklik klik med musen på laget med inskriptionen, vælg fanen - Blandingsmuligheder...

I Hovedparametre - Uigennemsigtig. Vi sætter den til 10 %. Vi gentager disse handlinger med hver frame, hvilket øger gennemsigtigheden: den anden - 20%, den tredje - 30% osv., indtil vi når 100% - den sidste frame ( antallet af billeder afhænger af, hvordan du bruger gennemsigtighed).

Også i Blandingsmuligheder du kan prøve at bruge ekstra chips (du skal blot markere boksen, og resultatet er foran dig).

Andre knapper Tidsskalaer Jeg forklarer ikke: Jeg tror afspilningsknappen og andre kender dig... ( for at se, hvilken slags knap der er foran dig, skal du bare holde musen over den, og en inskription med betegnelsen vises foran dine øjne)

Hvordan gemmer man animation i Photoshop?

Vælg Gif-formatet (det er der allerede automatisk), og klik Gemme…(vælg gemmestien, for eksempel - desktop), Al animation er bevaret =)

P.S. Du kan fjerne baggrunden fra animationen ved at slette laget "Baggrund" (men for mig smelter det sammen med skabelonen)

Jeg tror, ​​at alt er klart her, selv uden en video-tutorial... Men stadig, som lovet, se her:

Det var alt for i dag, farvel!

Meget ofte er der sjove eller triste udklip fra videoer på internettet. De cirkulerer fra kommentar til kommentar og supplerer interessant indlæg eller kort beskrivelse af situationen. Ethvert øjeblik, der interesserer dig i en film, tv-serie eller YouTube-video, kan konverteres til en GIF-animation. For at gøre dette skal du blot have Photoshop version CS3 eller nyere. Ældre versioner understøtter ikke animation. For de fleste behageligt arbejde Det anbefales at bruge Photoshop CS5, CS6, CC 2014 eller nyere.

Først og fremmest skal du downloade videoen, et fragment, hvorfra du vil lave en animation. Det vil være bedre, hvis du først klipper de nødvendige få sekunder fra hele optagelsen. Dette kan dog også gøres ved hjælp af Photoshop selv. Det er vigtigt at huske, at programmet kun understøtter visse videoformater: *.mov, *.mpeg, *.mpg, *.avi og *.mp4.

Så for at lave en animation fra det ønskede segment af en video, skal du uploade den til Photoshop. Hvordan gør man det:

• I øverste menu find afsnittet "Filer".
• Klik på den, og hold musen over linjen "Importer" i rullemenuen.
• I menusektionen, der vises til højre, skal du klikke på "Videorammer til lag...".
• Måske fryser programmet lidt. Der er ingen grund til at forhaste hende. Et nyt vindue skulle åbne, hvor du skal finde filen med videofragmentet og vælge det.

Herefter indlæses videoen, og der vises et nyt vindue, hvor du skal vælge, hvilken del af optagelsen du vil behandle. Hvis fragmentet allerede er forklippet, kan du vælge "Fra start til slut", og hvis hele videoen er blevet indlæst, skal du selv vælge det ønskede område. For at gøre dette skal du bruge skyderne umiddelbart under den indlæste post. Når valget er gennemført, skal du klikke på "OK" og vente lidt - programmet behandler fragmentet og indtaster hver af dets rammer i separat lag.

Programmet kan kun importere 500 billeder ad gangen. Hvis dit fragment er længere end dette beløb, bliver du nødt til at opdele det i flere filer og uploade dem én efter én.

Afkrydsningsfeltet i vinduet "behold hver * frames" vil fjerne hver enkelt ramme fra optagelsen, serienummer som vil blive angivet. Dette vil gøre animationen mere "let", men på bekostning af intermittens.

Når Photoshop behandler videoen, vises rammer fra den i panelet Lag. Som standard vil kun én blive vist, den allerførste. Han vil være den laveste af alle.

Nu kan hvert lag behandles separat - tilføj tekst, en form for tilføjelse eller effekt. Hvis du anvender en effekt på det øverste lag, vil den blive vist gennem hele videoen. Alle lag, der ikke hører til frames, vil blive vist på samme måde. Hvis du skal have en genstand til at forsvinde i det rigtige øjeblik, så læg et lag med den over rammen, hvorefter den skal forsvinde. Og hvis du har brug for, at det kun vises på nogle individuelle rammer, skal du blot duplikere dette objekt flere gange og kombinere laget med det og hvert nødvendigt videolag separat (en kopi - et lag).

For at duplikere lag skal du højreklikke på dem og finde linjen "Opret et dubletlag".

Og nu lidt om redigering af animation. På tidsskalaen, der vises i bunden af ​​arbejdsområdet, i øverste højre hjørne Der er en rullemenu. Det er tilrådeligt at kigge der og tjekke nogle indstillinger. Især kan vi være særligt interesserede i:

Efter at have redigeret de indlæste rammer og tilføjet noget af dit eget, hvis det ønskes, kan du indstille antallet af gentagelser. Hvis du ønsker, at fragmentet skal være helt sløjfet, så find rullemenuen med antallet af gentagelser under tidsskalaen og vælg "Konstant".

De næste fire knapper efter rullemenuen giver dig mulighed for at se animationen med alle de ændringer, der er foretaget. Så er der knappen "Tilføj mellemliggende lag" (samme funktion som den tilsvarende sektion i menuen), og knappen "Opret en kopi af valgte lag". Dette kan gøre det meget nemmere at lave gentagne handlinger. Det er nok at vælge flere billeder på tidslinjen (tryk og hold Ctrl-tasten og klik på hver ramme med musen), og klik derefter på denne knap.

Separat under hver ramme er der tal og en pil. Hvis du klikker på pilen, kommer en rullemenu frem, hvor du kan indstille forsinkelsen for en bestemt frame. På denne måde kan du sætte farten ned eller en smule fremskynde individuelle fragmenter af den resulterende Gif. Og for at vælge hele animationen på én gang skal du vælge dens allerførste frame, flytte til den sidste og holde nede Skift-tasten klik på den. Uden at slippe Shift skal du ændre hastigheden på det sidste billede. Efter dette ændres denne parameter for alle tidligere.

Efter endelig indstilling af alle animationsparametre skal den gemmes. Vælg menusektionen "Filer", og find "Gem til web...".

Et nyt vindue åbnes, hvor du skal konfigurere indstillingerne for at gemme den Gif, du har oprettet. Det er bydende nødvendigt at indstille gemmeformatet til "Gif", ellers vil det ikke længere være en animation.

Her kan du konfigurere endelige dimensioner animation (bredde og højde), antallet af farver brugt i det og se, hvad der skete til sidst. Hvis alt passer dig, skal du klikke på knappen "Gem...". Herefter er der kun tilbage at vælge, hvor og under hvilket navn den færdige fil skal gemmes.

Gør det animeret gif billede Photoshop er meget muligt selv for en nybegynder. Photoshop giver dig mulighed for at oprette ramme-for-ramme-animation ved at ændre rammer og derefter gemme arbejdet som et gif-billede.

Det betyder, at Photoshop ikke selv skaber animationen, men kun organiserer en frame-by-frame-præsentation af præ-forberedte billeder og udlæser dem til det endelige format. Antal rammer i færdig animation gif kan være hvad som helst, men jo større tal, jo større bliver filstørrelsen. Derfor bør du altid stræbe efter at reducere antallet af rammer til et minimum. Men jo flere billeder, der afspejles i et sekunds animation, jo glattere bliver det. Det er generelt ikke en god idé at øge antallet af billeder i sekundet ud over 30, fordi det menneskelige øje ikke kan skelne flere billeder i sekundet. Selv i film og videoer bruger de 24 billeder i sekundet.

Også, når du opretter animation i Photoshop, bør du tage højde for det forskellige enheder og browsere kan ved forskellige hastigheder spille animation med stort beløb billeder i sekundet, afhængigt af din tekniske muligheder. Så, mobiltelefon kan f.eks. kun afspille 10 billeder pr. sekund. Det betyder, at et sekunds animation med 30 billeder på vil tage 3 sekunder, derfor vil animationen blive langsommere.

Når du vælger antallet af billeder per sekund af en animation, afhænger det hele af, hvad der vil blive afbildet i animationen og dens formål.

Det skal bemærkes, at antallet af billeder pr. sekund gif animation ikke konstant, og ændres nemt, når du opretter animation. Kort sagt er det muligt at angive visningstiden for hvert enkelt billede. For eksempel kan du indstille det første billede af en animation til at vare et sekund, og det andet billede til at vare fem sekunder.

Dette er meget nyttigt, når du skal holde en bestemt ramme længere, for eksempel med tekst, uden at øge vægten gif-fil. Et simpelt animeret billede kan typisk have op til 10 billeder i alt, normalt omkring 4-6.

Ved at indstille timingen af ​​forskellige frames, kan en 4-frame animation vare alt fra en brøkdel af et sekund til et minut eller længere. Men man skal huske på, at for lange animationer også bør undgås - animation er ikke et videoklip, nogle browsere venter ikke på slutningen af ​​animationen og begynder at afspille den fra begyndelsen, hvis den går tabt med det samme gif billeder fra skærmen.

Du skal også være opmærksom på, at kvaliteten og farvegengivelsen af ​​en tegning i gif-animationsformatet normalt er mærkbart lavere end i jpg-format eller lignende, dette
ejendommelighed.

Animation bør heller ikke udføres i høj opløsning, vil dette medføre yderligere belastning på browsere eller telefoner, og vil højst sandsynligt simpelthen sænke afspilningshastigheden. Afhængig af formålet med animationen kan den anbefalede opløsning være op til 100 - 150 pixels i bredden eller højden. Desuden, jo mindre højden af ​​animationen er, jo større kan dens bredde være, og omvendt. For eksempel er en billedopløsning på 400X50 pixels en acceptabel opløsning, men 400X150 er allerede for meget og er kun egnet til specielle formål.

Men det vigtigste, du skal være opmærksom på, når du opretter gif-animationer, er dens vægt. Til generel brug på internetsider eller på enheder bør animationens størrelse ikke overstige 400KB. Dette er maksimum.

Generelle anbefalinger i parametrene for gif-animation til generelle formål (avatarer, brugerbjælker, signaturer osv.)

Vægt- ikke mere end 400KB, bedre end 150KB - 200KB.
Tilladelse— i alt ikke mere end 30.000 pixels (mængden er højden gange bredden, f.eks. 400X50 = 20.000).
Fuld afspilningstid- ikke mere end 15 sekunder.
Antal rammer kan være hvad som helst, så længe vægten af ​​gif-filen eller animationstiden ikke overstiger ovenstående anbefalinger, normalt jo mindre jo bedre.
Antal billeder pr. sekund- ikke mere end 30, afhængig af behov.

Opret Photoshop-animation.

Photoshop kan kun oprette animationer, der starter med version CS3. For at oprette en animeret fil skal du enten forberede de nødvendige billeder på forhånd eller oprette billeder direkte ved hjælp af Photoshop.

I vores eksempel bruger vi alle muligheder på én gang. Vi laver en animation til "Avatar"-signaturen.

Klar mulighed:

Skabelse:

Lad os først finde kildebillederne til at lave animationen:

Lad os nu oprette en ny fil i Photoshop. Angiv bredde 400, højde 50. Farvetilstand- 8 bits.

Lad os nu aktivere vinduet "Animation". Vindue > Animation. Et særligt område til at arbejde med animation vises i bunden.

Det viser alle de frames, der er i animationen i rækkefølge. Indtil videre er der kun én frame, varighed 0 sekunder, men vi kan altid tilføje nye. Rammer kan altid omarrangeres, indtil billedet er gemt i gif-format.

Hver ramme viser de lag, der er synlige for den. I animationstilstand indstilles separate betingelser for synligheden af ​​laget eller dets andre egenskaber, gennemsigtighed, omrids, farve osv. for hver ramme.

Bemærk venligst, at lagegenskaberne for det første billede gælder for alle animationsrammer. Det betyder, at hvis du for eksempel ændrer tekstfarven for den tiende frame af animationen, vil den kun ændre sig på den tiende frame, og hvis på den første, så på alle frames af animationen på én gang.

Fyld lærredet med farve. Vælg Fyldværktøjet (standard, bogstavet G), og farven #3a55a4, og udfyld lærredet.

Lad os tilføje de originale billeder til lærredet (Filer > Placer, eller du kan blot trække dem fra mappen) og ændre deres størrelse.

Når du tilføjer nye billeder til lærredet, danner de et nyt lag. Det er disse lag, vi vil arbejde med i processen med at skabe animation.

Glem ikke at gemme dit arbejde med jævne mellemrum for ikke at miste de ændringer, du har foretaget. Bliv ved med at arbejde Photoshop fil muligt i PSD-format. (Standard).

Først skal du oprette layoutet af billedet og den første ramme. Det er vigtigt at bemærke, at browsere eller enheder, der ikke vil være i stand til at afspille animationen
vis kun dens første ramme. Derfor bør den første frame af animationen afspejle hele dens essens.

Vis og flyt animatsiya1-laget til venstre kant af lærredet. For at gøre dette skal du vælge det ønskede lag (animatsiya1), derefter: Rediger > transformer > vend vandret. Så flytter vi bare laget.

På den første frame har vi ikke brug for animatsiya2-laget, så vi skal skjule det. Hvis du skjuler et lag, vises det ikke i den valgte ramme. Lad os tilføje noget tekst (bogstav T). Du skal også ændre farven på teksten, for eksempel til hvid, ellers vil den helt smelte sammen med baggrunden.

Teksten er også et separat lag. Den første frame af animationen er klar. Lad os skabe en anden ramme. Mere præcist, lad os oprette en kopi af den første ramme. For at gøre dette skal du klikke på bladtegnet i animationsområdet.

Den anden ramme vælges automatisk, men vi kan vælge en hvilken som helst ramme, vi vil arbejde med.

For den anden frame vil vi skjule det første lag animatsiya1, og lave synligt lag animatsiya2. Anvend også en effekt på tekstlaget og mal det igen i en anden farve. Dobbeltklik på "AVATAR" laget, Styles > Color Overlay, og klik på det lille farvefelt. Lad os sætte farven #8fbeff.

Som følge heraf ser den anden ramme ud nu.

Selvom Photoshop ikke selv laver animation, kan det skabe mellembilleder. Lad os tilføje 5 mellemrammer mellem vores to. For at gøre dette skal du vælge "Opret mellemliggende rammer" til venstre for knappen "Duplicate frame" i animationsområdet. Men først skal du vælge to rammer, mellem hvilke mellemrammer vil blive oprettet. Du kan vælge flere billeder på én gang ved at holde Shift-tasten nede.

Lad os tilføje 5 rammer.

Nu består animationsrammebåndet af 7 rammer. Mellemrammer giver glidende overgang fra en ramme til en anden.

Du skal indstille billedets visningstid. Nu har alle billeder ingen visningstid - 0 sekunder.

Tidspunktet for visning af rammer kan indstilles i bulk - ved valg af flere rammer, eller separat for hver. Lad os indstille visningstiden fra frame 1 til 6 til 0,1 sekunder og frame 7 til 1 sekund. For at gøre dette skal du klikke på pilen ved siden af ​​rammens visningstid.

Parat! Animation frames båndet er klar. Den kan ses direkte i Photoshop ved at klikke på Play-pilen i animationsområdet.

Formatet skal indstilles til Gif. Alle andre indstillinger påvirker gif kvalitet animation og dens oprindelige vægt. Hvis animationen viser sig at være for tung, kan du reducere antallet af farver til eksempelvis 128 eller straks optimere animationen til den ønskede filstørrelse. For at gøre dette skal du klikke på ikonet med tre streger øverst til højre, vælge "optimer efter filstørrelse" og indtaste den oprindelige vægt. Selve animationen optimerer til påkrævet vægt med minimalt muligt kvalitetstab.

Dette er selvfølgelig det enkleste eksempel skabe gifs animation i Photoshop, men det viser det grundlæggende - hvordan animation skabes. Med eksperimentering kan du lave bedre, mere detaljerede og smukke animationer, men princippet om deres skabelse er det samme.