WebZap är ett fantastiskt Photoshop-plugin för att hjälpa designers att skapa högkvalitativa webbdesignmockups snabbare än du någonsin trodde var möjligt. Genom att kombinera enkla ett-klick-åtgärder med robusta anpassningsalternativ gör det här verktyget hela layoutprocessen, inte bara smärtfri, utan också roligt.
Följ med när vi tittar på vad WebZap gör och sätter det genom steg för att se hur det fungerar. Jag lovar, det är det coolaste Photoshop-plugin som du har sett för webbdesigners sedan GuideGuide.
Vad är WebZap?
När du laddar ner WebZap får du ett Adobe-tilläggspaket som du enkelt dubbelklickar för att installera (endast CS5 eller högre). När du har gått igenom den korta installationsprocessen i Adobe Extension Manager vill du spricka öppna Photoshop och gå till Fönster> Tillägg> WebZap.
Detta kommer att ta fram en ny Photoshop-panel som ser ut som den nedan. Den här vänliga och attraktiva panelen innehåller hela WebZaps funktioner.
Det ser enkelt ut här, och det är enkelt från ett användbarhetsperspektiv (bara om allt tar ett enda klick), men det finns massor av dold makt och komplexitet här som gör förlängningen tjänar sin prispunkt. Låt oss hoppa in och se hur allt fungerar med ett arbetsflöde.
Layout
Huvuddelen av WebZap-panelen är att den delas upp i fyra primära flikar: Layout, UI, Styling och Preview. Dessa representeras av de stora ikonerna nära toppen.
Vi går snabbt igenom var och en för att se hur de fungerar. Till att börja med, låt oss hoppa in i layout. Det första som vi behöver göra är att bestämma om vi vill att vår navigering ska centreras horisontellt längst upp på sidan eller springa ner till vänster på sidan. För vårt provprojekt, låt oss välja det centrerade alternativet.
Detta val påverkar nästan allt efter det. Alla layoutalternativen överensstämmer automatiskt med det format du har valt att bygga på. Jag är verkligen förvånad över hur mångsidig WebZap är. Det verkar som om du alltid fattar ett beslut som påverkar andra alternativ, och det rullar bara med stansarna, aldrig buggar ut eller ger dig konstiga, oväntade resultat.
Navigering
Nu när vi har valt en centrerad layout fortsätter vi och väljer bland de fjorton inbyggda navigeringsalternativen. Allt du behöver göra för att bygga en är att klicka på den. Det är lika enkelt som det!
Att klicka på ett navigeringsalternativ är i huvudsak som att köra en Photoshop-åtgärd. Du luta dig tillbaka och njuta av ditt kaffe, eftersom Photoshop automatiskt bygger upp hela navigationsmenyn (det tar bara några sekunder). När det är klart borde du ha något så här:
Tänk på att detta inte är en platt platta som WebZap kastar på dig. Det bygger faktiskt en helt lagrad och lätt anpassningsbar PSD.
Intressant nog,? Navigering? är lite av en missnomer här. Vad du verkligen får är grundramen för hela sidan. Detta inkluderar både navigeringen längst upp och en sidfot. Såvitt jag kan säga är sidfoten identisk med var och en av de 14 layoutalternativen.
Som du kan se valde jag ett bra, minimalt alternativ med en platshållarlogotyp, en sökruta och några navigationsobjekt. Dessa navigeringselement är levande text och kan enkelt ändras för att passa dina behov.
Huvudsaklig
När du har valt din navigationslayout är det dags att välja en? Funktion ?,? Fold ?, eller båda. Funktionen är i grund och botten en slags stor bildreglage med ett text- och / eller miniatyr arrangemang.
Återigen, ett klick senare och min layout kommer strax. Kom ihåg att jag verkligen bara har utfört tre eller fyra musklick fram till den här tiden. Allt annat har blivit helt automatiserat.
Vika ihop
Härifrån är det bara skum, skölj och repetera. Den sista delen av vår layout heter? Fold ,? vilket innebär att det troligen normalt kommer att ligga under den hypotetiska veckan (rullpunkten). Här har vi två olika flikar av alternativ, varav en tar upp hela sidans bredd medan den andra upptar halva sidan.
Innan du vet det, har du själv en hel sidlayout! Du hade massor av mix och matchalternativ att välja mellan, så du kan tänkbart följa samma process femtio gånger och uppnå unika resultat varje gång.
UI
Nu får du idén om hur arbetsflödet fortskrider, så låt oss snabbt springa igenom några mer fantastiska funktioner. Nästa stora flik som är full av funktionalitet är fliken UI. Här hittar du olika knappar, formelement och reglage.
En sak som jag verkligen gillar här är möjligheten att välja färg på din knapp när du skapar den. Detta kan spara mycket anpassningstid senare.
Stil
Fliken Style är där du kan börja tweak några av de designbeslut som har gjorts automatiskt för dig. Det finns tre avsnitt här: Ram, Divider och Text. Varje förklaras i bilden nedan.
Det här är vad som händer när jag slänger en ram på layouten som jag hittills har byggt. Observera att jag kan välja vilken färg jag vill ha och ändå ändra färgen flera gånger med hjälp av det lilla färghjulet till höger.
Textbytesalternativen är faktiskt väldigt robusta. Du kan välja att anpassa rubrikerna (h1, h2, h3, etc.), stycke text och länkar. Du väljer helt enkelt föremålet du vill ändra, välja en färg och använd teckensnittets ersättningsmeny som dyker upp.
Förhandsvisning
Den sista huvudfliken är? Preview ,? som automatiskt gör din webbsida till en snygg mockup som antingen sitter inuti ett webbläsarfönster eller en mobilenhetram.
Några av dessa kan verka lite gimmickiga men de är väldigt trevliga att ha och erbjuder dig ett bra sätt att visa upp dina idéer i sista minuten med nollansträngning.
Mini Toolset
Den sista biten av verktyg som vi ska diskutera är? Mini Toolset? som sitter längst upp till höger på WebZap-panelen. Den innehåller fyra knappar:
De två första knapparna här är ganska självförklarande. Den första genererar ett nytt dokument så att du kan starta en ny sida och den andra skapar guider baserade på 960-nätets systemlayout. Den tredje knappen är extremt praktisk. Det tar tag i den laggrupp du har valt, beskär den och kastar den i ett nytt dokument. Det gör det väldigt enkelt att väsentligt skära upp och spara dina bilder. Även som en fristående plugin, skulle den här funktionen vara ganska användbar.
Slutligen genererar den fjärde knappen platshållarefält fyllda med lorem ipsum. Som med andra layoutelement kan du välja mellan olika alternativ.
Hur är det?
Från webbapps och utvecklingsramar till Keynote och Powerpoint mallar finns det massor av produkter på marknaden för att hjälpa dig att snabbt skapa webbdesigner. WebZap är den enda jag någonsin har använt som faktiskt fick mig att le. Det är så otroligt enkelt och ändå så kraftfullt att du inte kan låta bli imponerad av dess potential. Jag älskar att jag kan bygga sådana vackra mockups med så lite ansträngning.
Kommer alla mina webbplatser att vara likadana?
I ett ögonblick kan du tro att användbarheten av WebZap är begränsad. Trots allt, om du använde det här på dina nästa tio projekt, skulle inte allt ditt arbete börja se likadant ut?
Till det protestet är mitt svar bara om du är lat.? Om det här var en webapp, skulle du verkligen vara ganska fast i layouterna, stilarna, etc. som du tillhandahålls. Kom ihåg att detta är en Photoshop plugin. Det betyder att du kan göra absolut vad du vill till produktionen som genereras av WebZap.
Tänk på WebZap som utgångspunkt som hjälper dig att först skapa några grova layoutidéer och så småningom ge en stark struktur som du kan lägga till och anpassa till en helt unik design.
På så sätt är det mycket som en Photoshop-version av Twitter Bootstrap, som används av tusentals och tusentals designers varje dag. Med Bootstrap kan designers bygga en snygg webbplats genom att använda standardstilarna, men utan mycket ansträngning kan du bryta ut ur formen och skapa design som är alla dina egna samtidigt som du utnyttjar den användbara verktygssatsen. Samma logik gäller för WebZap.
Funktioner som jag skulle älska att se
Som du kan berätta är jag ganska upphetsad över det här verktyget och tycker verkligen att det sticker ut som en av de bästa webbdesignen Photoshop plugins som jag någonsin har använt. När den hanteras ordentligt kan den dramatiskt påskynda ditt arbetsflöde utan att förhindra dig för mycket av ett strikt system.
Det sägs att det finns några funktioner som jag verkligen skulle vilja se läggas till i framtiden. Här är några av toppen av mitt huvud.
Alternativ för Footer Layout
Just nu kastas sidfotaren som en eftertanke med navigeringen. Det förtjänar definitivt sin egen modul som låter dig välja mellan några olika layouter, precis som med de andra layoutelementen.
verktygstips
Om du inte har läst igenom dokumentationen noggrant (vilket är jättebra), finns det verkligen inget sätt att veta exakt vad en knapp gör tills du trycker på den. Beviljas, åtgärder är lätta att ångra, men om det är möjligt skulle det vara bra att ha några verktygstips som visas på svävar för att hjälpa dig att förstå vad som händer. Detta skulle vara särskilt användbart i avsnittet Mini Toolset.
Anpassade arrangemang och stilar
Det finns många anpassningsalternativ som redan är inbyggda i WebZap, men det säger sig självklart att jag vill ha ännu mer. Ju mer mångsidigt det här verktyget blir (samtidigt som det hålls tätt för sin användarvänlighet), desto mer designers kommer lätt att anta det. Jag vet att det är en lång order, men jag skulle gärna kunna spara egna layouter, knappfärger etc.
Gå och hämta det!
Om du spenderar dina dagar med att skapa webbdesigner i Photoshop, behöver du absolut ge det här verktyget ett skott. Den kombinerar användarvänligheten som du skulle få från något som Rapidweaver och de breda öppna möjligheterna att arbeta i Photoshop. Mössa till Norman Sheeran och UI Parade för att skapa ett så bra verktyg.
Gå över till WebZap webbplats för att se några videor av förlängningen i åtgärd. Med tanke på den tid det sparar, tycker jag att det är väl värt 15 kronor.