Share
De recent uitgebrachte PNGHat-plug-in voor Photoshop, gemaakt door Source, creëert een geheel andere workflow voor het exporteren van PSD-elementen voor gebruik in websites, games, apps of andere soorten projecten waarvoor u ontwerpt.
Het is een krachtige software met een stapel geweldige functionaliteit, maar de meest aanlokkelijke functie die het biedt, is de mogelijkheid om het exporteren in drie eenvoudige stappen te koken:
STAP 1: Druk op de knop
STAP 2: Kopieer en plak code
STAP 3: Winst!
Oké, dus in alle ernst zijn dat slechts twee stappen, maar het is echt zo eenvoudig. De plug-in elimineert in essentie het typische Photoshop-exportproces van slicen, het benoemen van slices, omgaan met overlappende slice-gebieden, previewing, selecteren van optimalisatiekeuzes, exportopties kiezen, opslaan en vervolgens handmatig code schrijven om de afbeeldingen in uw project te integreren.
Het kan ook witte-ruimt rond elementen automatisch inkorten en export met meerdere resoluties verwerken voor retina-ondersteuning en responsieve beeldtechnieken. Afbeeldingen kunnen lokaal op uw computer worden uitgevoerd, direct naar cloudopslag worden geüpload of zelfs als Base64-code worden gegenereerd, zodat u helemaal geen afbeeldingsbestanden nodig hebt.
Laten we beginnen met een blik op de kern van de plug-in; de drukknop voor het exporteren van afbeeldingen.
Het exporteren van afbeeldingen met behulp van PNGHat is echt zo eenvoudig als het wordt. Bijvoorbeeld, in deze Mobile Game UI van Graphic Burger, laten we zeggen dat je de "Play Button" wilt exporteren.
Eerst selecteert u de laag (lagen) of groep voor de "Afspeelknop":
Vervolgens klik je op de PNGHat Geselecteerde lagen exporteren knop:
En hey presto, je krijgt een perfect geoptimaliseerde PNG:
Dat is het! In dit voorbeeld hebben we twee muisklikken afgehandeld en ongeveer twee seconden gewacht.
Als u uw afbeeldingen lokaal exporteert, kunt u instellen waar ze moeten gaan door op te klikken ... knop ziet u rechts van het tweede deel van het PNGHat-paneel en bladert u vervolgens naar de map van uw keuze.
Er zijn verschillende andere opties die je kunt instellen en aanpassen, die we hieronder zullen bespreken, maar in een notendop is dat het hele proces; selecteer, drukknop, klaar.
Op hetzelfde moment dat PNGHat uw afbeelding uitvoert, bereidt het ook kopieer- en plakklare code voor, zodat u die afbeelding gemakkelijk in uw project kunt opnemen. U krijgt bijvoorbeeld HTML-, CSS-, canvas-, Android- en iOS-code:
background-image: url (images_14 / how-to-export-photoshop-assets-for-the-web-with-pnghat_4.png); breedte: 108 px; hoogte: 109 px;
var img = nieuw afbeelding (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-assets-for-the-web-with-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Vanaf hier drukt u gewoon op de knop "Kopiëren" in het PNGHat-venster en u bent klaar om rechtstreeks in uw relevante projectbestand te plakken:
In plaats van uw afbeeldingen te moeten FTP-en na export, biedt PNGHat u de mogelijkheid om uw afbeeldingen onmiddellijk te uploaden naar de cloudopslag die zij leveren. Op dit moment wordt de plug-in geleverd met 1 Gb gratis cloudopslag, waarbij afbeeldingen worden afgeleverd via CDN, zodat gebruikers worden bediend vanaf de dichtstbijzijnde mogelijke locatie.
Het exporteren van afbeeldingen voor de meegeleverde hosting is absoluut niet anders dan het proces voor lokale export. Om de automatische upload te activeren, selecteert u de optie "Cloud" in het eerste gedeelte van het PNGHat-venster:
Vanaf daar gebruikt u dezelfde "select" en "drukknop" -benadering zoals hierboven beschreven. Het enige verschil is dat nadat de afbeelding automatisch is geüpload naar uw account, de kopieer- en plakcode u de cloud-gehoste URL zal geven, bijvoorbeeld:
De derde exportoptie die PNGHat biedt, is Base64, dat uw afbeelding uitvoert als pure code die kan worden opgenomen in de HTML, CSS of canvas van uw project. Zonder een afzonderlijk afbeeldingsbestand nodig te hebben, kan het element worden geladen zonder het extra http verzoek en kan daarom de laadtijd van uw project versnellen. Net als bij het schakelen tussen lokaal en cloud export, kunt u Base64 bovenaan het PNGHat-venster selecteren:
Base64-code kan worden gebruikt met HTML, CSS en canvas, bijvoorbeeld (verkorte code):
background-image: url (data: image / png; base64, iVBO ... FTkSuQmCC); breedte: 108 px; hoogte: 109 px;
var img = nieuw afbeelding (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'data: image / png; base64, iVBO ... FTkSuQmCC';
In mijn ervaring is Base64 vooral geschikt voor kleine herhalende achtergrondafbeeldingen en afbeeldingen met een beperkt aantal kleuren. Ik heb ook gevonden dat de meest efficiënte manier om Base64 te gebruiken is met CSS-preprocessors, dus de code waaruit een afbeelding bestaat, kan worden opgeslagen als een variabele die vervolgens gemakkelijk meerdere keren kan worden gebruikt en later kan worden bijgewerkt als dat nodig is.
Een van de dingen die ik het meest indrukwekkend vind aan PNGHat is het gemak waarmee je een goed uitziende transparante PNG8 kunt exporteren om bestandsgroottes laag te houden. Ik heb wat tests uitgevoerd met behulp van een dvd-mockup van Graphic Burger, op een afbeelding die met 758px * 758px is geëxporteerd zonder aanpassingen aan te brengen, en twee dingen ontdekt.
Ten eerste was het verschil in PNG24-bestandsgrootte tussen standaard export van Photoshop en PNGHat een verwaarloosbare 6Kb. Dus de opgegeven bestandsgrootte was in wezen gelijk, ik zou eerder PNGHat-export gebruiken voor dit bestandstype vanwege hoeveel sneller en eenvoudiger het is.
Het tweede en meest overtuigende resultaat was dat PNGHat uit de doos de transparantie van PNG8-bestanden prachtig verwerkt. Met standaard exportinstellingen heeft Photoshop een bestand uitgevoerd dat slechts 186Kb was, maar het bevatte de witte strepen die u in de onderstaande afbeelding kunt zien. Over het algemeen wordt transparantie gebruikt, zodat een afbeelding mooi over elke achtergrond kan worden weergegeven, zodat de banding dit exportformaat doorgaans uitsluit van gebruik.
PNGHat genereerde daarentegen een PNG8-bestand dat visueel niet te onderscheiden was van de PNG24-bestanden, maar minder dan de helft van hun grootte bij 268 KB vs 642 KB / 648 Kb. Van waar ik zit, is het een zeer aantrekkelijke keuze voor geoptimaliseerde transparante PNG-export.
PNGHat kan de ruimte rondom de afbeelding die u exporteert automatisch inkorten, zodat u niet hoeft te zorgen dat bijsnijden of plakken perfect worden uitgelijnd met de randen van het element. De "Afspeelknop" uit het eerste voorbeeld in dit artikel is geëxporteerd met behulp van deze bijsnijdfunctionaliteit, waardoor deze correct kan worden bijgesneden zonder extra stappen te hoeven nemen.
Om de "Trim" -optie te activeren, vinkt u dit vakje aan in het PNGHat-venster:
Naast het automatisch bijsnijden van een afbeelding, hebt u ook de mogelijkheid om specifiek de regio te selecteren die u wilt exporteren. Dit is gewoon een kwestie van een selectiekader maken voordat u op de exportknop klikt. Maak deze selectie bijvoorbeeld vóór export:
Zou u dit resulterende beeld geven:
Wanneer u met vectorgebaseerde afbeeldingen werkt, kunt u uw afbeelding automatisch naar boven of naar beneden schalen voor verschillende exports, zodat u de retina-ondersteuning kunt gebruiken en mogelijk ook meerdere afbeeldingsformaten kunt maken voor reactievermogen.
Om schaal te gebruiken, stelt u in het veld "Schaal" van het PNGHat-venster het percentage in dat u wilt verhogen of verlagen:
De rest van het proces blijft opnieuw hetzelfde, d.w.z. selecteer laag / groep, drukknop. Met onze "Play-knop" is het resultaat van schalen met 200%:
De eenvoudigste manier om te bepalen hoe uw geëxporteerde bestanden een naam zullen krijgen, is via uw laag of groep namen. Als u een enkele groep of laag hebt geselecteerd, krijgt uw afbeeldingsbestand een naam die overeenkomt met het, waarbij spaties worden vervangen door koppeltekens. Als u meerdere groepen en / of lagen hebt geselecteerd, krijgt uw bestand een naam die overeenkomt met wat zich het meest in uw stapel bevindt.
Als alternatief kunt u ook PNGHat's controleren Prompt bestandsnaam optie in het venster met instellingen van het venster en kies expliciet uw bestandsnamen bij elke export.
Om het instellingenpaneel te openen, klikt u op het kleine tandwielpictogram onder aan het venster:
Hierdoor wordt de weergave van het venster als volgt gewijzigd:
Om nog een keer terug te schakelen, klikt u voor de tweede keer op het tandwielpictogram.
PNGHat geeft je twee bestandsformaten om uit te kiezen: PNG en JPEG.
Wanneer u PNGHat voor de eerste keer installeert en uitvoert, is de gekozen standaardoptie, zoals u wellicht zou verwachten, PNG. Als u echter naar JPEG wilt schakelen, schakelt u de selector in het venster PNGHat in:
U kunt ook de kwaliteitsinstellingen van uw geëxporteerde afbeeldingen beheren door naar het instellingenpaneel (hierboven beschreven) te gaan en:
Uit de doos PNGHat geeft je de vijf hierboven beschreven kopieer- en plakcodesjablonen, maar je kunt deze sjablonen ook bewerken en zelf maken.
Een veelvoorkomend geval waarin u deze sjablonen misschien wilt bewerken, is om ze het pad te laten zien waarop uw afbeeldingen worden opgeslagen. In dit geval kunt u de PAD veld uit de standaardwaarde van / Static / images / FILE, naar zoiets images / FILE, zoals ik deed tijdens mijn eerste gebruik. U kunt ook elk aspect van de hoofdsjabloon wijzigen, zoals misschien toevoegen border = 0 naar de HTML
Bovendien kunt u nieuwe sjablonen maken als het type code dat u nodig hebt niet standaard aanwezig is. Hiertoe klikt u op + pictogram onder aan het instellingenpaneel, geef uw nieuwe sjabloon een naam en voeg uw code toe met behulp van de variabelen BREEDTE, HOOGTE en PAD hoe dan ook.
Zelfs tijdens het schrijven van dit artikel voelde ik persoonlijk echt het verschil met behulp van PNGHat, in plaats van de standaard Photoshop-export. Alle afbeeldingen die je hierboven ziet, zijn gegenereerd door PNGHat en ik vond dat het me een aanzienlijke hoeveelheid tijd bespaarde. Naast de tijdwinst vond ik ook het minimum druk op de knop veel soepeler werken en hoe minder stappen ik moet nemen om een klus te klaren, hoe gelukkiger ik ben!
Het is mogelijk dat er af en toe een keer gebruik wordt gemaakt van de oorspronkelijke Photoshop-export als een aantal omstandigheden dit echt vereist, maar voor de meeste gevallen zal PNGHat mijn methode zijn om vanaf hier te exporteren.
.
Accentsconagua
