Illustrator-Tutorial: Messerscharfe Workflow- und Design-Rezepte

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Alle Videos des Tutorials Illustrator-Tutorial: Messerscharfe Workflow- und Design-Rezepte

In diesem Tutorial zeige ich euch, wie ihr mit Illustrator eine schöne Anfahrtsskizze erstellt.

Auf jeder Webseite wird bei einer Anfahrtsbeschreibung eine Anfahrtskarte verwendet. Dafür kommt meistens Google Maps zum Einsatz. Möchte man jedoch auf einem Flyer eine Anfahrtskarte bereitstellen, darf man leider nicht einfach einen Screenshot von Google Maps verwenden. Hier müsste die Karte dann selbst gezeichnet werden. Wie das geht, das zeige ich euch in der folgenden Anleitung

Was bedeutet überhaupt Kartografie?

Kartografie ist die Wissenschaft, Kunst und Technik der Herstellung von Karten. Sie befasst sich mit der Darstellung von räumlichen Informationen auf graphische Weise und umfasst sowohl die Erstellung als auch das Studium von Karten und Plänen. Kartografen verwenden geographische und statistische Daten, um physische und soziale Phänomene auf der Erdoberfläche abzubilden.

Die Kartografie spielt eine entscheidende Rolle in vielen Bereichen, darunter Geografie, Planung, Navigation und vieles mehr. Sie hilft dabei, komplexe Informationen auf eine Weise zu visualisieren, die leicht verständlich und nutzbar ist. Mit dem Fortschritt der Technologie hat sich auch die Kartografie weiterentwickelt und umfasst heute auch digitale Kartierungsverfahren und die Erstellung interaktiver Online-Karten neben den traditionellen, gedruckten Karten.

Landkarten selbst gestalten

Hier geht es nun zu meiner Anleitung, wie du eigenen Landkarten gestalten kannst.

1. Vorlage entnehmen

Zuallererst brauchen wir eine Kartenvorlage, woraus wir die Karte zeichnen können. Hier ist man auf der sicheren Seite, wenn man statt Google Maps OpenStreetMap verwendet. OpenStreetMap ist ein freies Projekt, das für jeden frei nutzbare Geodaten sammelt. So ist es unbedenklich, diese als Vorlage für unsere farblich individuelle Karte zu verwenden. Wir gehen als Erstes zu openstreetmap.de und suchen uns unser Ziel. Wir drücken einmal die Druck-Taste, um daraus einen Screenshot zu erstellen ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

... und wechseln als Nächstes zu Illustrator.

2. Neues Dokument anlegen

Hier legen wir ein neues Dokument mit dem Namen "Anfahrtskarte", einer Breite von 1000 px und einer Höhe von 500 px an.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

... und drücken Strg+V, um unsere Karte aus der Zwischenablage einzufügen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Das Erste, womit wir beginnen, ist, uns die passenden Ebenen im Ebenen-Bedienfeld zu erstellen (bitte der Liste nach von unten nach oben durchgehen):

• Straßennamen
• Icons
• Autobahn
• Hauptstraßen
• Nebenstraßen
• Bahn gestrichelt
• Bahngleise
• Gewässer
• Grünanlage
• Wohngebiet
• HG
• Karte

Um leichter arbeiten zu können, sperren wir alle Ebenen - außer der mit den Nebenstraßen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Wir nehmen uns das Pfadwerkzeug (P-Taste), wählen für die Straße eine ...

• Konturfarbe: #593156
• Konturstärke: 7 Pt

... und deaktivieren die Fläche. Im Aussehen-Bedienfeld und in der Statusleiste oben können wir die Konturstärke eingeben.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Wir erstellen im Aussehen-Bedienfeld eine weitere Kontur ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

... und geben ihr folgende Werte:

• Konturfarbe: #ffffff
• Konturstärke: 5 Pt

Für abgerundete Enden drücken wir im Aussehen-Bedienfeld auf den Eintrag Kontur für folgende Werte:

Abschluss: Abgerundet
Ecke: Abgerundete Ecken

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Das Gleiche wiederholen wir mit der violettfarbenen Kontur, damit diese ebenso geschlossen wird.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Falls du bereits fertige illustrative Landkarten zum Download in Vektorqualität suchst, haben wir bereits einige für dich aufbereitet:

787,680,677,668

3. Grafikstile erstellen

Und damit ich mir dieses Aussehen nicht jedes Mal aufs Neue erstellen muss, gehen wir zum Fenster Grafikstile und klicken einmal auf das Icon Neuer Grafikstil.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Nun kann ich jederzeit - sobald ich einen weiteren Pfad gezeichnet habe - einfach auf diesen Stil klicken und habe diesemsogleich das richtige Aussehen, welches ich für die Nebenstraßen definiert habe, verpasst.

Dann können wir anfangen, die Straßen auf der Karte nachzuzeichnen. Dazu ein paar hilfreiche Tipps, wie das leichter von der Hand geht:

Strg nach Beenden eines Pfades gedrückt halten und ins Bild klicken, um mit einem neuen Pfad zu beginnen
Alt gedrückt halten, um mit dem Mausrad schnell hinein- und hinauszuzoomen
Leertaste gedrückt halten, um temporär ins Hand-Werkzeug zu wechseln, um die Ansicht zu verschieben
Tab blendet sämtliche Bedienfelder aus > ermöglicht eine bessere Sicht zum Arbeiten

  Zwischenstand:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

4. Kreisverkehr

Hier haben wir eine kleine Schwierigkeit in Form eines Kreisverkehrs. Dieser begegnen wir, indem wir das Ellipse-Werkzeug wählen und in der Größe des Kreisverkehrs eine Ellipse aufziehen. Mit gedrückt gehaltener Leertaste können wir auch hier unseren Kreis vor dem Loslassen der Maustaste in der Position verschieben.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Da dort eine Straße durchläuft, löschen wir mit dem Ankerpunkt-Löschen-Werkzeug einfach die überstehende Kontur, ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

... indem wir die Maus an den unteren Punkt des Kreises setzen und durch Klicken den Ankerpunkt entfernen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Den untersten Punkt der Straße klicken wir ebenso an, damit die überstehende Straße komplett entfernt wird.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Danach setzen wir mit dem Pfadwerkzeug an den unteren Punkt des Kreisverkehrs einen Ankerpunkt und können somit die Straße fortsetzen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Nachdem wir alle Nebenstraßen fertiggezeichnet haben, brauchen wir nur noch die Ebenenstraßen alle zu markieren, indem wir rechts der Ebene "Nebenstraßen" klicken ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Dann wenden wir aus dem Grafikstile-Bedienfeld unseren vorgefertigten Stil an.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Und schon haben wir mit einem Klick alle Straßen in unseren gewünschten Stil umgewandelt.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Was allerdings noch stört, ist, dass die Straßen nicht ineinander übergehen, sondern sich gegenseitig überlappen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Dem begegnen wir aber wie folgt: Wir markieren einfach wieder alle Nebenstraßen, ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

... gehen aufs Auswahlwerkzeug, machen einen Rechtsklick auf die Straßenpfade und gehen auf Zusammengesetzten Pfad erstellen.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Und schon verschmelzen alle Straßen miteinander:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Dies ist unser Zwischenergebnis:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 1

Und im nächsten Teil werden wir uns mit den Hauptstraßen, der Autobahn und der Bahn beschäftigen.

ICONS TEST

/sprites/ui.svg:

alert
apple-pay
apple
arrow-down
arrow-right
arrows
checkbox
checked
chevron-down-small
chevron-down
chevron-left
chevron-right-doble-primary
chevron-right
chevron-up-small
chevron-up
close-cross
close-small
close
cog
complete
copy
eye-lock
eye
facebook-logo
file
form-select-arrow-up
form-select-arrow
google-icon
icon-als-gast-fortfahren_b
icon-anmelden1_b
icon-anmelden2_b
icon-globe
icon-neues-konto-erstellen_b
icon-resize-out
information-icon-button
left-align
letters
like
link-arrow
link
list-icon
lock
mail
medal
moon
notification
open-small
picture
pinterest-2
play
plus-white
quizz
rate
refresh-211
refresh-282
reset
reward
search-thin
search
star
sun
user
warenkorb

/sprites/image-editor.svg:

align-center
align-left
align-right
alignment-center
alignment-left
alignment-right
alignment-vertical-bottom
alignment-vertical-center
alignment-vertical-top
background-test
background
bold
bring-forward
bring-to-front
capslock
change-size
check-point
constrain
copy
crop-image
delete
download
edit-file-name
editable
flip-horisontally
flip-vertically
group-layer
help
hide
italic
justified
layers
line-spacing
lock
not-editable
open-group
paste
redo
rotate
save
send-backward
send-to-back
shape-layer
shapes
show
strike
text-layer
text
translate
underline
undo
unlock
zoom-in
zoom-out

/sprites/paint.svg:

brush
clear
cursors
eraser
escape
full-screen
marker
navigate
pencil
print
refresh
save
spray
zoom-in
zoom-out

/sprites/theme.svg:

001-01
001-02
001-03
001-04
001-05a
001-05b
001-05c
002-05a
3d-square-software-icon-dark
architektur-software-icon-dark
arrows-down-active
arrows-up-active
assets-templates-download-icon-dark
butterfly-answer-icon-dark
category-icon-example
certificate_alternate
certificate_downloaded
certificate_grey
certificate_primary
edit-multiple
edit
facebook
folder
grey-pause
grey-play
grey-stop
icon-als-gast-fortfahren_c
icon-anmelden1_c
icon-anmelden2_c
icon-neues-konto-erstellen_c
icons-cookie
instagram
interests-1
lamp-idea-bulb-smart-icon-dark
linkedin
pinterest
plus
red-cross
reload
toggle-list-active
toggle-list
toggle-on-off-active
toggle-on-off
toggle-single-active
toggle-single
toggle-switch-active
toggle-switch
trash
trophy-inactive
urkunden-zertifikate-software-icon-dark
video-streaming-icon-dark
xing

/sprites/banners.svg:

bild
icons8-google
proven_expert_4eck-tutkit

/sprites/elements-of-design.svg:

annika-hillger
annika-hillger
annika-hillger
annika-hillger_100
annika-hillger_100
annika-hillger_100
blockquote-border-line
icons-svg-log-in
svg-log-in
svg-registration

/sprites/logotypes.svg:

logo-big-colored
logo-big-dark
logo-big-green
logo-big
logo-dark
logo-green
logo-light-grey
logo-light-white
logo-mini-dark
logo-mini-green
logo-mini
logo-payment
logo-small-dark
logo-small-green
logo-small
logo-tutkit
logo
tutkit_pirate-bay
tutkit_voucher_top

/sprites/payment-provider.svg:

apple-pay-2
apple-pay-white
apple-pay
card-bank
card-mastercard
card-paypal
creditcard
g-pay-2
g-pay
google-pay-2
invoice
mastercard
payment-google-pay
paypal-2
paypal
sepa
visa
[]