Ho un piccolo segreto sporco, odio tagliare i file di Photoshop. Con questo non intendo dire che odio trasformare i comp del PSD in siti Web, voglio dire che odio gli strumenti di slicing di Photoshop. L'intero processo rende il mio PSD un aspetto occupato, ingombrante e troppo complicato, quindi di solito lo ignoro del tutto e preferisco invece ritagliare manualmente e salvare le immagini singolarmente secondo necessità.
Per combattere questa tendenza e tentare di vedere la vera utilità degli strumenti per affettare di Photoshop, ho intrapreso una missione per imparare tutte le complessità di come funziona l'affettatura. Di seguito una raccolta di suggerimenti e trucchi derivanti da questo viaggio. Spero che imparerai una cosa o due che non hai mai saputo!
Ci sono tre tipi di fette in Photoshop
Tre tipi di fette !? Questa è stata una delle cose più interessanti e sorprendenti che ho imparato. Non avendo davvero sperimentato troppo a lungo le funzionalità di taglio, ho capito che c'era solo un modo per farlo. Mi sbagliavo.
I tre diversi tipi di slice sono User Slices, Auto Slices e Layer Based Slices. Per iniziare, parliamo dei due che probabilmente conoscete: User Slices e Auto Slices. Questi sono strettamente correlati, infatti uno crea l'altro.
Come sapete, per tagliare un PSD si inizia afferrando lo strumento Slice (C) e disegnando un riquadro attorno all'area che si desidera esportare come immagine autonoma. Aggiungendo sezioni a tutte le aree del tuo comp che vuoi fare, puoi rapidamente e facilmente ottimizzare ed esportare più immagini contemporaneamente.
Quando si esegue una sezione, si dovrebbe ottenere qualcosa come il risultato visto di seguito.
Quello che ho fatto qui è disegnare una scatola attorno al logo nella parte superiore della pagina. Questa azione ha creato sia una sezione utente che diverse sezioni automatiche. Quando crei una sezione, Photoshop presume che il tuo obiettivo finale sia quello di trasformare l'intero PSD in una serie di sezioni. Personalmente ritengo che questa ipotesi sia piuttosto fastidiosa e discuteremo più avanti su come aggirarla. Per ora, sappi solo che a causa di questa ipotesi, Photoshop estende i bordi della tua fetta lungo tutta la PSD, creando in tal modo diverse altre sezioni automaticamente. Questo è illustrato nell'immagine sopra.
Trucchi per lavorare con utente e sezioni automatiche
Mentre siamo in tema di User e Auto Slices, esaminiamo alcune delle caratteristiche ovvie e non così ovvie in modo che possiate davvero avere un'idea di quali strumenti e opzioni avete a vostra disposizione.
Spostamento e modifica di fette
Una volta creata una sezione, dovresti vedere controlli simili a quelli di una Trasformazione libera che ti consentiranno di spostarla e modificarla. Puoi anche usare lo strumento Slice Select per assicurarti di modificare solo le sezioni correnti e non di crearne di nuove. Questo strumento si trova sotto lo strumento Slice nel menu a tendina.
Conversione di sezioni automatiche in sezioni utente
Durante l'intero processo di slicing, le sezioni automatiche vengono continuamente create e aggiornate e rimangono distinte dalle sezioni utente. In seguito, vedremo come esportarli come file o ignorarli durante l'esportazione, ma per ora diamo un'occhiata a come trasformare una Slice automatica in una fetta utente.
Il processo è estremamente semplice. Per prima cosa, devi selezionare l'auto Slice usando lo strumento Slice Select. Quindi, seleziona l'Auto Slice che vuoi convertire e premi? Promuovi? pulsante vicino alla cima.
Questo è tutto! Ora l'Auto Slice dovrebbe cambiare colore, indicando che ora è una Slice utente. Ora avrai un maggiore controllo sulle sue dimensioni e su come esporta.
Sezioni di divisione automatica
Quando hai una serie di oggetti che sono distribuiti orizzontalmente, verticalmente o persino in una griglia, non devi prendere il tempo per passare e fare una sezione attorno a ogni singola unità. Invece, puoi creare una sezione che copra tutti gli oggetti e dire a Photoshop di fare il resto.
Per fare ciò, prima crea una grande fetta disegnando una scatola attorno a tutti gli oggetti. Quindi, con lo strumento Slice Select abilitato, fare clic su? Divide? pulsante nella parte superiore della pagina.
Questo dovrebbe far apparire il? Divide Slice? finestra di dialogo mostrata sopra. Usando questa finestra puoi inserire rapidamente sezioni verticali e orizzontali aggiuntive. Se non si allineano correttamente, è possibile regolarli manualmente dopo aver premuto il pulsante? OK.?
Fette da Guide
Molti di voi probabilmente lavorano molto più a proprio agio con le guide che con le sezioni all'interno di Photoshop. La realtà è che entrambi funzionano in modo molto simile, ma il sistema delle guide sembra un po 'più liscio.
Se è così che rotoli, questo si adatta perfettamente a un flusso di lavoro facile per la creazione di sezioni. Trascina semplicemente le guide per dividere il tuo PSD e ignorare del tutto gli strumenti di taglio. Quindi, una volta che hai finito, seleziona lo strumento Slice e premi? Slices from Guides? pulsante in alto.
Naming Slices
Una delle cose fastidiose che ti infastidiscono la prima volta che lavori con le porzioni è che quando le esporti, i file risultanti hanno tutti nomi uggiosi che non sono affatto significativi. Per risolvere questo problema, è necessario assicurarsi di aver inserito e denominato ogni sezione in modo appropriato. Qualunque sia il nome che assegnerai verrà quindi riportato come nome del file al momento dell'esportazione.
Per denominare una sezione, fai semplicemente doppio clic sul suo contenuto con lo strumento Slice selezionato. Questo farà apparire la finestra di dialogo qui sotto.
Si noti che qui ci sono diverse opzioni, inclusa l'impostazione del colore per la sezione, l'inserimento manuale delle dimensioni e l'assegnazione di un nome. C'è anche un sacco di contenuti HTML come URL, Target, ecc. In effetti, Photoshop può prendere il tuo PSD affettato e visualizzarlo come una pagina web. Alcune funzioni di questa funzionalità, in quanto le impostazioni predefinite creano un layout basato su tabelle, tuttavia è possibile cambiarle per utilizzare i CSS.
Ora non eccitarti troppo. Anche con le opzioni CSS selezionate, Photoshop è ancora abbastanza brutto nella creazione di un sito web per te.È molto meglio farlo a mano o almeno portarlo a Dreamweaver, il che significa che devi ignorare completamente tutte queste altre opzioni.
Fette basate su layer e perché sono migliori
Una delle caratteristiche principali che ha reso l'affettare molto meno per me è Layer Based Slices. Si tratta di una marca particolare di User Slices superiore in diversi modi.
Come suggerisce il nome, queste sezioni non sono basate su una casella che disegni manualmente ma invece aderiscono automaticamente ai limiti di un livello. Per creare una sezione basata su livelli, seleziona un livello nella tavolozza dei livelli, quindi vai al menu e seleziona Livello> Nuova sezione basata su livelli. Nota che funziona anche se hai selezionato più livelli, ogni livello verrà semplicemente trasformato in una propria porzione!
Ovviamente, affinché funzioni correttamente, devi essere davvero bravo su come strutturare i tuoi livelli. Dovresti costruire i tuoi prototipi come file completamente stratificati e organizzati comunque, quindi questo non dovrebbe essere un problema.
Il vantaggio
Uno dei motivi principali per cui le normali fette sono così schifose è che crea un sacco di lavoro extra se vuoi tornare indietro e modificare i tuoi progetti. Dopo aver mescolato il disegno, devi tornare indietro e spostare tutte le sezioni per allinearlo al nuovo layout. Questo fastidio è il motivo per cui ho sempre salvato manualmente i singoli pezzi attraverso il ritaglio.
Tuttavia, le fette basate su livelli sono in realtà abbastanza intelligenti. Quando ti sposti sui tuoi livelli, le tue sezioni seguono automaticamente. Se si aggiunge un effetto che modifica i limiti, ad esempio un bagliore esterno, la sezione si espande per includerla. Se trasformi il livello al 30% della sua dimensione originale, di nuovo la porzione si aggiorna automaticamente!
Ovviamente, qui c'è una chiara argomentazione per l'utilizzo di Layer Based Slices quando possibile, in quanto consente di risparmiare un'incredibile quantità di tempo nell'inevitabile fase di re-design.
Uccidere il disordine
Un altro dei miei più grandi fastidi con il taglio è che può creare un PSD dall'aspetto davvero disordinato. Questo è principalmente per l'effetto collaterale Auto Slicing.
Ad esempio, dai un'occhiata all'immagine qui sotto (è un po 'troppo semplice qui ma ottieni il punto). Qui volevo davvero solo creare tre sezioni, ma Photoshop è entrato automaticamente e lo ha trasformato in dodici fette!
Non so voi, ma non costruisco le pagine web come una grande raccolta di immagini tutte ammassate insieme. Quindi semplicemente non voglio tutte queste fette extra! Non ho intenzione di esportare queste aree in immagini, quindi tutto ciò che stanno facendo è aggiungere rumore alla mia interfaccia. Quando vedo un documento come questo, le fette cessano di essere uno strumento significativo per me.
Per risolvere questo problema, possiamo prendere lo strumento Slice Select e premere il tasto? Hide Auto Slices? pulsante nella parte superiore dello schermo. Questo fa esattamente quello che il nome suggerisce, elimina tutte le brutte foto di Auto Slices dalla vista.
Guarda quanto è più semplice il nostro documento! Le poche fette che abbiamo usato sono chiaramente identificabili e quindi conservano la loro utilità. A mio parere, questo metodo di visualizzazione delle sezioni è molto preferito. Questo è uno di quei casi in cui Photoshop semplicemente si sforza troppo di prevedere il mio flusso di lavoro preferito e finisce per sovradimensionare le funzionalità.
Esportazione di fette
È qui che entra in gioco l'utilità dell'affettare. Senza tagliare, devi salvare ogni porzione del tuo comp uno alla volta. Il flusso di lavoro sarebbe simile al seguente: effettuare una selezione, ritagliare, ottimizzare in Salva per Web, salvare, annullare il ritaglio e ripetere. Questo è un sacco di passaggi inutili! Vediamo come funziona con l'affettatura.
Dopo aver finalmente capito tutti i dettagli dell'affettatura e avere il tuo PSD pronto per andare, è ora di andare al menu File e selezionare "Salva per Web e dispositivi". Probabilmente hai già familiarità con questa finestra di dialogo, ma è un po 'diversa quando hai sezioni nel tuo documento.
Se hai qualche slice, l'anteprima del tuo documento in questa finestra mostra tutti loro (purtroppo questo include quelle fastidiose Auto Slice). Da qui puoi semplicemente fare clic per selezionare ciascuna sezione e ottimizzare le impostazioni per ciascuna di esse. Ciò include il tipo di file, la qualità, ecc. Quindi, in una sessione, puoi impostare un'esportazione di tre JPG e un PNG, ognuno con una qualità che ritieni appropriata.
Dopo aver regolato tutto a tuo piacimento, premi "Salva? pulsante. Dovrebbe apparire una finestra di dialogo che ti consenta di scegliere una cartella in cui inserire tutte le immagini. Ricorda che abbiamo già impostato la convenzione di denominazione, quindi lasciala così com'è. La chiave qui è assicurarsi che tu stia esportando solo? Tutte le sezioni utente? o? Fette selezionate ?.
A seconda del flusso di lavoro desiderato, una di queste opzioni funziona alla grande. L'opzione predefinita è semplicemente "All Slices?", Che includerà non solo il tuo utente e le sue sezioni basate su layer, ma anche le sezioni automatiche completamente inutili che dovrai comunque buttare via. Salva te stesso il problema e buttale qui prima che il salvataggio effettivo avvenga.
Conclusione
Oggi abbiamo fatto un sacco di cose piuttosto tecniche con Photoshop, quindi cercherò di riassumere bene. In primo luogo, affettare un PSD può sembrare davvero un processo goffo se non sai cosa stai facendo. Assicurati di dare un'occhiata a Photoshop e di provare i suggerimenti sopra riportati per assicurarti di sfruttare al meglio gli strumenti disponibili.
In secondo luogo, ricorda che esistono tre tipi di slice: Auto Slice, User Slices e Layer Based Slices. Le fette automatiche sono piuttosto insignificanti e rappresentano uno sfortunato effetto collaterale di affettare rispetto a una funzione utile. Non devi essere d'accordo con me su questo, ma se lo fai, nascondili in modo che non siano così distraenti. Le slice utente sono semplicemente quelle create intenzionalmente. Puoi regolarli con lo strumento Slice Select e nominarli facendo doppio clic sui contenuti.Le slice basate su strati sono come le slice utente, ma sono molto più intelligenti perché aderiscono automaticamente ai limiti di un dato livello. È possibile spostare, ridimensionare e aggiungere effetti a un livello e la sezione verrà continuamente aggiornata autonomamente.
Infine, quando si esporta un documento con sezioni, scegliere il comando Salva per Web e ottimizzare ogni sezione come un proprio file. Assicurati inoltre di esportare solo le sezioni utente o le sezioni selezionate, altrimenti tutte le sezioni automatiche create da Photoshop riempiranno la cartella delle immagini.
Questo è probabilmente molto più di quanto tu abbia mai voluto sapere sull'affettatura in Photoshop, ma spero che questo ti abbia aiutato a individuare le inefficienze del sistema in modo che tu possa aggiustare e sfruttare ancora questa utile serie di strumenti senza essere ostacolato dalla sua goffaggine.
Lascia un commento qui sotto e dicci come dividi un PSD. Il flusso di lavoro che ho creato qui è solo una delle tante soluzioni possibili e sono ansioso di ascoltare e imparare dal tuo!