Share
Den nylig utgitte PNGHat-plugin for Photoshop, laget av Source, skaper en helt annen arbeidsflyt for eksport av PSD-elementer til bruk på nettsteder, spill, apps eller andre typer prosjekter du designer for.
Det er en robust programvare med en stabel med flott funksjonalitet, men den mest fristende funksjonen den har på tilbud, er dens evne til å koke eksportere ned i tre enkle trinn:
TRINN 1: Trykknapp
STEG 2: Kopier og lim inn kode
TRINN 3: Profitt!
Ok, så i all alvor er det bare to trinn, men det er så enkelt. Plugin eliminerer i hovedsak den typiske Photoshop-eksportprosessen med skiver, navngi skiver, håndtere overlappende skiveområder, forhåndsvise, velge optimaliseringsvalg, velge eksportalternativer, lagre ut, og manuelt skrive opp kode for å integrere bildene i prosjektet.
Det kan også trimme hvit plass rundt elementene automatisk, og håndtere flere oppløsningseksporter for retina-støtte og lydhørsteknikker. Bilder kan sendes lokalt på datamaskinen din, umiddelbart lastet opp til skylagring, eller til og med generert som Base64-kode, slik at du ikke trenger bildefiler i det hele tatt..
La oss starte med en titt på kjernen i pluginet; Trykkknappens bildeeksportfunksjonalitet.
Det er like enkelt å eksportere bilder ved hjelp av PNGHat. For eksempel, i dette mobilspillgrensesnittet fra Graphic Burger, la oss si at du vil eksportere "Play Button".
Først velger du laget (e) eller gruppen for "Play Button":
Deretter klikker du på PNGHat Eksporter valgte lag knapp:
Og hei presto, du får en perfekt optimalisert PNG:
Det er det! I dette eksemplet dekket vi to museklikk og om en ventetid på to sekunder.
Hvis du eksporterer bildene dine lokalt, kan du angi hvor de skal gå, ved å klikke på ... knappen vil du se til høyre for den andre delen av PNGHat-panelet, og deretter bla til den mappen du ønsker.
Det finnes forskjellige andre alternativer du kan sette og justere, som vi vil dekke under, men i et nøtteskall er det hele prosessen; velg, trykknapp, ferdig.
Samtidig som PNGHat utfører bildet ditt, forbereder det seg også kopi og lim inn klar kode, slik at du enkelt kan inkorporere bildet i prosjektet. Du får HTML, CSS, lerret, Android og iOS-kode, for eksempel:
bakgrunnsbilde: url (images_14 / how-to-export-photoshop-eiendeler-for-web-med-pnghat_4.png); bredde: 108px; høyde: 109px;
var img = nytt bilde (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-assets-for-the-web-med-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Herfra klikker du bare på "Kopier" -knappen i PNGHat-vinduet, og du er klar til å lime inn i din relevante prosjektfil:
I stedet for å måtte FTP bildene dine etter eksport, gir PNGHat deg muligheten til å laste opp bildene dine øyeblikkelig til skylagringsplassen de oppgir. For øyeblikket leveres plugin med 1 GB gratis skylagring, med bilder levert via CDN, slik at brukerne blir servert fra nærmeste mulige sted.
Eksportere bilder for den medfølgende hosting er ikke helt annerledes enn prosessen for lokal eksport. For å aktivere automatisk opplasting velger du "Cloud" -alternativet fra den første delen av PNGHat-vinduet:
Derfra bruker du samme "select" og "push-button" tilnærming som beskrevet ovenfor. Den eneste forskjellen er at etter at bildet automatisk er lastet opp til kontoen din, vil kopien og lime-koden gi deg den nettleseren som er vert for nettleseren, for eksempel:
Det tredje eksportalternativet PNGHat gir er Base64, som lager bildet ditt som ren kode som kan innlemmes i prosjektets HTML, CSS eller lerret. Uten at du trenger en egen bildefil, kan elementet lastes uten ekstra http forespørsel og dermed kan øke hastigheten på prosjektets belastningstid. Som ved bytte mellom lokal og sky eksport, kan du velge Base64 øverst i PNGHat-vinduet:
Base64-koden kan brukes med HTML, CSS og lerret, for eksempel (forkortet kode):
bakgrunnsbilde: url (data: image / png; base64, iVBO ... FTkSuQmCC); bredde: 108px; høyde: 109px;
var img = nytt bilde (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'data: image / png; base64, iVBO ... FTkSuQmCC';
I min erfaring er Base64 spesielt bra for små gjentatte bakgrunnsbilder og grafikk med et begrenset antall farger. Jeg har også funnet den mest effektive måten å benytte seg av Base64 med CSS preprocessors, slik at koden som lager et bilde, kan lagres som en variabel og deretter enkelt brukes flere ganger og oppdateres senere hvis det er behov.
En av de tingene jeg synes mest imponerende om PNGHat, er det enkle som du kan eksportere en flott gjennomsiktig PNG8 for å holde filstørrelsen lav. Jeg løp noen tester ved hjelp av en DVD-mockup fra Graphic Burger, på et bilde som ble eksportert på 758px * 758px uten noen innstillinger tweaks, og oppdaget to ting.
For det første var forskjellen i PNG24 filstørrelse mellom Photoshop standard eksport og PNGHat en ubetydelig 6Kb. Så gitt filstørrelse var hovedsakelig på linje Jeg ville være mer sannsynlig å bruke PNGHat-eksport for denne filtypen på grunn av hvor mye raskere og lettere det er.
Det andre, og mer overbevisende resultatet, var at ut av esken PNGHat håndterer gjennomsiktigheten av PNG8-filer vakkert. Med standard eksportinnstillinger utførte Photoshop en fil som bare var 186 kb, men den inkluderte den hvite båndet du kan se på bildet nedenfor. Generelt sett er gjennomsiktighet brukt, slik at et bilde kan vises pent over en hvilken som helst bakgrunn, slik at bandingen vanligvis utelukker dette eksportformatet fra bruk.
PNGHat genererte derimot en PNG8-fil som var visuelt skilt fra PNG24-filene, men mindre enn halvparten av størrelsen på 268KB mot 642KB / 648Kb. Fra hvor jeg sitter som gjør det til et veldig attraktivt valg for optimalisert gjennomsiktig PNG-eksport.
PNGHat kan automatisk trimme plassen rundt bildet du eksporterer, og sparer deg for å sørge for at beskjæring eller skiver er foret opp med kantene på elementet. "Play-knappen" fra det første eksemplet i denne artikkelen ble eksportert ved hjelp av denne trimmingsfunksjonaliteten, slik at den kunne klippes riktig uten ekstra skritt tatt.
For å aktivere "Trim" -alternativet, merk av denne boksen i PNGHat-vinduet:
I tillegg til å automatisk trimme rundt et bilde, har du også mulighet til å spesifikt velge regionen du vil eksportere. Dette handler bare om å skape et markeringsvalg før du trykker på eksportknappen. For eksempel lager dette valget før eksport:
Ville gi deg dette resulterende bildet:
Når du arbeider med vektorbaserte bilder, har du muligheten til å automatisk skalere bildet opp eller ned for ulike eksporter, slik at du kan håndtere netthinnen og potensielt opprette flere bildestørrelser for lydhørhet.
For å bruke skalering, angi prosentandelen du vil øke eller redusere med i "Skala" -feltet i PNGHat-vinduet:
Resten av prosessen forblir igjen den samme, dvs. valgt lag / gruppe, trykknapp. Med vår "Play-knapp" er resultatet av skalering med 200%:
Den enkleste måten å kontrollere hvordan dine eksporterte filer vil bli navngitt, er via din lag eller gruppe navn. Hvis du har en enkelt gruppe eller et lag valgt, vil bildefilen bli navngitt for å matche den, med mellomrom erstattet av bindestreker. Hvis du har valgt flere grupper og eller lag, vil filen bli navngitt for å matche det som er øverst i stakken.
Alternativt kan du også sjekke PNGHat Spør filnavn alternativet i vinduets innstillingspanel og velg filnavnene dine eksplisitt på hver eksport.
For å komme til innstillingspanelet, klikk på det lille tannhjulikonet nederst i vinduet:
Dette vil bytte vinduets display til følgende:
For å bytte tilbake igjen, klikk på tannhjulikonet en gang til.
PNGHat gir deg to filformater å velge mellom: PNG og JPEG.
Når du først installerer og kjører PNGHat, blir standardalternativet valgt, som du forventer, PNG. Men for å bytte til JPEG, velg velgeren i PNGHat-vinduet:
Du kan også kontrollere kvalitetsinnstillingene for dine eksporterte bilder ved å gå til innstillingspanelet (beskrevet ovenfor) og:
Ut av boksen gir PNGHat de fem eksemplarene for kopiering og liming av kode som er beskrevet ovenfor, men du kan også redigere disse malene, samt lage dine egne.
Et vanlig tilfelle der du kanskje vil redigere disse malene, er å få dem til å reflektere banen du vil lagre bildene på. I dette tilfellet kan du endre STI feltet fra standardinnstillingen til / Statisk / bilder / FILE, til noe som helst bilder / FILE, som jeg gjorde under min første bruk. Du kan også endre et hvilket som helst aspekt av hovedmalen, for eksempel kanskje å legge til border = 0 til HTML
I tillegg kan du opprette nye maler hvis den typen kode du trenger ikke er til stede som standard. For å gjøre det, klikk på + ikonet nede på bunnen av innstillingspanelet, gi den nye mal et navn og legg til koden din ved hjelp av variablene BREDDE, HØYDE og STI men du trenger det.
Selv gjennom prosessen med å skrive denne artikkelen, følte jeg egentlig virkelig forskjellen ved hjelp av PNGHat, i stedet for standard Photoshop-eksporten. Alle bildene du ser over, ble generert av PNGHat, og jeg fant det reddet meg betydelig tid. I tillegg til tidsbesparelsen fant jeg også minimal trykknapp prosess mye jevnere, og jo færre trinn jeg må ta for å få en jobb gjort, jo lykkeligere er jeg!
Det er mulig at det kan være en og annen gang jeg fortsatt bruker den native Photoshop-eksporten hvis et sett av omstendigheter virkelig krever det, men for de fleste tilfeller vil PNGHat være min gå for å eksportere metode herfra.
.
Accentsconagua
