Drei Aenderungen am Generator, im selben Bereich der Datei verzahnt. Notizzettel: die StickyNote aus dem Pitch-Projekt als HTML nachgebaut, Variante purple, Farbwerte uebernommen und die Masse auf das 1080er Blatt hochskaliert. Liegt auf der Workflow-Slide und ist wie jedes andere Element verschiebbar. Schatten: raus, ueberall. Kein box-shadow, kein drop-shadow. Tiefe entsteht ueber Ueberlappung, Rahmenfarbe und Versatz. Der Umschalter faellt mit weg, er haette nichts mehr zu schalten gehabt. Die Blaetter im Stapel-Rahmen bekommen eine Haarlinie, sonst laege auf der hellen Variante Weiss auf Weiss. Szenen-Mockup: Macbook Air und iPad Pro in Perspektive, aus einem Pixeden-PSD freigestellt. Beide Displays sind ausgeknockt, die Screenshots liegen dahinter und werden per matrix3d in die Flaechen projiziert. Die Eckpunkte sind gemessen, nicht geschaetzt: beim Macbook aus dem transform_box des Smart-Objekts, beim iPad ueber Ausgleichsgeraden auf den vier Glaskanten, weil das Smart-Object dort zu hoch sitzt. Der Spalt zur weggefallenen Glasplatte wird spaltenweise aus den Nachbarfarben interpoliert, damit am Displayrand Schwarz und am Gehaeuse Metallic steht. Das PSD selbst bleibt draussen: Pixeden erlaubt die Nutzung, nicht die Weitergabe. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
68 lines
2.4 KiB
Markdown
68 lines
2.4 KiB
Markdown
# HiveGrid Social — Design-Library & Post-Generator
|
||
|
||
Eigenständige Werkbank für HiveGrid-Social-Grafiken. Slides werden im Browser
|
||
als HTML gebaut, im Canvas bearbeitet und pixelgenau als Instagram-taugliche
|
||
PNGs exportiert.
|
||
|
||
**Das Repo ist bewusst autark.** Keine CDN-Verweise, keine Google-Fonts zur
|
||
Laufzeit, keine Pfade in andere Repos. Alles, was ein Post braucht — Schrift,
|
||
Logos, Mockups, Screenshots, Bibliotheken — liegt hier.
|
||
|
||
## Starten
|
||
|
||
```sh
|
||
./serve.sh # http://127.0.0.1:4321
|
||
```
|
||
|
||
Downloads landen direkt in `~/Downloads`, ohne Browser-Dialog.
|
||
|
||
## Projekte
|
||
|
||
| Projekt | Datei | Inhalt |
|
||
|---|---|---|
|
||
| Post 1 · Lösung | `post1.html` | Carousel, 5 Slides |
|
||
| Post 2 · Statement | `index.html` | Einzelbild |
|
||
|
||
Oben im Bedienfeld wechselt man zwischen ihnen. **Jedes Projekt speichert
|
||
seinen Stand** — Einstellungen, Layouts, Muster und alle Verschiebungen aus dem
|
||
Canvas überleben einen Reload. „Projekt zurücksetzen" wirft ihn weg.
|
||
|
||
## Bedienung
|
||
|
||
| Taste | Wirkung |
|
||
|---|---|
|
||
| `←` `→` | Slide wechseln (im Bearbeiten-Modus: Element verschieben) |
|
||
| `E` | Bearbeiten an/aus |
|
||
| `W` | Streifen ⇄ Einzelansicht |
|
||
| `V` | Variante hell/dunkel |
|
||
| `L` `M` `I` | Layout · Muster · Intensität |
|
||
| `C` `G` `T` | Durchgehend · Tag-Ausrückung · Perspektive |
|
||
| `D` `A` | Slide laden · alle als ZIP |
|
||
|
||
Im Bearbeiten-Modus lassen sich Elemente ziehen, mit den Pfeiltasten
|
||
pixelweise schieben (`⇧` = 10 px) und über `A−`/`A+` in der Größe ändern.
|
||
|
||
## Aufbau
|
||
|
||
```
|
||
assets/
|
||
├── brand/ Wortmarke hell/dunkel, G-Marke (SVG + PNG), Wabe, Geerkens
|
||
├── partner/ DATEV, KWP, Google Calendar, Google Drive, MS Outlook, MS Teams
|
||
├── mockups/ Geräte-Mockups (Displays ausgeknockt, Screenshot liegt dahinter)
|
||
├── screens/ Software-Screenshots
|
||
└── fonts/ Manrope 400–800, lokal
|
||
vendor/ html-to-image, JSZip
|
||
serve.py Statischer Server + /save-Endpunkt
|
||
rules.md Gestaltungsregeln, Farbwerte, Export-Wissen
|
||
```
|
||
|
||
## Regeln
|
||
|
||
**`rules.md` ist die Arbeitsgrundlage.** Farbwerte, Geometrie, Typografie,
|
||
Layout-Template, Instagram-Export und die Liste der Fallen, in die wir schon
|
||
getappt sind. Vor jeder Änderung an der Gestaltung dort nachsehen.
|
||
|
||
Marken-Werte stammen aus der Website (`HiveGrid-Website`) und sind hier
|
||
**gespiegelt**, nicht verlinkt. Ändert sich dort etwas, muss es hier
|
||
nachgezogen werden.
|