Share
Det nyligen släppta PNGHat-pluginet till Photoshop, skapat av Source, skapar ett helt annat arbetsflöde för export av PSD-element för användning på webbplatser, spel, appar eller andra typer av projekt du designar för.
Det är en robust programvara med en stack av bra funktionalitet, men den mest lockande funktionen den har att erbjuda är dess förmåga att koka exportera ner i tre enkla steg:
STEG 1: Tryckknapp
STEG 2: Kopiera och klistra in kod
STEG 3: Vinst!
Okej, så allvarligt är det bara två steg, men det är så enkelt. Pluggen eliminerar väsentligen den typiska Photoshop-exportprocessen med skivning, namngivning av skivor, hantering av överlappande skivor, förhandsgranskning, val av optimeringsval, val av exportalternativ, lagring och manuellt skrivning av kod för att integrera bilderna i ditt projekt.
Det kan också trimma vitt utrymme runt element automatiskt, och hantera flera upplösningsexporter för näthinnans stöd och responsiva bildtekniker. Bilder kan matas ut lokalt på din dator, direkt uppladdad till molnlagring, eller till och med genererade som Base64-kod så att du inte behöver behöva bildfiler alls.
Låt oss börja med en titt på pluginets kärna; tryckknappens bild exportfunktionalitet.
Att exportera bilder med PNGHat är så enkelt som möjligt. Till exempel, i det här mobilspel-gränssnittet från Graphic Burger, låt oss säga att du vill exportera "Play Button".
Först väljer du lagret eller grupperna för "Play Button":
Då klickar du på PNGHat Exportera valda lager knapp:
Och hej presto, du får en perfekt optimerad PNG:
Det är allt! I det här exemplet täckte vi två musklick och om en två sekunders väntan.
Om du exporterar dina bilder lokalt kan du ställa in var de ska gå genom att klicka på ... knappen ser du till höger om den andra delen av PNGHat-panelen och bläddrar sedan till den mapp du vill ha.
Det finns olika andra alternativ som du kan ställa in och finjustera, vilket vi kommer att täcka under, men i ett nötskal är hela processen. välj, tryckknapp, klar.
Samtidigt som PNGHat matar ut din bild, förbereder den också kopiera och klistra in klar kod så att du enkelt kan ta med den bilden i ditt projekt. Du får HTML, CSS, kanfas, Android och iOS-kod, till exempel:
bakgrundsbild: url (images_14 / how-to-export-photoshop-tillgångar-för-webben-med-pnghat_4.png); bredd: 108px; höjd: 109px;
var img = ny bild (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-tillgångar-för-webben-med-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Härifrån klickar du bara på "Kopiera" -knappen i PNGHat-fönstret och du är redo att klistra in direkt i din relevanta projektfil:
I stället för att behöva FTP dina bilder efter export, ger PNGHat dig möjlighet att omedelbart ladda upp dina bilder till det molnlager de tillhandahåller. För närvarande levereras plugin med 1 GB gratis molnlagring, med bilder som levereras via CDN så att användarna serveras från närmaste möjliga plats.
Exportera bilder till den medföljande hosting är absolut inte annorlunda för processen för lokal export. För att aktivera automatisk uppladdning väljer du alternativet "Cloud" från den första delen av PNGHat-fönstret:
Därifrån använder du samma "välj" och "tryckknapp" -metoden som beskrivits ovan. Den enda skillnaden är att efter att bilden automatiskt har laddats upp till ditt konto, kommer kopiera och klistra in koden att ge dig den molnvärda webbadressen till exempel:
Det tredje exportalternativet PNGHat ger är Base64, som matar ut din bild som ren kod som kan integreras i ditt projekts HTML, CSS eller kanfas. Utan att behöva en separat bildfil kan elementet laddas utan extra http begäran och därmed kan påskynda ditt projekts laddningstid. Precis som vid byte mellan lokal och molnexport kan du välja Base64 högst upp i PNGHat-fönstret:
Base64-koden kan användas med HTML, CSS och kanfas, till exempel (förkortad kod):
bakgrundsbild: url (data: image / png; base64, iVBO ... FTkSuQmCC); bredd: 108px; höjd: 109px;
var img = ny bild (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'data: image / png; base64, iVBO ... FTkSuQmCC';
Enligt min erfarenhet är Base64 speciellt bra för små repeterande bakgrundsbilder och grafik med ett begränsat antal färger. Jag har också hittat det mest effektiva sättet att använda Base64 med CSS-förprocessorer, så koden som bildar en bild kan sparas som en variabel, så att den lätt kan användas flera gånger och uppdateras senare om det behövs.
En av de saker jag tycker mest imponerande om PNGHat är den lätthet som du kan exportera en snygg transparent PNG8 för att hålla filstorlekarna låga. Jag körde några tester med en DVD-mockup från Graphic Burger på en bild som exporterades på 758px * 758px utan några inställningar tweaks och upptäckte två saker.
För det första var skillnaden i PNG24-filstorlek mellan Photoshop standard export och PNGHat en försumbar 6Kb. Så given filstorlek var väsentligen på nivå. Jag skulle vara mer benägen att använda PNGHat-export för denna filtyp på grund av hur mycket snabbare och enklare det är.
Det andra och mer övertygande resultatet var att ut ur lådan hanterar PNGHat vackert öppenhet i PNG8-filer. Med standardinställningar för export utförde Photoshop en fil som bara var 186kb, men den inkluderade den vita bandningen som du kan se i bilden nedan. Generellt sett används transparens så att en bild kan visa sig snyggt över vilken bakgrund som helst, så att bandningen typiskt skulle utesluta detta exportformat från användning.
PNGHat å andra sidan genererade en PNG8-fil som visuellt kunde skilja sig från PNG24-filerna, men mindre än hälften av deras storlek vid 268KB jämfört med 642KB / 648Kb. Från där jag sitter gör det ett mycket tilltalande val för optimerad transparent PNG-export.
PNGHat kan automatiskt trimma utrymmet runt bilden du exporterar, vilket sparar dig besväret att se till att beskärning eller skivor är perfekt anpassade till elementets kanter. "Spela-knappen" från det första exemplet i den här artikeln exporterades med hjälp av denna trimningsfunktionalitet, så att den kan klippas korrekt utan extra steg.
För att aktivera alternativet "Trim" markerar du den här rutan i PNGHat-fönstret:
Förutom att automatiskt trimma runt en bild har du också möjlighet att specifikt välja region du vill exportera. Det här handlar bara om att skapa ett markeringsval innan du trycker på exportknappen. Till exempel skapar du detta urval före export:
Skulle ge dig den här bilden:
När du arbetar med vektorbaserade bilder kan du automatiskt skala din bild upp eller ner för olika export, så att du kan hantera näthinnans stöd och eventuellt skapa flera bildstorlekar för respons.
För att använda skalning anger du procentandelen som du vill öka eller minska med i fältet "Skala" i PNGHat-fönstret:
Resten av processen förblir återigen densamma, dvs välj skikt / grupp, tryckknapp. Med vår "Play-knapp" är resultatet av skalning med 200%:
Det enklaste sättet att styra hur dina exporterade filer kommer att namnges är via din lager eller grupp namn. Om du har en enda grupp eller ett lag valt din bildfil att matcha den, med mellanslag som ersätts av bindestreck. Om du har valt flera grupper och eller lager kommer din fil att namngöras för att matcha vad som helst överst i din stack.
Alternativt kan du också kolla PNGHats Snabb filnamn alternativet i fönstrets inställningspanel och uttryckligen välja dina filnamn på varje export.
För att nå inställningspanelen, klicka på den lilla kugghjulsikonen längst ner i fönstret:
Detta kommer att ändra fönstrets display till följande:
För att växla tillbaka igen, klicka på växelsymbolen en gång till.
PNGHat ger dig två filformat att välja mellan: PNG och JPEG.
När du installerar och kör PNGHat först kommer det valda standardalternativet att vara, som du kan förvänta dig, PNG. Om du vill växla till JPEG växlar du bara väljaren i PNGHat-fönstret:
Du kan också kontrollera kvalitetsinställningarna för dina exporterade bilder genom att gå till inställningspanelen (beskrivet ovan) och:
Utanför rutan ger PNGHat de fem kopior och klistra in kodmallar som beskrivs ovan, men du kan också redigera dessa mallar såväl som skapa din egen.
Ett vanligt fall där du kanske vill redigera dessa mallar är att få dem att reflektera vilken sökväg dina bilder ska lagras på. I det här fallet kan du ändra VÄG fältet från dess standardvärde / Fast / bilder / FILE, till något liknande bilder / FILE, som jag gjorde under min första användning. Du kan också ändra någon aspekt av huvudmallen, till exempel kanske lägga till border = 0 till HTML
Dessutom kan du skapa nya mallar om den typ av kod du behöver inte är närvarande som standard. För att göra det, klicka på + ikonen nära botten av inställningspanelen, ge din nya mall ett namn och lägg till din kod med hjälp av variablerna BREDD, HÖJD och VÄG men du behöver.
Även genom processen med att skriva den här artikeln kände jag personligen verkligen skillnaden med PNGHat, i stället för standard Photoshop-exporten. Alla bilder som du ser ovan genererades av PNGHat, och jag fann att det sparade mig en betydande tid. Förutom tidsbesparingen fann jag också minimal tryckknapp bearbeta mycket mjukare, och ju färre steg jag måste ta för att få ett jobb gjort, lyckligare jag är!
Det är möjligt att det kan vara enstaka tid jag fortfarande använder den inbyggda Photoshop-exporten om en uppsättning omständigheter verkligen kräver det, men för de flesta fall kommer PNGHat att vara min gå att exportera metod härifrån.
.
Accentsconagua
