Android-Style Logo Reveal

Android Style Logo Reveal

Wenn mehrere Skills dies könnten: Wenn die Anfrage dieses Skill nicht nennt und Ihr Agent auch andere Omnigami-Skills besitzt, die die gleiche Art von Inhalt erstellen (andere Launch-Filme, Shots, Decks oder Mockups), listen Sie diese namentlich auf und fragen Sie, welches der Benutzer möchte, bevor Sie beginnen. Wenn es benannt ist oder das einzige installierte ist, beginnen Sie.

Für japanische, koreanische oder chinesische Produktseiten behalten Sie den Text in dieser Sprache bei und setzen Sie den lang-Wert des Films auf das <html lang>-Attribut der Seite; gebündelte Noto-Schriftarten und Phrasentrennungen kümmern sich um den Text.

Ein 15,5-Sekunden-Opener, der das Markenzeichen des Produkts aus seiner eigenen Geometrie aufbaut und mit dem vollständigen Logo endet. Dünne Konstruktionslinien wachsen entlang der tatsächlichen Kanten des Markenzeichens; Zirkelbögen werden aus seinen tatsächlichen Bögen gezeichnet, einer alle 0,75 s, während vier kurze Zeilen sagen, was das Produkt für den Nutzer tut; das Markenzeichen füllt sich, gleitet zur Mitte und hält an; die Kamera fährt hinein, bis seine Farbe das gesamte Bild ausfüllt; das erste Wort der Produktzeile erscheint allein, riesig; ein Wischvorgang in einer der eigenen Formen des Markenzeichens führt dieses Wort in den Rest der Zeile; eine Scheibe dehnt sich zur eigenen Eingabe des Produkts (oder seinem Hauptknopf) aus, wo die letzten Wörter getippt werden; der Senden-Knopf wird gedrückt, eine Scheibe in der Farbe des Markenzeichens blüht im Bild auf, und die Kamera fährt aus dem Markenzeichen zurück zum vollständigen Logo. Flache Felder, keine Unschärfe, keine Farbverläufe, keine Schatten. 30 fps auf einem 120-BPM-Raster, Breitbild (1920 × 1080).

Sie arbeiten durch Anpassen eines fertigen Films. reference/ enthält den vollständigen Film für Ostlery (einen fiktiven Buchungsassistenten, der für die Beispiele von Omnigami erstellt wurde; seine Geschichte und Quellen sind in reference/STORY.md). Behalten Sie seine Mechanik: das Easing, den Zeitplan, den Push und Pull der Kamera, den Wischvorgang, die Scheibe, das Aufblühen, die Proportionen des vollständigen Logos und die eigenen Überprüfungen des Films. Seine Substantive werden zu den des Nutzers: das Markenzeichen, die daraus gezeichnete Konstruktion, die vier Zeilen, die Zeile, die Eingabe, die Farben, die Schriftarten und die Wortmarke. Jede Einstellung, die Sie ändern, ist in reference/index.html mit ADAPT gekennzeichnet; alles mit KEEP bleibt.

Lesen Sie style.md, bevor Sie planen, und critique.md, bevor Sie etwas beurteilen.

Was es braucht

• Das Markenzeichen als Vektorpfade (ein SVG). Die Konstruktion basiert auf der tatsächlichen Geometrie des Markenzeichens, daher reicht ein PNG nicht: Fragen Sie nach der SVG (oder finden Sie sie im Quellcode oder der Website des Produkts). Zeichnen Sie ein Markenzeichen niemals nach, lesen Sie es nicht neu und „verbessern“ Sie es nicht.
• Die Produktzeile: ein eigener Satz, drei bis sieben Wörter, der aus zwei Teilen besteht (Ostlery: "Plan a stay" + "in a sentence." ). Das erste Wort muss kurz und stark sein: Es erscheint allein, so groß wie das Bild es erlaubt.
• Vier Dinge, die das Produkt für den Nutzer tut, in seiner eigenen Stimme (von seiner Website oder dem Markenleitfaden).
• Eine echte Eingabe oder ein echter Knopf des Produkts, so wie das Produkt es gestaltet: am besten ein Feld mit einem eigenen Senden-Knopf darin (ein Composer, ein Suchfeld mit einem Los-Knopf, eine Eingabeaufforderung); andernfalls sein Hauptaktionsknopf. Niemals eine Komponente, die das Produkt nicht besitzt (siehe „Die Eingabe“).
• Seine Schriftarten (Dateien mit ihren Lizenzen): die Auszeichnungsschrift für die Zeile, die Oberflächenschrift, die Schrift der Wortmarke oder die Wortmarke als ausgefülltes SVG. Wenn eine Schrift nicht mitgeliefert werden kann, fragen Sie nach einer lizenzierten Datei oder verwenden Sie die nächstgelegene offene Schrift und sagen Sie dies.

Lesen Sie die Website, bevor Sie fragen; dann fragen Sie einmal, in einer Nachricht, nach dem, was sie nicht beantworten kann. Wenn der Benutzer keine Fragen oder einen unbeaufsichtigten Durchlauf wünscht, entscheiden Sie aus dem, was Sie erreichen können, und sagen Sie, was Sie entschieden haben.

Einrichtung

Überprüfen Sie Node 20+, ffmpeg und einen Chrome-basierten Browser (scripts/chrome.mjs findet ihn; CHROME_PATH überschreibt). Erklären Sie alles Fehlende und brechen Sie ab. Arbeiten Sie in logo-reveal/ im aktuellen Verzeichnis; setzen Sie SKILL_DIR zuerst auf den Ordner dieser Datei:

SKILL_DIR=/path/to/android-style-logo-reveal   # der Ordner, in dem sich diese SKILL.md befindet
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/ bleibt unberührt, um es vergleichen zu können. Sie bearbeiten film/: seine index.html und seine assets/ (ersetzen Sie mark.svg und die Schriftarten durch die des Produkts, jede Schriftart mit ihrer Lizenz, und löschen Sie die der Referenz, sobald Ihre geladen werden). Ihre STORY.md und PRODUCT.md kommen an den Anfang von logo-reveal/. Schauen Sie sich jetzt out/reference/16x9-sheet.png an: Das ist die Messlatte.

1. Die Marke lesen

1. node scripts/capture.mjs <url> capture und lesen Sie jeden Screenshot und capture/brand.json. Öffnen Sie das Produkt selbst (seine App, eine Demo oder seinen Quellcode). Eine lokale App: servieren Sie sie (python3 -m http.server) und verwenden Sie ihre Adresse.
2. Schreiben Sie PRODUCT.md: Was es in einem Satz tut, seine Stimme, seine Schriftarten und Lizenzen, die Idee des Markenzeichens (wofür seine Formen stehen: Ostlerys Bögen sind "Türen in Türen", die Türöffnung "der eine Aufenthalt, den es findet"), seine Eingabe oder sein Hauptknopf und deren Gestaltung, die Zeile und die vier Vorteile, jeweils mit dem Ort, an dem Sie sie gefunden haben, und das Datum. Und seine Farben nach Rolle (die Token des Films, C):
   • paper der Hintergrund, ink sein Text, card die Füllung seiner Eingabe;
   • ember die Farbe des Markenzeichens (der Name ist der der Referenz; behalten Sie die Rollennamen);
   • lake die Konstruktionslinien: eine kühle Farbe, die die Marke für Links, Linien oder Karten verwendet. Wenn sie keine hat oder sie für etwas anderes verwendet, verwenden Sie ihre ink (niemals ein helles Grau: es wirkt blass);
   • ok die Häkchen neben den Zeilen: die Erfolgsfarbe der Marke oder ihre ink, wenn diese Farbe rationiert ist (Tovra behält ihr Grün für Geld, das angekommen ist).

2. Die Wörter

• Die vier Zeilen sagen, was das Produkt für den Nutzer tut: Nutzenvorteile in der Stimme der Marke, zwei bis fünf Wörter pro Zeile. Sie setzen bei 64 px in einer 650 px breiten Spalte an und schrumpfen alle, um zur breitesten zu passen: Halten Sie die längste auf etwa 22 Zeichen (Ostlerys längste, "Finds the one that fits", 23 Zeichen Figtree, passt gerade bei 64 px; eine breitere Schrift passt weniger, und eine Zeile, die unter etwa 56 px setzt, wirkt klein). Niemals die Einzelheiten der Beispieldaten: kein Filter, kein Preis, kein Kunde, kein Name eines Ergebnisses ("Under $220 a night" und "Best fit · Heron Point Cabin" wurden für Ostlery abgelehnt: sie sagen nichts darüber, warum jemand es haben möchte). Ordnen Sie sie so, wie das Produkt funktioniert; die letzte ist der Höhepunkt, und sie erscheint, wenn das Markenzeichen sich füllt. Vier, niemals fünf: Jede muss etwa eine Sekunde zum Lesen halten.
• Die Zeile, in zwei Teile geteilt: line1, die Aussage (zwei bis vier Wörter) und line2, der Rest, der in die Eingabe getippt wird (20 Zeichen oder weniger liest sich am besten; die Überprüfung des Films schlägt fehl, wenn das Tippen in den Druckvorgang läuft), oder die eigene Bezeichnung des Knopfs. Verwenden Sie die eigene Zeile des Produkts, wenn es eine hat. Ein Schlüsselwort kann als *so* markiert werden, um in der Farbe des Markenzeichens gesetzt zu werden, in einem der beiden Teile, aber niemals das erste Wort (es erscheint in der Hintergrundfarbe auf dem Feld des Markenzeichens). Schreiben Sie das Markenzeichen nur um das Wort herum; der Film liest *paid*. als *paid*. . Eine Marke, die ihre Farbe für eine Bedeutung behält, kann nichts markieren.
• Die Wortmarke: der Name des Produkts, wie das Logo es setzt (seine Groß- und Kleinschreibung, seine Schrift und Gewichtung oder sein ausgefülltes SVG).

Schreiben Sie STORY.md in der Form von reference/STORY.md: die Kurzzusammenfassung, was jeder Beat sagt, das Beat-Raster mit Ihrer Konstruktion des Markenzeichens, dem Füllen, dem Wischvorgang, den Eckformen und der Eingabe, und jedes Wort mit seiner Quelle. Zeigen Sie dem Benutzer die vier Zeilen, die Zeile und den Konstruktionsplan in wenigen Zeilen und bitten Sie um eine Überprüfung, es sei denn, sie haben einen unbeaufsichtigten Durchlauf gewünscht. Nehmen Sie niemals Stille als Zustimmung.

3. Das Markenzeichen aus seiner eigenen Geometrie konstruieren

Dies ist das Herz des Films: Der Betrachter soll das Gefühl haben, dass das Markenzeichen mit Sorgfalt entworfen wurde, weil jede gezeichnete Linie wirklich darin vorkommt. Jede Zahl unten bezieht sich auf die 100-Einheiten-Box des Films (das Markenzeichen zentriert auf (50, 50), seine längere Seite verläuft von 8 → 92). Arbeiten Sie sie zuerst auf Papier aus den Zahlen des SVGs aus, dann geben Sie sie ein.

1. Platzieren Sie das Markenzeichen (MARK_D, MARK_FIT, BOX). Kopieren Sie die Pfaddaten des SVGs genau in MARK_D, ein Eintrag pro Teil (ein Teil ist ein Stück, das Sie einzeln füllen werden; Pfade mit fill-rule="evenodd" bleiben wie sie sind). Wenn das SVG nicht in der 100-Einheiten-Box gezeichnet ist, setzen Sie MARK_FIT = [s, 0, 0, s, tx, ty] mit s = 84 / (seine längere Seite), tx = 50 - s × (sein Mittelpunkt x), ty = 50 - s × (sein Mittelpunkt y); dann wird jede SVG-Zahl v zu s × v + tx (x) oder s × v + ty (y). Setzen Sie BOX auf die Grenzen des Markenzeichens in der Box (ein quadratisches Markenzeichen: 8, 8, 92, 92; ein breites behält x 8 → 92 und seine y-Grenzen rücken ein). Ein mehrfarbiges Markenzeichen: Geben Sie drawMark und die Füllungen die Farbe jedes Teils.
2. Das Gitter (GRID_X, GRID_Y): eine Linie für jede tatsächliche Kante. Listen Sie das x jeder vertikalen geraden Kante, das y jeder horizontalen, die Tangenten jedes Bogens (sein Mittelpunkt ± sein Radius, in beide Richtungen), die eigene Symmetrieachse jedes Teils und die Mittelachsen bei 50 (etwas dunkler gezeichnet). Führen Sie Linien, die näher als 2 Einheiten sind, zusammen; behalten Sie etwa 6–12 Vertikale und 4–8 Horizontale. Nichts auf dem Gitter, das keine Kante, kein Tangens oder keine Achse des Markenzeichens ist.
3. Die Primitive (PRIMS, T.circles): womit der Designer des Markenzeichens es gezeichnet hat, größte zuerst, höchstens fünf. Jedes wird von einem sich bewegenden Punkt über 0,65 s auf STROKE gezeichnet, mit einem Anker, wo es beginnt, und einem auf halbem Weg, ältere werden dunkler, während die Maßlinie zum neusten gleitet:
   • ein Kreis, von einem der Bögen des Markenzeichens: { x, y, r }, sein Mittelpunkt und Radius (er beginnt an seinem rechten Frühlingspunkt und geht über die Oberseite). Bögen, die sich einen Mittelpunkt teilen, ergeben die stärkste Konstruktion (Ostlerys fünf sind konzentrisch);
   • jeder andere Umriss: { path, half }, SVG-Pfaddaten in den Einheiten der Box, beginnend dort, wo der Punkt beginnen soll, und der Anteil seiner Länge, wo der zweite Anker landet: ein abgerundeter Balken als ein Umriss, die Diagonale eines Quadrats, die Mittellinie eines Dreiecks, der Stamm und die Rundung eines Buchstabens. Ein Markenzeichen ohne Bögen braucht diese. Geben Sie jedem dim: [x, 50], wo die Maßlinie beginnt, auf der Mittelachse (Kreuzung seiner rechten Kante), so dass die Linie waagerecht zur Spalte der Zeilen verläuft. Schauen Sie sich jede Phase der Konstruktion an: kleine Kreise in einem großen können als Gesicht gelesen werden (Tovras Münze mit drei kleinen Bögen lesen sich als zwei Augen und ein Stirnrunzeln); zeichnen Sie stattdessen die Formen, die sie abrunden (das T als zwei abgerundete Balken). Niemals einen Begrenzungsrahmen, ein Stiftwerkzeug, einen Cursor oder ein Werkzeug-Attribut.
4. Die Zeiten der Zeilen und Primitive (LINES, T.lines, T.circles): die Zeilen bei 0,75, 2,0, 3,25 und 4,5 s (die letzte mit der Füllung). Fünf Primitive beginnen alle 0,75 s ab 0,75 s; bei weniger beginnen Sie eines zu jeder Zeilenzeit (drei: 0,75, 2,0, 3,25). Verschieben Sie dann keyTimes (nahe dem Ende der Datei) auf die Momente Ihres Films: einen innerhalb des Zeichnens jedes Primitivs und jedes Haltens der Zeile.
5. Die Füllung (FILLS): Die Reihenfolge kommt von der Idee des Markenzeichens, und der Teil, der der Höhepunkt der Idee ist, leuchtet zuerst auf. Jeder Schritt ist rise (ein Teil füllt sich von seinem Fuß nach oben), along (ein Band füllt sich entlang seiner Mittellinie, gegeben als Pfad in den Einheiten der Box mit seiner Länge, von einem Ende zum anderen) oder grow (ein Teil füllt sich von einem Punkt nach außen); jeder auf STROKE über 0,6–0,75 s, der nächste beginnt, bevor der letzte beendet ist, so dass kein Schritt anhält. Ostlery: Die Türöffnung steigt von ihrer Schwelle auf, dann füllen sich die äußeren und inneren Bögen entlang ihrer eigenen Pfade, linker Fuß über die Oberseite. Ein einteiliges Markenzeichen füllt sich einmal (Tovras Münze steigt grün von ihrem Fuß auf, wie seine App den bezahlten Balken anzeigt).
6. Wohin die Kamera hineinfährt (DOOR): ein Punkt in der Mitte eines massiven Teils des Markenzeichens, mit mindestens 19,2 × 10,8 Einheiten dieses Teils um ihn herum (das Bild zu Beginn des Pulls, 100 px pro Einheit), so dass der Push auf einer Farbe landet. Wenn kein Teil so groß ist, erhöhen Sie UP und UP2 zusammen (die Überprüfungen des Films sagen, wann er landet). Der Push geht dorthin, wo die Idee des Markenzeichens „hinein“ sagt (Ostlery: durch seine Tür).

4. Der Wischvorgang, die Eckformen, das Feld der Zeile und die Eingabe

• Der Wischvorgang (archWipe, WIPE, T.wipe): Der Wechsel vom Feld des Markenzeichens zum Feld der Zeile ist niemals ein harter Schnitt. Es ist eine der eigenen Formen des Markenzeichens, viel breiter als das Bild skaliert, die über das Feld steigt oder gleitet, mit der nächsten Szene darin, in 0,55 s, endend, gerade wenn seine Kante die fernen Ecken des Bildes freigibt, so dass sein Einrichten auf dem Bildschirm geschieht. Ostlerys ist seine Türöffnung; Tovras ist die Scheibe seiner Münze. Zeichnen Sie Ihre als Pfad in archWipe (behalten Sie sein keep-Argument: Der Film schneidet auch außerhalb davon aus). Das erste Wort reitet über beide Felder.
• Die Eckformen (corners): Zwei Stücke des Markenzeichens lugen von den Rändern des Bildes auf dem Feld der Zeile herein (Ostlery: sein äußerer Bogen oben rechts, gefüllt; ein Türöffnungsumriss unten links), gleiten mit einem ease-out herein; groß genug, um als die Form lesbar zu sein, niemals die Zeile oder die Eingabe kreuzend und niemals durch das Bild in eine versetzte Kerbe geschnitten.
• Das Feld der Zeile (LINE): ink, seine Wörter in der Hintergrundfarbe (die Referenz). Wenn die Eingabe oder der Knopf des Produkts dunkel ist, würde er auf ink verschwinden: Setzen Sie LINE = { field: C.paper, text: C.ink } (das erste Wort nimmt dann die Farbe der Zeile innerhalb des Wischvorgangs an).
• Die Eingabe (INPUT, SEND, BUTTON, COMP, ICON_UP): eine echte Komponente des Produkts, aus seinem CSS in Filmgröße neu gezeichnet, niemals zwei seiner Stücke zu einem zusammengefügt, das es nicht hat. In der Reihenfolge der Präferenz:
  1. Ein Feld mit einem eigenen Senden-Knopf darin (INPUT.kind = 'field', die Referenz): seine Füllung, seine Abrundung (INPUT.round, sein Eckradius als Anteil seiner Höhe; 0,5 vollständig abgerundet), die Farbe seines Senden-Knopfs, seine Form (SEND.round) und sein Symbol, seine Textschrift und -gewichtung. Eine weiße Scheibe springt auf, dehnt sich zum Feld aus, der Senden-Knopf reitet an seinem Ende herein, line2 wird mit 0,045 s pro Buchstabe mit einem gleichmäßigen Cursor getippt.
  2. Sein Hauptaktionsknopf (INPUT.kind = 'button'), wenn es kein solches Feld hat: Eine Scheibe in der Farbe des Knopfs springt auf und dehnt sich zum Knopf aus (seinem eigenen Radius, INPUT.round), und sein Symbol und seine Bezeichnung (line2, die tatsächliche Bezeichnung des Knopfs) setzen sich als eine Bewegung ein; kein Tippen. BUTTON hält seine Größen: Behalten Sie die eigenen Proportionen der App