Producing et informativt kart i perspektiv med Illustrator
Dette innlegget er en del av en serie kalt Infographic Design.Interview med Brad Woodard - Illustrasjon, Design, og InfographicsQuick Tips: Spice Up Your Grafer med Column DesignsWhat Du 'll være CreatingThis opplæringen ble opprinnelig publisert i november 2008 som en Tuts + Premium opplæringen. Det er nå tilgjengelig gratis å se. Selv om denne opplæringen ikke bruke den nyeste versjonen av Adobe Illustrator, dets teknikker og prosessen er fortsatt relevant.
Vi kommer til å illustrere et kart. En ganske enkel direktivet, men før vi går videre må vi etablere hvorfor vi illustrerer det. Ved å illustrere skal vi gi det endelige produktet personlighet, stil, litt av livet. Vi kommer til å håpe at brukeren blir trukket inn i det, tiltrukket av det, og at når vi har oppmerksomheten deres, kan de bruke det.
I produsere dette kartet vi ikke bare illustrerer, men også utforme informasjonsgrafikk; opplever at eldgamle balanse mellom form og funksjon.
A Little Ansvarsfraskrivelse
Som grunnlag for kartet mitt Jeg snudde meg mot Google Earth og lykkelig gjort så mange skjermbilder som jeg likte. Jeg sporet dem, kalt dem for stedsnavn, gatenavn, serviceinformasjon etc., og dette er ikke noe problem overhodet. Jeg var selv i stand til å bruke foto fra bidragsytere langt og bredt som publiserer sine skudd på Google Earth via Panoramio. Men i orden for meg å bruke disse bildene for web-baserte tutorials jeg trengte å overholde visse retningslinjer.
I samsvar med sin fair use policy, skjermbilder av Google Earth kan brukes så lenge jeg tydelig vise sin logo og riktig opphavsrett. For fotografering ville jeg ha behov uttrykkelig tillatelse fra de enkelte fotografer, og på grunn av dette, er å bygge fotografering jeg har brukt i denne tut min egen, men vær klar over at Google Earth og Panoramio gi utmerket bilde ressurser for prosjekter som dette.
1. Beliggenhet, beliggenhet, beliggenhet
På grunn av det faktum at jeg skal bruke mye av min egen symbolikk, har jeg valgt et sted jeg en gang bodde, Brielle (en by i nærheten av Rotterdam i Sør-Holland) som fag . Selvfølgelig vil motivet være av dine egne valg, eller enda bedre som en klient kort. Uansett hvor det kan være, trenger du så mye visuell referanse som mulig.
2. Bestem din Sammensetning
Det kan være at du har blitt bedt om å inkludere visse funksjoner eller visse utsiktspunkter, eller har fått nettopp det området du trenger å fokusere på. Mens bestemme hva kartet skal inneholde og fra hvilken vinkel vil det bli sett, prøv igjen å vurdere brukervennlighet.
De fleste føler seg naturlig komfortabel viser et kart med nord som peker oppover (jeg er ikke engang kommer til å begynne på temaet hvordan menn og kvinner lese kart annerledes!) så dette vil vanligvis være et godt utgangspunkt. Men hvis denne vinkelen ser ut som om det vil presentere design problemer som viktige veier blir skjult, ukjente visninger av viktige bygninger, etc., prøver du å slå utsikten like nord. Kartet vil inneholde et kompass, slik at lagrene ikke bør være for problematisk.
Nedenfor er det segmentet av Brielle som jeg har valgt å illustrere. Nord er for tiden oppover.
3. Forberede Kartbilde
Du har tatt en skjermdump eller du har din flyfoto av faget, så nå plassere den i Illustrator (Fil > Place ...) på en passende størrelse artboard (denne illustrasjonen kan bli ganske fint detaljert, slik at arbeidet stor). Klikk på lag i lagpanelet, gi den et navn, låse den og bestemme at alle bildene på at laget bør være nedtonet til 50% (eller imidlertid svak du velger).
4. Lay Down Noen Tarmac
Det er faktisk ingen rolle hvor du begynner å tegne kartet. Det er visse basiselementer som du trenger å konsentrere seg om, som alle vil bli distribuert til de enkelte lag for forbedret arbeidsflyt. Jeg kommer til å begynne med i gatene, og så skal jeg se på grenser, vann, bygninger osv etterpå.
Bruk Pen Tool og bygge enkle veier langs gaten senter. Gi dem passende slag vekter som vist nedenfor. Igjen, for å gjøre kartet informativ og klar, bruke et begrenset antall hjerneslag vekter. Forsøke å etablere en standard hvorved hovedveier har en tykkelse på (for eksempel) 18 pt, mindre veier har en vekt på 12 pt, tilbake gater en vekt på 8 pt og så videre. Jeg har gitt mine gater en blek skygge av # F7F4E8.
5. Curves
Et annet sted jeg vil anbefale deg å holde ensartethet: kurvene. For all del tegne kurver på gatene for hånd, men ved å gi alle gatehjørner samme kurvatur du vil gjøre din illustrasjon lettere på øyet.
For eksempel, det er en kirke som har en liten vei som går rett rundt det i min tegning. Jeg begynte med å tegne en enkel polygon med rette stier, og da jeg gikk for å Effects > Stilisere > Runde hjørner. I dialogboksen for Runde hjørner jeg skrev en verdi på 4 mm, kontrollere effekten ved å ha Preview valgt.
Denne kurvatur var passende for de fleste av mine gatehjørner, så jeg kunne da bruke den til andre veier ved å velge dem og kommer til å Effects > Påfør runde hjørner. Avrundede hjørner av samme verdi ble deretter brukt til hva jeg hadde valgt.
6. Tomter
Når du er fornøyd med gatene du har trukket, tettheten av dem, deres tykkelse, kurvatur og farge, gjør sitt lag usynlig og skape et tredje lag. Kall det "Land" eller noe i den naturen, og begynne å spore land skisserer.
I tilfelle av Brielle, er det en betydelig mengde vann i form av en vollgrav; kanskje du har elver, kystlinje, eller kanskje regioner som ville danne passende grenser. Jeg har gitt mitt land en farge # E8E1B4.
7. Sjekk for Neatness
Etter å ha tegnet en grunnleggende oversikt for landet, gjør gatene lag synlig igjen. Som du kan se i mitt tilfelle, gatene krysse vannet på to steder og land jeg har trukket under ser ganske rufsete. Jeg ønsker nå å rydde det opp og sørge for at landet går parallelt med gaten på disse punktene.
8. Tidy Up
Lag en kopi av en av de aktuelle gatene og lim den inn på din "Land" lag. Gå til Objekt > Sti > . Outline Stroke
Nå kan du gå til Effect > Sti > Offset Path og skriv inn en verdi som du selv velger (i mitt tilfelle 3 mm). Deretter utvide den ved å gå til Objekt > Utvid Utseende.
Bruk Direct Selection Tool for å sikre at ingen biter av land er stikker ut fra bak dette nylig gjort gatebanen.
Med Pathfinder Legg til Shape Tool, kombinere ditt land med nytt objekt. Først gi det nye objektet i samme farge som landet; den resulterende objektet vil arve fargen på den øverste bidra objektet.
9. Siste Biter av Tomter
OK, ta en god generelle utseendet på ditt land og gater, ryddig opp eventuelle straggly biter, og sørge for at det ser klart, enhetlig og ryddig. Nå kan du legge eventuelle sekundære land elementer (distrikter, regioner, parker, etc.) som vil ha en litt annen farge for å skille dem.
I mitt tilfelle har jeg fremhevet det største shoppingområdet og en park område rundt kirken. Du kan se Jeg har også kuttet ut en kanal fra min fastlandet objekt. Det neste vi skal legge litt vann for å klargjøre hva vi ser på.
10. Flood
Legg et nytt lag under ditt land lag og kaller det noe gjenkjennelig. "Vann" ville være et godt navn-hadn't tanken på det, hadde du? Tegn et rektangel som dekker et stort nok område å dekke alle dine vann, og gi den et passende blå farge (# 90C1D1 for eksempel).
11. Etiketter
Avhengig av hva som er nødvendig for kartet, nå ville være et godt tidspunkt å legge litt informasjon. Dette er på ingen måte en tutorial på Google Earth, men ved å sjekke Veier i Google Earth Lag-panelet vil du fremheve ikke bare veiene, men navnene deres også. Veldig nyttig. Bruk denne informasjonen til å merke dine egne kart.
12. Hvor gatene Har No Name
Begynn med å duplisere gatene lag (for grunner som vil bli klar) og kaller det "gatenavn". Nå låse "gater" lag for å unngå forvirring. Legge gatenavn kan være litt vanskelig å få visuelt riktig første gang; vi kommer til å vertikalt skalere kartet senere, og dette kan ha uforutsigbare resultater, særlig med tekst ment å være leselig.
Velg en skrifttype som du tror passer for din illustrasjon-skal valgene være upassende endre dem senere. Jeg har brukt en Fet Trade Gothic på grunn av sin kondensert og leselig form. Du vil også legge merke til at jeg har satt den Tracking til 75 for å gi mer avstand mellom mine brev.
13. Legge gatenavn
Du kan bare velge å rotere og plassere dine gatenavn manuelt, men for ekstra fin kontroll det er tilrådelig å bruke den type på en bane Tool. Du har allerede de nødvendige stier som du har dupliseres dine gater, så velger du Tekst i en bane Tool, klikk på en av gatene, og skriv inn et gatenavn.
14. Tekst i en bane alternativer
Perfekt! Høyre? Vel, kanskje ikke. Vi må åpne Tekst i en bane alternativer I mitt tilfelle, har jeg måttet snu teksten slik at det ikke lenger er opp-ned (dette har også resultert i teksten begynner i motsatt ende av banen som det er justert til venstre). Jeg har også justert til senter av banen, noe som gjør teksten kjørt ned midt i veien, inkludert rundt hjørner. Til slutt, ved hjelp av Direct Selection Tool kan du plassere din tekst langs banen ved å dra håndtak i hver ende. Når du er ferdig med merking av alle gatene du trenger, bli kvitt de overflødige stier som ikke lenger er nødvendig. Velg en av dem og gå til velge > Samme > Stroke Color. Dette vil velge gatene som du ikke har behov for å etiketten. Trykk Slett og du vil sitte igjen med bare gatenavn på det laget. Gi dem uansett farge passer din tegning. Jeg velger en veldig mørk blå (# 07152D), fin og kontrast, men ikke svart, som jeg prøver å unngå å bruke. Åpne et nytt dokument, eller flytte til en del av skjermen som er fri for rot; vi kommer til å tegne et element som du vil bruke flere ganger. I neste trinn skal du plassere omriss av bygninger over hele kartet, men av grunner som vil bli klart vi trenger dem til å representere hustakene. En enkel rektangel delt inn i fire individuelle objekter er det vi er ute etter. Replikere hva du ser nedenfor ved hjelp av Pathfinder-panelet, og gruppen de fire stedene sammen. Dette eksemplet på taket er en veldig enkel taket, og det kan godt være at bygninger har mer kompliserte fotavtrykk. I dette tilfellet trenger du mer forseggjort taket former, som du har til å dømme selv. Lag et nytt lag, og kaller det "bygninger". På dette laget skal vi plassere ... vel, hvis du ikke kan finne ut hva vi skal plassere på dette laget du sannsynligvis ikke har gjort det så langt. Gjør din "land" og "vann" lag usynlige slik at du kan spore skjermdumpen igjen. Velg en passende synlig slag farge for omriss av bygninger og begynne å plassere bygningene du trenger i posisjon. Duplisere taket for hver bygning, rotere og skalere dem etter behov. På dette punktet må de ikke være 100% perfekt i form av skalaen, men prøv å vinkle dem riktig i tråd med hvilken gate eller grensen de kjører parallelt. På dette punktet vi har nesten fullført de to-dimensjonale elementer av kartet vårt. Dersom du ønsker andre merking, høydekurver, rutenett, linjaler, eller andre elementer, så nå er det på tide å kaste dem inn i din artboard. Før jeg begynner å spille med dimensjoner på kartet mitt, kommer jeg til å plassere et kompass på den. Illustrer din egen, eller last ned Peter Rempel PR Compass Rose font og installere det på systemet ditt. Denne skriften inneholder rikelig med kompass for plassering på kartet. Jeg valgte en ganske enkel, men funksjonell kompassrose symbol, plassert den på mitt Artboard ved hjelp av symbolpanelet (Type > Glyphs), og deretter konvertert den til skisserer ved hjelp Type > Lag Outlines. Legge noen bokstaver, inkludert et stort N Du har fullført alle dine 2D-elementer, og derfor basis er ferdig. I de kommende skritt vi skal utføre oppgaver som fjerner noen av redigeringsmuligheter fra illustrasjon, så det er en god idé å lagre det du har nå som en egen fil. Skulle du trenger å legge til eller endre noe i fremtiden, kan du alltid se tilbake til det opprinnelige. Gå til Fil > Lagre som og kalle filen "Map 2D Basis" (eller noe sånt). Vi overvåker nå kommer til å skalere det vi har gjort så langt for å gi oss vårt perspektiv (selv om faktisk, vil det ikke være sant perspektiv i det hele tatt). Vi viser for informative formål, så vi vil ikke bruke et forsvinningspunkt som diagrammet her demonstrerer. Hvis vi skulle bruke et forsvinningspunkt, vil bygninger og andre elementer blir uklart når de forsvant ut i det fjerne. Så det er teorien, men før vi praktiserer det, må vi sørge for at vi ikke vil få noen merkelige resultater. For det første, kan du bli kvitt din skjermbilde lag, fordi vi er ferdig med sporing. Dernest velger du alle dine gate stier og gå til Objekt > Sti > Outline Stroke. Til slutt velger du alle dine gatenavn og gå til Type > Lag Outlines. Med alt nå passende omgjort til objekter, kan du skalere kartet Pass på at den er rotert til hvilken vinkel du finner mest egnet, låse opp alle lag, Select All (Kommando-A) og gå til Objekt >.; Transform > Skala. Velg å vertikalt skala til 60% (jeg har funnet dette å være en passende mengde) og klikk OK. Åpne et nytt dokument og plass på det første laget noen passende bilder av en av dine utvalgte bygninger. I lagegenskapene, velger å dimme bilder som vi gjorde med vår skjermbilde i begynnelsen av opplæringen. Lås lag og lage en ny en på for å begynne å tegne bygningen. Hold disse byggetegninger enkel. Begynn med rektangler å etablere de viktigste områdene, holde alt fint og justert, og bruke en begrenset fargepalett. Bygningen må være gjenkjennelig, men vi ønsker ikke noen unødvendige detaljer. Nå må du se tilbake til den opprinnelige tegningen. Dimensjonene på bygningens opprinnelige fotavtrykk (selvfølgelig, det er siden blitt skalert) vil bestemme dimensjonene på bygningens ansikter. Gitt at overføringene ble trolig rotert, vil markeringsrammen ikke gi deg de riktige dimensjoner lenger. I stedet velger du måleverktøyet og mål (ganske nøyaktig) de to relevante sider av bygningen. Ved å klikke og dra måleverktøy, vil infopaletten dukker opp og gir deg all relevant informasjon om hva du ' re gjør. For Avstand Med hver av dine to (gruppert) ansikter, bruke Transform paletten og skalere proporsjonalt for å matche den aktuelle veggen dimensjon. Når du har gjort begge deler, sørge for at deres høyder er like. OK, du har jobbet ut dimensjonene av veggene som de ville være i 2D-versjon av illustrasjonen. Nå gå tilbake til din skalert versjon og ta en kopi av bygningen fotavtrykk du jobber med. Lim det til uansett hvor du arbeider på bygningen, og posisjonere dine to vegger flukt med hverandre, tilhørende hjørner matching sammen med fotavtrykk som vist nedenfor Velg en av veggene. Nå velger Free Transform Tool, klikk på midten anker for en av veggen kanter og Kommando-dra. Skew veggene på plass langs fotavtrykk. Dette vil kreve noe godt øye-arbeid, men du kan justere og justere til du er glad det hele kamper pent. Dine veggene er på plass. Nå bør det bli klart hvorfor vi valgte å lage fotavtrykk elementer som hustak. Velg taket (låsing veggene med Command-2 vil gjøre dette enklere) og med Shift holdt nede, dra den rett oppover til den møter toppen av veggene. Jeg har byttet til disposisjonsvisning (Command Y) for å tydelig se hvor mine stier er. Dette er lurt å sørge for at alle dine hjørner møtes på riktig måte, og det gjør også følgende trinn enklere. Din taket må banen, så med Direct Selection Tool velge alle de tilstøtende sentrale ankerpunktene. Enten bruke pil opp eller dra med musen, til taket ditt har nådd sin korrekte banen. Det er sannsynlig at du vil kunne se bare to eller tre taket ansikter av den opprinnelige fire, avhengig av hvor bratt taket er. Farge dem og låse opp veggene. Nå må du bestemme hvor lyskilden er. I mitt tilfelle, er lyset som kommer fra nederst til venstre, så til venstre er ansiktene til mine bygninger vil bli opplyst og det som er på den andre siden vil falle i skyggen. Kopier (Kommando-C) de nødvendige objekter for den ene siden av bygningen, lime dem på plass (Kommando-F) og bli med dem med Pathfinder-panelet. Gi dem en lyssky fargen # 937C6A og en Multiply åpenhet. Plasser en liten bit av skygge på bakken (hvor er hensiktsmessig). Du vil også legge merke til i dette tilfellet en sekundær del av taket, lagt etterpå og går parallelt med den minste av ytterveggene. Gruppe bygningen sammen og sørge for at det er riktig plassert på kartet ditt, fortrinnsvis på en nye laget for 3D-bygninger. Prinsippet er det samme for alle bygninger: Nå må du fortsette med dine bygninger . Som du plassere dem på kartet ditt, kan de vel kaste opp noen andre problemer. Man kan se på bildet under at minst en av mine gatenavn måtte flyttes for å gi rom for en bygnings dette kan gjøres ved ganske enkelt å velge og reposisjonering, eller ved å endre den opprinnelige og går gjennom skalering prosessen på nytt. Du kan også se her at skyggen av en bygning faller mot en annen-disse slags detaljer vil legge ektheten til den endelige illustrasjonen. La oss gi vårt land en bit av en 3D føler også. Lag en kopi av ditt land form (Kommando-C) og lim den på plass (Kommando-F) på et nytt lag. Nå bare flytte den direkte nedover, enten med piltastene eller musen. Sørg for at dine nye 3D land kanter har en litt mørkere nyanse enn den eksisterende land, og deretter begynne neatening opp hjørnene. Bruke Pen Tool til å legge ankerpunkter hvor stiene trenger å heve eller senke. Så bruker du Pathfinder-panelet for å skape ekstra brikker der det skulle være skygge (i henhold til din lyskilde). Gjør disse stedene en passende grad mørkere. (Beklager til de som aldri har sett Monty Python.) I alle fall, nå er et godt tidspunkt å begynne å dekorere kartet. Grøntområder er en god måte å gi kartet noen atmosfære, så gå og gjøre noen busker og trær. Husk at uansett hva du tegner bør være basert på sin overhead fotavtrykk, skalert vertikalt til 60%, akkurat som bygningene og selve kartet. Gjør noen forskjellige ting, og spre dem rundt kartet ditt (alle sammen nå. ..) på et nytt lag Skulle du trenger for å identifisere bygninger eller områder på kartet, legge noen numeriske referanser ville være en god idé. Du kan gjøre dette ved å plassere tallene på samme måte som gatenavn; skalert og som om de blir liggende på bakken. Alternativt kunne tydelig differensiering også være tilrådelig. Enkle 2D sirkler og tallene vil gi enkel identifisering av bygninger. Det er på nederlandsk, men vi må bare sette det ned til autentisitet. Welkom i Brielle Etter å ha bundet sammen alle dine elementer (pluss en ubegrenset mengde av mulige andre elementer ), vil du ha en ferdig kartet. Det kan alltid bli redigert i fremtiden, enten ved direkte å redigere 3D illustrasjon eller 2D basis som du lagret tidligere. Enten kartet ditt er av en by, et rom eller et universitet campus, forblir teorien det samme. Ikke glem; det viktigste er at informasjon formidles raskt, logisk, attraktivt og tydelig. Jeg håper du har det gøy med denne! Anmeldelser
å organisere ting litt. Med gatenavn tekst valgt gå til Type > Tekst i en bane > Tekst i en bane alternativer.
15. Plasser etiketten
16. Behandling gatenavn
17. Bygningen Grunnlag
18. Bygninger
19. Endelig 2D Funksjoner
på toppen, er alt jeg trengte å gjøre for å gi brukerne en følelse av retning. Plasser kompasset sted på kartet; sin eksakte posisjon er ennå ikke viktig, fordi det kan bli avgjort senere.
20. Spar!
21. Få litt perspektiv
22. Vectorize
23. Building Blocks
24. Easy Does It
25. Mål to ganger, kuttet en gang
av hva du måler, kan du se D
verdien (i dette tilfellet 12,991 mm, men kan vi trygt kalle det 13 mm).
26. Transform
27. Plasser din vegger
28.. Skew
29. Heise Roof
30. Pitch
31. La det bli lys
32. Andre bygninger
Tegn synlige vegger
Mål uskalert fotavtrykk dimensjoner
Bruk tilsvarende bredder.. til illustrerte veggene.
Posisjons vegger med skalert fotavtrykk.
Skew vegger for å matche fotavtrykk og skalere horisontalt som du gjør det.
Posisjons taket.
Apply banen til taket.
Legg skyggen på passende ansiktet av bygningen og på bakken.
Posisjons på kartet.
33. 3D Tomter
34. Polere opp Tomter
35. Vi ønsker ... En buskas!
...
36. Tallknusing
37. Welkom!
er typisk for den type skilt du vil se skrive inn hvilken som helst by eller landsby i Holland, så vil vi legge til en velkommen signere for kartet vårt. Det er ganske viktig at folk vet hva de ser på likevel.
Awesome Work, er du ferdig!