Share
Il plug-in PNGHat recentemente rilasciato per Photoshop, creato da Source, crea un flusso di lavoro completamente diverso per l'esportazione di elementi PSD da utilizzare in siti Web, giochi, app o qualsiasi altro tipo di progetto che progetti per.
È un software robusto con una serie di grandi funzionalità, ma la caratteristica più allettante che offre è la sua capacità di ridurre l'esportazione in tre semplici passaggi:
PASSO 1: Premi il bottone
PASSO 2: Copia e incolla il codice
PASSO 3: Profitto!
Okay, quindi in tutta serietà sono solo due passaggi, ma è davvero così facile. Il plug-in elimina essenzialmente il tipico processo di esportazione di Photoshop per affettare, denominare fette, trattare aree di sezioni sovrapposte, visualizzare in anteprima, selezionare le opzioni di ottimizzazione, scegliere le opzioni di esportazione, salvare, quindi scrivere manualmente il codice per integrare le immagini nel progetto.
Può anche tagliare automaticamente lo spazio bianco attorno agli elementi e gestire più esportazioni di risoluzione per il supporto della retina e le tecniche di immagine reattiva. Le immagini possono essere riprodotte localmente sul tuo computer, caricate istantaneamente nell'archivio nel cloud, o anche generate come codice Base64 in modo da non aver bisogno di file di immagine.
Iniziamo con uno sguardo al nucleo del plugin; la funzionalità di esportazione dell'immagine del pulsante.
Esportare immagini usando PNGHat è davvero facile come si ottiene. Ad esempio, nell'interfaccia utente di Mobile Game di Graphic Burger, diciamo che vuoi esportare il "pulsante Riproduci".
Per prima cosa, selezioni il / i livello / i o gruppo per il "Pulsante Play":
Quindi fai clic sul PNGHat Esporta livelli selezionati pulsante:
E presto, ottieni un PNG perfettamente ottimizzato:
Questo è tutto! In questo esempio abbiamo coperto due clic del mouse e circa due secondi di attesa.
Se si esportano le immagini localmente, è possibile impostare dove dovrebbero andare facendo clic su ... pulsante che vedrai a destra della seconda sezione del pannello di PNGHat, quindi sfogliando la cartella di tua scelta.
Ci sono varie altre opzioni che puoi impostare e modificare, che vedremo di seguito, ma in poche parole è l'intero processo; seleziona, pulsante, fatto.
Allo stesso tempo in cui PNGHat emette l'immagine, prepara anche copia e incolla il codice pronto in modo da poter facilmente incorporare quell'immagine nel progetto. Ottieni codice HTML, CSS, canvas, Android e iOS, ad esempio:
background-image: url (images_14 / how-to-export-photoshop-assets-per-the-web-con-pnghat_4.png); larghezza: 108 px; altezza: 109 px;
var img = new Image (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-assets-per-the-web-with-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Da qui basta premere il pulsante "Copia" nella finestra di PNGHat e tutto è pronto per essere incollato direttamente nel file di progetto pertinente:
Invece di dover trasferire le immagini tramite FTP dopo l'esportazione, PNGHat ti offre la possibilità di caricare istantaneamente le tue immagini nello storage cloud che forniscono. Al momento il plugin viene fornito con 1 Gb di spazio di archiviazione cloud gratuito, con immagini fornite tramite CDN in modo che gli utenti siano serviti dalla posizione più vicina possibile.
Esportare immagini per l'hosting incluso non è assolutamente diverso dal processo di esportazione locale. Per attivare il caricamento automatico, seleziona l'opzione "Cloud" dalla prima sezione della finestra di PNGHat:
Da lì, si utilizza lo stesso approccio "select" e "push button" come descritto sopra. L'unica differenza è che dopo che l'immagine è stata caricata automaticamente nel tuo account, il codice copia e incolla ti fornirà l'URL ospitato sul cloud, ad esempio:
La terza opzione di esportazione che PNGHat fornisce è Base64, che emette la tua immagine come puro codice che può essere incorporato nel tuo progetto HTML, CSS o tela. Senza bisogno di un file immagine separato, l'elemento può essere caricato senza l'extra http richiesta e quindi può velocizzare il tempo di caricamento del progetto. Come per passare dall'esportazione locale a quella cloud, puoi selezionare Base64 nella parte superiore della finestra di PNGHat:
Il codice Base64 può essere utilizzato con HTML, CSS e canvas, ad esempio (codice abbreviato):
background-image: url (data: image / png; base64, iVBO ... FTkSuQmCC); larghezza: 108 px; altezza: 109 px;
var img = new Image (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'data: image / png; base64, iVBO ... FTkSuQmCC';
Nella mia esperienza, Base64 è particolarmente adatto per piccole immagini di sfondo e grafica ripetute con un numero limitato di colori. Ho anche trovato il modo più efficiente per utilizzare Base64 con i preprocessori CSS, quindi il codice che compone un'immagine può essere salvato come variabile, quindi può essere facilmente utilizzato più volte e aggiornato successivamente se necessario.
Una delle cose che trovo più impressionante di PNGHat è la facilità con cui è possibile esportare un PNG8 trasparente dall'aspetto eccezionale per mantenere basse le dimensioni dei file. Ho eseguito alcuni test utilizzando un mockup DVD di Graphic Burger, su un'immagine esportata a 758px * 758px senza alcuna modifica delle impostazioni, e ho scoperto due cose.
Innanzitutto, la differenza nella dimensione del file PNG24 tra l'esportazione predefinita di Photoshop e PNGHat era trascurabile di 6 KB. Quindi, data la dimensione del file era essenzialmente alla pari, sarei stato più propenso a usare l'esportazione PNGHat per questo tipo di file a causa di quanto sia più veloce e più facile.
Il secondo risultato, più convincente, è che PNGHat gestisce perfettamente la trasparenza dei file PNG8. Con le impostazioni di esportazione predefinite, Photoshop emetteva un file di soli 186 Kb, ma includeva le strisce bianche che puoi vedere nell'immagine sottostante. In generale, viene utilizzata la trasparenza in modo che un'immagine possa essere visualizzata in modo gradevole su qualsiasi sfondo in modo che il banding impedisca in genere l'uso di questo formato di esportazione.
D'altra parte, PNGHat ha generato un file PNG8 visivamente indistinguibile dai file PNG24, ma meno della metà delle loro dimensioni a 268KB rispetto a 642KB / 648Kb. Da dove sono seduto questo lo rende una scelta molto interessante per l'esportazione PNG trasparente ottimizzata.
PNGHat è in grado di tagliare automaticamente lo spazio intorno all'immagine che stai esportando, risparmiandoti la fatica di garantire che il ritaglio o le sezioni siano allineate perfettamente con i bordi dell'elemento. Il "pulsante Riproduci" del primo esempio in questo articolo è stato esportato utilizzando questa funzionalità di ritaglio, che consente di ritagliare correttamente senza ulteriori passaggi.
Per attivare l'opzione "Taglia", seleziona questa casella nella finestra di PNGHat:
Oltre a tagliare automaticamente un'immagine, hai anche la possibilità di selezionare specificamente la regione che desideri esportare. Si tratta semplicemente di creare una selezione di selezione prima di premere il pulsante di esportazione. Ad esempio, creando questa selezione prima dell'esportazione:
Ti darei questa immagine risultante:
Quando si lavora con immagini vettoriali si ha la possibilità di ridimensionare automaticamente l'immagine verso l'alto o verso il basso per varie esportazioni, in modo da poter gestire il supporto retina e anche potenzialmente creare più dimensioni di immagine per la reattività.
Per utilizzare il ridimensionamento, imposta la percentuale che desideri aumentare o diminuire nel campo "Scala" della finestra di PNGHat:
Il resto del processo rimane lo stesso, cioè seleziona livello / gruppo, pulsante. Con il nostro "pulsante Play" il risultato del ridimensionamento del 200% è:
Il modo più semplice per controllare il modo in cui i file esportati saranno nominati è tramite il tuo strato o gruppo nomi. Se hai selezionato un singolo gruppo o livello, il tuo file immagine verrà chiamato per abbinarlo, con spazi sostituiti da trattini. Se hai selezionato più gruppi e / o livelli, il tuo file sarà chiamato per corrispondere a quello che è più in alto nel tuo stack.
In alternativa, puoi anche controllare i PNGHat Nome del file di richiesta opzione nel pannello delle impostazioni della finestra e scegliere esplicitamente i nomi dei file su ogni esportazione.
Per raggiungere il pannello delle impostazioni, fai clic sulla piccola icona dell'ingranaggio nella parte inferiore della finestra:
Questo cambierà il display della finestra al seguente:
Per tornare indietro, fai nuovamente clic sull'icona a forma di ingranaggio.
PNGHat ti offre due formati di file tra cui scegliere: PNG e JPEG.
Quando si installa e si esegue PNGHat per la prima volta, l'opzione predefinita selezionata sarà, come ci si potrebbe aspettare, PNG. Tuttavia, per passare a JPEG è sufficiente attivare o disattivare il selettore nella finestra di PNGHat:
Puoi anche controllare le impostazioni di qualità delle tue immagini esportate andando al pannello delle impostazioni (descritto sopra) e:
PNGHat ti offre i cinque modelli di codice copia e incolla sopra descritti, tuttavia puoi anche modificare questi modelli e creare il tuo.
Un caso comune in cui si potrebbe voler modificare questi modelli è farli riflettere il percorso in cui verranno archiviate le immagini. In questo caso potresti cambiare il SENTIERO campo dal suo valore predefinito di / Static / images / FILE, a qualcosa di simile images / FILE, come ho fatto durante il mio primo utilizzo. Puoi anche modificare qualsiasi aspetto del modello principale, ad esempio aggiungendo border = 0 per l'HTML
Inoltre, puoi creare nuovi modelli se il tipo di codice che ti serve non è presente per impostazione predefinita. Per fare ciò, fare clic su + icona nella parte inferiore del pannello delle impostazioni, assegna un nuovo nome al modello e aggiungi il codice, utilizzando le variabili LARGHEZZA, ALTEZZA e SENTIERO comunque tu richiedi.
Anche solo attraverso il processo di scrittura di questo articolo ho sentito personalmente la differenza usando PNGHat, piuttosto che l'esportazione predefinita di Photoshop. Tutte le immagini che vedi qui sopra sono state generate da PNGHat, e ho trovato che mi ha risparmiato una quantità significativa di tempo. Oltre al risparmio di tempo, ho trovato anche il minimo premi il bottone processo molto più agevole, e il minor numero di passaggi che devo fare per ottenere un lavoro fatto il più felice io sono!
È possibile che occasionalmente io usi ancora l'esportazione nativa di Photoshop se una serie di circostanze lo richiede, ma per la maggior parte dei casi PNGHat sarà il mio metodo di esportazione da qui in avanti.
.
Accentsconagua
