Zum Hauptinhalt springen

Centerplan in Adobe Illustrator erstellen

Übersicht​

Diese Anleitung zeigt dir, wie du einen interaktiven Centerplan in Adobe Illustrator erstellst, der später auf der Website klickbar wird.

Für Designer

Diese Anleitung ist speziell für Designer geschrieben - keine Programmierkenntnisse nötig!

Was du erreichen willst​

Am Ende hast du eine SVG-Datei, die:

  • Alle Shop-Flächen enthält
  • Richtig benannt ist (damit das System sie erkennt)
  • Auf der Website klickbar wird
  • Tooltips mit Shop-Infos zeigt

Schritt-für-Schritt-Anleitung​

Schritt 1: Grundriss vorbereiten​

  1. Öffne Adobe Illustrator

  2. Erstelle ein neues Dokument:

    • Breite: 1920px (empfohlen)
    • Höhe: 1080px oder mehr (je nach Centerplan)
    • Farbmodus: RGB
    • Rastereffekte: 72 ppi

  3. Importiere den Grundriss:

    • Datei → Platzieren
    • Wähle deinen Grundriss (PDF, JPG, PNG)
    • Platziere ihn auf einer Hintergrund-Ebene
    • Sperre diese Ebene (Schloss-Symbol)
Tipp

Wenn du keinen Grundriss hast, zeichne die Gänge und Wände einfach mit dem Rechteck-Werkzeug (M) nach.

Schritt 2: Ebenen-Struktur erstellen​

Erstelle folgende Ebenen in deinem Dokument (Fenster → Ebenen):

Hintergrund (gesperrt)
Gänge & Wände
Shops <- WICHTIG!
Services <- WICHTIG!
Beschriftungen
Wichtig!

Die Ebenen "Shops" und "Services" müssen GENAU SO heißen! Das System erkennt sie an diesen Namen.

Schritt 3: Shop-Flächen zeichnen​

  1. Wähle die Ebene "Shops" aus
  2. Zeichne jede Shop-Fläche mit dem Rechteck-Werkzeug (M)
  3. Fülle die Flächen mit einer Farbe (z.B. Grün: #4CAF50)
  4. Gib jeder Fläche einen Namen:

So benennst du Flächen:​

  1. Wähle die Shop-Fläche aus
  2. Öffne das Ebenen-Panel (Fenster → Ebenen)
  3. Klicke auf den kleinen Pfeil neben "Shops"
  4. Doppelklick auf <Pfad> oder <Rechteck>
  5. Benenne es: shop-aldi oder shop-hm etc.
Namenskonvention
  • Beginne immer mit shop-
  • Dann der Shop-Name (z.B. aldi, hm, zara)
  • Keine Leerzeichen! Nutze - statt Leerzeichen
  • Kleinbuchstaben bevorzugt

Beispiele:

  • shop-aldi
  • shop-h-und-m
  • shop-media-markt
  • Aldi (fehlt "shop-")
  • shop aldi (Leerzeichen!)

Schritt 4: Logo-Platzhalter anlegen (empfohlen)​

Für präzise Logo-Platzierung kannst du Platzhalterflächen anlegen. Das System fügt die Logos dynamisch ein – du definierst nur, wo und wie sie liegen.

So legst du Logo-Platzhalter an:​

  1. Für jede Shop-Fläche mit Logo eine zusätzliche Ebene/Gruppe erstellen
  2. Name: {shop-id}-logo (z.B. shop-33-logo für shop-33)
  3. Ebene oben: Die Logo-Platzhalter-Ebene muss über der Shop-Fläche liegen
  4. Form zeichnen:
    • Option A: Shop-Fläche duplizieren, verkleinern und zentrieren
    • Option B: Bei komplexen Flächen (>4 Punkte, L-Form) eigenständig zeichnen
    • Option C: Für runde Logos ein Kreis oder Ellipse zeichnen
  5. Füllung transparent setzen – der Platzhalter ist nur eine unsichtbare Vorlage
Warum Platzhalter?

Ohne Platzhalter berechnet das System die Logo-Position automatisch. Bei diagonalen oder ungewöhnlichen Flächen kann das zu Fehlausrichtungen führen. Mit Platzhaltern hast du volle Kontrolle – die Form definiert exakt Position, Größe und Orientierung des Logos.

Wichtig für Logo-Platzhalter:​

  • Namenskonvention: Exakt shop-33-logo für shop-33 (Suffix -logo)
  • Transparent: Fülle die Platzhalter mit transparent (keine Farbe) – sie dienen nur als unsichtbare Vorlage
  • Formtypen: Path, Polygon, Rechteck, Kreis oder Ellipse – das System unterstützt alle Formen:
    • 2D-Ansicht: Rechteck/Polygon → Logo rechteckig; Kreis/Ellipse → Logo rund
    • 3D-Ansicht: Logo-Platzhalter werden für Position/Größe genutzt; Darstellung ist rechteckig (Decal)
  • Logo komplett sichtbar: Das Logo wird mit object-contain eingepasst – es ist immer vollständig zu sehen
  • Export: „Objekt-IDs: Ebenen-Namen“ muss aktiv sein, damit die IDs erhalten bleiben

Schritt 5: Service-Elemente zeichnen​

Services sind z.B. Toiletten, Information, Aufzüge, Treppen.

  1. Wähle die Ebene "Services" aus
  2. Zeichne Service-Elemente (Kreise, Rechtecke, Icons)
  3. Benenne sie richtig:

Service-Namen:​

  • service-info - Information
  • service-toilette-1 - Toilette 1
  • service-toilette-2 - Toilette 2
  • service-aufzug-1 - Aufzug 1
  • service-treppe-1 - Treppe 1
  • service-parkhaus - Parkhaus-Eingang
Farben für Services

Nutze eine andere Farbe als für Shops, z.B. Grau: #95a5a6

Schritt 6: Mehrere Etagen (optional)​

Wenn dein Center mehrere Etagen hat:

  1. Erstelle Gruppen für jede Etage:

    Shops
       floor-eg (Erdgeschoss)
          shop-aldi
          shop-hm
       floor-og1 (1. OG)
          shop-zara
          shop-media-markt

  2. Benenne die Gruppen:

    • floor-eg - Erdgeschoss
    • floor-og1 - 1. Obergeschoss
    • floor-og2 - 2. Obergeschoss
    • floor-ug1 - 1. Untergeschoss
Etagen-Codes
  • EG = Erdgeschoss
  • OG1 = 1. Obergeschoss
  • OG2 = 2. Obergeschoss
  • UG1 = 1. Untergeschoss

Schritt 7: Checkliste vor dem Export​

Bevor du die Datei exportierst, prüfe:

  • Alle Shop-Flächen sind auf der Ebene "Shops"
  • Alle Service-Elemente sind auf der Ebene "Services"
  • Jede Fläche hat einen eindeutigen Namen (z.B. shop-aldi)
  • Namen beginnen mit shop- oder service-
  • Keine Leerzeichen in Namen
  • Bei mehreren Etagen: Gruppen heißen floor-eg, floor-og1 etc.
  • (Optional) Logo-Platzhalter: shop-XX-logo über der jeweiligen Shop-Fläche

Schritt 8: Als SVG exportieren​

  1. Datei → Exportieren → Exportieren als...

  2. Format: SVG

  3. Einstellungen:

    • Styling: Präsentationsattribute
    • Schrift: SVG
    • Bilder: Einbetten
    • Objekt-IDs: Ebenen-Namen
    • Dezimalstellen: 2
    • Minimieren: Nein (für bessere Lesbarkeit)
    • Responsive: Ja

  4. Speichern als z.B. centerplan-eg.svg

Wichtig!

Stelle sicher, dass "Objekt-IDs: Ebenen-Namen" aktiviert ist! Sonst gehen die Namen verloren.

Beispiel-Layout​

So könnte dein Illustrator-Dokument aussehen:

┌─────────────────────────────────────────┐
│  CENTERPLAN - ERDGESCHOSS               │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │ Aldi │  │ H&M  │  │ Zara │         │
│  │ [x]  │  │ [x]  │  │ [x]  │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
│     WC        Aufzug    Info            │
│  Toilette  Aufzug   Info               │
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │Media │  │C&A   │  │Müller│         │
│  │Market│  │ [x]  │  │ [x]  │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
└─────────────────────────────────────────┘

Namens-Beispiele​

Shops:​

  • shop-aldi
  • shop-33 (numerische IDs)
  • shop-33-logo (Logo-Platzhalter für shop-33)
  • shop-h-und-m
  • shop-zara
  • shop-media-markt
  • shop-c-und-a
  • shop-mueller
  • shop-dm
  • shop-rossmann

Services:​

  • service-info
  • service-toilette-herren
  • service-toilette-damen
  • service-aufzug-1
  • service-aufzug-2
  • service-treppe-nord
  • service-treppe-sued
  • service-parkhaus-eingang

Häufige Fragen​

Muss ich die Shops exakt nachzeichnen?​

Nein! Die Flächen müssen nur ungefähr die Position zeigen. Hauptsache, sie sind klickbar und haben den richtigen Namen.

Kann ich Farben frei wählen?​

Ja! Die Farben sind nur für dich zur Orientierung. Auf der Website werden sie später angepasst.

Was passiert, wenn ich einen Namen falsch schreibe?​

Dann kann das System die Fläche nicht zuordnen. Achte auf:

  • shop- oder service- am Anfang
  • Keine Leerzeichen
  • Kleinbuchstaben

Kann ich Icons verwenden?​

Ja! Du kannst Icons für Services verwenden (z.B. Toiletten-Symbol). Wichtig ist nur der Name der Ebene/Gruppe.

Wie groß sollten die Shop-Flächen sein?​

Mindestens 40px × 30px, damit sie gut klickbar sind. Größer ist besser!

Muss ich Logo-Platzhalter anlegen?​

Nein, es ist optional. Ohne Platzhalter berechnet das System die Logo-Position automatisch. Bei diagonalen oder komplexen Flächen empfehlen wir Platzhalter für präzise Darstellung.

Nächste Schritte​

Nach dem Export:

  1. SVG-Datei hochladen im Dashboard
  2. Shops zuordnen (Klick auf Fläche → Shop aus Modal auswählen)
  3. Auf Website einbinden (macht der Content-Creator)
  4. Fertig!

Tipps & Tricks​

Tipp 1: Vorlagen nutzen​

Erstelle eine Vorlage mit der richtigen Ebenen-Struktur, die du für alle Center nutzen kannst.

Tipp 2: Farb-Kodierung​

Nutze verschiedene Farben für verschiedene Shop-Kategorien:

  • Grün = Lebensmittel
  • Blau = Mode
  • Orange = Gastronomie
  • Lila = Dienstleistungen

Tipp 3: Beschriftungen​

Erstelle eine separate Ebene für Beschriftungen (Shop-Namen), die du später ausblenden kannst.

Tipp 4: Raster nutzen​

Aktiviere das Raster (Ansicht → Raster einblenden) für präzises Zeichnen.

Hilfe benötigt?​

Bei Fragen wende dich an:

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /centerplan/illustrator-anleitung