Flash Catalyst - Photoshop-projektlayout
I den sista handledningen samlade vi bilderna för vår portfölj som vi kommer att göra i PhotoshopR och FlashR KatalysatorTM. Låt oss nu arbeta med layouten. Du bör ha alla logotyper och miniatyrbilder öppna i Photoshop.

  1. Portföljens design kommer att vara en layout av enkla rundade rektanglar. Den undre rektangeln 500 x 500 har en enkel lutning från dessa två färger - #ffffff och # c9c1a5.

  2. Därefter tillsatte jag en stor och tre små mattor för logotypen och miniatyrerna. Med förgrundsfärgen inställd på svart, använde jag verktyget Custom Shape och den rundade fyrkantiga formen för att rita de fyra mattorna. Jag lägger sedan till en kombination av Drop Shadow, Inner Shadow och Inner Glow-lagerstilar för att avsluta mattorna.

  3. Med hjälp av typsnittet Engravers MT lägger jag till titeln överst i portföljlayouten. Därefter rasterade jag texten och applicerade samma lagerstilar på texten som jag gjorde på mattorna.

  4. Därefter lade jag till de tre miniatyrerna i mattorna i den ordning att jag önskar att logotyperna ska visas från vänster till höger. Naturligtvis kommer vi att ställa in navigeringsknapparna i Catalyst så att tittaren kan se logotyperna i valfri ordning.

  5. Sedan har jag lagt till logotyperna till panelen Lager i samma ordning.

  6. Slutligen lägger jag till en Drop Shadow (standardinställningar) i bakgrundsskiktet.

    Detta projekt är väldigt litet och jag använder vanligtvis inte mappar i panelen Lager för ett projekt av denna storlek. Jag vill emellertid visa att informationen från Photoshops panel lagrar kommer att upprätthållas när vi importerar filen till Catalyst. För detta ändamål placerade jag alla miniatyrbilder i en "Thumbnails" -mapp, alla logotyper i en "Logos" -mapp och all bakgrundsgrafik i en "Bakgrund" -mapp.

  7. Nu är vi redo att importera den grafiska layouten till Flash Catalyst. Spara din Photoshop-fil som PortfolioLayout.psd.

  8. Öppna Adobe Flash Catalyst. På välkomstskärmen använder vi Skapa nytt projekt från designfilen - från Adobe Photoshop PSD-fil. Bläddra till din PortfolioLayout.psd-fil.

  9. Lägg märke till att Catalyst redan har insett att vårt projekt kommer att vara 500 x 500 pixlar, från storleken på PSD-filen i dialogrutan. Ställ in Fidelity-alternativen till Keep Editable och bakgrundsfärgen så att den matchar din webbsida.

    Låt oss undersöka lagerpanelen i Flash Catalyst. Lägg märke till att vi har alla samma lager och mappar som i vår PSD-fil, tillsammans med deras respektive namn. Observera också att Catalyst har skapat lager för att innehålla lagerstilarna som vi använde i Photoshop. Om du klickar på synlighetikonerna ser du att vi fortfarande har kontroll över dessa stilar.

I nästa handledning börjar vi göra UI-komponenter ur vår grafik.

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta om med tillstånd från Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.


Video Instruktioner: Flash Catalyst: How to create transitions | lynda.com tutorial (Maj 2024).