Slik oppretter du en Climate Change Infographic i Adobe InDesign

Hva du skal skape

Bidra til å spre bevisstheten om virkningen av global oppvarming med denne informative klimaendringen infografisk. Enkel å tilpasse til ditt eget valg av fakta og statistikk, dette er en flott mal for å skape en unik design.

Vi oppretter oppsettet i Adobe InDesign og forberede den til å dele på nettet, på sosiale medier eller Pinterest. 

Klar til å spre ordet om klimaendringer? La oss komme i gang…

Hva du trenger å lage din infografiske

Du trenger tilgang til Adobe InDesign og Adobe Photoshop å skape ditt design. Hvis du vil lage sirkulær pie-diagramgrafikk, må du også ha Adobe Illustrator å gi. I tillegg må du laste ned følgende bilder og fontfiler:

  • Isbjørn foto
  • Charlevoix Pro font, i vanlige og fette vekter
  • Vektvektorillustrasjon fra dette ikonsettet

Hvis du vil tilpasse designet ditt med flere ikondetaljer, kan du se på å bruke noen av ikonene i dette energisettet eller dette miljøet.

Når du har lastet ned bildene og installert fonter på datamaskinen, er du klar til å dykke inn.

1. Hvordan sette opp ditt infografiske dokument

Trinn 1

Åpne opp InDesign og gå til Fil> Nytt> Dokument. Velge web for Intent øverst og avvelg Facing Pages

Under Sidestørrelse, sett Bredde til 1800 px * og Høyde til 6950 px (Du kan justere høyden senere hvis du ønsker det ved å bruke Sideverktøy).

Klikk OK å lage dokumentet ditt. 

* Pinterest anbefaler en bildebredde på 600 px. 1800 px er tre ganger den anbefalte bredden, noe som betyr at designet vil bli skarpt og klart når det senere endres

Steg 2

Utvid lag panel (Vindu> Lag), og dobbeltklikk på Lag 1 å åpne alternativer vindu. Gi nytt navn til laget Bakgrunn og klikk OK.

Klikk på Lag nytt lag knappen nederst på panelet og omdøpe dette andre laget Bilde. Deretter oppretter du et siste nytt lag som heter typografi

Lås alle lagene bortsett fra Bakgrunn

Trinn 3

Det er en god ide å lage en komplett fargepalett for bruk på tvers av designet ditt før du begynner. Dette er hvordan.

Utvid fargeprøver panel (Vindue> Farge> Svampe), og velg Ny fargekvoter fra panelets rullegardinmeny (øverst til høyre). 

Med Type satt til Prosess og Modus til RGB, juster nivåene på Rødgrønn og Blå til du har opprettet ønsket resultat. Klikk Legg til og så OK

Gjenta denne prosessen for å lage flere RGB-fargeprøver, og bygg opp en full palett. For å opprette paletten som brukes på utformingen avbildet her, opprett følgende fargeprøver:

  • R = 251 G = 252 B = 247
  • R = 224 G = 110 B = 9
  • R = 164 G = 104 B = 13
  • R = 118 G = 81 B = 37
  • R = 229 G = 35 B = 47
  • R = 168 G = 217 B = 232
  • R = 83 G = 172 B = 188
  • R = 45 G = 4 B = 11
  • R = 116 G = 194 B = 206
  • R = 47 G = 154 B = 172
  • R = 0 G = 127 B = 159
  • R = 51 G = 52 B = 80

Trinn 4

Du kan også opprette to gradientprøver ved å velge Ny Gradient Swatch fra panelmenyen. Her kan vi lage en "Heat Gradient" og en "Flood Gradient" for å skape kontrasterende effekter på designen. 

For Varme Gradient swatch, sett inn Type til radial og velg fargeprøver for Stopp farge. Velg deretter en mørkere rød fargeprøve for ett stopp og en oransje fargeprøve for den andre.

For Flood Gradient swatch, velg en blek blå for ett stopp og [Papir] (hvit) for den andre. 

Trinn 5

Med linjene synlige (Vis> Vis linjaler), dra en guide ned fra topplinjalen, ned til Y-posisjon 1865 px (du kan se dette i toppen kontroller panel).

Dra en annen guide ned til 3780 px, en tredjedel til 4540 px, og en endelig til 5385 px. Dette deler opp på siden, klar for å bruke bakgrunnsfargen vår. 

2. Hvordan bygge opp en bakgrunn på layoutet ditt

Trinn 1

Ta Rektangelverktøy (M) og dra over den øverste delen av siden, og strekk den ned til den første guiden. Fra fargeprøver panel, sett inn Fylle til en himmelsblå prøveprøve. 

Lag flere rektangulære former, fyll på hver av de angitte delene med en farge, bestått fra blek, sjøblå til dyp blå mot bunnen. 

Steg 2

Zoom inn i bunnen av siden. Bruke Pennverktøyet (P) å tegne en grov form, etterligne sandkurver på bunnen av havet. Sett Fylle til en mørk ferskenfarge. 

Rediger> Kopier, Rediger> Lim inn formen, og flytt den under, som dekker hele bunnen av siden helt. Juster Fylle til en beige skygge. 

Trinn 3

Rull opp mot toppen av siden. 

Bruke Pennverktøyet (P) å tegne en rett linje over toppveien (under den første fargede delen), og deretter trekke den ned og arbeid deg over, og skape en skarp illustrasjon. Dette gir inntrykk av undersiden av et isberg. 

Bli med i illustrasjonen i en komplett form og sett inn Fylle til [Papir].

Utvid Stroke panel (Vindu> Stroke), og sett Vekt av streken til 6 pt og Type til Høyre skråstikk, for å gi designet litt tekstur. 

Til slutt, hodet opp til Objekt> Effekter> Drop Shadow. Ta med opacity ned til 10% og sett Effektfarge (ved å klikke på det fargede torget ved siden av Modus meny øverst) til en litt kontrastfarve blå nyanse for å gjøre skyggen til å virke subtil og naturlig. 

Klikk OK å gå ut av. 

3. Slik redigerer du bildet for Infographic

Trinn 1

Hodet opp til Fil> Lagre for å redde ditt design, og minimere vinduet et øyeblikk. Åpne isbjørnens foto inn Photoshop

Dupliserer Bakgrunn lag for å holde en kopi av bildet intakt, og slå av synligheten. 

Bruk deretter Lasso Tool (L) å dele av et område rundt kanten av bjørnenes silhuett. Målet er å isolere bildet fra bakgrunnen. 

Når du har valgt et område, klikker du på Avgrens kant knappen i toppen kontroller panel, og sjekk Smart Radius. Juster skyvekontrollene til du er fornøyd med nøyaktigheten av valget, før du klikker OK

Deretter treffer du Slett på tastaturet for å fjerne valget. 

Arbeid deg rundt hele bildet til hele bakgrunnen er fjernet. 

Steg 2

Bildet vil se mer stilig ut i det endelige layoutet hvis vi konverterer det til svart og hvitt.

Hodet opp til Bilde> Justeringer> Kanalmiksere. Kryss av Monochrome nederst i vinduet, og juster nivåene til du er fornøyd med resultatet. Klikk OK.

Deretter Fil> Lagre som ditt bilde som en Photoshop (.psd) fil, som vil bevare den gjennomsiktige bakgrunnen og kvaliteten på bildet. 

Trinn 3

Gå tilbake til din InDesign dokument og lås Bakgrunn lag. Lås opp laget ovenfor, Bilde

Bruke Rektangelrammeverktøy (F) å lage en bilderamme over toppen av isbjergillustrasjonen og bunnen av himmelsblå farget seksjon.

Fil> Plass, Velg din Photoshop bilde og Åpen

Trinn 4

Med den valgte bilderammen, gå til Objekt> Effekter> Gjennomsiktighet, og sett Modus til Hardt lys. Klikk OK.

Velg deretter bilderammen og Rediger> Kopier, Rediger> Lim inn i sted, oppretter en andre kopi av bildet lagret over toppen. Gå tilbake til effekter vindu igjen, og juster Modus til Normal og opacity til 50%

4. Slik formaterer du typografi for Infographic

Trinn 1

Lås Bilde lag og låse opp topplaget, typografi

Bruke Typeverktøy (T) for å lage en tekstramme øverst på siden, og skriv inn tittelen på infografisk. 

Fra enten kontroller panel øverst på arbeidsområdet eller Karakter og Avsnitt paneler (Vindu> Type og Tabeller> Tegn), sett Font til Charlevoix Pro Fet, Størrelse 140 pt, Sporing 40, og Juster senter. Juster Skriftfarge til [Papir] fra fargeprøver panel.

For å lage en kant rundt tittelen, klikk på tekstrammen med Utvalgsverktøy (V, Escape), og sett Stroke av rammen til [Papir] fra fargeprøver panel. Så gå til Objekt> Tekstrammealternativer og øke Inset verdi (her til 30 px) til teksten er pent sentrert i rammen.

Du kan også lage en tekstramme under hovedtittel for en undertekst hvis du ønsker det. Sett inn teksten Charlevoix Pro Regular.

Steg 2

Lag en ny tekstramme og lag over toppen av isbjørnens bilde. Skriv inn '2050' og sett Skriftfarge til Varme Gradient. Sett Font til Bebas Neue og gjør Skriftstørrelse veldig sjenerøs (rundt 600 pt).

Du kan også justere åpenhet innstillinger i effekter vindu til Multiplisere, å bringe gjennom noe av bildet under. 

Trinn 3

Lag en tekstramme øverst til venstre på isbjørnen, og skriv inn ditt første faktum. Du kan selvfølgelig tilpasse dette til hvilken statistikk du vil presentere. 

Sett Font til Charlevoix Pro og spill med proporsjoner av teksten, juster Skriftstørrelse, Ledende (linjeavstand), og Skriftfarge å lage et hierarki i avsnittet og trekke ut nøkkelord. 

Trinn 4

Du kan opprette "pekere" for tekststykker ved å bruke Linjeverktøy (\). I Stroke panel, sett inn Type til CircleSolid.

Legg til kreditter for hver statistikk i en egen tekstramme, sett inn i en mindre Skriftstørrelse.

Trinn 5

Du kan opprette piler ved å bruke Linjeverktøy (\) og Stroke panelet, selv om jeg generelt foretrekker å bruke Linjeverktøy å skape både stang og pilhodet, slik at jeg kan kontrollere de nøyaktige proporsjoner av pilen. 

Her har jeg laget en pil til høyre for isbjørnen, før du setter inn en statistikk Charlevoix Pro Fet i en tekstramme ved siden av den. Jeg har justert Skriftfarge til Varme Gradient for ekstra innvirkning. 

Jeg fortsetter å bygge opp tekst rundt denne nøkkestatistikken, sett i mer pared-back Charlevoix Pro Regular og a [Papir] Skriftfarge. 

Trinn 6

Når du har laget en statistikk, kan du bruke dette som en modell for å skape andre, ved å kopiere og lime inn. 

Her har jeg lagt inn pilen og tekstrammer på midten av isbergsdelen, og justert tekstinnholdet og Skriftfarge. 

Når du er helt fornøyd med formateringen og ordningen av tekst, kan du gå opp til Skriv> Opprett oversikter å vektorisere denne teksten *. Dette gjør at du kan skala gruppen enkelt for å passe ditt design. 

* Vær oppmerksom på at dette forhindrer deg i å bruke ytterligere formatering, for eksempel justering av sporing etc., så det kan være fornuftig å lime inn en kopi av den opprinnelige teksten på artikkelen ved siden av siden. 

Trinn 7

Du kan raskt og enkelt legge til ikoner i infografisk modus ved å åpne et vektorsett med ikoner i Illustrator, før du kopierer og limer over individuelle ikoner. 

Her har jeg limt inn et vektikon fra disse skalaene og linjene satt, før du justerer Fylle til en off-white swatch. 

Dekorér ikondesignene dine med piler og tekst, og trekk ut nøkkeltall eller ord i en kontrastfarge. 

Trinn 8

Du kan også opprette seksjonspileikonene ved å bruke Ellipseverktøyet (L) og holder Skifte å lage en liten sirkel mot bunnen av en farget seksjon. 

Bruke Pennverktøyet (P) å lage en enkel pilform inne i sirkelen.

Høyreklikk> Gruppe elementene sammen for å lage et ikon som er enkelt å kopiere og lime inn. 

Fortsett å bygge opp statistikk ned lengden på infografiske, varierende Skriftfarger for kontrast og interesse. 

Trinn 9

For å lage et kakediagram, trenger vi den korte hjelpen fra Illustrator. Minimér InDesign-dokumentet, og åpne Illustrator.

Bruke Ellipseverktøyet (L) og hold Skifte å lage en sirkel på tavlen, sette den på å ha ingen fyll og tykt slag (rundt 50 pt).

Gå til Objekt> Sti> Oversikt over strekk.

Så hodet opp til Rediger> Kopier.

Trinn 10

Gå tilbake til din InDesign dokument og Rediger> Lim inn sirkelen på siden, sett den i midten av en farget seksjon. Juster fargen til en blek fargeprøve.

Rediger> Lim inn, Rediger> Lim inn i sted sirkelen direkte på toppen av den første, og juster fargene til en kontrastfarging. 

Ta deretter Saksverktøy (C) og krysse bort på sidene av sirkelen på toppen, isolere en del av kaken for å grove passe til prosentandelen av statistikken din. 

Trinn 11

Du kan også legge til bardiagrammer til infographic, som er enklere å gjøre direkte i InDesign. 

Bruk først Linjeverktøy (\) å lage to piler, en peker oppover og den andre peker mot høyre. 

Bruk deretter Rektangelverktøy (M) å lage "barer" på diagrammet. Du kan myke hjørnene av disse ved å gå til Objekt> Hjørnealternativer og sette inn Form til avrundet

Legg til bildetekster under den nedre pilen og over hver linje hvis du ønsker det. 

Jeg har brukt Flood Gradient swatch for å gjøre hovedtittelen til stolpediagrammet virkelig skiller seg ut. 

5. Hvordan eksportere design for web

Trinn 1

Når du er ferdig med ditt infografiske design, må du sørge for Fil> Lagre alt ditt harde arbeid.

For å eksportere design klar for deling på nettet, gå opp til Fil> Eksporter. Velge JPEG eller PNG fra Format meny nederst i vinduet, og gi bildet et passende navn. 

Klikk Lagre.

Steg 2

I vinduet for eksportalternativer kan du justere innstillingene for bildet slik at det passer for opplasting på nettet. Juster Kvalitet til Medium eller Høy, sett Vedtak til 72 ppi, og sørg for at Farge rom er satt til RGB

Til slutt klikker du Eksport å lage ditt web-klare bilde. 

Fantastisk jobb! Din infografiske er ferdig!

Konklusjon: Din ferdige infografiske

Med din infografiske eksportert, er det på tide å få det opp på nettet og spre ordet om virkningen av global oppvarming på klima og miljøforandringer. Eller hvorfor ikke skrive det ut og legge det opp på oppslagstavlen på din høyskole eller på arbeidsplassen?

Hvis du leter etter flere ressurser for dine infografiske design, kan du finne mange tema-ikoner på GraphicRiver og klare redigering av infografiske maler på Envato Elements.