Erstellen von Flipping Numbers Sprite im Rolodex-Stil in Photoshop?

So hatte Apple kürzlich einen Countdown für den 1-milliardsten App-Download und verwendete einen Rolodex-Flip-Effekt. Es stellte sich heraus, dass dies tatsächlich auf einem Sprite-Bild lief , das aus verschiedenen umgedrehten "Zuständen" besteht, dann bewegt sich jQuery schnell durch diese Animationen für jeden neuen Download.

Ich versuche verzweifelt, einen ähnlichen Effekt in Photoshop zu erstellen, den ich für eine kleine Webanwendung verwenden kann. Ich kann jede Menge kostenlose PSD-Uhren finden , mit denen ich arbeiten kann, aber ich bin mir nicht sicher, wie ich die Bilder verzerren soll, um den Flip-ähnlichen Effekt zu erzeugen.

Letztendlich besteht das Ziel darin, ein großes Sprite-Bild zu erstellen, das alle verschiedenen Zahlenzustände enthält. Die skalierte Version, die ich oben eingefügt habe, kommt dem, was ich bauen möchte, am nächsten - sie ist auch unten als direktes Bild enthalten.

skalierte Rolodex-Sprites

Ich würde mich über jede Hilfe hierzu freuen! Es scheint, dass die Verwendung eines Hintergrund-Sprites der einfachste Weg ist, diesen Effekt auf einer Webseite zu duplizieren. Also stecke ich nur damit fest, diese verschiedenen "Zustände" des animierten Umdrehens physisch zu erstellen.

Antworten (2)

Das ist ganz einfach

1.) Erstellen Sie ein Rechteck in gewünschter Größe und Stil.

2.) Legen Sie eine Textebene mit der gewünschten Nummer darauf und fügen Sie die beiden Ebenen zu einer zusammen.

3.) Wiederholen Sie Schritt 1. und 2. mit einer anderen Nummer.

4.) Schneiden Sie nun die obere Schicht in zwei Hälften

5.) Drücken Sie die Befehlstaste plus T und bewegen Sie den Anker (das kleine Kreuz) von der Mitte der Form zur unteren Mitte der Form.

6.) Greife den oberen mittleren Transformationsanker und ziehe ihn etwas nach unten.

7.) Bild speichern

8.) Wiederholen Sie die Schritte 6. und 7.

Denken Sie daran, ohne Schatten und komplexere Details zu berücksichtigen (wie das Wechseln von der ersten Zahl zur zweiten, sobald die halbe Karte genau auf Sie zeigt / in der Mitte ist und die nächste Zahl auf der Rückseite sichtbar wird.

AKTUALISIEREN

Für die unteren Details müssen Sie die Screenshots in umgekehrter Reihenfolge erstellen und die Dateien dann neu anordnen, da Sie nicht mit der stark verzerrten Version beginnen und sie dann herausziehen können, wenn Sie mit Pixeldateien arbeiten ;)

Stellen Sie sich einen Filmstreifen vor, den Sie unter ein Blatt Papier legen, aus dem ein kleines Rechteck (wir nennen es Fenster) ausgeschnitten ist. Sie können nur einen kleinen Teil des Filmstreifens sehen: nur den Teil, den Sie durch das Fenster sehen können. Um den Eindruck eines bewegten Bildes zu erwecken, verändern Sie die Position des Filmstreifens so, dass ein anderer Teil des Filmstreifens durch das Fenster sichtbar ist.

In Ihrem Beispiel haben Sie einen Streifen, der ein Bild mit einer Spalte und vielen Zeilen ist. Jede Reihe ist ein einzelner Rahmen. Sie müssen die Pixelhöhe einer einzelnen Zeile bestimmen. Erstellen Sie einen Container (1 Spalte) Pixel breit und (1 Zeile) Pixel hoch. Die erste Zeile ist index(0). Passen Sie den oberen Rand des Bildes innerhalb des Containers an um: -1 mal die Menge (Zeilenindex multipliziert mit Zeilenhöhe) in Pixel.-1*(rowIndex*rowHeight)

Was "skewing" angeht: "skewing" ist wahrscheinlich nicht der Begriff, den Sie meinten. Das Einzige, was Sie tun müssen, ist, sich ein Beispiel aus der realen Welt anzusehen. Sie haben das Wort "Rolodex" verwendet. Sicher haben Sie schon einmal einen Rolodex beim Durchblättern angeschaut. Es ist so einfach wie zu zeichnen, was Sie sehen.

Ich denke, er fragt genau nach dem schiefen Teil (der perspektivischen Verzerrung des sich bewegenden Elements), nicht nach der Anordnung der Sprites im größeren Bild.
In diesem Fall sollte er sie so zeichnen, wie sie sind, und kein vorhandenes Element verzerren.
Erstellen von Flipping Numbers Sprite im Rolodex-Stil in Photoshop?
AntwortenHierDatenschutz-Bestimmungen1y, 0v