Share
Haben Sie schon einmal versucht, Ihren Kunden das Verhalten Ihrer Schnittstellendesigns zu erklären? Oftmals reichen Worte nicht aus, um zu zeigen, was der Designer vorhat, wenn er ein Stück an seinen Kunden liefert. In mobilen Anwendungen mit kombinierten horizontalen und vertikalen Scrolls und Animations- oder Übergangseffekten ist dieses Problem noch größer. In diesem Lernprogramm erfahren Sie, wie Sie eine Oberfläche einer mobilen Anwendung in Photoshop von Grund auf neu entwerfen. Außerdem wird Ihnen gezeigt, wie Sie eine Animation präsentieren, die das Verhalten der Anwendung zur Übergabe an den Endkunden beschreibt. Sind Sie bereit? Lass uns anfangen!
Die folgenden Assets wurden während der Erstellung dieses Tutorials verwendet.
Dieses Lernprogramm soll Ihnen als Leitfaden dienen, um ein dynamischeres Beispiel für Ihre Schnittstellendesigns vorzustellen und das Verhalten der App bei der Implementierung aufzuzeigen.
Das Erstellen einer animierten Version hat mehrere Vorteile, bevor sie in eine Programmiersprache implementiert wird.
Lassen Sie uns vor diesem Hintergrund mit dem heutigen Tutorial fortfahren.
Zuerst werden wir eine News Reader-iPad-App mit Photoshop von Grund auf neu entwerfen, dann das Scrollen durch die News-Feeds vertikal und horizontal animieren und schließlich einen Artikel in einem Popup-Fenster öffnen. Habe ich schon erwähnt, dass wir Photoshop nur für den gesamten Prozess verwenden werden?
Da es sich nicht um ein grundlegendes Tutorial handelt, gehe ich davon aus, dass Sie ein grundlegendes Verständnis der Werkzeuge und Prozesse von Photoshop besitzen, z. B. das Erstellen von Schnittmasken, Vektor- und Ebenenmasken und vor allem Smart Objects. Wenn Sie wirklich dieses Tutorial durcharbeiten möchten und noch Anfänger sind, schlage ich vor, einige Artikel zu lesen, die diese Themen beschreiben.
Jetzt geht es los!
Jedes großartige Design beginnt mit einer leeren Leinwand. Diesmal erstellen wir ein RGB-Dokument mit 1400 x 1100 Pixel bei 72 ppi.
Da wir ein Design für eine iPad-App erstellen, müssen Sie ein Quadrat zeichnen, um den Arbeitsbereich des iPad-Bildschirms zu begrenzen (1024 x 768 px). Sie können dies ganz einfach tun, indem Sie ein Rechteck erstellen und mit den Transformationssteuerelementen des Verschiebungswerkzeugs (V) auf eine beliebige Ecke klicken und dann im Optionsfeld oben die gewünschten Bemaßungen für die W- und H-Werte eingeben. Drücken Sie dann die Befehlstaste / Strg + A, um Alles auszuwählen. Wenn Sie das Verschiebungswerkzeug ausgewählt haben, richten Sie das Feld durch Klicken auf die Ausrichtungsoptionen auf die absolute Mitte aus.
Wenn sich die Box in der absoluten Mitte befindet, zeichnen Sie vier Guides um die Box. Dies ist unser Arbeitsbereich und der sichtbare Teil unserer Anwendung. Bis zum Ende dieses Tutorials wird der Abstand zwischen diesen Handbüchern der "App-Bereich" sein..
Öffnen Sie nun die iPad-Vorlage und fügen Sie sie aus den Assets ein. Drehen Sie sie, um sie im Querformatmodus zu platzieren, und ändern Sie die Größe, um den aktiven Bereich (Bildschirm) mit unseren Hilfslinien abzustimmen. Konvertieren Sie es in ein Smart Object und nennen Sie es "iPad". Doppelklicken Sie anschließend auf die Smart-Objekt-Miniatur im Ebenenfenster. Ein neues Fenster wird mit einem bearbeitbaren Satz von Ebenen angezeigt, die dem Smart-Objekt "iPad" entsprechen. Dort löschen Sie den grauen Bereich, in dem sich die Schnittstelle befindet. Speichern Sie die .PSB-Datei. Alle Änderungen werden automatisch im Hauptdokument aktualisiert.
Nun fügen wir einige Hintergründe hinzu, zuerst einen rechteckigen weißen Hintergrund hinter dem Smart-Objekt "iPad". Dieser Hintergrund sollte zwischen den linken und rechten Hilfslinien des App-Bereichs platziert werden. Sie können die Ebene "Background" (Hintergrund) nennen und in einen Ordner mit dem Namen "App" einfügen, da dort das gesamte App-Design platziert wird. Dann ein großer Hintergrund mit Farbverlauf für das gesamte Dokument (# 121212 - # 434343).
Zeichnen Sie ein Vektorrechteck zwischen dem oberen Rand des App-Bereichs bis zu 80 Pixeln in einer neuen Gruppe mit dem Namen "Header". Wenden Sie die folgenden Ebenenstile an: eine Verlaufsüberlagerung (# 00345C - # 146592), einen weißen (#FFFFFF) 1px-Strich, einen 10px-Schlagschatten und einen hellblauen inneren Schatten (# 0180C7)..
Die mobilen Geräte verfügen jetzt über sehr schöne Displays. Es wäre schade, wenn wir der Kopfzeile keine kleinen Details hinzufügen, damit sie schöner aussieht. Fügen Sie zuerst eine blaue Ellipse (# 1C79B4) auf der linken Seite der Kopfzeile hinzu, wenden Sie eine Gaußsche Unschärfe an (sie wird die Form rastern), verwenden Sie einen beliebigen Radius, ich versuche es mit 15px. Dann Befehl / Strg + Klicken Sie auf die Vektormaske des Kopfrechtecks, Befehl / Strg + Umschalttaste + I, um die Auswahl umzukehren, und drücken Sie die Entf-Taste, um den zusätzlichen blauen Glanz zu entfernen. Wenn Sie möchten, können Sie mehrere Kreise mit verschiedenen Blautönen und unterschiedlichen Opazitäten hinzufügen, sie einer Gruppe namens "Bubbles" zuordnen und sie rechts neben der Kopfzeile platzieren. Dann können Sie es entweder rastern und den Vorgang des blauen Glühens auf der linken Seite wiederholen, oder Sie können es in ein Smart-Objekt konvertieren und eine Vektormaske anwenden, um das Überragende auszublenden.
Ich werde den Prozess der Erstellung eines ausgearbeiteten Logos für unsere Anwendung überspringen. Ich benenne es nur "News Reader" und benutze die wunderschöne Schriftart "Walkway Black" aus den Assets. Ich füge einen subtilen Schlagschatten und eine Verlaufsüberlagerung mit der tatsächlichen Überlagerung als Füllmodus hinzu. Platzieren Sie das Logo auf der linken Seite der Kopfzeile und in einer Gruppe mit dem Namen "Logo" im Ordner "Header".
Zeichnen Sie eine schmale schwarze Ellipse und wenden Sie dann eine 5px Radius Gaußsche Unschärfe an. Wählen Sie dann mit dem Rechteck-Marquee-Werkzeug die Hälfte der unscharfen Ellipse aus und löschen Sie sie. Fügen Sie als nächstes eine 1px dicke Linie links vom Schatten hinzu, fügen Sie schließlich eine Ebenenmaske hinzu und füllen Sie sie mit einem reflektierten Schwarz-Weiß-Verlauf. Legen Sie alles in den "Logo" -Ordner.
Fügen Sie einen Ordner mit dem Namen "Inhalt durchsuchen" mit dem Werkzeug "Abgerundetes Rechteck" hinzu, und fügen Sie ein weißes Rechteck (50px-Rahmenradius) hinzu. Fügen Sie die auf den Bildern gezeigten Stile hinzu (ein innerer Schatten und ein Verlaufsstrich), um einen subtilen Letterpress-Effekt zu erzielen. Fügen Sie dann ein graues (#ABABAB) -Lupen-Symbol und einen Suchtext hinzu, wobei auch Grau, "Helvetica Neue" als Schriftbild und Größe: 16pt verwendet wird.
Fügen Sie ein neues abgerundetes Rechteck für die Suchschaltfläche (Radius 5px) rechts vom Suchfeld hinzu. Fügen Sie dann den Text der Schaltfläche "Erweiterte Suche" mit der Schrift "Helvetica Neue 75 fett" und weißem Vordergrund hinzu.
Fügen Sie der Schaltfläche dann eine glänzende Verlaufsüberlagerung hinzu (siehe untenstehendes Bild) und einen Verlaufsstrich. Fügen Sie dann einen Abschrägungs- und Reliefstil hinzu, wie das Bild unten zeigt. Fügen Sie das Suchfeld und die Schaltfläche in eine neue Gruppe mit dem Namen "Suche" ein..
Fügen wir die untere Menüleiste hinzu. Zeichnen Sie am unteren Rand des App-Bereichs ein schwarzes Rechteck (50px Höhe). Wenden Sie dann eine glänzende Verlaufsüberlagerung an, wie das Bild unten zeigt.
Über der Kopfzeile sollte sich ein Balken mit den standardmäßigen iPad-Informationen (Signal, Uhr und Akku) befinden. Selbst wenn dieser Bereich nicht zu groß ist, kann dies zu einer erheblichen Reduzierung unseres App-Bereichs führen. Daher ist es ratsam, ihn hinzuzufügen. Unten im Ordner "Header" ein paar Pixel weiter unten, doppelklicken Sie auf das Smart-Objekt "iPad" und fügen Sie einen schwarzen Streifen oder die eigentliche obere Leiste des iPad-Objekts hinzu. Speichern Sie das Smart Object und platzieren Sie den Ordner "Header" an der richtigen Stelle.
Eine nette Geste für jede Anwendung ist ein sauberer und gut aussehender Hintergrund. Erstellen Sie dazu einen Ordner mit dem Namen "App Background". Zeichne dort ein graues Rechteck (# 797979) genau innerhalb der Grenzen des App-Bereichs. Gehen Sie dann zu Filter> Render> Clouds und rendern Sie einige schwarz / weiße Wolken in eine neue Ebene über dem grauen Hintergrund. Gehen Sie dann zu Filter> Rendern> Fasern? und erhöhen Sie Ihre Stärke und Lebendigkeit, wie Sie möchten. Gehen Sie dann zu Filter> Weichzeichnen> Bewegungsunschärfe und stellen Sie den Winkel auf 90 Grad und den Abstand auf 999 ein. Löschen Sie schließlich alle Fasern außerhalb des App-Bereichs und legen Sie die Deckkraft auf 25% fest..
Fügen Sie abschließend einen grauen Kreis über den Fasern hinzu (Opazität 30% oder weniger). Wenden Sie eine Gaußsche Unschärfe mit einem Radius von 45 - 50px an. Dann löschen Sie den Schein außerhalb des App-Bereichs. Wenn Sie diese Ebenen nicht löschen oder beschneiden möchten, können Sie die graue "Hintergrundebene" in eine Schnittmaske konvertieren, indem Sie im Ebenenfenster zwischen den beiden Ebenenminiaturen klicken und die Wahltaste / Alt-Taste gedrückt halten.
Jetzt haben wir den Hintergrund unserer App erstellt, es ist Zeit, den Inhalt voranzutreiben.
Da diese Anwendung mehrere Newsfeeds haben wird, werden wir sie in verschiedenen Zeilen hinzufügen. Jede Zeile enthält eine Reihe aktueller Nachrichten über bestimmte Websites oder RSS-Feeds. Wir fangen an, eine einzelne Zeile hinzuzufügen und duplizieren sie dann so oft wie nötig.
Organisieren Sie Ihre Ebenen, erstellen Sie eine Gruppe mit dem Namen "Feed" und platzieren Sie sie zwischen den Ordnern "Unten" und "App Background". Die Reihenfolge der Ordner ist sehr wichtig, damit die endgültige Animation ordnungsgemäß funktioniert.
Zeichnen Sie ein weißes Rechteck (200px Höhe) und platzieren Sie es oben im App-Bereich neben der "Kopfzeile". Für die Box shadow zeichnen Sie ein schwarzes Rechteck hinter dem weißen, nennen Sie es "Shadow" und wenden Sie eine 4px Gaußsche Unschärfe an. Verwenden Sie dann die Warp-Werkzeuge der Free Transform Controls, um das schwarze Rechteck so zu verzerren, wie die unten gezeigten Screenshots zeigen. Ändern Sie schließlich die Deckkraft "Schatten" auf 50%..
Fügen wir eine Registerkarte hinzu, auf der der Name des News-Feeds eingefügt wird. Zeichnen Sie ein abgerundetes 5px-Eckenradius-Rechteck (#FFFFFF), und verschieben Sie mit dem Direktauswahl-Werkzeug (A) die rechten unteren Punkte des Rechtecks einige Pixel nach rechts. Wenden Sie dann einen subtilen Schlagschatten an, wie in der Abbildung unten gezeigt. Legen Sie die Ebene hinter die "Bg White" -Schicht.
Da unser Hintergrund immer noch ein wenig lahm aussieht, erhöhen wir seine tiefe Sensation, indem Sie der Ebene "BG White" (#BEBEBE - #FFFFFF) eine dezente Verlaufsüberlagerung hinzufügen. Eine nette Geste ist, der Hintergrundebene einen weißen Strich hinzuzufügen, um eine schöne Lücke zwischen der Box und ihrem Schatten zu schaffen.
Duplizieren Sie die Ebene "Tab" und platzieren Sie die Kopie hinter dem Original. Ändern Sie den Vordergrund in Blau (# 014373) und den Strich in (# 016CB4), wiederholen Sie den Vorgang, und setzen Sie eine dunklere Variante von Blau (# 011A2E und # 0B4B79 für den Strich)..
Fügen Sie den Titel des Newsfeeds mit "Helvetica Neue 75 fett" und der Vordergrundfarbe hinzu: # 034170. Sie können ein Favicon neben dem Titel hinzufügen, wenn Sie möchten.
Fügen Sie über die Registerkarten weitere Symbole hinzu, "Aktualisieren" und "Konfigurieren" (Ich verwende die auf den Assets genannten Symbole). Wenden Sie eine Verlaufsüberlagerung und Schlagschatten mit den Werten an, die in der Abbildung unten gezeigt werden.
Fügen Sie nun eine Registerkarte für die Schaltfläche "Schließen" hinzu.
Jetzt haben wir alle Hintergrundebenen erstellt (innerhalb eines Ordners mit dem Namen "Feed Background") und den Titel und das Symbol außerhalb. Erstellen Sie nun ein rechteckiges Vektorrechteck über dem "Feed Background" mit dem Namen "Mask". Dies ist eine zukünftige Maske, um die Sichtbarkeit des News-Sets zu verbergen, das dieser Feed haben wird. Aber machen Sie sich noch keine Sorgen, ändern Sie einfach den Mischmodus auf Multiplizieren.
Jede Zeile in unserer App enthält mehrere Artikel. Fügen wir einen hinzu (ich verwende mehrere Artikel von tuts + network als Beispiele). Platzieren Sie ein rechteckiges Bild zwischen den Ebenen "Maske" und "Titel" - siehe Abbildung unten. Wiederholen Sie den in Schritt 8 beschriebenen Vorgang, um einen Schattenteiler zu erstellen, und ändern Sie die Deckkraft auf 50%..
Fügen wir einen Titel für unseren Artikel, eine Zeile mit Metadaten und einen kurzen Textabschnitt hinzu. In der folgenden Abbildung sehen Sie die empfohlenen Typografien und Farben. Legen Sie schließlich alle mit einem Artikel verbundenen Ebenen in einem Ordner mit dem Namen "Article" ab..
Fügen Sie weitere Artikel hinzu, bis die gesamte Zeile ausgefüllt ist. Wenn Sie nicht mehr genügend Platz haben, wählen Sie alle soeben erstellten Artikelordner aus (Befehl / Strg + Umschalttaste in den Ordner-Miniaturen im Ebenenbedienfeld) und ziehen Sie sie nach links, um einen weiteren Artikel rechts hinzuzufügen. Fügen Sie so viele Artikel hinzu, wie Sie möchten, und ziehen Sie schließlich alle Artikel zurück an die ursprüngliche Position (wobei der erste Artikel links vom Feed-Hintergrund ausgerichtet ist)..
Legen Sie alle Artikel in eine neue Gruppe mit dem Namen "Artikel". Stellen Sie sicher, dass der Ordner nach links und rechts gezogen werden kann, wie das Bild unten zeigt. Dann konvertieren Sie den Ordner in ein Smart Object. Konvertieren Sie dann die Ebene "Maske" in eine Schnittmaske (klicken Sie bei gedrückter ALT-Taste zwischen dem Smart-Objekt "Artikel" und der Ebene "Maske"). Versuchen Sie nun, das Objekt "Artikel" nach links und rechts zu ziehen. Die Ebene "Maske" sollte die Artikel außerhalb des Maskenbereichs ausblenden. An diesem Punkt verfügt dieser News-Feed tatsächlich über alle erforderlichen Ebenen, um sein Verhalten zu animieren.
Fügen Sie nun viele Zeilen mit News-Feeds hinzu und legen Sie jede Zeile in einen Ordner mit dem entsprechenden Namen: "Feed1", "Feed2" usw. Fügen Sie dann alle Feeds in einen neuen Ordner mit dem Namen "Feeds" ein. Sie können den Hintergrund duplizieren und verschiedene Artikel in jedem erstellen. Das Smart-Objekt "Articles" darf jedoch NICHT aus dem ersten Feed kopiert werden, sondern nur von Grund auf neu erstellen. Stellen Sie sicher, dass der gesamte Ordner "Feeds" leicht von oben nach unten gezogen werden kann und umgekehrt. Sie können sogar ein paar Feeds hinzufügen, die nur Text enthalten.
Ziehen Sie alle "Feeds" von unten nach oben und lassen Sie nur die beiden unteren sichtbar.
Fügen Sie im Ordner "Bottom Bar" (Schritt 11) die folgenden Navigationssymbole hinzu: "Start", "Aktualisieren", "Einstellungen", "Feeds" aus den Assets. Fügen Sie jeden Symbolnamen mit "Helvetica Neue 75 Bold" (# 818181) unter seinem Symbol hinzu. Wenden Sie dann auf das Symbol die auf dem Bildschirm unten angezeigten Ebenenstile an. Erstellen Sie schließlich einen neuen Stil für ein Symbol "Ausgewählt / Aktiv".
Fügen Sie dahinter eine transparente Box hinzu und ändern Sie die Vordergrundfarbe des Namens in Weiß. Sie sollten etwas wie den unteren Teil des Screenshots unten sehen?
Fügen Sie im Ordner "Feeds" eine Schaltfläche hinzu (Rounded Rectangle 5px radius). Kopieren Sie den Ebenenstil der unteren Leisten, und fügen Sie ihn ein, wenn Sie Zeit sparen möchten. Fügen Sie dann das Wort "Add Feed" mit "Helvetica Neue 75 Bold" (# 828282) hinzu und richten Sie es auf die Mitte der Schaltfläche aus.
Die Struktur Ihrer Ebenen sollte bisher ein "iPad" Smart Object enthalten, der "Header" die "Bottom Bar", der "Feeds" -Ordner und der "App Background"..
Fügen Sie nun einen neuen Satz von Ebenen in einen Ordner mit dem Namen "Feed" zwischen dem Ordner "Bottom Bar" und dem Ordner "Feeds" ein. Dieser Ordner enthält einen Artikel, erstellt einen weißen Hintergrund und fügt etwas Inhalt (Titel, Miniaturansicht und einen kurzen Textabschnitt) hinzu. Zeichnen Sie ein großes schwarzes Rechteck direkt innerhalb der Grenzen des App-Bereichs und reduzieren Sie die Deckkraft auf 75%. Dann zentrieren Sie den weißen Bereich. Es spielt keine Rolle, ob der hinzugefügte Inhalt den Anwendungsbereich überschreitet. Wir animieren tatsächlich einen Bildlaufeffekt für diesen Inhalt. Lassen Sie uns weitermachen.
Zuerst ordne deine Ebenen, benenne den schwarzen Hintergrund "BG" und ordne ihn nach unten an. Legen Sie dann alle Textebenen, Miniaturbilder und Bilder in einem Ordner mit dem Namen "Neu" oder "Artikel" ab..
Zeichnen Sie mit dem Ellipse-Werkzeug einen weißen Kreis in der oberen rechten Ecke des Feed-Bereichs und wenden Sie einen subtilen Schlagschatten darauf an. Fügen Sie dann ein schönes "X" als schließende Schaltfläche ein (oder zeichnen Sie es) und legen Sie alle diese Ebenen in einen Ordner mit dem Namen "Schließen"..
Wählen Sie den Ordner "Neu" aus und konvertieren Sie ihn in ein Smart-Objekt. Erstellen Sie dann ein weiteres Rechteck über dem weißen Hintergrund und nennen Sie es "Mask" (es wird im Screenshot schwarz dargestellt), und verwenden Sie es als Schnittmaske für das "Neu" "Smart Objekt. Ziehen Sie dann das Objekt mit dem Verschiebungswerkzeug (V) von oben nach unten und umgekehrt, um sicherzustellen, dass alles gut aussieht. Zum Schluss den Artikel in seine ursprüngliche Position bringen (links oben ausgerichtet).
Bevor Sie fortfahren, ist es wichtig, alle Ebenen zu organisieren und die intelligenten Objekte ordnungsgemäß zu erstellen. Die Ebenenstruktur sollte von oben nach unten wie folgt aussehen: "iPad" Smart Object, dann "Header", "Bottom Bar", "Feed", "Feeds" und "App Background" -Ordner und schließlich die allgemeine "BG" -Ebene.
Dann ist es wichtig, dass Sie das Smart-Objekt "Artikel" aus der ersten Zeile der Feeds erstellt haben (Schritt 26), da ein Smart-Objekt eine vollständige Zeitleiste enthält und Sie animierte Übergänge in vielen Ebenen verschachteln können (ich weiß, dass es verwirrend klingt, aber das wird es.) in ein paar Schritten Sinn machen).
Sie benötigen eine anständige CPU und Grafikkarte, um die Animation zu rendern. Geduld ist hier eine großartige Zutat.
Denken Sie daran: Wir werden das Verhalten der App animieren. Sie sollten immer den Prozess berücksichtigen, indem Sie die News-Feeds betrachten, durch die Artikel blättern und schließlich einen Artikel öffnen, um sie zu lesen.
Gehen Sie zu Fenster> Animation. Dieses Fenster enthält eine Zeitleiste, in der Sie Keyframes einfügen können, um Übergänge zwischen Nachionen, Deckkraft und Ebenenstilen zu animieren. In diesem Tutorial werden Position und Deckkraft animiert. Dieser Bereich unterscheidet sich nicht zu anderen Videobearbeitungsprogrammen wie After Effects oder Premiere. Wenn Sie ein Neuling sind, ist dies ein guter Ausgangspunkt.
Beginnen wir mit dem lustigen Teil dieses Tutorials!
Wir fangen an, einen Ordner auszublenden, der nicht von Anfang an geladen werden sollte. Der Popup-Feed sollte ausgeblendet bleiben, bis eine Aktion ihn sichtbar macht. Suchen Sie dazu im Animationsbereich nach dem Ordner "Feed" und klicken Sie auf das kleine Dreieck daneben, um die Animationsoptionen zu erweitern. Bewegen Sie dann den dreieckigen Schieberegler auf der Timeline und platzieren Sie ihn ganz am Anfang der Animation. Klicken Sie auf das kleine Stoppuhr-Symbol neben der Option "Deckkraft" unter dem Ordner "Feed", um einen Keyframe zu erstellen. Nachdem Sie das Keyframe erstellt haben, können Sie alle gewünschten Änderungen an den Eigenschaften vornehmen. In diesem Fall reduzieren wir die Deckkraft des Feed-Ordners auf 0%. Und das ist es, dieser Ordner bleibt ausgeblendet, bis wir ihn wieder sichtbar machen.
Durchsuchen Sie Ihre Ordner im Animationsbereich, finden Sie das Smart-Objekt "Artikel" der Zeile "Feed 1" und erweitern Sie die Optionen. - Ziehen Sie den Handler auf der Timeline ein wenig nach rechts neben 1s (eine Sekunde). Klicken Sie dann auf das Symbol Stop Watch, um den ersten Keyframe zu erstellen. Stellen Sie an dieser Stelle sicher, dass die Position des Objekts mit dem Hintergrund der Feedzeile ausgerichtet ist. - Ziehen Sie den Handler auf der Zeitleiste neben den 4ern und klicken Sie auf das kleine gelbe Quadrat links neben der Positionsoption (zwischen den nächsten / vorherigen Pfeilen), um einen neuen Keyframe zu erstellen. Ziehen Sie nun mit dem Verschiebungswerkzeug das Smart-Objekt "Artikel" nach links, damit das Objekt rechts am Hintergrund der Feedzeile ausgerichtet wird. - Bewegen Sie den Handler auf die 5s in der Timeline und fügen Sie ein neues Keyframe ein (denken Sie daran, auf das kleine gelbe Quadrat zu klicken) und halten Sie die Position einfach (bewegen Sie nichts). - Bewegen Sie den Handler schließlich neben den 7er auf der Timeline, erstellen Sie einen neuen Keyframe und drehen Sie das Objekt "Artikel" mithilfe des Verschiebungswerkzeugs an seine ursprüngliche Position zurück, wobei es links zum Feed-Hintergrund ausgerichtet ist.
Wenn Sie möchten, können Sie eine Vorschau dieses kleinen Teils des Animationsprozesses anzeigen, indem Sie auf Datei> Exportieren> Videovorschau gehen. Es gibt zwei Handler im linken und rechten Bereich der Zeitleiste, die Sie ziehen können, um den Arbeitsbereich zu verkleinern, wodurch der Renderprozess beschleunigt wird.
Beginnen wir richtig zu werden, lasst uns vorwärts gehen. Jetzt animieren wir den gesamten "Feeds" -Ordner. Da wir die Position eines Ordners nicht direkt animieren können, müssen wir ihn in ein Smart-Objekt konvertieren. Was passiert jedoch mit der schönen Animation, die wir gerade mit den Artikeln gemacht haben? Wenn Sie den gesamten Ordner in ein Smart Object konvertieren, bleiben alle Timeline und alle Keyframes erhalten. Die Zeitleiste ist auf jeden Fall einzigartig. Wenn in der dritten Sekunde der Animation ein Übergangseffekt in ein Smart-Objekt erfolgt, bleibt es in allen übergeordneten Dateien und Zeitachsen sichtbar. Sie können es testen, indem Sie die Animation mit dem Smart-Objekt anstelle des Ordners exportieren. Sie sehen keinen Unterschied.
Erstellen Sie eine Kopie der Ebene "HG", platzieren Sie sie über dem Objekt "Feeds" und wenden Sie eine Vektormaske an, um nur den App-Bereich sichtbar zu machen ( 1024x768px).
Wählen Sie das Smart-Objekt "Feeds" aus und öffnen Sie das Animationsfenster. Bewegen Sie den Zeitleisten-Handler neben die 7er, erstellen Sie einen Positions-Keyframe und stellen Sie sicher, dass die Feeds oben ausgerichtet sind. Bewegen Sie dann den Handler neben die 11er und erstellen Sie einen Positions-Keyframe. Bewegen Sie dort das gesamte Objekt, bis es unten ausgerichtet ist. Dann erstellen Sie in den 14er Jahren auf der Timeline ein anderes Positions-Keyframe, bewegen Sie das Objekt jedoch nicht, sondern lassen Sie es unten ausgerichtet Halt bewirken. Bewegen Sie den Zeitleisten-Handler schließlich neben die 15er, erstellen Sie einen Keyframe, und ziehen Sie das Objekt, bis es wieder oben ausgerichtet ist.
In der Vorschau des vorherigen Animationsschritts sollten Sie etwa Folgendes haben:
Zuerst müssen wir das Popup wieder sichtbar machen. Denken Sie daran, dass wir es in Schritt 35 ausblenden. Wählen Sie den Ordner "Feed" und bewegen Sie im Animationsbereich den Timeline-Handler neben die 20er-Jahre und erstellen Sie einen Keyframe. Bewegen Sie dann den Handler auf die 22er und erstellen Sie einen weiteren Keyframe. Ändern Sie dort die Deckkraft des Ordners auf 100%. Erstellen Sie als Nächstes einen weiteren Keyframe in den 30er Jahren und behalten Sie die Deckkraft in 100%. Erstellen Sie schließlich ein Keyframe neben den 31er und ändern Sie die Deckkraft des gesamten Ordners auf 0%..
Es ist Zeit, den Inhalt unseres Pop-Up-Artikels zu animieren. In Schritt 33 haben wir ein intelligentes Objekt im Ordner "Feed" erstellt. Wählen Sie es aus und stellen Sie sicher, dass es ordnungsgemäß mit der dahinter liegenden Maske "Mask" maskiert ist. Im Animationsbereich. Erstellen Sie auf den 24s der Timeline einen Positions-Keyframe für das Smart-Objekt "Neu" oder "Artikel", um sicherzustellen, dass der Artikel oben ausgerichtet ist. Erstellen Sie dann neben den 25er Jahren einen Positions-Keyframe und ziehen Sie das Sma
Accentsconagua