How å eksportere Photoshop Eiendeler For Internett Med PNGHat
Sponset Innhold
Dette sponset post har et produkt som er relevant for våre lesere mens møte våre redaksjonelle retningslinjer for å være objektiv og pedagogisk.
Den nylig utgitte PNGHat plugin for Photoshop, laget av Source, skaper en helt annen arbeidsflyt for eksport av PSD elementer for bruk i nettsteder, spill, programmer eller hva andre typer prosjekter du designe for.
Det er en robust programvare med en bunke med god funksjonalitet, men den mest fristende funksjonen den har på tilbudet er dens evne til å koke eksport ned i tre enkle trinn:
TRINN 1:
Trykk på knappen
TRINN 2:
Copy & lime inn koden
TRINN 3:
Profit
Ok, så i all seriøsitet det er bare to trinn, men det virkelig er så enkelt. Plugin hovedsak eliminerer typisk Photoshop eksportprosessen av slicing, navngi skiver, som arbeider med overlapp slice områder, forhåndsvisning, velge optimalisering valg, velger eksport alternativer, sparer ut, deretter manuelt skrive opp koden for å integrere bildene inn i prosjektet. Anmeldelser
Det kan også trimme white-space rundt elementer automatisk, og håndtere flere oppløsning eksport for retina-støtte og responsive bildeteknikker. Bilder kan sendes ut lokalt på maskinen din, umiddelbart lastet opp til sky lagring, eller genereres som Base64 kode slik at du ikke trenger bildefiler i det hele tatt.
La oss starte med en titt i kjernen av plugin; trykknappen bilde eksportfunksjonalitet.
Push Button Eksporter
Eksportere bilder med PNGHat virkelig er så enkelt som det blir. For eksempel i denne mobilspill UI fra Graphic Burger, la oss si at du ønsker å eksportere "Play Button".
Først velger du laget (e) eller gruppe for "Play Button" :
Deretter klikker du på PNGHat Eksporter Valgte lag
knapp:
Og vips, du får en perfekt optimalisert PNG:
Det er den! I dette eksempelet vi dekket to museklikk og om en to andre vente.
Hvis du eksporterer bildene lokalt, kan du angi hvor de skal gå ved å klikke på ...
knappen vil du se mot høyre i den andre delen av PNGHat panelet, og blar til mappen du ønsker.
Det finnes flere andre alternativer du kan angi og finpusse, som vi vil dekke nedenfor, men i et nøtteskall som er hele prosessen; velge, trykknapp, gjort
Kopier &.; Lim koden
Samtidig som PNGHat utganger bildet, forbereder det også kopiere og lime klar kode slik at du enkelt kan innlemme det bildet inn i prosjektet. Du får HTML, CSS, lerret, Android og iOS-kode, for eksempel:
HTML:
< img src = "images /Play-btn.png" width = "108" height = "109" >
CSS:
background-image: url (images /Play-btn.png); width: 108px; høyde: 109px;
Lerret:
Var img = new bilde (); img.onload = function () {ctx.drawImage (img, 0, 0, 108, 109);}; img.src = 'images /Play-btn.png';
Android:
< ImageButton android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ strekkbare /Play-btn.png" />
iOS: product: [UIImage imageNamed: @ "Play-btn.png"]
Herfra du bare trykke på "Kopier" -knappen på PNGHat vinduet, og du er klar til å lime rett inn i din aktuelle prosjektet filen:
< h2> Innebygd Cloud /CDN Hosting
I stedet for å måtte FTP bildene dine etter eksport, gir PNGHat deg muligheten til å kjapt laste opp bildene dine til skyen lagrings de gir. I øyeblikket plugin kommer med 1 GB gratis nettskylagring, med bilder som leveres via CDN slik at brukerne blir servert fra nærmeste mulig plassering.
Eksportere bilder for inkludert hosting er absolutt ikke annerledes til prosessen for lokal eksport . For å aktivere automatisk opplasting du velger "Cloud" fra den første delen av PNGHat vinduet:
Derfra bruker du den samme "velg" og "push button" tilnærming som beskrevet ovenfor. Den eneste forskjellen er at etter at bildet blir automatisk lastet opp til kontoen din, vil kopiere og lime inn koden du får skyen vert URL for eksempel:
< img src = "http://piff.ly/4077 /2e404609f9b571eff1f24fd558ebd0e25cecf44f/Play-btn.png "width =" 108 "height =" 109 ">
Base64
Den tredje eksportmuligheten PNGHat gir er Base64, som sender ut bildet ditt som ren kode som kan bli innarbeidet i prosjektets HTML, CSS eller lerret. Uten behov for en separat bildefil, kan elementet bli lastet uten ekstra http forespørsel og dermed kan få fart på prosjektet lastetid. Som med veksling mellom lokale og sky eksport, kan du velge Base64 på toppen av PNGHat vinduet:
Base64 koden kan brukes med HTML, CSS og lerret, for eksempel (forkortet kode):
HTML
< img src = "data: image /png, base64, iVBO ...... FTkSuQmCC" width = "108" height = "109" >
CSS
background-image: url (data: image /png, base64, iVBO ...... FTkSuQmCC); width: 108px; høyde: 109px;
Canvas
Var img = new Image (); img.onload = function () {ctx.drawImage (img, 0, 0, 108, 109);}; img.src = 'data: image /png, base64, iVBO ...... FTkSuQmCC ';
I min erfaring, er Base64 spesielt stor for små gjentatte bakgrunnsbilder og grafikk med et begrenset antall farger. Jeg har også funnet den mest effektive måten å gjøre bruk av Base64 er med CSS preprocessors, så koden som gjør opp et bilde kan lagres som en variabel da lett brukes flere ganger og oppdatert senere hvis behov.
Awesome Transparent PNG8
En av de tingene jeg synes er mest imponerende om PNGHat er den enkle som du kan eksportere et flott utseende gjennomsiktig PNG8 for å holde filstørrelser lav. Jeg kjørte noen tester ved hjelp av en DVD mockup fra Graphic Burger, på et bilde eksportert på 758px * 758px uten noen innstillinger tweaks, og oppdaget to ting.
Først, forskjellen i PNG24 filstørrelse mellom Photoshop standard eksport og PNGHat var en ubetydelig 6KB. Så gitt filstørrelse var i hovedsak på linje jeg vil være mer sannsynlig å bruke PNGHat eksport for denne filtypen grunnet hvor mye raskere og enklere det er.
Den andre, og mer overbevisende resultat, var det ut fra boksen PNGHat håndterer åpenhet PNG8 filer vakkert. Med standard eksportinnstillinger Photoshop gjorde utgang en fil som var bare 186Kb, men det inkludert den hvite striper du kan se på bildet nedenfor. Generelt er åpenhet brukt så et bilde kan vise pent over en bakgrunn slik at banding vanligvis ville utelukke denne eksportformat fra bruk.
PNGHat derimot generert en PNG8 fil som var visuelt skille fra de PNG24 filer , men mindre enn halvparten av størrelsen på 268KB vs 642KB /648Kb. Fra der jeg sitter som gjør det til et svært attraktivt valg for optimalisert gjennomsiktig PNG eksport.
Trim White Space
PNGHat er i stand til å automatisk trimme plass rundt bildet du eksporterer, sparer deg bryet med å sikre beskjæring eller skiver er lined opp perfekt med kantene av elementet. "Play-knappen" fra det første eksemplet i denne artikkelen ble eksportert ved hjelp av denne trimming funksjonalitet, slik at det å være riktig beskjæres uten ekstra skritt tatt.
For å aktivere "Trim" alternativet, bare sjekk denne boksen i den PNGHat vinduet:
Velge området for Export
I tillegg til automatisk trimming rundt et bilde, har du også muligheten til å spesifikt velge området du ønsker å eksportere. Dette er bare et spørsmål om å lage et stort telt utvalg før du treffer eksport knappen. For eksempel, skaper dette valget før eksport:
Vil gi deg dette biletet:
Skalering Images
Når du arbeider med vektorbaserte bilder du har muligheten til å automatisk skalere bildet opp eller ned for ulike eksport, slik at du kan håndtere retina-støtte og også potensielt skape flere bildestørrelser for respons.
For å bruke skalering Oppgi prosent du ønsker å øke eller redusere med i "Scale" -feltet i PNGHat vinduet:
Resten av prosessen er fortsatt igjen det samme, altså velger lag /gruppe, trykknapp. Med vår "Play knappen" resultatet av skalering med 200% er:
Kontroll av bildefilnavn
Den enkleste måten å kontrollere hvordan de eksporterte filene skal hete er via din < b> lag
eller gruppe
navn. Hvis du har en enkelt gruppe eller lag valgte bildefilen vil bli navngitt for å matche det, med mellomrom erstattet med bindestrek. Hvis du har valgt flere grupper og eller lag, vil filen bli navngitt for å matche det som finnes øverst i bunken.
Alternativt kan du også sjekke PNGHat Spør filnavnet
alternativ i innstillingene vinduets panel og eksplisitt velger filnavnene på hver eksport.
Nå Innstillinger Panel
For å komme til innstillingspanelet, klikker du den lille tannhjulikonet nederst i vinduet :
Dette vil slå vinduets displayet til følgende:
Hvis du vil bytte tilbake igjen, klikker du på tannhjulikonet en gang
Velge Bildeeksportvalg <. br>
PNGHat gir deg to filformater å velge mellom. PNG og JPEG
Når du først installere og kjøre PNGHat standardalternativet velges vil være, som du kanskje forventer, PNG. Men å bytte til JPEG bare veksle velgeren i PNGHat vinduet:
Du kan også styre kvalitetsinnstillingene for eksporterte bilder ved å gå til innstillingspanelet (beskrevet ovenfor) og:
< li> Velge mellom PNG8 og PNG24
Oppdatering av eller fjerne Optimize PNG
Oppdatering av eller fjerne Progressive JPEG
Angi en JPEG kvalitetsnivå ut av en mulig 100
Styre Kopier og Lim Maler
Ut av boksen PNGHat gir deg de fem kopier og lim inn kode maler beskrevet over, men du kan også redigere disse malene, samt lage din egen.
En vanlig sak der du kanskje ønsker å redigere disse malene er å ha dem reflektere banen bildene blir oppbevares ved. I dette tilfellet kan du endre {PATH} feltet fra sin standard /statisk /images /{FILE}, noe som bilder /{FILE}, som jeg gjorde under min første bruk. Du kan også endre noen aspekter av hoved mal, slik som kanskje legge border = 0 til HTML < img > tag, eller noe annet du trenger til ditt prosjekt.
I tillegg kan du lage nye maler hvis type koden du trenger ikke finnes som standard. For å gjøre dette, klikker du på +
ikonet nær bunnen av innstillingspanelet, gi den nye malen et navn og legge til koden, ved hjelp av variablene {width}, {HEIGHT} og {PATH} men du trenger .
Wrapping Up
Selv bare gjennom prosessen med å skrive denne artikkelen jeg personlig følte virkelig forskjellen hjelp PNGHat, snarere enn standard Photoshop eksport. Alle bildene du ser ovenfor ble generert av PNGHat, og jeg fant det reddet meg en betydelig mengde tid. Samt tidsbesparelse, fant jeg også minimal knapp
prosessen mye jevnere, og færre trinn jeg må ta for å få en jobb gjort jo gladere er jeg!
Det er mulig det kan være en og annen gang jeg fortsatt bruke den innfødte Photoshop eksport hvis et sett av omstendigheter virkelig krever det, men for de fleste tilfeller PNGHat skal jeg gå å eksportere metoden fra her på ut.
Du kan lære mer om PNGHat, og også se en video av plugin i aksjon på PNGHat nettstedet. Anmeldelser