Share
Pluginul PNGHat recent lansat pentru Photoshop, realizat de Source, creează un flux de lucru complet diferit pentru exportul elementelor PSD pentru utilizarea în site-uri, jocuri, aplicații sau orice alte tipuri de proiecte pe care le proiectați.
Este un software robust, cu o mulțime de funcționalități excelente, dar caracteristica cea mai atrăgătoare pe care o oferă este abilitatea de a fierbe exportul în trei pași simpli:
PASUL 1: Apasa butonul
PASUL 2: Copiați și lipiți codul
PASUL 3: Profit!
Bine, deci cu toată seriozitatea sunt doar doi pași, dar într-adevăr este așa de ușor. Pluginul elimină în mod esențial procesul de export al tăierii tipice Photoshop, numirea de felii, rezolvarea suprafețelor care se suprapun, previzualizarea, selectarea opțiunilor de optimizare, alegerea opțiunilor de export, salvarea, apoi scrierea manuală a codului pentru integrarea imaginilor în proiect.
De asemenea, poate să ajusteze în mod automat spațiul alb în jurul elementelor și să rezolve exporturile de rezoluții multiple pentru suportul retinei și tehnici de imagine receptive. Imaginile pot fi transmise local pe computer, încărcate instantaneu în spațiul de stocare în cloud sau chiar generate ca cod Base64, astfel încât să nu aveți nevoie de fișiere de imagine la toate.
Să începem cu o privire asupra nucleului pluginului; funcția de export a imaginii butonului de tipărire.
Exportul de imagini folosind PNGHat este într-adevăr la fel de ușor pe cât se întâmplă. De exemplu, în acest UI Mobile Game de la Graphic Burger, să presupunem că doriți să exportați butonul "Play Button".
Mai întâi, selectați stratul (straturile) sau grupul pentru "butonul de redare":
Apoi faceți clic pe PNGHat Exportați straturile selectate buton:
Și hey presto, ai un PNG perfect optimizat:
Asta e! În acest exemplu am acoperit două clicuri de mouse și aproximativ două secunde așteptați.
Dacă vă exportați imaginile pe plan local, puteți seta locul unde ar trebui să meargă făcând clic pe ... pe care îl veți vedea spre partea dreaptă a celei de-a doua secțiuni a panoului PNGHat, apoi navigați la dosarul ales.
Există diferite alte opțiuni pe care le puteți seta și optimiza, pe care le vom acoperi mai jos, dar pe scurt, acesta este întregul proces; selectați, apăsați butonul, terminat.
În același timp, când imaginile PNGHat ies la ieșire, se pregătește și copierea și lipirea codului gata, astfel încât să puteți încorpora cu ușurință acea imagine în proiectul dvs. Veți primi cod HTML, CSS, canvas, Android și iOS, de exemplu:
background-image: url (images_14 / how-to-export-photoshop-assets-for-the-web-with-pnghat_4.png); lățime: 108px; înălțime: 109px;
var img = imagine nouă (); img.onload = funcția () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / cum-la-export-photoshop-assets-for-the-web-with-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
De aici tocmai ați apăsat pe butonul "Copiere" din fereastra PNGHat și sunteți gata să inserați direct în fișierul de proiect relevant:
În loc de a avea nevoie de FTP imaginile dvs. după export, PNGHat vă oferă opțiunea de a încărca instantaneu imaginile dvs. în spațiul de stocare în cloud pe care îl oferă. În momentul în care plugin-ul vine cu 1 GB de stocare gratuită în cloud, cu imagini livrate prin CDN, utilizatorii sunt serviți din cea mai apropiată locație posibilă.
Exportul de imagini pentru hostingul inclus nu este absolut diferit de procesul de export local. Pentru a activa încărcarea automată, selectați opțiunea "Cloud" din prima secțiune a ferestrei PNGHat:
De acolo, utilizați aceeași abordare "selectare" și "apăsare", așa cum este descris mai sus. Singura diferență este că, după ce imaginea este încărcată automat în cont, codul de copiere și lipire vă va oferi adresa URL găzduită în cloud, de exemplu:
Cea de-a treia opțiune de export pe care o oferă PNGHat este Base64, care vă transmite imaginea ca un cod pur care poate fi încorporată în HTML, CSS sau panza proiectului. Fără nevoie de un fișier de imagine separat, elementul poate fi încărcat fără extra http solicită și, prin urmare, poate accelera timpul de încărcare al proiectului. Ca și în cazul comutării între exportul local și cel din cloud, puteți selecta Base64 în partea de sus a ferestrei PNGHat:
Codul Base64 poate fi folosit cu HTML, CSS și panza, de exemplu (cod abreviat):
fundal-imagine: url (date: imagine / png; base64, iVBO ... FTkSuQmCC); lățime: 108px; înălțime: 109px;
var img = imagine nouă (); img.onload = funcția () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'date: imagine / png; base64, iVBO ... FTkSuQmCC';
În experiența mea, Base64 este deosebit de minunat pentru imaginile de fundal repetate și grafice mici, cu un număr limitat de culori. De asemenea, am descoperit că modul cel mai eficient de a face uz de Base64 este cu preprocesoarele CSS, astfel încât codul care alcătuiește o imagine poate fi salvat ca o variabilă, apoi folosit cu ușurință de mai multe ori și actualizat ulterior dacă este necesar.
Unul dintre lucrurile pe care le-am găsit cel mai impresionant pentru PNGHat este ușurința cu care poți exporta un PNG8 transparent transparent, pentru a menține dimensiunile fișierelor mici. Am rulat câteva teste utilizând un machet DVD de la Graphic Burger, pe o imagine exportată la 758px * 758px fără nici o corecție a setărilor și am descoperit două lucruri.
În primul rând, diferența dintre dimensiunea fișierului PNG24 între exportul implicit Photoshop și PNGHat a fost de 6Kb neglijabilă. Deci, dimensiunea fișierului dată a fost în esență pe par, aș fi mult mai probabil să utilizez exportul PNGHat pentru acest tip de fișier din cauza cât de mult mai rapid și mai ușor este.
Cel de-al doilea și mai convingător rezultat a fost că din cutie PNGHat se ocupă de transparența fișierelor PNG8 frumos. Cu setările de export implicite, Photoshop a realizat un fișier de numai 186 KB, dar a inclus și bandajul alb pe care îl puteți vedea în imaginea de mai jos. În general vorbind, transparența este utilizată astfel încât o imagine să poată fi afișată frumos pe orice fundal, astfel încât banditul ar împiedica în mod normal utilizarea acestui format de export.
PNGHat, pe de altă parte, a generat un fișier PNG8 care nu putea fi identificat vizual din fișierele PNG24, dar mai puțin de jumătate din dimensiunea lor la 268KB vs 642KB / 648Kb. De unde stau, o face o alegere foarte atrăgătoare pentru exportul PNG optimizat transparent.
PNGHat poate tăia automat spațiul din jurul imaginii pe care o exportați, economisind astfel dificultăți în a vă asigura că tăierea sau tăierea sunt perfect aliniate cu marginile elementului. Butonul "Redare" de la primul exemplu din acest articol a fost exportat utilizând această funcționalitate de decupare, permițându-i să fie tăiat corect fără a fi luate măsuri suplimentare.
Pentru a activa opțiunea "Trim", trebuie doar să bifați această casetă în fereastra PNGHat:
Pe lângă tăierea automată în jurul unei imagini, aveți opțiunea de a selecta în mod specific regiunea pe care doriți să o exportați. Aceasta este doar o problemă de a crea o selecție de marquee înainte de a apăsa butonul de export. De exemplu, crearea acestei selecții înainte de export:
V-ar da această imagine care rezultă:
Când lucrați cu imagini pe bază de vectori, aveți opțiunea de a vă scala automat imaginea în sus sau în jos pentru diverse exporturi, astfel încât să puteți gestiona suportul pentru retină și, de asemenea, să creați mai multe dimensiuni de imagine pentru a răspunde.
Pentru a utiliza scalarea, setați procentajul pe care doriți să îl măriți sau micșorați în câmpul "Scale" din fereastra PNGHat:
Restul procesului rămâne din nou același, adică selectați stratul / grupul, butonul de apăsare. Cu butonul "Redare" rezultatul scalării cu 200% este:
Cel mai simplu mod de a controla cum vor fi numite fișierele dvs. exportate este prin intermediul dvs. strat sau grup nume. Dacă aveți un singur grup sau un strat selectat, fișierul imagine va fi denumit pentru a se potrivi, iar spațiile vor fi înlocuite cu cratime. Dacă ați selectat mai multe grupuri și / sau straturi, fișierul dvs. va fi numit astfel încât să se potrivească cu cele mai înalte din stivă.
Alternativ, puteți verifica, de asemenea, PNGHat Numele de fișier solicitat în fereastra de setări a ferestrei și alegeți în mod explicit numele fișierelor pentru fiecare export.
Pentru a ajunge la panoul de setări, faceți clic pe pictograma roată mică din partea inferioară a ferestrei:
Aceasta va comuta afișajul ferestrei la următoarele:
Pentru a reveni din nou, faceți clic a doua oară pe pictograma roată.
PNGHat vă oferă două formate de fișiere pentru a alege: PNG și JPEG.
Când instalați și executați pentru prima dată PNGHat, opțiunea implicită selectată va fi, așa cum s-ar putea aștepta, PNG. Cu toate acestea, pentru a comuta la JPEG trebuie doar să comutați selectorul în fereastra PNGHat:
De asemenea, puteți să controlați setările de calitate ale imaginilor exportate accesând panoul de setări (descris mai sus) și:
Din casetă PNGHat vă oferă cele cinci șabloane de copiere și paste descrise mai sus, cu toate acestea puteți să editați aceste șabloane, precum și să creați propriile.
Un caz comun în care ați putea dori să editați aceste șabloane este să le determinați să reflecte calea la care vor fi stocate imaginile. În acest caz s-ar putea schimba CALE câmpul de la default / Static / images / FILE, la ceva asemănător images / FILE, așa cum am făcut în timpul primei utilizări. De asemenea, puteți schimba orice aspect al șablonului principal, cum ar fi adăugarea acestuia border = 0 la HTML
În plus, puteți crea șabloane noi dacă tipul de cod de care aveți nevoie nu este prezent în mod implicit. Pentru aceasta, faceți clic pe + pictograma din partea de jos a panoului cu setări, dați șablonului nou un nume și adăugați codul, utilizând variabilele LĂŢIME, ÎNĂLŢIME și CALE totuși doriți.
Chiar chiar prin procesul de scriere a acestui articol, am simțit cu adevărat diferența folosind PNGHat, mai degrabă decât exportul implicit Photoshop. Toate imaginile pe care le vezi mai sus au fost generate de PNGHat și mi sa părut că mi-a salvat o perioadă semnificativă de timp. Pe lângă economia de timp, mi-am găsit și minuscul apasa butonul procese mult mai netede și cât mai puțini pași pe care trebuie să le iau pentru a-mi face o treabă, eu sunt mai fericit!
Este posibil să existe timpul ocazional pe care îl folosesc în continuare exportul nativ Photoshop, dacă într-adevăr o cer o serie de circumstanțe, dar pentru majoritatea cazurilor PNGHat va fi metoda mea de export de aici de pe aici.
.
Accentsconagua
