Lolly verwenden

Ein praktischer Leitfaden zur tatsächlichen Nutzung der App - ein Tool öffnen, mit der Zeichenfläche arbeiten, exportieren, speichern und teilen. Alles hier läuft auf Ihrem Gerät: kein Konto, kein Upload, nach dem ersten Laden ist keine Internetverbindung mehr erforderlich.

Neu hier? Der Schnellstart bringt dich in wenigen Minuten zum ersten Ergebnis, und Lolly für Operatoren behandelt die Installation/Bereitstellung der App; auf dieser Seite geht es um die Bedienung, sobald sie geöffnet ist.

Ein Tool öffnen

Der Startbildschirm ist die Galerie - jedes Tool, nach Kategorie gruppiert. Klicken Sie auf eine Karte, um das Tool zu öffnen; wenn Sie zuvor schon damit gearbeitet haben, setzt eine Schaltfläche Fortsetzen Ihre letzte Sitzung fort. Verwenden Sie das Suchfeld, um nach Namen zu filtern.

Jedes Tool ist eine geteilte Ansicht: Steuerelemente auf der einen Seite, eine Live-Vorschau (die Zeichenfläche) auf der anderen. Ändern Sie ein beliebiges Steuerelement, und die Vorschau aktualisiert sich sofort.

Einige Tools (wie Layout Studio) öffnen stattdessen als freie Zeichenfläche - eine chromfreie Oberfläche zur direkten Bearbeitung, auf der Sie Boxen mit Text, Formen und Bildern ziehen, in der Größe ändern, drehen und einrasten lassen und per Doppelklick Text direkt bearbeiten. Sie exportiert über denselben Renderpfad wie jedes andere Tool, sodass die Zeichenfläche die Datei ist. Siehe Die freie Zeichenfläche weiter unten.

Die Zeichenfläche (Vorschau)

Die Vorschau zeigt immer genau das, was exportiert wird.

Desktop

• Zoom: Cmd/Ctrl-Scrollen oder Pinch-Geste auf einem Trackpad - der Zoom zentriert sich auf Ihren Zeiger.
• Verschieben (Pan): Halten Sie Leertaste gedrückt und ziehen Sie, oder ziehen Sie mit der mittleren Maustaste. (Einfache Klicks bleiben frei, um Teile des Designs anzuklicken.)
• Tastatur: 0 = an Fenster anpassen · 1 = 100 % · + / − = Zoom.
• Zoom-HUD: das kleine Bedienelement − NN% + Fit in der Ecke. Klicken Sie auf den Prozentwert, um zwischen Fit ↔ 100 % umzuschalten.

Touch

• Pinch-Geste zum Zoomen, Ziehen zum Verschieben, Doppeltippen, um auf „Fit“ zurückzusetzen.

Klicken, um zu einem Steuerelement zu springen: Klicken Sie auf ein beliebiges Element im Design, und das passende Eingabefeld in der Seitenleiste erhält den Fokus und wird ins Sichtfeld gescrollt - bei einer sich wiederholenden Zeilengruppe klappt genau die Zeile auf, die Sie angeklickt haben, sodass das Bearbeiten dessen, was Sie sehen, nur einen Klick entfernt ist.

Eine Änderung der Abmessungen setzt die Ansicht immer auf eine saubere Einpassung zurück.

Die freie Zeichenfläche (Layout Studio)

Tools mit freier Zeichenfläche fügen eine Arbeitsfläche um das Artboard herum hinzu, wie ein Montagebrett bei Designern:

• Bereitstellung außerhalb der Zeichenfläche. Ziehen Sie eine Box über den Rahmenrand hinaus, bleibt sie vollständig sichtbar und auswählbar - parken Sie Elemente seitlich, während Sie die Komposition anordnen, und ziehen Sie sie dann wieder hinein. Alles außerhalb des Rahmens wird sanft abgeblendet, sodass der Exportbereich stets auf einen Blick erkennbar ist, und der Rahmen behält seinen Schatten, um genau zu markieren, wo die Datei beginnt.
• Nur der Rahmen wird exportiert. Die exportierte Datei ist durch das Artboard begrenzt - alles, was außerhalb bleibt (oder der Teil einer Box, der über den Rand hinausragt), wird einfach aus der Ausgabe herausgeschnitten, sowohl bei Raster- als auch bei Vektorformaten.
• Zoomen Sie über Fit hinaus heraus (bis auf 20 %), um das gesamte Montagebrett zu sehen, wenn Sie Elemente weit außerhalb des Rahmens platziert haben.
• Größenveränderbares Artboard. Eine Änderung der Exportabmessungen ändert die Größe des Rahmens vor Ort; Boxen behalten ihre Positionen bei, sodass Sie ein Layout um bestehende Inhalte herum neu einrahmen können.

Auf einem Smartphone

Auf schmalen Bildschirmen wird das Layout zu einer einzigen Spalte umgeflossen:

• Die Steuerelemente werden zu einem Sheet (Bedienfeld) oben mit einem Ziehgriff an der Unterkante. Ziehen Sie am Griff, um die Größe zu ändern - es rastet bei Peek / Half / Full ein - oder tippen Sie auf den Griff, um zwischen eingeklappt ↔ ausgeklappt umzuschalten. Die Vorschau füllt den Bereich darunter aus und bleibt während der Bearbeitung sichtbar.
• Eine schwebende Schaltfläche Render öffnet das Export-Sheet - alle Steuerelemente für Format, Größe, Kopieren, Speichern und Herunterladen an einem Ort. Schließen Sie es, indem Sie auf den Hintergrund tippen.

Steuerelemente (Eingaben)

Tools legen nur die Eingaben offen, die variieren sollen - alles andere (Farben, Layout, Typografie, Logik) ist vom Tool-Autor festgelegt, sodass alles, was Sie erstellen, den vom Autor festgelegten Regeln entspricht. Zu den Eingaben gehören Text, Schieberegler, Farbwähler, Dropdowns, Daten, Bildauswahl und sich wiederholende Zeilengruppen. Manche sind unter einklappbaren Abschnitten gruppiert.

Zurücksetzen: Änderungen verwerfen setzt jede Eingabe auf ihre Standardwerte zurück.

Ihre Angaben & Ihr Profilfoto

Profil (oben rechts in der Galerie) enthält Ihren Namen, Kontaktdaten und ein optionales Profilfoto. Tools, die nach diesen Feldern fragen, füllen sie automatisch vorab aus - legen Sie sie einmal fest, und Ihre E-Mail-Signatur, Lockups und Badges füllen sich von selbst. Sie können jedes Feld pro Sitzung weiterhin überschreiben. Aktivieren Sie Meine Angaben verwenden, damit ein Tool sie lesen darf.

Ihr Profilfoto und Ihre Angaben existieren nur auf diesem Gerät. Ein Profil kann mehr sein als nur Sie selbst - ein Team oder eine Rolle, in die Sie hin und wieder schlüpfen. Das vollständige Bild, einschließlich der Verwaltung mehrerer Profile, finden Sie unter Profile.

Speichern & Fortsetzen

Klicken Sie auf Speichern, um die aktuellen Eingaben als Sitzung für dieses Tool zu speichern. Sie können mehrere benannte Sitzungen pro Tool aufbewahren; die Schaltfläche Fortsetzen jedes Tools öffnet Ihre letzte Sitzung erneut, und die Verlaufsschaltfläche (oben rechts, neben Ihrem Profil) listet jede gespeicherte Sitzung über alle Tools hinweg auf. Sitzungen sind gerätelokal. Um sie zu organisieren, öffnen Sie Projekte (unten).

Projekte

Projekte - öffnen Sie es über den Tab Projekte neben Tools oder über Profil → Speicher → In Projekten organisieren - ist ein Zuhause für alles, was Sie gespeichert haben, und funktioniert wie ein Dateimanager:

• Verschachtelbare Ordner. Gruppieren Sie gespeicherte Sitzungen in Ordner und Ordner innerhalb von Ordnern, so tief wie Sie möchten. Erstellen Sie einen Ordner, benennen Sie ihn um, oder ziehen Sie eine Kachel auf einen anderen Ordner, um sie zu verschieben; eine Breadcrumb-Navigation führt Sie zurück nach oben. Ein stets vorhandener Ordner Nicht kategorisiert enthält alles, was noch nicht abgelegt wurde.
• Neue Arbeit direkt ablegen. Innerhalb eines Ordners öffnet + Neues Tool ein Tool und legt dessen erste Speicherung automatisch in diesem Ordner ab.
• Mehrfachauswahl (Desktop). Aktivieren Sie das Kontrollkästchen einer Kachel, ziehen Sie ein Auswahlrechteck über die leere Fläche, oder verwenden Sie Umschalt/Cmd-Klick; Rechtsklick auf eine Kachel öffnet deren Kontextmenü. Führen Sie dann eine Aktion für die gesamte Auswahl auf einmal aus.
• Einen ganzen Ordner oder eine Auswahl rendern. Ordner rendern exportiert jede gespeicherte Sitzung in einem Ordner - einschließlich seiner Unterordner - als eine verschachtelte .zip. Auswahl rendern macht dasselbe für jede Mehrfachauswahl, und eine einzelne Sitzung wird direkt in ihre eigene Datei gerendert. Kein Batch/Pro erforderlich.
• Eine gespeicherte Sitzung teilen. Rechtsklick auf eine Sitzung → Link teilen, um einen Link zu kopieren, der sie mit exakt denselben Eingaben wieder öffnet (der vollständige Teilen-Dialog - siehe unten).

Einen Link teilen

Jede Eingabe wird in der Seiten-URL erfasst, sodass ein Link das Design ist. Verwenden Sie Teilen in den Exportsteuerelementen - oder Link teilen bei einer gespeicherten Sitzung in Projekten -, um den Teilen-Dialog zu öffnen: ein kopierbereiter Link plus Umschalter für die Verschlüsselung des Links und dafür, was beim Öffnen passiert (Vollbild, ausgeklapptes Exportfeld, Download-beim-Öffnen mit &export, oder Kopieren-in-die-Zwischenablage mit &copy).

Ein umfangreiches Design würde eine lange URL ergeben, daher bietet der Dialog auch einen Kürzesten Link, der den gesamten Zustand in ein kompaktes Token packt - die lesbare Form ist ebenfalls immer verfügbar. Fügen Sie ihn einem Kollegen ein, setzen Sie ein Lesezeichen, oder committen Sie ihn. (Vollständige Details: URL-Modus.)

Bilder, die Sie von Ihrem Gerät hochgeladen haben, sind nicht in einem geteilten Link enthalten - sie existieren nur auf Ihrem Rechner.

Live-Kamera (bewegungsreaktive Tools)

Die Foto-Filter - Halftone, Scanline, Posterize, Duotone - zeigen eine Schaltfläche Go live, sofern eine Kamera verfügbar ist. Schalten Sie sie ein, und der Effekt verfolgt Ihre Webcam Bild für Bild, sodass er auf Bewegung reagiert; Sie können das Ergebnis als GIF, WebM oder MP4 aufzeichnen. Bilder werden auf Ihrem Gerät gelesen und verarbeitet und verlassen es nie, und die Kamera wird freigegeben, sobald Sie anhalten oder das Tool verlassen. (Jede Bildauswahl verfügt außerdem über Foto aufnehmen, um ein einzelnes Bild als geräteinternes Bild zu erfassen.)

Meine Bilder

Wenn ein Tool Ihnen erlaubt, ein Bild von Ihrem Gerät hinzuzufügen, wird es verkleinert, von EXIF/GPS-Daten befreit und in Ihrer persönlichen Bibliothek Meine Bilder gespeichert (unter Profil → Speicher). Verwenden Sie es in jedem beliebigen Tool erneut. Die Bibliothek ist in ihrer Größe begrenzt und vollständig lokal - verwalten oder löschen Sie Bilder dort.

Der Katalog - Ihre Asset-Bibliothek

Der Katalog (#/c oder der Link Katalog im Menü) sammelt alles, worauf Ihre Tools zurückgreifen können - Markenlogos, Bilder, Audio und Bewegtbild, nach Art gruppiert - und hier liegen auch Ihre eigenen kreativen Dateien. Kein Server, keine Admin-Konsole, kein Pull Request: alles liegt auf Ihrem Gerät.

• Bringen Sie Ihre Dateien herein. Ziehen Sie ein beliebiges Bild, eine SVG-Datei, einen Audioclip, ein Video, eine Lottie-Datei oder ein PDF auf den Upload-Bereich - oder klicken Sie zur Auswahl - und es landet sofort in Ihrem Katalog, bereit im Asset-Picker jedes Tools. Nehmen Sie so viel auf, wie Sie möchten; es verlässt niemals Ihr Gerät.
• Favorisieren Sie, wonach Sie oft greifen. Markieren Sie ein Asset (oder ein Marken-Farbfeld) mit ★, und es wird oben in jedem Picker angeheftet, sodass Ihr bevorzugtes Logo oder Ihre bevorzugte Farbe nur einen Klick entfernt ist.
• Aufräumen. Kategorisieren Sie ein Asset in eine andere Gruppe um, blenden Sie ein geteiltes Marken-Asset aus, das Sie nicht nutzen (mit Ausgeblendete anzeigen, um es zurückzuholen), oder löschen Sie Ihre eigenen Uploads vollständig.

Nehmen Sie Ihre Palette und Schriften überallhin mit

Das Farbfelder-Panel des Katalogs dient nicht nur als Referenz - klicken Sie auf eine Farbe, um sie zu kopieren, oder laden Sie die gesamte Markenpalette herunter in dem Format, das Ihr anderes Tool spricht:

• Design Tokens (JSON), CSS-Variablen oder CSS-Klassen - übernehmen Sie die Marke direkt in ein Stylesheet oder einen Build;
• Adobe Swatch Exchange (.ase) - laden Sie sie in Illustrator oder Photoshop;
• GIMP-Palette (.gpl) - für GIMP oder Inkscape.

Das Schriften-Panel listet Ihre Markenschriften mit einem Download neben jeder auf, um sie lokal zu installieren oder einer Druckerei zu übergeben. (Der Tab „Farben“ des Brand Studio bietet denselben Palettendownload.)

Assets sind die eine Hälfte des offenen Do-it-yourself-Pfads; die andere ist das Erstellen eigener Tools - die freie Zeichenfläche (Layout Studio, oben beschrieben) lässt Sie eines visuell erstellen, ganz ohne Code.

Sound & Barrierefreiheit

Lolly soll für alle angenehm zu benutzen sein. Die Oberfläche ist per Tastatur navigierbar, benutzerdefinierte Steuerelemente tragen korrekte Beschriftungen für Screenreader, und die Live-Vorschau jedes Tools wird als ein einzelnes beschriftetes Bild verfügbar gemacht, das beschreibt, was gerade entsteht.

Eine dezente Ebene unterstützender Klänge bestätigt, was Sie tun - die Ankunft in der Galerie, eine Prüfung gültiger vs. ungültiger Content Credentials, das Schließen eines Panels, das Wechseln eines Filters. Sie ist standardmäßig aktiviert, aber stets optional: Schalten Sie Sound überall dort aus, wo der Schalter erscheint (im Optionen-Popover jeder Ansicht oder unter Profil), und die Wahl wird gespeichert.

Neben diesem Schalter befindet sich der Neurospicy Mode - ein optionaler, beruhigender Fokus-Track im Hintergrund, der leise abgespielt wird, während Sie arbeiten. Wenn Sie ihn einschalten, öffnet sich in der unteren Ecke ein kleines Player-Dock, das Ihnen durch die App folgt; von dort aus können Sie einen Track suchen und auswählen, vor- und zurückspringen, die Lautstärke einstellen und es minimieren oder schließen. Die Trackliste umfasst einige Kategorien - prozedurale Lolly Sings-Melodien, Ambient-Loops und Beats, Ihre eigenen hochgeladenen Audiodateien sowie eine Handvoll Live-Internet-Radio-Sender (diese benötigen eine Verbindung; alles andere wird offline abgespielt). Er ist standardmäßig deaktiviert und wird, wie Sound, sitzungs- und geräteübergreifend gespeichert. Wird Sound deaktiviert, wird auch der Fokus-Track stummgeschaltet.

Speicher & Datenschutz

Alles wird in der lokalen Datenbank Ihres Browsers gespeichert (IndexedDB): Ihr Profil, gespeicherte Sitzungen, hochgeladene Bilder und ein Cache heruntergeladener Katalog-Inhalte. Profil → Speicher zeigt die Auslastung und ermöglicht Ihnen:

• Cache leeren - verwirft heruntergeladene Katalog-Inhalte (wird beim nächsten Laden erneut synchronisiert).
• Alle meine Daten löschen - löscht Profil, Sitzungen und Bilder. Kann nicht rückgängig gemacht werden.

Es wird nichts irgendwohin übertragen. Keine Telemetrie, kein Cloud-Rendering.

Umzug auf ein anderes Gerät

Da alles auf Ihrem Gerät liegt, können Sie mit Profil → Speicher → Auf ein anderes Gerät umziehen alles auf eine zweite Installation übertragen - kein Konto, keine Cloud:

• Meine Daten exportieren lädt eine einzelne LollyTools-<First>-<Last>-<YYYY-MM-DD>-<n>.zip herunter (die Namensteile stammen aus Ihrem Profil und entfallen, wenn sie nicht gesetzt sind; <n> ist ein täglicher Zähler, damit Exporte am selben Tag nicht kollidieren) mit Ihrem Profil, jeder gespeicherten Sitzung (mit Vorschaubild), Ihren hochgeladenen Bildern und Ihren Einstellungen (Design, Seitenleistenbreite, lokale Aktivitätsstatistiken).
• Daten importieren… auf der anderen Installation liest diese Datei wieder ein. Es wird zusammengeführt: Alles mit demselben Namen (Ihr Profil, ein Sitzungsplatz, ein Bild) wird durch die importierte Kopie ersetzt; alles andere auf diesem Gerät bleibt erhalten. Gespeicherte Sitzungen verknüpfen sich automatisch neu mit Ihren importierten Bildern.

Der Katalog-Cache ist nicht enthalten - er lädt sich auf dem neuen Gerät selbst erneut herunter. Das Paket ist ein einfaches Zip (manifest.json + profile.json + sessions.json + assets.json + assets/blobs/… + prefs.json, Format-ID lolly-backup), sodass es E-Mail, USB oder AirDrop unversehrt übersteht und von jeder Shell im selben Format gelesen wird. Jeder Teil ist mit einer Prüfsumme versehen, sodass eine beim Transport beschädigte Datei beim Import erkannt wird, statt halb kaputt wiederhergestellt zu werden. (Vollständige Formatspezifikation: Datenübertragung.)

Ein Design importieren (Figma, Penpot, Illustrator, InDesign)

Sie können ein bestehendes Design in Lolly übernehmen und daran weiterarbeiten: Öffnen Sie Layout Studio, klicken Sie in der Werkzeugleiste der Zeichenfläche auf Design importieren, und wählen Sie eine Figma-.fig- oder SVG-Datei, eine Penpot-.penpot-Datei, eine Illustrator-.ai-/.pdf-Datei oder eine InDesign-.idml-Datei. Ebenen werden zu bearbeitbaren Boxen auf der freien Zeichenfläche - Text bleibt neu eintippbar, Bilder landen in Meine Bilder, und Schrift und Farben richten sich nach den globalen Markenvorgaben - anschließend wird das Ergebnis wie jede andere Sitzung gespeichert, geteilt und gerendert. Das Parsen erfolgt vollständig auf Ihrem Gerät. Vollständige Details: Ein Design importieren.

Exportieren

Die vollständige Geschichte finden Sie unter Exportieren & Formate - Formatwahl, Ausgabegröße und Druckeinheiten, Transparenz, Video sowie Kopieren/Teilen. Kurz gesagt: Wählen Sie ein Format, stellen Sie bei Bedarf die Größe ein, und klicken Sie auf Herunterladen (oder Kopieren in die Zwischenablage).

Batch-Modus (Pro)

Für Power-User rendert Batch (von der Galerie aus verlinkt, hinter dem Pro-Feature-Flag, das standardmäßig aktiviert ist) viele Varianten auf einmal - ein Raster, in dem jede Zeile ein Satz von Eingaben ist, die gemeinsam exportiert werden. Ideal, um eine Karte in ein Dutzend Sprachen zu lokalisieren oder jede Größenvariante in einem Durchgang zu erzeugen. Füllen Sie Zeilen durch Eintippen, direktes Einfügen aus einer Tabellenkalkulation oder Importieren einer CSV (Sie können auch eine zurück exportieren), und legen Sie Format, Größe und Ausgabedateiname pro Zeile fest. Speichern Sie ein ganzes Raster als benannte Batch-Sitzung, die sich von der Galerie aus wieder öffnen lässt, und laden Sie jede Zeile als eine einzelne .zip herunter.

Batch dient dazu, viele Varianten einer Vorlage auf einmal zu erzeugen. Um Sitzungen, die Sie bereits gespeichert haben, neu zu rendern, verwenden Sie Projekte → Ordner rendern / Auswahl rendern (oben) - kein Pro erforderlich.

Offline & Installation

Lolly ist eine PWA. Nach dem ersten Laden funktioniert sie offline - installieren Sie sie über die Adressleiste Ihres Browsers (oder Zum Startbildschirm hinzufügen auf Mobilgeräten) für ein App-ähnliches Vollbilderlebnis. Sie aktualisiert sich selbst, sobald Sie wieder online sind.