L'altro giorno un mio amico ha detto qualcosa che ha attirato la mia attenzione, "Sto cercando di imparare come tagliare un PSD." È una dichiarazione abbastanza semplice. Appena l'ha detto, sapevo esattamente di cosa stava parlando, eppure c'era qualcosa che non andava bene.
Dopo aver visto la mia esitazione, il mio amico ha risposto con una domanda, "Abbiamo ancora tagliato PSD ?? Ottima domanda! Per i principianti, il gergo non è solo un gergo tecnico, implica un processo e suggerisce un metodo di azione. Per questo motivo, è spesso utile per gli sviluppatori più esperti definire i loro termini in modo significativo per gli altri. Oggi approfondiremo la teoria alla base del processo di conversione di un PSD in una pagina Web e termineremo con una discussione sugli alti e bassi della progettazione nel browser.
Il nostro file di esempio
Oggi non convertiremo un PSD in HTML / CSS, stiamo semplicemente discutendo su come e perché così puoi comprendere appieno l'approccio tipico adottato dai web designer di oggi.
Avevo bisogno di un PSD per fare riferimento in tutto l'articolo, così ho preso l'incredibile Creative Studio Minimal PSD di GraphicsFuel.com.
Che cosa sta affettando?
La prima cosa di cui dovremmo parlare è cosa significa "tagliare"? un PSD. In parole povere, il termine significa semplicemente tagliare a pezzi il documento di Photoshop, che viene poi pubblicato sul server Web, messo in ordine in HTML e con stile / posizionamento CSS.
Ad un livello più specifico, l'affettatura può fare riferimento a uno specifico set di strumenti all'interno di Photoshop. Usando lo strumento Slice, possiamo suddividere il nostro documento in piccoli pezzi. Fondamentalmente, disegniamo un rettangolo attorno a ogni oggetto che vogliamo separare in un'immagine individuale.
Perché affettare?
Gli strumenti per il taglio di Photoshop sono semplicemente lì per comodità. Oggi ci sono un sacco di grandi web designer che non li toccano mai e non c'è niente di sbagliato in questo.
Il punto dietro gli strumenti di slicing è rendere più semplice il processo di salvataggio di un mucchio di immagini, sia a breve termine per la build iniziale che a lungo termine per effettuare revisioni. Fondamentalmente, ciò che fa è risparmiare la fatica di ritagliare ogni porzione manualmente e salvarla.
Anche se il processo è una specie di dolore, devo ammettere che un PSD ben affettato è una cosa di bellezza. Ecco un chiaro esempio in cui ho diversi elementi che devono essere salvati come immagini. Senza tagliare, ognuno di questi rappresenterebbe un processo di ritaglio e salvataggio che devo passare.
Tuttavia, quando vengono suddivisi, una singola azione Salva per Web può convertire tutte queste sezioni in file di immagine autonomi. Ciò riduce il tuo tempo sul compito ripetitivo di ritaglio e salvataggio se stai lavorando con un singolo file Photoshop come sorgente.
Fai affettare meno
Se non sei ancora sicuro degli strumenti di ritaglio di Photoshop o pensi che sia tutta una grossa perdita di tempo, dovresti dare un'occhiata al nostro pezzo intitolato Come ridurre il consumo di fette: suggerimenti e trucchi per l'affettatura di un PSD.
In questo articolo, spiegherò in modo esauriente il processo di affettatura e il funzionamento di tutti gli strumenti di slicing di Photoshop. Ancora più importante, si danno un'occhiata ad alcuni ottimi consigli su come rendere il processo di affettatura molto meglio. Cose come Layer Based Slices e nascondere Auto Slices sono davvero molto importanti per renderlo un processo accettabile.
Perché affettare è vecchia scuola
Quindi questo è affettare. Ora che sai di cosa si tratta, è tempo di scoprire come questo processo sia cambiato nel corso degli anni fino a un punto in cui l'affettatura è un'attività fondamentalmente diversa da quella che era una volta.
C'era una volta, nessuno usa i CSS (lo so, l'orrore!). Anche quando i CSS sono arrivati, gli strumenti che forniva ai web designer erano piuttosto limitati rispetto a quello che conosciamo oggi.
Di conseguenza, i siti web che cercavano di superare i limiti non sembravano schifo tendevano a usare una tonnellata di immagini. Ogni volta che un disegno conteneva un carattere personalizzato, una sfumatura semplice, un'ombra esterna o un angolo arrotondato, era necessario utilizzare un'immagine per rimuovere l'effetto nel browser.
Di conseguenza, l'affettatura era un grosso problema. Quando hai creato un mockup di Photoshop su un sito web, se hai deciso di implementare qualsiasi tipo di glassa estetica, che era enorme prima del calcio minimo in cui ci troviamo ora, dovevi tagliare ogni piccola parte del tuo disegno in piccoli pezzi che probabilmente hai usato le tabelle HTML per ricostruire. Brutale vero? Soprattutto se consideri che eravamo tutti su connessioni web incredibilmente lente allora tutte quelle immagini impiegavano anni per essere caricate.
CSS uccide l'immagine
Con l'evolversi e la crescita dei CSS, una nuova tendenza è comparsa nel web design: design senza immagini. Se guardavi in giro sui blog del design qualche anno fa vedresti una tonnellata di articoli intitolati "Crea un pulsante fantasia senza immagini !? Fino ad oggi vedi ancora titoli come questo che ci scuotono mentre le persone compiono imprese incredibili con i CSS.
Questa tendenza non sarebbe possibile senza le fantastiche funzioni CSS che ora ci piacciono. All'improvviso puoi arrotondare gli angoli, aggiungere ombre, implementare più sfondi, creare sfumature, usare caratteri personalizzati e molto altro usando il codice puro. L'obiettivo generale di molti web designer è ora quello di sfruttare i CSS e utilizzare il minor numero possibile di immagini nel nostro markup. ? Senza immagini? non è necessariamente qualcosa da raggiungere (hai quasi sempre bisogno di alcune immagini), ma sei piuttosto alla ricerca di, per te generalmente voglio avvicinarti il più possibile umanamente mantenendo alto il supporto.
Pro e contro di design senza immagini
Questa tendenza arriva con i suoi alti e bassi. Il lato positivo è che, nonostante ciò che i non-programmatori potrebbero pensare, il CSS è un modo magnifico per mantenere e regolare un progetto a lungo termine. Se vuoi cambiare qualcosa di piccolo come un font o un colore di sfondo, trovi / sostituisci alcune righe di codice e sei a posto.C'è anche il vantaggio che anche migliaia di linee di CSS possono essere ridotte al punto che il suo effetto sui tempi di caricamento è quasi trascurabile.
L'enorme, non sottovalutato svantaggio è la compatibilità. Con le immagini, i PNG erano praticamente l'unica cosa di cui dovevamo preoccuparci (a parte ovviamente i tempi di caricamento). Ora con i CSS abbiamo problemi di supporto su tutta la linea. I browser che supportano una nuova funzione lo fanno solo con un prefisso univoco, rendendo la codifica ridicolmente ripetitiva, molte funzionalità sono disponibili solo su un singolo motore del browser, altre sono supportate ovunque ma IE (alcune cose non cambiano mai); può essere un vero casino.
L'obiettivo finale è quello di mantenere ciò che è meglio per l'utente in mente. Se l'uso di un'immagine per qualcosa produce la maggior quantità di bene per la maggior parte delle persone, fallo.
Meno immagini, meno affettatura
Basandosi su questo fondamento di informazioni, possiamo finalmente affrontare la questione se i web designer possano ancora affettare o meno i PSD.
Per la maggior parte, quando guardiamo un documento di Photoshop che deve essere convertito in un sito Web, cerchiamo di vedere il codice laddove possibile. È come quel momento in Matrix in cui Neo si guarda intorno a ciò che un tempo vedeva come il mondo normale e improvvisamente vede il codice dietro di esso. I Web designer non vedono i livelli e gli effetti di livello, vediamo le div e le proprietà CSS.
Dato che questo è il caso, la maggior parte del lavoro richiesto per prendere un progetto statico dal vivo è più nel campo della ricostruzione che del taglio. Invece di affettare quel pulsante lucido e servirlo come immagine, userò i CSS per ricostruirlo da zero. Questo processo si ripete in tutto il sito, spesso con immagini usate principalmente per contenuti reali piuttosto che per il design (anche se c'è ancora molto che puoi / non devi fare con i CSS puri).
Progettazione nel browser
La domanda che senza dubbio viene in mente a molti neofiti del web design mentre leggono su questo processo è, naturalmente,? Non è tutto un po 'ripetitivo? Per prima cosa si progetta e costruisci un sito in Photoshop, Illustrator, Fireworks (sì, ricordo che Fireworks è ottimo per i contenuti web, quindi non mi urlare nei commenti) o qualsiasi altro strumento di layout di tua scelta, quindi in pratica ricomincia da capo il browser e ricostruisci ciò che hai appena creato utilizzando il codice anziché le immagini ovunque sia possibile.
La risposta è clamorosa? Sì.? Il risultato è un movimento di persone che incoraggiano lo spostamento del processo di progettazione direttamente nel browser. Inizia nel codice, finisci nel codice, usa Photoshop solo quando devi creare un'immagine e praticamente eliminare tutte queste assurdità ripetitive.
Sono tutto per questo processo. È super snella e semplifica davvero il tuo flusso di lavoro. Sfortunatamente, non è sempre facile ottenere il lato creativo del tuo cervello per produrre il tuo lavoro migliore utilizzando questo metodo. Sarah Parmenter ha recentemente affrontato questo problema nel suo post, "Non riesco a progettare nel browser? in cui rivela il? colpevole segreto? anche se Photoshop non è un buon modo per visualizzare il tipo di contenuto web dinamico e reattivo di cui i clienti hanno bisogno oggi, favorisce più creatività che andare direttamente a HTML e CSS.
Come progettate i siti web?
Questo post rappresenta una lunga risposta a quella che sembrava essere una semplice domanda. Tuttavia, sotto questa domanda è qualcosa con cui stiamo tutti lottando ultimamente, dai principianti ai professionisti: qual è il processo migliore per la progettazione di un sito web? Il processo di progettazione creativa dovrebbe essere distinto dal processo di codifica o dovrebbe essere uno e lo stesso? Dovremmo creare mockup in un'applicazione di layout e poi suddividerli per il browser o c'è un modo migliore? Fireworks è davvero la risposta o esiste ancora una soluzione mancante?
Voglio sentire i tuoi pensieri su questo. Com'è il tuo attuale flusso di lavoro, dall'inizio alla fine? Da dove inizia il processo di progettazione e come passa attraverso un sito web live? Quali strumenti trovi inestimabile lungo la strada? Come sarebbe il tuo strumento di web design ideale?