Illustrator-Tutorial: Messerscharfe Workflow- und Design-Rezepte

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

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

In diesem Teil zeige ich euch, wie wir die Wohngebiete zeichnen können.

Wohngebiete zeichnen

Die Wohngebiete sind die Bereiche, wo ihr auf dem Screenshot überall kleine Häuschen seht. Das sieht auf den ersten Blick ziemlich detailliert aus. Aber wir werden das zuerst so zeichnen, dass wir einen groben Umriss haben, einfach, um zu wissen, bei welchen Flächen es sich um Wohngebiete handelt.

Wir gehen als Erstes in die Ebenen-Palette und sperren erst einmal alles, was wir gerade nicht brauchen. Dabei entsperren wir das Wohngebiet.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Dann nehmen wir uns das Pfadwerkzeug, indem wir einmal P drücken, und werden der Farbfläche erst einmal keine Fläche zuweisen. Wir brauchen zunächst nur eine Kontur.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Wir nehmen uns hier die 3 Pt-Kontur. Dies reicht erst einmal zum Zeichnen aus. Wir beginnen unten, setzen den ersten Klick an der unteren linken Ecke und arbeiten uns dort durch den ersten Wohngebietsbereich vor ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Damit wir die Kontur etwas besser von der Karte unterscheiden können, geben wir ihr eine gut sichtbare Farbe (z. B. ein helles Pink) und verstärken die Kontur auf etwa 3 Pt.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Kreisverkehr aussparen

Damit wir den Kreisverkehr aus unserem Wohngebiet aussparen können, müssen wir zuerst einmal das Wohngebiet dort definieren. Nur so ist es hinterher möglich, die gewünschte Fläche auszusparen. Dafür nehmen wir das Ellipsenwerkzeug zur Hand und ziehen mit gedrückt gehaltener Shift-Taste einen Kreis auf ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Wenn wir jetzt erst einmal ganz grob das gesamte Wohngebiet in einer beliebigen Farbe einfärben, indem wir die Wohngebietsebenen alle markieren und in der Farbfläche eine Farbe auswählen, haben wir einerseits einen besseren Überblick über die Wohngebietsbereiche und zum anderen können wir mit dem Kreisverkehr besser fortfahren. Zugleich können wir die Kontur entfernen, sodass wir nur noch das Wohngebiet in Flächenfarbe darstellen:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Um nun den Kreis im Kreisverkehr auszusparen, gehen wir auf Fenster>Pathfinder ...

... und wählen erst einmal das Wohngebiet und die Kreisverkehrsfläche mit dem Auswahlwerkzeug aus. Sobald beide markiert sind, gehen wir im Pathfinder bei den Formmodi auf das zweite Symbol Vorderes Objekt abziehen - schon wird die Fläche ausgespart:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Zwischenergebnis:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Wohngebiet einfärben

Um das Wohngebiet richtig schön einzufärben, wählen wir zuerst das gesamte Wohngebiet aus, rufen unser Verlaufs-Bedienfeld auf unter Fenster>Verlauf und stellen dort einen linearen Verlauf ein. Dazu gehen wir auf den ersten Verlaufsregler ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

... wodurch ein Menü erscheint. Hier stellen wir erst einmal von "Schwarzweiß" auf RGB um, damit wir im Verlaufsregler, der momentan in Graustufen vorzufinden ist, bunte Farben auswählen können ... und wählen für den ersten Verlaufsregler folgenden Hexadezimalcode: #d6a5ba - das Gleiche machen wir mit dem rechten Verlaufsregler.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Auch dieser erhält den Hexadezimalcode: #d6a5ba:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

• 1. Verlaufsregler: #d6a5ba
• 2. Verlaufsregler: #ae8596

Falls sich unser Verlauf nur auf die Kontur ausgewirkt hat, gehen wir beim Farbwähler-Feld auf den Doppelpfeil und tauschen damit die Konturfarbe zur Flächenfarbe. Die Konturfarbe an sich deaktivieren wir.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Struktur hinzufügen

Das sieht jetzt allerdings für ein Wohngebiet ok, aber noch ziemlich glatt aus. Daher werden wir dieser Fläche noch eine Struktur hinzufügen. Wir wählen die Wohngebiete wieder komplett aus, gehen ins Aussehen-Bedienfeld, gehen dort auf das kleine fx-Symbol, welches sich nennt:

Neuen Effekt hinzufügen>(Photoshop Effekte) Strukturierungsfilter>Mit Struktur versehen ...

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

... und geben dort folgende Werte ein:

Skalierung: 200 %
Reliefhöhe: 6
Licht: Oben rechts

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Zwischenergebnis:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Schatten hinzufügen

Dann wollen wir dem Ganzen noch einen Schlagschatten geben, damit dies noch ein wenig räumlicher daherkommt. Das Gleiche finden wir wieder im Aussehen-Bedienfeld. Und zwar unter:

fx>(Illustrator-Effekte) Stilisierungsfilter>Schlagschatten.

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Modus: Multiplizieren
Deckkraft: 50 %
x-Versatz: 1 px
y-Versatz: 1 px
Weichzeichnen: 3 px
Farbe: Schwarz

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

So sieht das schon viel besser aus:

Kartografie (Anfahrtskarten zeichnen) mit Illustrator - Teil 3

Das war es auch schon für diesen Teil. Im nächsten werden wir die Grünanlage und das Gewässer zeichnen.

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
[]