Skip to main content

Creating an Interactive Center Plan in Adobe Illustrator

Overview​

This guide shows you how to create an interactive center plan in Adobe Illustrator, which will later be clickable on the website.

For Designers

This guide is specifically written for designers - no programming skills required!

What You Want to Achieve​

By the end, you will have an SVG file that:

  • Contains all shop areas
  • Is correctly named (so the system recognizes them)
  • Becomes clickable on the website
  • Displays tooltips with shop information

Step-by-Step Guide​

Step 1: Prepare the Floor Plan​

  1. Open Adobe Illustrator

  2. Create a new document:

    • Width: 1920px (recommended)
    • Height: 1080px or more (depending on the center plan)
    • Color mode: RGB
    • Raster effects: 72 ppi

  3. Import the floor plan:

    • File → Place
    • Select your floor plan (PDF, JPG, PNG)
    • Place it on a background layer
    • Lock this layer (lock icon)
Tip

If you don't have a floor plan, simply draw the aisles and walls using the Rectangle Tool (M).

Step 2: Create Layer Structure​

Create the following layers in your document (Window → Layers):

Background (locked)
Aisles & Walls
Shops <- IMPORTANT!
Services <- IMPORTANT!
Labels
Important!

The layers "Shops" and "Services" must be named EXACTLY like this! The system recognizes them by these names.

Step 3: Draw Shop Areas​

  1. Select the "Shops" layer
  2. Draw each shop area using the Rectangle Tool (M)
  3. Fill the areas with a color (e.g., Green: #4CAF50)
  4. Name each area:

How to Name Areas:​

  1. Select the shop area
  2. Open the Layers Panel (Window → Layers)
  3. Click the small arrow next to "Shops"
  4. Double-click on <Path> or <Rectangle>
  5. Name it: shop-aldi or shop-hm etc.
Naming Convention
  • Always start with shop-
  • Then the shop name (e.g., aldi, hm, zara)
  • No spaces! Use - instead of spaces
  • Lowercase preferred

Examples:

  • shop-aldi
  • shop-h-und-m
  • shop-media-markt
  • Aldi (missing "shop-")
  • shop aldi (spaces!)

For precise logo placement, you can create placeholder areas. The system will insert the logos dynamically - you just define where and how they sit.

How to Create Logo Placeholders:​

  1. Create an additional layer/group for each shop area with a logo
  2. Name: {shop-id}-logo (e.g., shop-33-logo for shop-33)
  3. Layer on top: The logo placeholder layer must be above the shop area
  4. Draw shape:
    • Option A: Duplicate the shop area, resize and center it
    • Option B: For complex areas (>4 points, L-shape) draw it manually
    • Option C: For round logos draw a Circle or Ellipse
  5. Set fill to transparent – the placeholder is just an invisible template
Why Placeholders?

Without placeholders, the system calculates the logo position automatically. For diagonal or unusual areas, this can lead to misalignment. With placeholders, you have full control – the shape precisely defines the position, size, and orientation of the logo.

Important for Logo Placeholders:​

  • Naming convention: Exactly shop-33-logo for shop-33 (suffix -logo)
  • Transparent: Fill placeholders with transparent (no color) – they serve only as an invisible template
  • Shape types: Path, Polygon, Rectangle, Circle or Ellipse – the system supports all shapes:
    • 2D view: Rectangle/Polygon → logo rectangular; Circle/Ellipse → logo round
    • 3D view: Logo placeholders are used for position/size; display is rectangular (Decal)
  • Logo fully visible: The logo is fitted with object-contain – it is always fully visible
  • Export: “Object IDs: Layer names” must be active for the IDs to remain

Step 5: Draw Service Elements​

Services include toilets, information, elevators, stairs.

  1. Select the "Services" layer
  2. Draw service elements (circles, rectangles, icons)
  3. Name them correctly:

Service Names:​

  • service-info - Information
  • service-toilet-1 - Toilet 1
  • service-toilet-2 - Toilet 2
  • service-elevator-1 - Elevator 1
  • service-stairs-1 - Stairs 1
  • service-parking-garage - Parking garage entrance
Colors for Services

Use a different color than for shops, e.g., Gray: #95a5a6

Step 6: Multiple Floors (optional)​

If your center has multiple floors:

  1. Create groups for each floor:

    Shops
       floor-eg (Ground Floor)
          shop-aldi
          shop-hm
       floor-og1 (1st Floor)
          shop-zara
          shop-media-markt

  2. Name the groups:

    • floor-eg - Ground Floor
    • floor-og1 - 1st Floor
    • floor-og2 - 2nd Floor
    • floor-ug1 - 1st Basement
Floor Codes
  • EG = Ground Floor
  • OG1 = 1st Floor
  • OG2 = 2nd Floor
  • UG1 = 1st Basement

Step 7: Checklist Before Exporting​

Before you export the file, check:

  • All shop areas are on the "Shops" layer
  • All service elements are on the "Services" layer
  • Each area has a unique name (e.g., shop-aldi)
  • Names start with shop- or service-
  • No spaces in names
  • For multiple floors: groups are named floor-eg, floor-og1, etc.
  • (Optional) Logo placeholders: shop-XX-logo above the respective shop area

Step 8: Export as SVG​

  1. File → Export → Export As...

  2. Format: SVG

  3. Settings:

    • Styling: Presentation attributes
    • Font: SVG
    • Images: Embed
    • Object IDs: Layer names
    • Decimal places: 2
    • Minimize: No (for better readability)
    • Responsive: Yes

  4. Save as e.g., centerplan-eg.svg

Important!

Ensure that "Object IDs: Layer Names" is enabled! Otherwise, the names will be lost.

Example Layout​

Here's what your Illustrator document might look like:

┌─────────────────────────────────────────┐
│  CENTER PLAN - GROUND FLOOR             │
├─────────────────────────────────────────┤
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │ Aldi │  │ H&M  │  │ Zara │         │
│  │ [x]  │  │ [x]  │  │ [x]  │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
│     WC        Elevator    Info           │
│  Toilet  Elevator   Info               │
│                                         │
│  ┌──────┐  ┌──────┐  ┌──────┐         │
│  │Media │  │C&A   │  │Müller│         │
│  │Market│  │ [x]  │  │ [x]  │         │
│  └──────┘  └──────┘  └──────┘         │
│                                         │
└─────────────────────────────────────────┘

Naming Examples​

Shops:​

  • shop-aldi
  • shop-33 (numerical IDs)
  • shop-33-logo (logo placeholder for 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-toilet-gentlemen
  • service-toilet-ladies
  • service-elevator-1
  • service-elevator-2
  • service-stairs-north
  • service-stairs-south
  • service-parking-garage-entrance

Frequently Asked Questions​

Do I need to trace the shops exactly?​

No! The areas only need to show the approximate position. The main thing is that they are clickable and have the correct name.

Can I freely choose colors?​

Yes! The colors are just for your orientation. They will be adjusted later on the website.

What happens if I misspell a name?​

Then the system cannot assign the area. Pay attention to:

  • shop- or service- at the beginning
  • No spaces
  • Lowercase letters

Can I use icons?​

Yes! You can use icons for services (e.g., toilet symbol). The only important thing is the name of the layer/group.

How big should the shop areas be?​

At least 40px × 30px, so that they are easily clickable. Larger is better!

Do I need to create logo placeholders?​

No, it is optional. Without placeholders, the system will automatically calculate the logo position. For diagonal or complex areas, we recommend placeholders for accurate representation.

Next Steps​

After exporting:

  1. Upload SVG file in the dashboard
  2. Assign shops (click on area → select shop from modal)
  3. Integrate into website (done by the content creator)
  4. Done!

Tips & Tricks​

Tip 1: Use Templates​

Create a template with the correct layer structure that you can use for all centers.

Tip 2: Color Coding​

Use different colors for different shop categories:

  • Green = Grocery
  • Blue = Fashion
  • Orange = Gastronomy
  • Purple = Services

Tip 3: Labels​

Create a separate layer for labels (shop names) that you can hide later.

Tip 4: Use Grid​

Activate the grid (View → Show Grid) for precise drawing.

Need Help?​

For questions, contact:

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