Flash Catalyst - Photoshop-Projektlayout

• April 18, 2024

Im letzten Tutorial haben wir die Bilder für unser Portfolio zusammengestellt, die wir in Photoshop erstellen werden^R und Flash^R Katalysator^TM. Nun arbeiten wir am Layout. Sie sollten alle Logos und Miniaturansichten in Photoshop geöffnet haben.

1. Das Design für das Portfolio wird ein Layout aus einfachen abgerundeten Rechtecken sein. Das untere 500 x 500-Rechteck hat einen einfachen Farbverlauf aus diesen beiden Farben - #ffffff und # c9c1a5.
   
   
2. Als nächstes habe ich eine große und drei kleine Matten für das Logo und die Thumbnails hinzugefügt. Mit der Vordergrundfarbe Schwarz habe ich die vier Matten mit dem Werkzeug Benutzerdefinierte Form und der abgerundeten quadratischen Form gezeichnet. Anschließend habe ich eine Kombination aus den Ebenen „Schlagschatten“, „Innerer Schatten“ und „Inneres Leuchten“ hinzugefügt, um die Matten fertigzustellen.
   
   
3. Mit der Schriftart Engravers MT habe ich den Titel oben im Portfolio-Layout hinzugefügt. Als Nächstes habe ich den Text gerastert und dieselben Ebenenstile auf den Text angewendet wie auf die Matten.
   
   
4. Als Nächstes habe ich die drei Miniaturansichten in der Reihenfolge zu den Matten hinzugefügt, in der die Logos von links nach rechts angezeigt werden sollen. Natürlich werden wir die Navigationsschaltflächen in Catalyst so einrichten, dass der Betrachter die Logos in beliebiger Reihenfolge anzeigen kann.
   
   
5. Dann habe ich die Logos in der gleichen Reihenfolge zum Ebenenbedienfeld hinzugefügt.
   
   
6. Schließlich habe ich der Hintergrundebene einen Schlagschatten (Standardeinstellungen) hinzugefügt.
   
   Dieses Projekt ist sehr klein und ich verwende normalerweise keine Ordner im Ebenenbedienfeld für ein Projekt dieser Größe. Ich möchte jedoch demonstrieren, dass die Informationen aus dem Ebenenbedienfeld von Photoshop beibehalten werden, wenn wir die Datei in Catalyst importieren. Zu diesem Zweck habe ich alle Thumbnails in einem "Thumbnails" -Ordner abgelegt, alle Logos in einem "Logos" -Ordner und alle Hintergrundgrafiken in einem "Background" -Ordner.
   
   
7. Jetzt können Sie dieses Grafiklayout in Flash Catalyst importieren. Speichern Sie Ihre Photoshop-Datei als PortfolioLayout.psd.
   
   
8. Öffnen Sie Adobe Flash Catalyst. Auf dem Begrüßungsbildschirm verwenden wir "Neues Projekt aus Entwurfsdatei erstellen" - "Aus Adobe Photoshop PSD-Datei". Navigieren Sie zu Ihrer PortfolioLayout.psd-Datei.
   
   
9. Beachten Sie im Dialogfeld, dass Catalyst bereits erkannt hat, dass unser Projekt 500 x 500 Pixel groß sein wird, und zwar ab der Größe der PSD-Datei. Stellen Sie die Wiedergabetreue-Optionen auf Bearbeitbar und die Hintergrundfarbe auf Ihre Webseite ein.
   
   Sehen wir uns das Ebenenbedienfeld in Flash Catalyst an. Beachten Sie, dass wir alle die gleichen Ebenen und Ordner wie in unserer PSD-Datei haben, zusammen mit ihren jeweiligen Namen. Beachten Sie auch, dass Catalyst Ebenen erstellt hat, um die Ebenenstile zu enthalten, die wir in Photoshop angewendet haben. Wenn Sie auf die Sichtbarkeitssymbole klicken, sehen Sie, dass wir weiterhin die Kontrolle über diese Stile haben.

Im nächsten Tutorial werden wir beginnen, UI-Komponenten aus unseren Grafiken zu machen.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Nachdruck der Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder eine eingetragene Marke oder eine Marke von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: Flash Catalyst: How to create transitions | lynda.com tutorial (April 2024).