Share
Adobe Photoshop è in continua evoluzione; nuove funzionalità sono aggiunte ad ogni versione, mentre le funzionalità esistenti sono migliorate. C'è, tuttavia, un'area che è ancora abbastanza obsoleta; il modo in cui suddividiamo i nostri disegni in Photoshop non è cambiato poiché il web era basato su tabelle.
L'alba dell'indipendenza della risoluzione (pensa Retina) ha significato che ci affidiamo sempre meno alle bitmap per i nostri siti web. Caratteri Web, CSS3 e grafica vettoriale scalabile sono tutti esempi di tecniche moderne che ci allontanano dalla preoccupazione per i pixel. A volte abbiamo ancora bisogno di dividere i nostri PSD e utilizzare le immagini risultanti, ma è il momento per noi di farlo in modo più responsabile.
Inserisci Cut & Slice me, un plugin CS6 sviluppato da Daniel Peruho. Cut & Slice me mira ad accelerare il processo di taglio moderno e offre molte funzioni potenti. È gratuito, è facile da usare e funziona.
Alcune delle cose che offre includono il prendere un gruppo di livelli e trattarlo come un singolo oggetto. Taglia quindi tutti i pixel non necessari ed esporta il gruppo come file immagine. Quando si progettano i pulsanti, una volta che i livelli vengono denominati in base al formato richiesto dal plug-in, è possibile suddividere automaticamente gli stati multipli di quel pulsante. Desideroso di saperne di più? Tuffiamoci dentro.
Per iniziare, devi innanzitutto eseguire Photoshop CS6. Dovrai quindi installare il plug-in sul tuo computer. Andate alla pagina Taglia e affetta me e scaricate l'ultima versione del plugin. Inoltre, scarica il file di esempio che utilizzeremo per dimostrare come funziona il plugin.
Una volta scaricato, fai doppio clic sul file CutAndSliceMe.zxp per attivare l'installazione del plugin. Quando Adobe Extension Manager si presenta, basta seguire le istruzioni.
Avvia Photoshop e scegli Finestra> Estensioni> Taglia e Taglia. Ora dovresti essere in grado di vedere il pannello "Taglia e affetta".
Quindi, estrai il file CutAndSliceMe_sample.zip e apri il file di esempio. Dovresti vedere quanto segue:
Si tratta di un design mobile con livelli denominati correttamente in base ai requisiti del plug-in. Tra poco vedremo come funziona, ma prima di farlo ci sono un paio di cose di cui dovresti essere a conoscenza:
Assicurati che il pulsante con l'icona dell'iPhone sia selezionato, quindi fai clic su Taglia tutte le risorse. Al termine dell'affettatura, vai alla directory del file di esempio e apri la cartella "CutAndSlice_sample_iPhone_assets" che viene creata automaticamente dal plugin.
Vedrai ogni risorsa in due dimensioni; uno per Retina (che è in realtà la dimensione a piena risoluzione utilizzata nel file PSD), e un altro che è la versione ridotta dell'originale.
Ora ripetiamo il nostro esercizio, questa volta esportando per Android. Cambia la modalità del plugin facendo clic sul pulsante con l'icona di Android, quindi fai clic su Taglia tutte le risorse ancora. Questa volta la cartella "CutAndSlice_sample_Android_assets" viene creata con quattro sottocartelle; uno per ogni dimensione del bene. La dimensione che abbiamo progettato originariamente può essere trovata nel xhdpi cartella, tutte le altre risorse sono ridimensionate versioni di questi.
Ora abbiamo visto più o meno ciò che fa il plugin, è tempo di scoprire come funziona.
L'aspetto più importante da considerare è l'organizzazione dei livelli, in termini di denominazione e raggruppamento. Organizza i tuoi elementi in gruppi, come se fossero oggetti. Quindi aggiungere @ alla fine di tutti i nomi di gruppo che si desidera esportare e infine fare clic su Taglia tutte le risorse. I contenuti di ciascun gruppo verranno esportati come file PNG, tagliando tutti i pixel trasparenti.
Nota: Per motivi di prestazioni, Cut & Slice me controlla solo i nomi dei gruppi, quindi per poter essere esportati i tuoi layer devono essere in un gruppo.
A volte potresti non voler esportare tutte le risorse; forse vorrai esportare solo le risorse che hai inserito in un particolare gruppo. Se questo è il caso, fai clic su Taglia sottogruppi e Cut & Slice me esporterà tutto il tuo @ livelli all'interno del gruppo selezionato.
Quando vuoi tagliare solo un singolo gruppo o un singolo livello, selezionalo e fai clic su Taglia selezionato.
Infine, quando ci occupiamo di pulsanti, abbiamo spesso diversi stati per loro. Per esportarli correttamente è necessario aggiungere gruppi contenenti i vari stati dei pulsanti, denominandoli come segue:
Accentsconagua
normalelibrarsicliccato / premutoselezionatoDisabilitatoQuindi metti questi gruppi all'interno di un altro gruppo con _BTN aggiunto al suo nome. Si noti che il _BTN il suffisso può essere utilizzato con qualsiasi elemento che ha stati.
Esempi di pulsanti con stati diversi. Come già accennato, Cut & Slice me ritaglia strettamente i bitmap, rimuovendo tutti i pixel trasparenti circostanti che non si desidera. Ma cosa succede quando vuoi che tutti gli stati del tuo pulsante abbiano la stessa dimensione? In questo caso puoi usare un livello vettoriale rettangolare, chiamato #, nella parte superiore del tuo gruppo, che rappresenta l'area che desideri esportare. Il tuo gruppo verrà esportato alla dimensione della forma vettoriale, senza esportare il livello vettoriale stesso. Questo è valido per tutti i gruppi, non solo per i pulsanti. Il plugin utilizza un livello vettoriale per questa funzione, perché se il Scatta strumenti vettoriali e trasforma in pixel griglia l'opzione è selezionata, come ho detto sopra, la tua forma vettoriale sarà pixel perfetta senza bordi sfocati.
Per testare questo processo, seleziona il livello immediatamente sottostante login_BTN gruppo. Quindi impostare Opacità al 100% e Riempire al 40%. Ora sarai in grado di vedere la forma sopra il pulsante. Cambia le dimensioni come desideri ed esportalo. Ora apri la cartella delle risorse e controlla le dimensioni del pulsante esportato. Dovrebbe essere la dimensione che hai appena definito.
Ora abbiamo una solida conoscenza di come possiamo usare il plugin, quindi è il momento di testarlo nel mondo reale. Qui non ho intenzione di insegnarti come progettare un modello di sito web da zero, invece userò un modello pre-creato per mostrarti come nominare e organizzare correttamente i tuoi livelli.
Iniziamo scaricando questo modello di sito Web gratuito dall'autore CSS. Il modello ha una versione web e una versione mobile. Scarica entrambi, quindi apri la versione web del modello.
Potresti già notare che la denominazione e la struttura dei livelli è molto diversa da quella di cui abbiamo bisogno. Dovremo effettuare un po 'di riorganizzazione e rinominazione per soddisfare i requisiti del plugin. Nella seguente schermata è possibile vedere un confronto della struttura del livello prima e dopo le nostre modifiche. Modifica i livelli (in rosso) per abbinarli a quelli a destra (verde).
Confronto tra livelli prima (rosso) e dopo (verde) In questa occasione vogliamo esportare per il web, quindi cambia la modalità facendo clic sul pulsante con l'icona Monitor, quindi fai clic su Taglia tutte le risorse. La seguente schermata mostra ciò che dovresti vedere. Se la tua vista è diversa, controlla i tuoi livelli per eventuali errori e riprova.
Congratulazioni! Hai appena tagliato il tuo primo progetto con successo. Per ulteriore pratica, apri e affetta la versione mobile del modello.
In questo caso, quando modifichi il file, esporta per iPhone e Android e controlla se tutto è corretto. Se è così, sei pronto per portare questo al livello successivo e affettare il tuo design.
Probabilmente avrai notato che quando esportiamo le nostre risorse abbiamo finito con un sacco di file PNG. E, come sappiamo, estrarre più file immagine individuali da un server Web significa più richieste HTTP, rallentando il rendering delle tue pagine web. Per risolvere il problema, potresti considerare di trasformare tutti i tuoi PNG (o alcuni di essi) in un singolo file di immagine sprite.
Fortunatamente, questo è un compito facile in questi giorni e ci sono molti modi per affrontarlo. Ci sono molti strumenti online che possono aiutare con il processo. Dai un'occhiata ai seguenti generatori di sprite:
... vedi quale si adatta meglio alle tue esigenze.
Fin qui tutto bene, ma c'è ancora una cosa da sottolineare. Con tecnologie come CSS3 e SVG non ci affidiamo più esclusivamente alle immagini. Ora possiamo facilmente utilizzare icone SVG o pulsanti basati su CSS3 nei nostri progetti. Il vantaggio principale dell'utilizzo di grafica SVG e CSS3 è che sono indipendenti dalla risoluzione e funzionano molto bene all'interno di un design reattivo. Inoltre, puoi modificarli e modificarli direttamente nel tuo codice senza bisogno di usare l'editor di immagini. Ma aspetta! Questo non significa che le immagini siano completamente inappropriate. Possono ancora essere utilizzati per foto, grafica complessa e elementi grafici e così via. CSS3 e SVG sono fantastici, ma il supporto del browser non è ancora completamente affidabile, quindi è necessario essere consapevoli quando li si utilizza.
La capacità di automatizzare le nostre attività di progettazione è estremamente importante nel mondo web in rapida evoluzione di oggi. Fortunatamente, strumenti come Cut & Slice me ci danno proprio questa automazione e risparmiano un'enorme quantità di tempo. Come puoi vedere, con un po 'di disciplina quando nominiamo e organizziamo i nostri livelli, possiamo tagliare anche disegni complessi in modo rapido e semplice. Con pochi clic abbiamo tutte le risorse di cui abbiamo bisogno correttamente tagliate e pronte per essere utilizzate.
