Share
Photoshop fait partie de la conception de sites Web depuis des années et il est très probable qu'il continuera en tant que tel pendant longtemps. Si vous concevez pour le Web à l'aide de Photoshop ou si vous êtes un développeur qui gère le codage de fichiers PSD, il est probable que vous rencontrez régulièrement quelques problèmes..
Même si vous êtes passé de Photoshop à Sketch pour la phase de conception de votre flux de travail, vous serez toujours confronté au problème des codeurs ayant besoin d'un accès à un logiciel qu'ils n'auraient autrement pas utilisé. Avec l'un ou l'autre des deux programmes, il est probable que vous obtiendrez des ralentissements qui ne sont pas comparables au cours lorsque vous utilisez des outils dont le but principal est la conception, sans générer de code pour le Web..
Les gars de Source produisent des extensions pour Photoshop depuis 2012. Leurs plugins sont conçus pour atténuer certains des problèmes les plus courants dans le processus de création de code, tels que la création de CSS qui représente avec précision une conception et l’exportation efficace d’images..
Je suis un fan de longue date de leur plugin CSSHat, qui génère du code CSS ou préprocesseur à partir de calques Photoshop. J'utilise également leur plugin PNGHat presque chaque fois que j'utilise Photoshop pour exporter des images au format PNG, JPEG ou Base64. Vous pouvez voir ces deux plugins en action dans mon tutoriel en deux parties:
Ces plugins sont axés sur l’étape développeur du processus de création de site; transformer les PSD en sites Web pleinement fonctionnels. Etant donné que de nombreux développeurs n'ont même pas besoin de Photoshop pour accéder à des fichiers PSD, il est naturel que ce type d'amélioration du flux de travail soit intégré à Photoshop dans son ensemble..
C'est ce que le nouvel outil Web et de bureau de Source, Avocode, concerne.
Avocode est un programme spécialement conçu pour passer de PSD (ou Sketch) à un code. Il ne génère pas automatiquement de sites pour vous, il vous fournit plutôt un ensemble d'outils vous permettant de créer des sites comme vous le préférez personnellement, mais de manière plus efficace que lorsque vous travaillez directement dans Photoshop ou Sketch. Avocode vise à combler le fossé entre les étapes de conception et de codage du développement Web..
Dans cet article, nous verrons comment utiliser Avocode pour:
Avec Avocode, les PSD sont partagés entre les concepteurs et les développeurs via un processus de synchronisation automatisé. Si vous êtes un concepteur, vous installerez un plug-in Photoshop et, lorsque votre conception sera prête, vous appuierez simplement sur le bouton «Synchroniser maintenant» pour que votre PSD soit disponible pour le développeur..
Des moyens supplémentaires de synchronisation sont en cours, avec Dropbox comme option confirmée à venir dans une prochaine version. À en juger par l'interface actuelle de la version bêta 0.5.0, nous pourrions également voir la synchronisation via Layervault, le téléchargement direct et l'extraction de fichiers directement à partir du stockage local..
Si vous êtes développeur, vous recevrez une notification via Avocode indiquant qu'une nouvelle conception est disponible. Vous pouvez alors l'ouvrir directement via un simple clic dans le panneau de navigation PSD. Cela évite d'avoir à envoyer des méga-pièces jointes ou à transférer manuellement des fichiers PSD..
Chaque conception s'accompagne d'un système de gestion de versions intégré. Les itérations progressives d'un fichier PSD peuvent facilement être synchronisées entre concepteur et développeur, à nouveau en appuyant sur le plug-in Photoshop Synchroniser maintenant bouton, chaque version étant accessible via le panneau de navigation PSD. Avocode mémorise les paramètres d'exportation précédents des images dans la conception, ce qui signifie que des tâches telles que l'exportation d'images récemment mises à jour peuvent être automatisées..
Une fois que vous avez un fichier PSD ouvert dans Avocode, vous constaterez que son interaction est très intuitive. Comme Photoshop, Avocode a une Panneau de couches où vous pouvez voir toutes les couches et les groupes du PSD. Ces couches et groupes peuvent tous être affichés ou masqués, et vous pouvez également cliquer pour les sélectionner..
En plus de sélectionner des éléments du dessin via le panneau Calques, vous pouvez choisir le Sélectionner l'outil dans le panneau des outils à gauche, puis cliquez directement sur n’importe quel élément de la scène. Pour sélectionner plusieurs éléments, maintenez simplement DÉCALAGE et continuez en cliquant sur les éléments que vous souhaitez sélectionner.
La sélection multiple fonctionne si vous cliquez directement sur la scène ou dans le panneau Calques.
Pour vous déplacer dans le motif, choisissez la commande Outil à main puis cliquez et faites glisser pour déplacer.
Avec n'importe quel calque sélectionné et le Panneau d'inspection ouvrez, vous verrez le CSS pour la sortie de cet élément dans le panneau Code sous-section, sous forme brute ou préprocesseur, selon vos préférences. Ceci utilise la même logique de génération CSS que le plugin CSSHat, qui reste le générateur CSS le plus précis sur le plan visuel que j'ai jamais vu parmi les options actuellement disponibles..
Saisir le CSS pour l’article est aussi simple que de cliquer sur le bouton Copier CSS ou Copier MOINS bouton, afin que vous puissiez coller dans votre feuille de style ou mettre en évidence directement les lignes que vous souhaitez utiliser et les copier à partir de là. Si du code de préprocesseur est généré, il inclura automatiquement les mixins de votre bibliothèque de mixin préférée. Les options actuellement disponibles sont:
Je suis sûr que je ne suis pas seul quand je dis que trouver les dimensions de la mise en page dans Photoshop peut être un peu difficile. L’approche d’Avocode face à ce problème est très simple. Pour obtenir la hauteur et la largeur d'un élément:
1. Choisir la Sélectionner l'outil et sélectionnez n'importe quel article ou plusieurs articles.
2. Lisez les valeurs dans le coin inférieur gauche de la zone de surbrillance de sélection bleue..
3. Ou, lisez les valeurs à droite de la vignette de prévisualisation en haut de la Panneau d'inspection.
Pour trouver la distance horizontale et verticale en pixels entre deux éléments quelconques:
1. Choisir la Outil de mesure et sélectionnez n'importe quel article.
2. Survolez n'importe quel autre élément et lisez les valeurs à côté des lignes rouges horizontale et verticale.
Si vous avez sélectionné un calque de texte, vous verrez un aperçu coupé du contenu dans Panneau d'inspection, ainsi que sa largeur et hauteur, et un rapide Copier le texte bouton que vous pouvez utiliser pour saisir le texte qu'il contient afin de le coller dans votre code.
1. Choisir la Outil de sélection de couleur et déplacez votre souris sur la scène en observant l'aperçu des couleurs jusqu'à obtenir la couleur souhaitée..
2. Cliquez à cet endroit et votre couleur sera ajoutée au Couleurs sous-section dans le Panneau d'inspection, avec les hexcodes affichés pour chaque.
1. Choisir la Sélectionner l'outil et sélectionnez n'importe quel article ou plusieurs articles.
2. dans le Panneau d'inspection sous le panneau Exportation Cliquez sur la petite icône de fichier avec le signe plus bleu pour définir votre sélection comme un atout..
3. Le nom de votre actif sera tiré du nom de la couche. Choisissez l'exportation PNG, JPEG ou SVG, puis cliquez sur «Exporter maintenant». S'il s'agit de la première exportation de ressources du projet, vous pourrez choisir un dossier de destination, sinon le fichier sera exporté immédiatement..
Une fois que vous avez défini votre sélection en tant qu’actif, elle apparaît également dans le panneau des actifs. À partir de là, vous pouvez cliquer sur l'icône en forme de loupe pour accéder au dossier dans lequel sont stockées vos exportations d'actifs..
Vous pouvez également cliquer sur le bouton "Obtenir le code" en haut du panneau ou sur le bouton <> icône à droite du nom de votre actif, pour générer du code HTML, CSS ou MOINS, vous pouvez utiliser pour placer le bien dans le code.
Dans le plug-in PNGHat pour Photoshop, il est également possible de contrôler les paramètres d'exportation JPEG et PNG ainsi que les options de mise à l'échelle. J'imagine que ces mêmes contrôles seront bientôt transférés vers Avocode..
Pour avoir une idée de ce qu'il faut anticiper dans les processus d'exportation d'image d'Avocode, lisez plus sur PNGHat ici: Comment exporter des ressources Photoshop pour le Web avec PNGHat
Actuellement, Avocode étant en version bêta privée, il reste encore plusieurs fonctionnalités très intéressantes à paraître dans un avenir proche. L'application devrait passer en version bêta publique à un moment donné cet été, après quoi nous verrons le lancement officiel.
Au fur et à mesure que le développement avance, voici certaines des choses que nous pouvons anticiper:
Quel que soit le système d'exploitation avec lequel vous travaillez, ou même si vous êtes sur un appareil mobile, vous pourrez utiliser Avocode. Pour le moment, la version bêta fermée d'Avocode est testée sur Mac, mais la version complète de l'application native fonctionnera également sous Windows et Linux, et la version Web s'exécutera dans n'importe quel navigateur moderne..
Le rapport source indique qu'ils ont déjà un prototype opérationnel pour fournir toutes les mêmes fonctionnalités aux conceptions basées sur Sketch. Ainsi, si vous êtes un concepteur utilisant Sketch sur Mac, un concepteur utilisant Photoshop sous Windows, un développeur qui écrit du code sous Linux ou si vous utilisez une autre combinaison, vous serez également prêt à commencer..
Avocode est en fait construit sur l'éditeur de code Atom produit par GitHub. Ce qui est vraiment excitant à ce sujet, c’est que cela signifie qu’un éditeur de code complet, robuste et riche en fonctionnalités sera disponible dans Avocode dès sa sortie publique. Pouvoir gérer l'intégralité du processus de codage au sein d'une seule application est vraiment un atout supplémentaire pour ce qui est déjà en train de devenir un puissant ensemble de fonctionnalités..
En plus de pouvoir récupérer les codes hexadécimaux pour les couleurs ajoutées à votre palette, vous pourrez également attribuer des noms de variable à chaque couleur à utiliser dans le code de votre préprocesseur..
Comme avec beaucoup d'autres fonctions sur le chemin d'Avocode, la possibilité de télécharger directement sur CDN est déjà présente dans l'un des plugins de Source, PNGHat, ce qui permet de deviner que la fonctionnalité sera sensiblement la même. Les images peuvent être exportées localement via Avocode. Vous pouvez également les transférer directement sur un CDN et ajouter l’emplacement du fichier à votre sortie CSS. Vous aurez également la possibilité d'envoyer par FTP les images directement sur votre serveur lors de l'exportation..
Les vidéos d'introduction à Avocode mentionnent qu'il y aura une option d'intégration avec TypeKit et Google Fonts lors de la génération de votre code de paramètres de police. Cela ne figure pas encore dans la bêta fermée ni dans aucun des plugins de Source, donc je ne sais pas exactement comment cela fonctionnera, mais j'espère personnellement que cela simplifiera le processus de création des URL et du code appropriés pour appeler diverses polices.
La première étape de l'exportation des images dans la version bêta fermée actuelle d'Avocode concerne les formats JPEG, PNG et SVG. Cependant, Source a déjà établi un processus pour la génération Base64 via son plug-in PNGHat pour Photoshop. Je suppose donc que nous verrons les utilisateurs tirer de cette base de code pour le transférer dans Avocode. Ils ont également l’intention de soutenir la production de feuilles de sprite avec les CSS nécessaires..
Avocode s’intéressera au Web jusqu’à sa pleine maturité. Toutefois, des plans sont également en cours pour permettre son utilisation dans le cadre du développement iOS..
Source a déjà un plugin appelé iOSHat qui fonctionne dans Photoshop pour générer du code Objective-C ou Swift à partir de calques Photoshop à utiliser dans le développement iOS. Il est probable que la prise en charge de l'exportation de code iOS dans Avocode fonctionnera de la même manière..
Il existe un élément de menu intéressant dans Avocode; une qui évoque l’extensibilité future de la plate-forme, avec quelques paquets initiaux déjà en place:
La source dit avoir été inspirée par la publication d’Atom pour adopter une méthode similaire permettant de créer des «packages» personnalisés et de les partager avec la communauté. Nous pouvons nous attendre à voir cette voie s’ouvrir à mesure que le développement avance.
Pour le moment, Source déploie régulièrement des fonctionnalités et utilise les commentaires des utilisateurs bêta au fur et à mesure. Lorsque le logiciel sera publié, il sera disponible via un modèle d’abonnement pour 240 $ par an..
Cependant, si vous arrivez tôt dans la pré-commande, vous obtiendrez une réduction perpétuelle de 70%, ce qui la réduira à 69 $ par an. Vous aurez également accès à la version bêta privée et vous pourrez utiliser le logiciel gratuitement pendant cette période. Votre abonnement réel ne commence que lorsque Avocode passe au lancement public..
Les places en précommande sont limitées et, à ce jour, moins de 230 places sont disponibles. Pour pré-commander: http://avocode.com/preorder.html
Pour plus d'informations, visitez:
Je vais laisser le tirage des conclusions entièrement à vous! Que pensez-vous, êtes-vous surpris par l’une des fonctionnalités annoncées par Source? Avocode fera-t-il partie de votre futur flux de travail? Faites le nous savoir dans les commentaires!
Accentsconagua