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 (🔒)
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: 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 5: 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 6: 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.

Schritt 7: 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 │         │
│  │ 🟩   │  │ 🟩   │  │ 🟩   │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
│     🚻        🛗        ℹ️              │
│  Toilette  Aufzug   Info               │
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │Media │  │C&A   │  │Müller│         │
│  │Market│  │ 🟩   │  │ 🟩   │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
└─────────────────────────────────────────┘

📝 Namens-Beispiele​

Shops:​

  • shop-aldi
  • 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!

🚀 Nächste Schritte​

Nach dem Export:

  1. SVG-Datei hochladen im Dashboard
  2. Shops zuordnen (Drag & Drop im Dashboard)
  3. Auf Website einbinden (macht der Redakteur)
  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: