WebZap è un fantastico plug-in di Photoshop per aiutare i progettisti a creare mockup di progettazione web ad alta fedeltà più velocemente di quanto tu credessi possibile. Combinando semplici azioni con un solo clic e opzioni di personalizzazione robuste, questo strumento rende l'intero processo di layout non solo indolore, ma in realtà divertente.
Seguiteci mentre diamo un'occhiata a ciò che fa WebZap e mettiamola alla prova per vedere come si comporta. Prometto, è il più bel plugin di Photoshop che hai visto per i web designer da GuideGuide.
Cos'è WebZap?
Quando scarichi WebZap, riceverai un pacchetto di estensione Adobe che dovrai semplicemente fare doppio clic per installare (solo CS5 o superiore). Una volta eseguita la breve procedura di installazione in Adobe Extension Manager, ti consigliamo di aprire Photoshop e andare a Finestra> Estensioni> WebZap.
Questo farà apparire un nuovo pannello di Photoshop simile a quello qui sotto. Questo pannello amichevole e attraente contiene tutte le funzionalità di WebZap.
Sembra semplice qui, e così è semplice da una prospettiva di usabilità (quasi tutto richiede un singolo clic), ma c'è un sacco di potenza nascosta e complessità qui che rendono l'estensione guadagnare il suo prezzo. Entriamo e vediamo come funziona tutto con un flusso di lavoro di esempio.
disposizione
L'essenza del Pannello WebZap è che è suddivisa in quattro schede principali: Layout, UI, Styling e Anteprima. Questi sono rappresentati dalle icone grandi nella parte superiore.
Cammineremo attraverso ciascuno di questi rapidamente per vedere come funzionano. Per iniziare, saltiamo nel layout. La prima cosa che dobbiamo fare è decidere se vogliamo che la nostra navigazione sia centrata orizzontalmente lungo la parte superiore della pagina o scorrendo verso il basso sul lato sinistro della pagina. Per il nostro esempio di progetto, scegliamo l'opzione centrata.
Questa scelta influisce su quasi tutto dopo di essa. Tutte le opzioni di layout si conformeranno automaticamente al formato che hai scelto di costruire. In realtà sono davvero sorpreso di quanto sia versatile WebZap. Sembra che tu prenda sempre una decisione che influisce su altre opzioni e rotola semplicemente con i pugni, senza mai sbandare o dare risultati strani e inaspettati.
Navigazione
Ora che abbiamo scelto un layout centrato, passiamo e scegliamo tra le quattordici opzioni di navigazione integrate. Tutto quello che devi fare per costruirne uno è cliccare su di esso. È così facile!
Fare clic su un'opzione di navigazione è essenzialmente come eseguire un'azione di Photoshop. Ti siedi e sorseggi il caffè mentre Photoshop crea automaticamente il menu di navigazione completo (ci vogliono solo pochi secondi). Quando è finito, dovresti avere qualcosa del genere:
Tieni presente che questo non è un pezzo di arte piatta che WebZap ti sta lanciando. In realtà sta creando un PSD completamente stratificato e facilmente personalizzabile.
Abbastanza interessante,? Navigazione? è un po 'un termine improprio qui. Quello che stai davvero ricevendo è la cornice di base per l'intera pagina. Ciò include sia la navigazione nella parte superiore sia un piè di pagina nella parte inferiore. Per quanto ne so, il piè di pagina è identico su ciascuna delle quattordici opzioni di layout.
Come puoi vedere, ho scelto un'opzione piacevole e minima con un logo segnaposto, una casella di ricerca e alcuni elementi di navigazione. Questi elementi di navigazione sono in live text e possono essere facilmente modificati in base alle proprie esigenze.
Principale
Dopo aver scelto il layout di navigazione, è ora di selezionare una "Caratteristica?", "Piega" o entrambe. La funzionalità è fondamentalmente una sorta di dispositivo di scorrimento di grandi dimensioni con una disposizione di testo e / o miniatura.
Ancora una volta, un clic dopo e il mio layout sta arrivando proprio di seguito. Ricorda che in realtà ho eseguito solo tre o quattro clic del mouse fino a questo punto. Tutto il resto è stato completamente automatizzato.
piega
Da qui, è solo schiuma, risciacquo e ripetere. La sezione finale del nostro layout è chiamata? Fold ,? il che significa che probabilmente si troverà tipicamente al di sotto dell'ipotetica piega (punto di scorrimento). Qui abbiamo due diverse schede di opzioni, una delle quali occupa l'intera larghezza della pagina mentre l'altra occupa metà della pagina.
Prima che tu lo sai, hai te stesso un intero layout di pagina! Avevi molte opzioni di mix & match tra cui scegliere in modo da poter seguire lo stesso processo altre cinquanta volte e ottenere risultati unici ogni volta.
UI
A questo punto, hai l'idea di come procede il flusso di lavoro, quindi eseguiamo rapidamente alcune funzioni più fantastiche. La prossima scheda principale piena di funzionalità è la scheda dell'interfaccia utente. Qui troverai vari pulsanti, elementi di forma e cursori.
Una cosa che mi piace davvero qui è la possibilità di scegliere il colore del tuo pulsante quando lo crei. Questo può risparmiare un sacco di tempo di personalizzazione più tardi.
Stile
La scheda Stile è dove puoi iniziare a modificare alcune delle decisioni di progettazione che sono state fatte automaticamente per te. Ci sono tre sezioni qui: Frame, Divider e Text. Ognuno è spiegato nell'immagine qui sotto.
Ecco cosa succede quando lancio una cornice sul layout che ho costruito finora. Nota che posso scegliere qualsiasi colore che voglio e persino cambiare il colore ripetutamente usando la piccola ruota dei colori sulla destra.
Le opzioni di sostituzione del testo sono in realtà molto robuste. È possibile scegliere di personalizzare le intestazioni (h1, h2, h3, ecc.), Il testo del paragrafo e i collegamenti. Scegli semplicemente l'oggetto che stai cercando di cambiare, scegli un colore e utilizza il menu di sostituzione dei font che si apre.
Anteprima
L'ultima scheda principale è? Anteprima ,? che trasforma automaticamente la tua pagina web in un mockup elaborato che si trova all'interno di una finestra del browser o di una cornice del dispositivo mobile.
Alcuni di questi possono sembrare un po 'ingannevoli ma sono davvero belli da avere e offrono un ottimo modo per mostrare le tue idee all'ultimo minuto con zero sforzi.
Mini strumenti
L'ultimo blocco di strumenti di cui parleremo è il? Mini Toolset ,? che si trova in alto a destra nel pannello WebZap. Contiene quattro pulsanti:
I primi due pulsanti qui sono piuttosto auto-esplicativi. Il primo genera un nuovo documento in modo da poter iniziare una nuova pagina e il secondo crea guide basate sul layout del sistema a griglia 960. Il terzo pulsante è estremamente utile. Afferra il gruppo di livelli che hai selezionato, lo ritaglia e lo lancia in un nuovo documento. In questo modo è estremamente semplice tagliare e salvare le immagini. Anche come plugin standalone, questa funzione sarebbe abbastanza utile.
Infine, il quarto pulsante genera paragrafi segnaposto pieni di lorem ipsum. Come con altri elementi di layout, puoi scegliere tra una varietà di opzioni diverse.
Com'è?
Dalle app Web e dai framework di sviluppo ai template Keynote e Powerpoint, ci sono tantissimi prodotti sul mercato che ti aiutano a creare velocemente prototipi di design di pagine web. WebZap è l'unico che abbia mai usato per farmi sorridere. È così incredibilmente facile eppure così potente che non puoi fare a meno di rimanere colpito dal suo potenziale. Adoro il fatto che posso costruire dei bellissimi prototipi con così poco sforzo.
Tutti i miei siti saranno uguali?
A prima vista, si potrebbe pensare che l'utilità di WebZap sia limitata. Dopotutto, se lo avessi usato nei tuoi prossimi dieci progetti, tutto il tuo lavoro non sembrerebbe lo stesso?
Per quella protesta la mia risposta è, "solo se sei pigro." Se si trattasse di un'app Web, verrai effettivamente bloccato nei layout, negli stili, ecc. Che ti vengono forniti. Tuttavia, ricorda che questo è un Photoshop collegare. Ciò significa che puoi fare assolutamente ciò che vuoi sull'output generato da WebZap.
Pensa a WebZap come a un punto di partenza che ti aiuta a generare idee di layout approssimative e infine a fornire una struttura solida che puoi aggiungere e personalizzare per un design completamente unico.
In questo modo, è molto simile a una versione di Photoshop di Twitter Bootstrap, che viene utilizzata da migliaia e migliaia di designer ogni giorno. Con Bootstrap, i progettisti possono creare un sito di grande impatto utilizzando gli stili predefiniti, ma senza molto sforzo si può rompere lo stampo e creare progetti che sono tutti tuoi pur sfruttando ancora l'utile set di strumenti. La stessa logica si applica a WebZap.
Caratteristiche che mi piacerebbe vedere
Come puoi vedere, sono piuttosto entusiasta di questo strumento e penso davvero che si distingua come uno dei migliori plug-in per Photoshop di Web design che io abbia mai usato. Se maneggiato correttamente, può velocizzare notevolmente il flusso di lavoro senza metterti in un sistema troppo rigido.
Detto questo, ci sono alcune funzionalità che mi piacerebbe davvero vedere aggiunte in futuro. Eccone alcuni in cima alla mia testa.
Opzioni di layout del piè di pagina
In questo momento il piè di pagina è davvero gettato in un secondo momento con la navigazione. Merita sicuramente il proprio modulo che ti consente di scegliere tra diversi layout, proprio come con gli altri elementi di layout.
Tooltips
A meno che tu non abbia letto attentamente la documentazione (che è fantastica), non c'è davvero modo di sapere esattamente cosa fa un pulsante finché non lo premi. Certo, le azioni sono facili da annullare, ma se è possibile, sarebbe bello avere alcuni suggerimenti che appaiono al passaggio del mouse per aiutarti a capire cosa sta per accadere. Ciò sarebbe particolarmente utile nella sezione Mini Toolset.
Arrangiamenti e stili personalizzati
Ci sono molte opzioni di personalizzazione già integrate in WebZap, ma è inutile dire che ne voglio ancora di più. Più questo strumento diventa versatile (pur tenendo saldamente alla sua facilità d'uso), più i progettisti lo adotteranno prontamente. So che è un compito arduo, ma mi piacerebbe poter salvare i miei layout, i colori dei pulsanti, ecc.
Vai a prenderlo!
Se passi le tue giornate a creare layout di Web design in Photoshop, devi assolutamente dare a questo strumento un colpo. Combina la facilità d'uso che otterresti da qualcosa come Rapidweaver e le ampie possibilità di lavorare in Photoshop. Un saluto affettuoso a Norman Sheeran e UI Parade per aver creato uno strumento fantastico.
Dirigetevi verso il sito Web WebZap per vedere alcuni video dell'estensione in azione. Visto il tempo che ti risparmia, penso valga la pena di $ 15.