Create en Daft Punk GIF animasjon ved hjelp av Illustrator og Photoshop
Dette innlegget er en del av en serie som heter animasjon i Adobe Photoshop.Quick Tips: Animere en News Ticker GIF Med PhotoshopCreate Animated Falling Snow i Photoshop

Jeg skal vise deg hvordan du kan lage en animert Daft Punk hjelm GIF med Adobe Illustrator og Adobe Photoshop. Denne opplæringen krever litt tid, men det vil være verdt det når du ser hjelmen kommer til liv, så kan få popping.

Den faktiske eksempel på Daft Punk grafikken er bare for opplæringsformål og ikke skal brukes i en avsluttende personlig prosjekt uten tillatelse fra de opprinnelige skaperne.

Som en del av denne opplæringen, kan du sjekke ut den føk opp tid forfalle av opplæringen ved å sjekke ut videoen nedenfor! Hvis du ønsker nærmere opplysninger om hele prosessen, bla for å finne ut mer.

1. Sett opp din Document

Trinn 1

Start Adobe Illustrator, og opprette et nytt dokument (Command + N) og sted (Fil > Place) Daft Punk kunstverk fra " Random Access Memories " på din kunst bord. Jeg har valgt dette bildet som du kan tydelig se halvparten av en hjelm. Dette kan spores til å skape vår hjelm basen.

Trinn 2

Til å begynne med, ønsker du å opprette fem lag på toppen av laget som inneholder albumbilder. Velg " Foto " lag og sett Opacity til rundt 50%, slik at du vil kunne se dine slag mer tydelig. Sørg for at din referanse er justert til midten av kunsten din bord.

Trinn 3

Jeg foreslår at du Lås alle lagene du vil ikke være med på dette tidspunktet. Bare for å sørge for at alle slag vil bli plassert på riktig lag.

2. Lag Outlines

Trinn 1

Lag en guide på midten av bildet og Lås anvisning (Command + Alt +;). Det er svært viktig at denne veiledningen ikke vil flytte, og er sentrert på alle tider av prosessen. Denne guiden skal dele de to sidene av hjelmen. Starte sporing bildet med Pen Tool (P) på " Outlines " lag. Jeg foretrekker å jobbe i en lys farge (rosa) for å skille mine skisserer fra referanse. Hold slag tynn og tydelig, slik at du kan se kurvene du trenger for å lage. På dette punktet er det ikke et problem hvis slagene dine blir overlapper hverandre, vil dette bli korrigert senere

Trinn 2

Rydde opp i overlappende strøk og slå av ". Foto " lag å se resultatet av din sporing. Skisserer bør se omtrent slik ut skjermbildet nedenfor.

Trinn 3

Du skapte bunnen av hjelmen, det er så enkelt som det. Legge litt mer vekt på slag i slag panel (rundt 10pt Stroke vekt) for å gjøre dem pop litt mer. Nå er du klar til å reflektere konturene du nettopp opprettet. Velg konturene og åpne Nødvendigvis alternativer (O + Enter) dra trådkorset over til sentrum guide. Trykk Alt og velg Kopier.

Trinn 4

Dette begynner å ligne en faktisk hjelm. Nå må du bli med de to delene som du har opprettet. Bruke Direct Selection Tool (A), drar over de to første punktene (1) og Bli med dem (Command + J). Du kan bare delta to åpne baner samtidig. Gjenta dette trinnet for de andre tre poeng for å fullføre design skisserer

Trinn 5

Du kommer til å velge alle konturene og objekt >.; Utvide dem til å forvandle dem til fylte former. Nå kan du miste den rosa fargen og gi skisserer en mørkere farge. Gå videre og Lås opp " Farge " laget.

Trinn 6

Dine skisserer er ikke lenger slag, men fylt former. Nå vil du slå sammen alle konturene i én enkelt bane via Pathfinder
panel. Igjen, velg " Outlines " lag og Unite.

3. Legg farge til Daft Punk hjelm

Trinn 1

Du ønsker å lage en ren sti å legge farge. Med både " Outline " og " Farge " lag ulåst vi skal legge farge på en rask og enkel måte. Velg " Outline " lag og trippel klikk på hjelmen former for å angi Isolation Mode. Du ønsker å velge innsiden av banen (sjekk den grønne smart guide som definerer innsiden av banen). Velg alle områder som dette som du ønsker å legge farge til og kopiere dem

Trinn 2

Du bare kopiert de gjennomsiktige innsiden av ". Outlines ". Gå videre og Lås " Outlines " lag og velg " Farge " lag som allerede var ulåst. Nå Lim (Command + Alt + Shift + V) hva du bare kopiert fra " Outlines " lag på " Farge " lag. Hvis du slår av " Outline " lag bør du få noe som skjermbildet nedenfor.

Trinn 3

Dine farge banene er nå passer perfekt i skisserer. Slå på " Outline " lag og du vil se Illustrator kan ikke håndtere denne awesomeness og vil vise en liten gap i mellom farge og skissere baner. La oss bli kvitt det

Trinn 4

Velg ". Farge " stier du opprettet tidligere, og oppretter et objekt > Offset å utvide disse banene litt. Siden de legger under skisserer gapet vil forsvinne. Forskyvning oppretter en ny bane på den forrige banen, så forene dem tilbake til ett stykke.

Trinn 5

Velg den banen du nettopp opprettet og opp gruppe (Command + Shift + G). Velg kurven av hjelmen og gi den en gull ser ut som du ser i bildet nedenfor. Jeg foreslår at du fyller glasset av hjelmen med samme farge som du brukte i konturene.

Trinn 6

Nå kan du legge litt skygge til gull bezel. Låse opp " Shadow " lag og arbeider innenfor dette laget. Du kan bare improvisere på hvordan disse skal se ut, eller du kan slå av " Farge " lag og slå på " Foto " lag å bare spore skyggeområdene du ser i referansen. Akkurat som skyggeområdene, må du gjøre det samme for uthevede områder mens du arbeider på din " Marker " lag

Trinn 7

Så Opprett nytt lag på toppen av ". Shadow " lag og under " Outline " lag. Name it hva du vil, jeg heter det " 100% skygge " fordi det vil bli brukt til å legge tung skygge å legge effekten av gull og refleksjon. Som du kan se i lagpanelet din " 100% skygge " lag er omfattet av " Outline " lag, så ikke bry deg om dine stier ser slurvete, er dine skisserer dekker det opp

Trinn 8

Og akkurat som vi gjorde tidligere, skal du velge ". Farge ", " Marker ", " Shadow " og " 100% skygge " og reflektere (O + Enter) disse banene over y-aksen for å fullføre den andre halvdelen av hjelmen.

4. Lag Heavy Strokes rundt hjelmen

Trinn 1

Opprett nytt lag under " Farge " lag og gi den navnet " Offset ", siden dette vil være din tunge slag skisserte hjelmen. Lås opp " Outline " laget og velge alle skisserer og kopiere dem. Når du har gjort dette, Lås dette laget igjen

Trinn 2

Lim konturene du bare kopiert på nøyaktig samme sted (Command + Alt + Shift + V) på ". Offset " lag du opprettet tidligere. Virker som de forsvant, fordi de legger under alle de andre banene. Med " Offset " laget valgt å gå videre og legge et strøk til " Offset " lag. Du vil opp Stroke Vekt av at omrisset slag til rundt 20 pkt. Hjelmen nå er skissert av en tung vekt hjerneslag. Hjelmen ser flott ut!

5. Opprett LED-skjerm på innsiden av hjelmen

Trinn 1

Opprett nytt lag under " Outline " lag og gi den navnet " LED ". På midten av hjelmen (samme guide vi opprettet tidligere) lage en hvit Ellipse (L) som er har en diameter på 10px. Så din LED-skjermen vil være å bygge med disse 10px diameter ellipser. Med ellipse du nettopp opprettet likevel valgt åpen Move alternativer (V + Enter). Vi vet ellipsen er nøyaktig 10px i diameter, så vi kommer til å flytte den 15px til høyre, og skaper et gap på 5px i mellom hver LED. Pass på at du trykker på Kopier. Hold ellipse du nettopp opprettet ved å kopiere den og Object > Transform Again (Command + D) for å gjenta prosessen med å kopiere ellipsen til skjermen er dekket med LED-lys.

Trinn 2

Dette bør være resultatet. Pass på at du kopierer ellipse noen ganger mer som på bildet nedenfor, fordi vi vil være behov de ekstra ellipser senere.

Trinn 3

Nå velger alle ellipser du nettopp opprettet. Du er nå kommer til å gjøre akkurat det samme, men i en annen retning. Kopier rad med LED-lys 15px over til høyre inntil de overlapper hverandre hele skjermen på hjelmen.

Trinn 4

Igjen, kopiere noen ekstra rader med LED-lys. Det spiller ingen rolle at de er overlappende hjelmen, vil vi håndtere det når vi må. LED-skjermen skal nå se omtrent ut som bildet nedenfor.

Trinn 5

Nok en gang har vi tenkt å kopiere den ene siden av LED-skjermen du nettopp opprettet over til den andre siden av hjelmen ved å reflektere (O + Enter) den horisontalt over midten guide opprettet vi tidligere. Legg merke til at jeg ikke valgte den første raden med LED-lys som er plassert på midten guide. Vi vil ikke kopiere disse fordi du vil ha overlappende baner.

Trinn 6

For å illustrere det igjen, er det akkurat det samme som du gjorde et par ganger før. Velge LED-lys, Åpne Nødvendigvis alternativer (O + Enter), dra den blå kors til sentrum guide med Alt presset ned på tastaturet og kopiere den vertikalt.

Trinn 7

Dette er resultatet, en fantastisk LED-skjermen er laget på " LED " lag. Hver enkelt LED-lys har nøyaktig samme diameter og er adskilt 5PX i mellom hverandre. La oss bryte disse LED-lysene til formen på hjelmen

Trinn 8

Velg LED-lys og skape en wrap Object >.; Konvolutt Distort > Lag med Wrap. Bruk innstillingene jeg brukte på bildet under for å få LED-skjermen til riktig form og trykk OK.

Trinn 9

Du ønsker å utvide Konvolutt Distort du nettopp opprettet. Dette vil frigjøre dine stier fra brytes slik at du er i stand til å forvandle dem igjen. Dette er hva din hjelm og LED-skjermen skal se ut som på dette punktet av opplæringen

Trinn 10

Velg LED-lys og skape en wrap Object >.; Konvolutt Distort > Lag med Wrap. Bruk innstillingene jeg brukte på bildet under for å få LED-skjermen til riktig form og trykk OK.

Trinn 11

Utvid konvolutt Distort du nettopp opprettet igjen. Velg din LED-skjermen igjen, og nå ønsker å gjøre en annen konvolutt Distort for siste gang ved hjelp av innstillingene i bildet nedenfor. For å oppsummere, du nettopp opprettet tre forskjellige Konvolutt Distort effekter og utvidet

Trinn 12

Gå videre og låse opp din ". Farge " lag og velg banen på skjermen. Med den veien valgt Copy (Command + C) og lim (Command + V) på " LED " lag og Arranger > Send til Back. Ikke fjern markeringen den veien du bare limt og gi det en farge som gjør en klar for deg å se forskjellen mellom de ulike banene lapper hverandre.

Pass på at du Lås " Farge " lag igjen. Hodet tilbake over til " LED " lag og velg både rosa LED-lys og den gule banen på skjermen i ryggen. Med de begge valgt, kan du gå til Pathfinder-panelet og dele disse to banene. Slett alle LED-lys som faller utenfor den gule banen.

Når du er ferdig med det vi ønsker å bli kvitt den stygge gule, vi bare brukt dette for å gjøre det å dele mer tydelig. Velg Magic Wand Tool (Y) og klikk på den gule stien (sørge for at alle andre lag er låst, siden du kan ha brukt den samme gule på et annet lag). Nå Illustrator valgt alle de gule områdene i mellom disse rosa LED-lys. Slett den gule. Resultatet er en innpakket LED-skjerm som den til høyre nederst på bildet nedenfor.

Trinn 13

Nå vil du velge din komplett LED-skjermen og opp gruppe (Command + Shift + G ) den. Når ugrupperte slette én side av LED-skjermen. Jeg slettet halvparten til høyre for sentrum guide vi gjorde i starten av opplæringen. Velg venstre side av LED-skjermen, men nok en gang, ikke raden på midten guide og Nødvendigvis (O + Enter) denne siden vertikalt ved å kopiere den.

Trinn 14

LED-skjermen er nesten klar. Gi den en annen farge via fargepanelet for å gi den inntrykk av å være en LED-skjerm, ved å gjøre det litt lys da fargen på skisserer og skjermen form. Nå din LED-skjermen består av en solid farge, så de som er ment å være den nærmeste til vårt synspunkt (på midten guide) er nøyaktig samme farge som de som er på sidene av hjelmen. Vi ønsker å gi inntrykk av perspektiv ved å la lampene sakte filtrert bort til sidene av skjermen. Med LED-skjermen har valgt å gjøre en sammensatt bane (Command + 8). Vi kommer til å bruke en gradient i en liten stund å lage denne effekten, det er derfor vi opprettet en sammensatt bane å strekke gradient over hele banen og ikke bare bruke den til hver enkelt LED lys individuelt.

Trinn 15

Først skal vi legge til noen lys til hjelmen for å manipulere et glass effekten på skjermen. Opprett nytt lag under " Outline " lag og gi den navnet " Top høydepunkt ". Lås opp
din " Farge " lag og velg banen av skjermen igjen og Copy (Command + C) (som vi gjorde noen skritt tilbake). Når kopiert Lås " Farge " lag og velg " Top høydepunkt " lag. Lim inn (Kommando + V) denne veien en gang, og på toppen av at banen

Du har bare limt pasta (Kommando + V) en annen igjen. Nå to nøyaktig samme baner lapper hverandre. Velg den øverste banen og dra den ned litt. Velg begge baner og dele dem i Pathfinder-panelet. Banen skal se ut som den veien som er høydepunktet i skjermbildet nedenfor. Nå ønsker vi å legge til en Gradient (G) på denne banen som er filtrert ut til bunnen. Bruk innstillingene du ser i skjermbildet nedenfor

Trinn 16

Lås ". Top Marker " lag og Lås opp din " LED " lag. I trinn 14 vi allerede laget en sammensatt bane så vi velger denne og legge en Gradient (G) til det som i skjermbildet nedenfor. De to fargemarkører i Gradient panelet er nøyaktig samme farge som fargen som brukes i konturene og skjermen som vi gjorde i " Farge " lag. Senteret farge markør bør være litt lysere (fargen vi brukte tidligere i trinn 14) enn de to på utsiden som skaper effekten av perspektiv.

Step 17

Velg alle LED-lys i " LED " lag og Løs opp gruppe (Command + Shift + G).
Vi skal nå arbeide med å splitte lysdiodene for å gjøre det enklere når det gjelder å skape animasjon.

Trinn 18

Du bare kutte ut åtte linjer med LED-lys < b>.
For denne opplæringen skal jeg lage syv forskjellige farger av LED-lys som vi vil animere senere. Vi fortsatt ikke lime LED linjene vi bare kutte bort. Først bør du opprette sju nye lag som vil hver inneholder en annen del av LED-skjermen. Dette gjør det enklere å animere, og siden vi har å gjøre med en sammensatt bane, er det mer fornuftig. Med LED lag 1 til 7 skapt, Lim (Command + V) de åtte linjene du klippe ut i forrige trinn på " LED en " lag. Gjenta dette trinnet ytterligere seks ganger.

Gå tilbake til " LED " lag og skriv Isolation Mode ved trippel klikke en tilfeldig LED lys og velge en annen gruppe med LED-lys, Cut (Command + X) dem og lime dem på " LED 2 " lag. Hold gjør dette til alle LED-lys fra LED lag er fordelt over de sju LED-lagene du nettopp opprettet. Jeg begynte i midten med en gruppe med åtte rader. Da jeg flyttet opp til toppen av LED-skjermen jeg hver gang valgt færre rader med lys for å øke perspektiv.

Trinn 19

Du har nå syv lag fylt med LED-lys. Nå er det på tide å gi alle disse forskjellige partier en annen farge ved å fylle dem med en gradient som de vi brukte før. Bare denne gangen sentrum farge markedet i Gradient panelet kan være noen lyse farger ditt ønske. Nedenfor viser jeg dere mine fargekombinasjoner for de forskjellige LED lag. Så for å bryte det ned for deg. Velg " LED en " lag og bruke gradient man starter på venstre hjørne av bildet nedenfor. Opp neste, velg " LED 2 " lag og bruke andre gradient til det, du tar poenget.

Trinn 20

Når du er ferdig med å legge alt som farge på LED-lag hjelmen er endelig ferdig og skal se noe som dette. Awesome, lar nå animere denne tingen!

6. Forberede animasjon

Trinn 1

La Illustrator ta en pust akkurat nå og lansere Adobe Photoshop. Opprett nytt dokument (Command + N) og bruke innstillingene jeg brukte i skjermbildet nedenfor (1000 x 1000px og RGB farge).

Trinn 2

Med det nye dokumentet opprettet gå tilbake til Adobe Illustrator og velg " Offset ", " Farge ", " Marker ", " Shadow ", " 100% skygge " og " Outlines " lag og Copy (Command + C) dem. Nå er vi bytte tilbake til Adobe Photoshop igjen en vi Lim (Kommando + V) banene vi bare valgt i Adobe Illustrator på vår tomt lerret. Et vindu vil komme opp med å spørre deg hvordan du vil lime disse stedene. Velg smart objekt. Nå hjelmen er limt inn som et smart objekt i Adobe Photoshop knyttet til Adobe Illustrator.

Gi nytt navn til laget ditt bare limt inn i Adobe Photoshop til " hjelm " (dette er en layer). Nå vil du gå til Layer > New > Gruppe og opprette en ny gruppe på toppen av " hjelm " lag. Kalle denne gruppen " LED ", siden dette vil bli som inneholder rammer for animasjon. Nå kan du gå tilbake til Adobe Illustrator igjen og kopiere " Top høydepunkt " lag. Bytt tilbake til Adobe Photoshop og lim (Command + V) dette som et smart objekt på toppen av LED-gruppen du nettopp opprettet (dette er lag 2). Bildet nedenfor er illustrasjon fordelingen av lag i Adobe Photoshop.

Trinn 3

Gå tilbake til Adobe Illustrator. Skillet av LED-lys på forskjellige lag er praktisk å raskt legge forskjellig farge til en annen del av LED-lys. Du må opprette syv forskjellige "frames" av farge som vi kan bruke i animasjonen. Så, den første hjelmen på bildet under er ditt første "ramme". Låse alle lag forvente at sju LED-lag. Nå velger alle de sju LED-lag som i min første hjelm og Copy (Command + C) dem (din første rammen er nå lagt til din utklippstavlen).

Nå må vi lime dette første bildet i vår LED kartet i Adobe Photoshop. Så limer dette og ikke velge Smart Object, men piksler. Dra og slipp lag du limte til " LED " gruppe og endre navnet til " en ". Din første rammen er opprettet. Flott jobb!

Nå går vi tilbake til Adobe Illustrator, og vi gjør det andre rammen. Det er veldig enkelt. Som du kan se den nederste raden av LED-lys i den første rammen er rød, vi ønsker at det skal gå opp. Så i vårt andre ramme vi flytter hver enkelt farge en rad med LED lyser. Som du kan se den andre raden med LED-lys i den andre rammen er nå rødt og hver eneste farge flyttet én rad opp. Når hver farge blir flyttet, igjen velge alle de sju LED lette lag, Kopier (Kommando + C) dem. Gå tilbake til Adobe Photoshop og lim (Command + V) dem i " LED " gruppe på toppen av den første LED-lag. Gi det til " 2 ". Du gjenta dette trinnet til du har syv rammer og hver enkelt LED-lys gruppen skiftet fra farge. Bildet nedenfor viser deg hvordan rammene skal se ut.

Etter hvert vil du også ende opp med syv forskjellige rammer i LED-kartet i Photoshop. Dette er hva det skal se ut. Plassering av LED-lag rammer er av i Photoshop. Velg alle sju LED-lag i lagpanelet og flytte dem opp litt før den får plass på skjermen på hjelmen.

Trinn 4

LED-skjermen er overlappende rammen av hjelmen , så gå tilbake til Illustrator og Lås " Outline " lag. Velg rammen i dette laget og Copy (Command + C) den. Lås " Outline " lag igjen.

Trinn 5

Slå tilbake til Photoshop. Lim inn lag på toppen av LED-skjermen for å dekke opp LED-lys vi trenger ikke å se. Endre navn på lag til " Ramme ".

7. Lag animasjon

Trinn 1

I Photoshop sørg for at du bruker Motion arbeidsområdet. Hvis du ikke er sikker på hvilken arbeidsområdet du bruker, øverst til høyre er det en rullegardinmeny du kan velge mellom. Arbeidsområdet vil forvandle og Video tidslinjepanelet vil dukke opp. Hvis du ikke ser dette vinduet gå til Vindu > Tidslinje. I forrige avsnitt opprettet vi alle filene vi trenger for å lage en enkel animasjon.

Så la oss få til animasjon. Trykk Opprett Video Tidslinje. Hvis du ikke jobber i Photoshop CS6, vil du få en standard ramme visning. For de som arbeider i CS6 en bevegelse tidslinje vises, trenger vi ikke det, så klikker den lille rammen symbol i nedre venstre hjørne av Video Tidslinje Window.

Trinn 2

I videoen tidslinjepanelet opprette seks nye rammer. For hver ramme i videoen tidslinjepanelet sving på riktig lag i Lag-panelet. Hva mener jeg? På ramme en i tidslinjepanelet lag 1 i Layer Panel skal være slått på, må alle de andre LED lagene slås av. På ramme to i tidslinjen Window lag 2 i Layer Panel skal være slått på, må alle de andre LED lagene slås av. Gjenta dette trinnet til du gjorde dette for hvert enkelt bilde.

Trinn 3

Nå kommer du til å gjøre animasjonen litt mer dynamisk ved tweening rammene. Velg de to første bildene i videoen tidslinjepanelet. Nå klikker du på Tween ikonet i tidslinjen og bruke innstillingene i skjermbildet nedenfor.

Trinn 4

tween alternativet vil opprette tre rammer i mellom rammene du valgte å flette dem fra en til en annen . Dette betyr at fargen ikke vil hoppe fra én farge til en annen, men det vil visne fra én farge til en annen. Som du ser i skjermbildet nedenfor, viser den første tiden linjen de to rammene du har valgt før tweening. Det andre bildet viser de tre rammer som ble lagt til av tween alternativet. Du bare gjorde dette for de to første bildene, nå gjenta denne prosedyren for de andre seks rammer.

Så det du gjør nå er å velge ramme 5 og 6, trykker tween og bruke den til disse to rammer. Deretter vil du bruke det samme til rammer 9 og 10, 13 og 14, 17 og 18, 21 og 22. Kontroller at timingen på rammene er satt til 0 for å gi deg en myk overgang i animasjonen. Hvis det ikke er satt til 0 farten for å ramme en og velge det. Med den rammen valgt, kom til det siste bildet, holder du nede Shift + klikk på den siste rammen. Du har nå valgt alle dine rammer.

Trinn 5

Din GIF er nesten klar til å bli lagt ut på world wide web. Først må du lagre det ved Lagre for Web & Enheter (Command + Alt + Shift + S). Et vindu vil komme opp med å gi deg en haug av alternativer. Først må du velge GIF fra rullegardinmenyen og bruke innstillingene jeg brukte i skjermbildet nedenfor. Ikke glem å sette Looping Alternativ til evig tid. Hvorfor i all verden skulle du ikke gjøre denne awesome GIF loop? Lagre og du er ferdig.

Jøss ... at GIF er Awesome! Well Done!

Gratulerer! Det har vært en lang prosess, men det er definitivt verdt det å se sluttresultatet. Hvorfor ikke prøve en tilsvarende prosess for å skape andre GIFs som starter livet i Adobe Illustrator? Anmeldelser