> For the complete documentation index, see [llms.txt](https://helpcenter.channable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://helpcenter.channable.com/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/the-image-editor/grundlagen-des-bildeditors.md).

# Grundlagen des Bildeditors

Erfahre, wie du die Arbeitsfläche, Ebenen und Vorlagen-Steuerelemente des Bildeditors verwendest.

Der Channable Image Editor ermöglicht dir, Vorlagen für Produktbilder zu erstellen und zu bearbeiten.

Eine Vorlage hat eine [Arbeitsfläche](#work-on-the-canvas) (der Hintergrund, auf dem du arbeitest) und Objekte für Text, Bilder und Formen. Jedes Objekt erscheint als Ebene in **Ebenen**, wo du ihre Stapelreihenfolge steuerst.

## Auf der Arbeitsfläche arbeiten

<figure><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2FzL8AlPqY6hDhzteTvi7Z%2FScreenshot%202026-07-20%20at%2010.56.30.png?alt=media&amp;token=b005ad9a-944c-4ad6-aeb2-8dc33e86ea4c" alt=""><figcaption></figcaption></figure>

Die Arbeitsfläche ist der leere Bereich, auf dem du deine Vorlage erstellst.

Bevor du mit dem Hinzufügen von Objekten zu deiner Vorlage beginnst, möchtest du vielleicht die folgenden Änderungen an deiner Arbeitsfläche vornehmen, mit dem **Einstellungen** Tab:

| Einstellung                                                                                                                                                                                                                     | Beschreibung                                                      | Details                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| [Größe](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/grosse-und-hintergrund-eines-bildes-anpassen.md)                                     | Legt die endgültigen Ausgabeabmessungen der Vorlage fest.         | Wähle aus einer Liste voreingestellter Größen oder gib deine eigene ein.                                        |
| [Hintergrundfarbe](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/grosse-und-hintergrund-eines-bildes-anpassen.md#configure-the-background) | Legt die Vollton- oder Verlaufsfarbe hinter allen Elementen fest. | Wähle eine Farbe mit dem **Farbwähler** oder gib einen Hex-Code ein.                                            |
| [Rastereinstellungen](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/raster-und-am-raster-ausrichten-verwenden.md)                          | Richtet deine Objekte auf der Arbeitsfläche aus.                  | Schalte die Rasteranzeige ein und aus und passe sie an, damit du sie beim Bearbeiten leichter verwenden kannst. |

### Steuerelemente und Werkzeuge der Arbeitsfläche

Diese Steuerelemente befinden sich auf der rechten Seite der Arbeitsfläche.

| Symbol/Steuerelement                                                                                                                                                                                                                                                                                                                                                     | Beschreibung                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>Vergrößern/Verkleinern (Dropdown)</strong><br><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2FABKYa9uAkHnUYcJQNsGa%2FScreenshot%202026-07-20%20at%2011.10.57.png?alt=media&amp;token=201f4f36-654e-4a1a-ae94-ca545c1c9412" alt="" data-size="original"></p>              | <p>Ändere die Ansichtsgröße der Arbeitsfläche.<br></p><p>Nutze das Dropdown, um den Zoom prozentual zu vergrößern oder zu verkleinern</p><p>ODER scrolle mit der Maus, um hinein- und herauszuzoomen.</p>                                                                            |
| <p><strong>Zentrieren (Zielsymbol)</strong></p><p><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2FD05a941CpbvRO2c59y3d%2FScreenshot%202026-07-20%20at%2011.18.11.png?alt=media&amp;token=5a374bf0-1672-4168-b4e8-320fc40c74f7" alt=""></p>                                          | Zentriere die Arbeitsfläche auf deinem Bildschirm.                                                                                                                                                                                                                                   |
| <p><strong>Element/Ebene auswählen (Pfeilsymbol)</strong><br><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2F4V9NAvM9uEfHRgV1s1J6%2FScreenshot%202026-07-20%20at%2011.15.54.png?alt=media&amp;token=3a0fdb70-1653-4bc7-b47c-91385618c962" alt=""></p>                               | Wähle einzelne Elemente auf der Arbeitsfläche aus und verschiebe sie.                                                                                                                                                                                                                |
| <p><strong>Verschieben/Schwenken (Handsymbol)</strong></p><p><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2F7XPwPJo9x2HxvzwOuK3F%2FScreenshot%202026-07-20%20at%2011.17.30.png?alt=media&amp;token=ee438338-849b-4e51-a941-c36483ede7a1" alt=""></p>                               | Verschiebe die gesamte Ansicht der Arbeitsfläche.                                                                                                                                                                                                                                    |
| <p><strong>Rückgängig/Wiederholen (kreisförmige Vorwärts- und Rückwärtspfeile)</strong><br><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2F6QG3McmXCE8SycZbdzP3%2FScreenshot%202026-07-20%20at%2011.21.25.png?alt=media&amp;token=4bfe2741-7dd8-44ef-9090-d31623e73e2d" alt=""></p> | Mache deine letzte Aktion rückgängig oder wiederhole sie.                                                                                                                                                                                                                            |
| <p><strong>Vorschau der Vorlage auf Items (Vorwärts- und Rückwärtspfeile)</strong><br><br><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2FJijSvOqpTbv0b2ibW70Z%2FScreenshot%202026-07-20%20at%2011.23.42.png?alt=media&amp;token=7a94bcf8-ec9e-47d0-9905-bf7d354d56df" alt=""></p>      | Sieh [wie sich die Vorlage verändert](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/vorschau-deiner-vorlage.md#preview-directly-in-the-image-editor) wenn du durch importierte Items blätterst. |

### Ebenentypen

Objekte fügen der Arbeitsfläche Bilder, Formen und Text hinzu. Jedes Objekt erscheint als Ebene in **Ebenen**. Verwende **Ebenen** um ihre Stapelreihenfolge zu steuern. Neue Ebenen können Standardnamen wie `obj_1` oder `obj_2`. Benenne sie bei Bedarf um.

Bild- und Textobjekte können statische Inhalte oder ein Projektfeld verwenden. Ein Bildobjekt, das ein Projektfeld verwendet, ist ein dynamisches Bild. Text, der ein Projektfeld enthält, ist dynamischer Text.

{% hint style="warning" %}
**Wichtig:** Verwende ein Projektfeld, das in jedem Projekt vorhanden ist, in dem du die Vorlage verwendest.
{% endhint %}

Verwende die **Text**, **Bilder** und **Form** Buttons oben auf der Arbeitsfläche, um deiner Vorlage neue Objekte hinzuzufügen.

<figure><img src="https://464299404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fu8whzIfip72Kvn3M1bsc%2Fuploads%2FnwMa9mtMZ0u0kIYnK7C6%2FScreenshot%202026-07-21%20at%2008.56.28.png?alt=media&amp;token=6bcc892b-74c7-4e67-832d-13a274be06f1" alt=""><figcaption></figcaption></figure>

Du kannst drei Arten von Objekten erstellen:

* Textobjekt: Für statischen Text oder Text aus Produktfeldern, zum Beispiel Titel.
* Bildobjekt: Für statische Bilder oder Produktbilder von einem Bildfeld.
* Formobjekt: Für statische Formen wie Kästen, Linien und Pfeile.

Lerne, wie du [Ebenen verwaltest und gestaltest](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/ebenen-verwalten.md).

Nutze [bedingte Objekte](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/so-verwendest-du-bedingte-objekte-im-bildeditor.md) um eine Ebene basierend auf Produktdaten ein- oder auszublenden.

Lerne, wie du [Text hinzufügen](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/text-hinzufugen.md) oder [Formen hinzufügen](/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/create-an-image-template/formen-hinzufugen.md).

### Verwalte die Vorlage

Nutze die Steuerelemente oben rechts, um die Vorlage selbst zu verwalten.

* Speichern: Speichere die aktuellen Änderungen an deiner Vorlage.
* Zahnrad-Symbol (Einstellungen): Greife auf Optionen zu, um die Vorlage zu löschen oder zu duplizieren.
* Nutzungs-Tab: Sieh, wo in deinen Projekten die aktuelle Vorlage verwendet wird.<br>

  <figure><img src="https://content.gitbook.com/content/u8whzIfip72Kvn3M1bsc/blobs/Nhmdf9LMHZS4Q1lxfHkf/14376740825490" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://helpcenter.channable.com/manage-improve-product-data/manage-product-and-improve-data-de/creatives-bilder-erstellen-und-bearbeiten/the-image-editor/grundlagen-des-bildeditors.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.