Share
Le plug-in PNGHat pour Photoshop, récemment publié, créé par Source, crée un flux de travail totalement différent pour l'exportation d'éléments PSD destinés à des sites Web, des jeux, des applications ou tout autre type de projet conçu pour vous..
C'est un logiciel robuste avec une pile d'excellentes fonctionnalités, mais la fonctionnalité la plus séduisante qu'il propose est sa capacité à résumer l'exportation en trois étapes simples:
ÉTAPE 1: Bouton poussoir
ÉTAPE 2: Copier et coller du code
ÉTAPE 3: Profit!
D'accord, alors, en toute honnêteté, ce n'est que deux étapes, mais c'est aussi simple que cela. Le plugin élimine essentiellement le processus d'exportation typique de Photoshop consistant à découper, nommer des découpes, traiter les superpositions de découpes, visualiser, sélectionner les options d'optimisation, choisir les options d'exportation, enregistrer, puis rédiger le code pour intégrer les images à votre projet..
Il peut également réduire automatiquement l'espace blanc autour des éléments et gérer plusieurs exportations de résolution pour la prise en charge de la rétine et des techniques d'image réactives. Les images peuvent être imprimées localement sur votre ordinateur, téléchargées instantanément sur le stockage en nuage ou même générées sous forme de code Base64, de sorte que vous n'avez pas besoin de fichiers image..
Commençons par regarder le cœur du plugin; la fonctionnalité d'exportation d'image bouton.
Exporter des images en utilisant PNGHat est vraiment aussi simple que possible. Par exemple, dans cette interface de jeu mobile de Graphic Burger, supposons que vous souhaitiez exporter le "bouton de lecture".
Tout d’abord, vous sélectionnez le ou les calques ou le groupe pour le "bouton Lecture":
Ensuite, vous cliquez sur le PNGHat Exporter les couches sélectionnées bouton:
Et hop, vous obtenez un PNG parfaitement optimisé:
C'est tout! Dans cet exemple, nous avons couvert deux clics de souris et une attente d'environ deux secondes..
Si vous exportez vos images localement, vous pouvez définir leur destination en cliquant sur le bouton … bouton que vous verrez vers la droite de la deuxième section du panneau PNGHat, puis accédez au dossier de votre choix.
Il existe diverses autres options que vous pouvez définir et modifier, que nous aborderons ci-dessous, mais en un mot c'est tout le processus; sélectionner, bouton poussoir, terminé.
En même temps que PNGHat génère votre image, il prépare également le code prêt à copier pour vous permettre d'incorporer facilement cette image dans votre projet. Vous obtenez le code HTML, CSS, canvas, Android et iOS, par exemple:
background-image: url (images_14 / procédures d'exportation de photoshop-assets-pour-le-web-with-pnghat_4.png); largeur: 108px; hauteur: 109px;
var img = new Image (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / export-photos-actifs-pour-le-web-avec-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
À partir de là, il vous suffit de cliquer sur le bouton "Copier" de la fenêtre PNGHat et vous êtes prêt à coller directement dans le fichier de projet correspondant:
Au lieu de devoir envoyer vos images par FTP après l'exportation, PNGHat vous offre la possibilité de télécharger instantanément vos images sur le stockage en nuage qu'elles fournissent. Pour le moment, le plug-in est fourni avec 1 Go de stockage en nuage gratuit, avec des images livrées via CDN afin que les utilisateurs soient servis à partir du lieu le plus proche possible..
L'exportation d'images pour l'hébergement inclus n'est en aucun cas différente du processus d'exportation locale. Pour activer le téléchargement automatique, sélectionnez l'option "Cloud" dans la première section de la fenêtre PNGHat:
A partir de là, vous utilisez la même approche "select" et "push button" comme décrit ci-dessus. La seule différence est qu'après le téléchargement automatique de l'image sur votre compte, le code copier-coller vous fournira l'URL hébergée dans le nuage, par exemple:
La troisième option d'exportation fournie par PNGHat est Base64, qui génère votre image sous forme de code pouvant être incorporé au format HTML, CSS ou canvas de votre projet. Sans avoir besoin d’un fichier image séparé, l’élément peut être chargé sans extra http demande et peut donc accélérer le temps de chargement de votre projet. Comme pour basculer entre l'exportation locale et l'exportation en nuage, vous pouvez sélectionner Base64 en haut de la fenêtre PNGHat:
Le code Base64 peut être utilisé avec HTML, CSS et canvas, par exemple (code abrégé):
background-image: url (données: image / png; base64, iVBO… FTkSuQmCC); largeur: 108px; hauteur: 109px;
var img = new Image (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'données: image / png; base64, iVBO… FTkSuQmCC';
D'après mon expérience, Base64 est particulièrement adapté aux petites images d'arrière-plan et aux graphiques répétitifs avec un nombre de couleurs limité. J'ai également découvert que le moyen le plus efficace d'utiliser Base64 est d'utiliser des préprocesseurs CSS. Le code qui constitue une image peut donc être enregistré en tant que variable, puis utilisé plusieurs fois et mis à jour ultérieurement si besoin est..
Ce que je trouve le plus impressionnant à propos de PNGHat est la facilité avec laquelle vous pouvez exporter un superbe fichier PNG8 transparent afin de limiter la taille des fichiers. J'ai effectué des tests avec une maquette de DVD de Graphic Burger, sur une image exportée à 758px * 758px sans ajustement des paramètres, et découvert deux choses.
Premièrement, la différence de taille de fichier PNG24 entre l'exportation par défaut de Photoshop et PNGHat était négligeable de 6 Ko. Donc, étant donné que la taille du fichier était essentiellement identique, je serais plus susceptible d'utiliser l'exportation PNGHat pour ce type de fichier en raison de la rapidité et de la simplicité de son utilisation..
Le deuxième résultat, plus frappant, est que PNGHat out of the box gère parfaitement la transparence des fichiers PNG8. Avec les paramètres d'exportation par défaut, Photoshop a généré un fichier de seulement 186 Ko, mais il comprenait la bande blanche que vous pouvez voir dans l'image ci-dessous. En règle générale, la transparence est utilisée pour permettre à une image de s'afficher correctement sur n'importe quel arrière-plan. Par conséquent, les bandes interdiraient l'utilisation de ce format d'exportation..
De son côté, PNGHat a généré un fichier PNG8 qui était visuellement indiscernable des fichiers PNG24, mais dont la taille était inférieure à la moitié de celle de 268 Ko contre 642 Ko / 648 Ko. De là où je suis assis, cela en fait un choix très attrayant pour une exportation PNG transparente et optimisée.
PNGHat est capable de réduire automatiquement l'espace autour de l'image que vous exportez, ce qui vous évite d'avoir à vous assurer que le rognage ou les tranches sont parfaitement alignés sur les bords de l'élément. Le "bouton Lecture" du premier exemple de cet article a été exporté à l'aide de cette fonctionnalité de rognage, ce qui lui permet d'être correctement recadré sans qu'aucune mesure supplémentaire ne soit nécessaire..
Pour activer l'option "Trim", cochez simplement cette case dans la fenêtre PNGHat:
En plus de couper automatiquement une image, vous avez également la possibilité de sélectionner spécifiquement la région que vous souhaitez exporter. Il s’agit simplement de créer une sélection avant de cliquer sur le bouton d’exportation. Par exemple, en créant cette sélection avant l'exportation:
Vous donnerait cette image résultante:
Lorsque vous travaillez avec des images vectorielles, vous avez la possibilité d’agrandir ou de réduire automatiquement votre image pour diverses exportations. Vous pouvez ainsi gérer la prise en charge de la rétine et éventuellement créer plusieurs tailles d’image pour plus de réactivité..
Pour utiliser la mise à l'échelle, définissez le pourcentage que vous souhaitez augmenter ou diminuer dans le champ "Echelle" de la fenêtre PNGHat:
Le reste du processus reste identique, c’est-à-dire sélectionner le calque / groupe, appuyer sur le bouton. Avec notre "bouton Lecture", le résultat de la mise à l'échelle à 200% est:
Le moyen le plus simple de contrôler le nom de vos fichiers exportés consiste à utiliser votre couche ou groupe des noms. Si vous avez sélectionné un seul groupe ou un seul calque, votre fichier image sera nommé de manière à correspondre à celui-ci, les espaces étant remplacés par des tirets. Si vous avez sélectionné plusieurs groupes et / ou couches, votre fichier sera nommé pour correspondre à tout ce qui est en haut de votre pile..
Alternativement, vous pouvez également vérifier les PNGHat Nom du fichier d'invite option dans le panneau de configuration de la fenêtre et choisissez explicitement vos noms de fichier à chaque exportation.
Pour accéder au panneau des paramètres, cliquez sur la petite icône représentant un engrenage au bas de la fenêtre:
Cela changera l'affichage de la fenêtre comme suit:
Pour revenir en arrière, cliquez une seconde fois sur l’icône engrenage..
PNGHat vous donne le choix entre deux formats de fichiers: PNG et JPEG..
Lorsque vous installez et exécutez pour la première fois PNGHat, l’option par défaut sélectionnée sera, comme on peut s’y attendre, PNG. Cependant, pour passer au format JPEG, il suffit de basculer le sélecteur dans la fenêtre PNGHat:
Vous pouvez également contrôler les paramètres de qualité de vos images exportées en accédant au panneau des paramètres (décrit ci-dessus) et:
Par défaut, PNGHat vous donne les cinq modèles de code copier et coller décrits ci-dessus, mais vous pouvez également modifier ces modèles et créer vos propres.
Un cas courant dans lequel vous souhaiterez peut-être modifier ces modèles consiste à les faire refléter le chemin dans lequel vos images seront stockées. Dans ce cas, vous pouvez changer le CHEMIN champ de son défaut de / static / images / FILE, à quelque chose comme images / FILE, comme je l'ai fait lors de ma première utilisation. Vous pouvez également modifier n’importe quel aspect du modèle principal, par exemple en ajoutant frontière = 0 au HTML
En outre, vous pouvez créer de nouveaux modèles si le type de code dont vous avez besoin n'est pas présent par défaut. Pour cela, cliquez sur le bouton + icône en bas du panneau de configuration, attribuez un nom à votre nouveau modèle et ajoutez votre code à l’aide des variables LARGEUR, LA TAILLE et CHEMIN cependant vous avez besoin.
Même au cours du processus d'écriture de cet article, j'ai personnellement ressenti la différence en utilisant PNGHat, plutôt que l'export par défaut de Photoshop. Toutes les images que vous voyez ci-dessus ont été générées par PNGHat, et j’ai trouvé que cela me faisait gagner beaucoup de temps. En plus du gain de temps, j’ai également trouvé le minimum bouton poussoir le processus est beaucoup plus fluide et moins il ya de mesures à prendre pour obtenir un travail, plus je suis heureux.!
Il est possible que, parfois, j'utilise toujours l'export natif de Photoshop si un ensemble de circonstances l'exige vraiment, mais dans la majorité des cas, PNGHat sera ma méthode d'export à partir de maintenant..
.
Accentsconagua
