Photoshop eller Fireworks? Det är frågan som har kastat alla slags designers och utvecklare till en uppvärmd debatt. Idag använder vi båda programmen för att skapa en enkel webbgrafik.
Denna handledning riktar sig till alla de designers som aldrig skulle drömma om att ge upp Photoshop och vet nästan ingenting om fyrverkerier. Jag ska visa dig hur du tar din Photoshop-grafik och lägger till några interaktiva funktioner via Fireworks.
Interaktivitet ska påverka design
Det finns gott om designers där ute som håller sig till rena front-end designmockups. Med andra ord, de brandar Photoshop, bryter ut det allmänna utseendet på en webbplats och skickar det vidare till utvecklarna.
Många hävdar att varje designer borde veta hur man kodar, men denna debatt är irrelevant för vårt ämne idag. Faktum är att jag har sett designkontor i företag över hela USA som arbetar med två distinkta lag: de människor som designar i Photoshop och de människor som ger dessa mönster liv i webbläsaren.
Denna artikel är för den förra. Du är en designkille som inte känner till lite kod, men du vet att ditt utvecklingslag uppmuntrar design som är dynamiska och interaktiva. Du vill bygga dina comps med dessa mål i åtanke men i slutändan kan du bara göra vaga förslag och hoppas att utvecklarna delar din vision.
En annan vanlig situation är behovet att snabbt skapa en live mockup som du kan visa för en klient. Du kan vara helt kapabel att omvandla ditt Photoshop-arbete till en standardkompatibel webbplats, men vill se till att din klient är nöjd innan du fortsätter.
I ett av dessa fall är Adobe Fireworks ett perfekt verktyg för att lägga till ditt arbetsflöde för att uppnå det du söker efter. Med Fireworks kan du skapa interaktion direkt i dina mönster och förhandsgranska dem som om de var en levande sida.
Varför fyrverkerier?
Webdesigners överallt börjar inse att Fireworks är ett riktigt bra verktyg för att designa webbplatser. Det finns till och med ett rasande argument just nu om webbdesigners någonsin ska öppna Photoshop när de kan bygga en hel webbplats i Fireworks.
Trots dessa argument inser jag att webbdesignsgemenskapen för det mesta lever i Photoshop. Även jag är ganska ny för fyrverkerier och är därför mycket mer benägna att bygga en snabb kompis i Photoshop. Av denna anledning kommer denna handledning att visa att du kan använda de två tillsammans på ett synergistiskt sätt. Vi skapar en grundläggande grafik i Photoshop där du är bekväm och flyttar den över till Fireworks för att få det till liv.
Skapa en knapp i Photoshop
Istället för att ditt första Fireworks-projekt är en komplett webbplatsmockup, försök börja med något litet. Resultatet blir en mycket mindre överväldigande övergång från en app till den andra. Idag börjar vi din fyrverkeri utbildning med en enkel knapp grafik.
Som jag nämnde ovan, sedan du brukade använda Photoshop-verktyget, börjar vi där. Du kan enkelt göra hela objektet i Fireworks (arbetsflödet skulle till och med vara ganska likartat), men för närvarande vill jag fokusera på idén att du inte nödvändigtvis måste ge upp din favoritgrafikprogram.
Skapa ett nytt Photoshop-dokument (vilken storlek som helst är bra för detta test) och skapa en vektorrektangel som den nedan. Jag fyllde knappen med # 005da5.
Därefter går du till dina lagerformat och lägger till ett litet övertoningsöverlägg och en inre skugga. Bara nog för att få knappen att se lite mindre platt ut.
Härifrån duplicerar du vektorskiktet med din knapp och tar bort punkterna längst ner med hjälp av Direct Selection Tool (A). Flytta sedan upp punkterna längs sidan, fyll skiktet med vitt och minska opacitet så att effekten är något som bilden nedan.
Slutligen kasta i några ord och du är redo att gå. Jag använde en typisk fetstil sans-serif-typsnitt med en inre skugga, inställningarna visas nedan.
Nu har vi vår fruktansvärda cliche glossy Photoshop-knapp. Härifrån vill vi förhandsgranska en del interaktivitet. Låt oss till exempel säga att vi vill visa upp en enkel svävareffekt. Photoshop är inte nödvändigtvis det bästa sättet att åstadkomma det och vi behöver verkligen inte någonting så intensivt som Dreamweaver, så var är mittmånen? Fyrverkerier till räddning!
Importerar till fyrverkerier
Innan du importerar dokumentet till Fireworks, se till att din PSD är snygg och städad. Namnge alla dina lager, grupplagringar, om så är nödvändigt, etc. Detta gör allt väldigt lättare för att hålla koll på vägen. Vår lilla knapp har bara några lager så jag namngav helt enkelt allt och sparade PSD till min projektmapp.
Släck fyrverkerierna och öppna PSD-enheten du bara sparat. Du behöver inte exportera / importera på något speciellt sätt, använd bara det vanliga gamla Open-kommandot. Detta ger dig några alternativ som du kan röra med (jag lämnade dem ensamma), var noga med att välja alternativet för att behålla lagredigerbarhet över utseende.
Härifrån är det viktigt att undersöka vad Fyrverkerier kommer och kommer inte att överföra korrekt. Som du kan se i bilden nedan kom mina vektorformer, text och färger över fint men lagrets opacitet på min höjdpunkt är 100%. Det här är lite irriterande, men det är lätt att släppa det tillbaka till 10%.
Annars än, min lilla fil överlevde importen perfekt. Som du kan se nedan, mina lager var över intakta och även mina lag effekter är fortfarande redigerbara.
Observera att skikteffekter visas i paletten Egenskaper och ha ett mycket annat gränssnitt än det i Photoshop. Men samma grundläggande effekter och kontroller är närvarande.
Lägga till en ny stat
För att lägga till någon interaktivitet för vår knapp måste vi arbeta med två Fireworks-funktioner som du kanske eller inte är bekanta med: Skivor och stater.
Stater är lite som Photoshop Layer Comps, men mer inriktade på faktiska förändringar som ett objekt förväntas gå igenom. Så för vår knapp vill vi att utseendet ändras när användaren svänger över den. För att uppnå detta skapar vi flera stater för att återspegla de olika knappteerationerna.
För att göra detta, navigera till paletten States och duplicera det aktuella läget. Namnge sedan det ursprungliga tillståndet? Normal? eller? Standard? och namnge den nya staten? Hover ?.
Härifrån går du till paletten Egenskaper och ändrar fyllningsfärgen på knappen till röd. Återigen är det ganska annorlunda än vad du ser i Photoshop, men processen är självklarande. Klicka på kolven, välj en ny färg och du är redo att gå.
Vi har nu två olika tillstånd att arbeta med: en röd knapp och en blå knapp. Genom att använda skivor kan vi länka dessa tillstånd till en svängaktivitet utan någon kod alls.
Lägga till en skiva
Fyrverkerierna fungerar mycket som de i Photoshop, bara när de är klara med staterna får du nästan Dreamweaver-liknande funktionalitet.
För att lägga till en skiva, ta tag i urvalsverktyget och högerklicka på den blå knappen (se till att du inte klickar på höjdpunkten). Härifrån välj menyalternativet? Lägg i rektangulär skiva? för att skapa en skiva som är lika stor som vår knapp.
Efter detta ska ett färgat överlag visas över knappen. Slå ner i paletten Egenskaper igen för att hitta alternativ för filkomprimering av skivan, jag valde? JPEG - Bättre kvalitet ?. Här kan du också lägga till en länk och lite alt text.
Genomförande av Hover Effect
Lägg märke till den lilla cirkeln i mitten av knappen i skärmdumpen ovan. Genom att klicka på detta kommer en lista över åtgärder upp. Härifrån är allt du behöver göra att välja? Lägg till Simple Rollover Behavior? och som automatiskt byter knappens tillstånd när du sveper över bilden.
När du har gjort det kommer du inte märka någon skillnad i ditt dokument. För att se effekten i åtgärd, klicka på Preview-knappen nära toppen av fönstret. Detta gör att du kan interagera med knappen precis som om den var i en webbläsare.
Exportera knappen till en webbläsare
Nu, om du vill visa din skapelse till någon annan, kommer du sannolikt att ta med den utanför Fireworks. Ett sätt att göra detta är att exportera din fil som en webbsida. När du kom till Arkiv> Exportera väljer du? HTML och bilder? visa i bilden nedan.
Observera att om du skapar en verklig fullständig webbplats med flera sidor, vill du välja "Alla sidor?" alternativ men för det här lilla testet behöver vi bara den aktuella sidan. Resultatet ska vara en mapp med bilder och en? Htm? eller? html? fil som du kan ladda upp till en server och dela online. Lägg märke till att när du öppnar upp den i webbläsaren, både svängningseffekten och länken vi satte in fungerar som på en riktig webbplats, vilket gör det här ett bra verktyg för att skapa webbformulär mycket snabbt.
Ej produktionsklar
Om du är en icke-kodare som plötsligt tror att han slog guld, håll i en minut. Tyvärr är utsignalen här bra att titta på, men inte var nära något som du skulle vilja publicera på en verklig webbplats. Resultatet av vårt enkla lilla projekt var en hel röra med JavaScript när det i verkligheten är ett så enkelt webbelement endast ett fåtal linjer HTML och CSS.
Fyrverkerier är inte avsedda att vara en fullblåst WYSIWYG-byggare. Följaktligen är livewebutgången inte helt upp till par och bör endast användas för förhandsgranskning.
Slutsats
Sammanfattningsvis är Photoshop fantastiskt för att bygga grafik, men när det gäller att skapa och förhandsgranska interaktion kommer det upp kort. I dessa fall ger fyrverkerier dig en mycket kraftfullare verktygssats.
Denna handledning är för absolut Fireworks nybörjare och skrapar knappt ytan på webbverktygen och funktionaliteten som du har tillgång till. Vi följer det här med en djupare titt på hur du använder fyrverkerier för att bygga några fantastiska fullblåsta webbsidor.