App Icon Studio

Das App Icon Studio ermöglicht die Erstellung professioneller App-Icons direkt in BLOCQ. Mit einer Live-Preview, vorgefertigten Templates und einem 4-Tab-Editor gestaltest du in Minuten ein einzigartiges Icon für deine App.

Übersicht

512x512 Canvas

Quadratische Arbeitsfläche in Standard-Icon-Größe

4-Tab Editor

Hintergrund, Inhalt, Form und Badge

Template-Galerie

Fertige Designs als Startpunkt

Auto-Save & Export

Automatisches Speichern und PNG-Export

Zugang

Du erreichst das App Icon Studio auf zwei Wegen:

Über die App Builder Tools: Tippe auf “App Icon Studio” im prominenten Bereich
Direkt per Route: Navigation zu /app-icon-studio

Die Arbeitsfläche

Das Studio zeigt eine zentrale 512x512 Pixel Preview deines Icons:

Live-Aktualisierung: Jede Änderung wird sofort angezeigt
Safe Area Guide: Optionaler Rahmen zeigt den sicheren Bereich (kann über das Grid-Icon ein/ausgeschaltet werden)
Schatten-Vorschau: Realistische Darstellung mit Schatten

Die Preview wird auf einer neutralen Fläche angezeigt, damit du sowohl helle als auch dunkle Icons gut beurteilen kannst.

Die 4 Tabs

Tab 1: Hintergrund

Der Hintergrund bildet die Basis deines Icons:

Eine einheitliche Hintergrundfarbe:

Tippe auf den Farbwähler
Wähle eine Farbe aus dem Picker oder gib einen Hex-Code ein

Template-Galerie:

Am Anfang des Hintergrund-Tabs findest du eine horizontale Galerie mit vorgefertigten Templates. Tippe auf ein Template, um es als Startpunkt zu verwenden. Templates übernehmen:

Hintergrundfarben/-gradient
Icon oder Text
Badge-Einstellungen
Form-Konfiguration

Tab 2: Inhalt

Der Inhalt ist das zentrale Element deines Icons:

Inhaltstyp	Beschreibung
Icon	Ein Symbol aus der umfangreichen Icon-Bibliothek
Text	Ein oder mehrere Buchstaben/Wörter
Icon + Text	Kombination aus beidem

Icon-Einstellungen:

Icon auswählen: Über den Icon-Picker aus tausenden Icons
Farbe: Die Farbe des Icons
Position: X/Y-Koordinaten auf der Arbeitsfläche
Skalierung: Größe des Icons (Standard: 1.0)
Rotation: Drehwinkel in Grad

Text-Einstellungen:

Text: Der anzuzeigende Text
Schriftart: Aus Google Fonts wählen
Schriftgröße: Größe in Pixeln
Textfarbe: Farbe des Texts
Position: X/Y-Koordinaten
Rotation: Drehwinkel
Buchstabenabstand: Abstand zwischen Buchstaben

Tab 3: Form

Füge eine dekorative Form als Overlay hinzu:

Form	Beschreibung
Circle	Kreis im Hintergrund
Rounded Square	Abgerundetes Quadrat
Blob	Organische, wellenförmige Form
Shield	Wappen-/Schild-Form
Diamond	Rauten-Form

Form-Einstellungen:

Farbe: Füllfarbe der Form
Deckkraft: Transparenz (0-100%)
Skalierung: Größe der Form

Tab 4: Badge

Ein optionales Badge als Akzent in einer Ecke:

Badge aktivieren: Schalte das Badge per Toggle ein oder aus.

Badge-Typen:

Typ	Icon	Verwendung
Checkmark	✓	Verifiziert, abgeschlossen
Plus	+	Hinzufügen, Neu
Star	★	Premium, Favorit
AI	✨	KI-Funktionen
Lightning	⚡	Schnell, Power

Badge-Position:

Oben rechts (Standard)
Oben links
Unten rechts
Unten links

Badge-Farben:

Icon-Farbe: Farbe des Badge-Symbols
Hintergrundfarbe: Hintergrund des Badges

Auto-Save System

Das App Icon Studio speichert automatisch:

Trigger: 2 Sekunden nach der letzten Änderung
Indikator: “Gespeichert um XX:XX” im Header
Draft-Detection: Beim Öffnen wird gefragt, ob du fortsetzen möchtest

Export

Wenn dein Icon fertig ist:

Tippe auf den “Exportieren”-Button in der oberen rechten Ecke
Das Icon wird als 512x512 PNG gerendert
Du gelangst zur Erfolgsseite mit Vorschau
Das Icon wird automatisch als App-Icon in der Theme Suite gespeichert

Export-Details:

Format: PNG (ohne Transparenz für beste Kompatibilität)
Größe: 512x512 Pixel
Speicherort: App-Dokumentenverzeichnis
Verknüpfung: Automatisch als App-Icon in Global Settings verfügbar

Template-Galerie

Die Template-Galerie enthält professionelle Vorlagen:

Kategorie	Beispiele
Solid	Einfarbige Hintergründe mit Icon
Gradient	Farbverläufe mit Icon oder Text
Corporate	Professionelle Business-Designs
Creative	Kreative, verspielte Designs
Minimal	Minimalistische, klare Designs

Jedes Template zeigt eine Mini-Preview mit:

Hintergrund (Farbe/Gradient)
Inhalt (Icon/Text)
Badge (falls aktiv)

Tipps

Häufige Fragen

In welcher Größe wird das Icon exportiert?

Das Icon wird immer als 512x512 Pixel PNG exportiert. Diese Größe ist der Standard für App-Icons und wird vom System automatisch für verschiedene Verwendungen skaliert.

Wird das Icon automatisch in der App verwendet?

Ja, das exportierte Icon wird automatisch als App-Icon in den globalen Einstellungen der Theme Suite gespeichert. Du musst es nicht manuell verknüpfen.

Kann ich mehrere Icons erstellen?

Das Studio speichert immer das aktuell aktive Icon. Du kannst das Icon exportieren, dann “Neues Projekt” starten und ein weiteres Icon erstellen.

Welche Icon-Bibliothek wird verwendet?

Das App Icon Studio verwendet die Material Icons Bibliothek mit tausenden von Icons in verschiedenen Stilen (Filled, Outlined, Rounded, Sharp).

Kann ich eigene Bilder als Icon-Element verwenden?

Derzeit unterstützt das Studio Bilder nur als Hintergrund. Für das zentrale Element kannst du Icons aus der Bibliothek oder Text verwenden.

Wie funktioniert der Safe Area Guide?

Der Safe Area Guide zeigt den Bereich an, der auf allen Plattformen sicher sichtbar ist. iOS und Android schneiden Icons unterschiedlich zu - halte wichtige Elemente innerhalb dieses Bereichs.