Specking

Specking, le plug-in de mesures sous Photoshop

Specking

Avoir un PSD propre, clair, bien rangé et surtout prêt à être intégré. Un rêve de développeur front-end, plus que réalisable si il travaille avec un bon webdesigner. Pour caresser votre dev’ dans le sens du poil et lui faire gagner du temps, découvrez Specking.

Specking, mesures et spécifications de conception

Grâce au plug-in Specking, vous allez pouvoir préparer au mieux votre PSD pour l’intégration pixel-perfect, en ajoutant facilement et rapidement des annotations sur vos éléments.

En tant qu’intégrateur, vous savez comme il est long et fastidieux de mesurer des marges, des largeurs de blocs et de chercher des propriétés de polices dans un PSD. Les outils additionnels du plug-in peuvent vous faciliter la vie : un fichier bien annoté, vous donnera l’assurance que votre design sera bien intégré selon les spécifications. Concrètement le plug-in se décompose en 3 panneaux :

Specking pannels

Les principales fonctions du plug-in :

  • Créer des mesures et des spécifications de conception en un seul clic
  • Mesurer n’importe quelle taille (largeur / hauteur), les marges et les propriétés typographiques de votre maquette.
  • Fonctionne sur n’importe quel fichier PSD et même des fichiers aplatis.
  • Générè toutes les spécifications en superpositions sur des calques modifiables et personnalisables.

Mesurer les tailles des blocs (largeur / hauteur) :

Sélectionnez un calque dans votre PSD, cliquez sur le bouton rouge et vous obtiendrez la taille de l’élément. Comme le montre la capture ci-dessous, Specking vous offre la possibilité de choisir l’emplacement des annotations (à gauche, au dessus, au centre…).

Specking

Mesurer les distances (margin / padding) :

Specking padding

Spécification typographiques :

Vraiment pratique pour le CSS ! Les données générées sont placées sur un simple calque de texte. Le copier/coller direct dans votre fichier CSS est donc possible.

Specking

En pratique, ça donne quoi ?

En y jetant rapidement un œil, le plug-in peut paraître long et fastidieux à utiliser. Il ajoute une étape supplémentaire lors de la finalisation du design. C’est un petit mal nécessaire car au final Specking est simple d’utilisation et représente un gain de temps conséquent pour l’intégration.

Je vous conseille vraiment de tester pour vous faire votre propre impression. Specking est disponible en téléchargement par ici au prix de 19$.

Pourquoi prendre des mesures en 2013 à l’ère du Responsive Design ?

C’est une question légitime que je me pose. En effet, un design fluide ne possède pas de bloc de taille fixée, donc l’annotation devient inutile ! Oui et non, car ici nous parlons de Photoshop, qui ne gère que « des maquettes fixes », ce qui est totalement différent de la création d’un design à l’aide d’outils comme Macaw ou Edge Reflow.

Bref la question reste ouverte, je vous laisse déposer votre avis en commentaires les amis !

wuwacorp.com

16 commentaires

  • Viggo

    On peut faire ça depuis un moment déjà sous Fireworks avec le plugin Spectr. http://www.specctr.com/ (aussi dispo pour Illustrator)

  • Ce plug-in est absolument énorme ! Je vais l’essayer dès demain pour voir ce qu’il donne et les possibilités qu’il offre. Merci pour cet article !

  • Contrairement à ce qui est indiqué sur le site, cette extension n’est pas reconnue par Adobe CC. Un message d’erreur persistant indique, en effet, que l’extension ne peut être pris en charge par ladite version. Navrant.

  • @Viggo : Merci pour le lien. Comme souvent pour les plugins Photoshop, on trouve souvent une extension ou une fonction native dans Fireworks.

    @Hallspark : Merci pour ton retour, c’est tout de même étrange. N’hésite pas à contacter wuwacorp par avoir leur avis. Si tu as payé, le plugin doit fonctionner.

  • Après de multiples contacts avec wuwacorp, effectivement la version actuelle rencontre quelques soucis avec CC, pour résoudre le message d’erreur il ne suffit pas de cliquer sur le fichier ZXP, il faut ouvrir Adobe Extension Manager manuellement et l’installer manuellement via le menu de droite en cliquant sur le produit. Il faut également veiller à ce que Photoshop ne soit pas en cours d’exécution.

    Sinon, le plugin est sympa, attention à l’organisation soigneuse de vos calques si vous souhaitez que le plugin fasse du travail propre, quelques bugs fâcheux qui suppriment certaines formes persistent.

  • J’avoue avoir les mêmes réserves que toi sur le responsive. On a passé un moment à expliquer à nos clients que le web c’est PAS pixel perfect mais fluide et flexible. J’ai peur qu’on finisse à nouveau avec des dérives de clients qui vont mesurer la maquette au pixel près (automatiquement, yeah) et venir nous dire que c’est pas « comme sur Photoshop » dans leur navigateur.
    Et au final, si on fait un combo unités en % pour les largeurs et polices en em il faut quand même convertir les valeurs en pixel.
    Ma dernière remarque concerne le fait qu’un .PSD, ce n’est pas le produit fini. Au risque de faire hurler certains, mes .PSD ont parfois des petits décalages de pixel, margin, padding, etc. Ces décalage sont corrigés à l’intégration, mais j’ai vraiment du mal avec le concept de « perdre du temps » à faire un .PSD pixel perfect, alors qu’au final il ne sera qu’un outil au service du produit fini dans le navigateur.

  • Par contre je vois qu’il récupère le « line-height ». Sachant que le line-height CSS est différent du leading dans Photoshop (cf http://us5.campaign-archive2.com/?u=7e093c5cf4&id=564702bd96), je me demande s’il fait la conversion ou pas

  • […] Specking, le plug-in de mesures sous Photoshop OrangeBox – DavidPaulHamilton.net Expressions régulières – Tutoriaux, php, astuces CKEditor.com | The best web text editor for everyone PHP Mailer est une classe PHP facilitant la génération et l'envoi d'e-mails. Nous allons vous expliquer où trouver cette classe , comment la configurer et enfin, comment l'utiliser avec des exemples à l'appui. Envoyer des mails simplement avec PHP […]

  • Ben

    @Hallspark:
    Le problème que vous avez pourrait être que votre Extension Manager ne soit pas la même version que Photoshop. Pour le remédier, ouvrez l’Adobe Extension Manager manuellement à partir de la version de Creative Suite avec la même version que Photoshop, et installer. Puis, naviguer au file plugin (.zxp)
    Si vous n’avez pas l’Extension Manager CC installé, vous pouvez l’installer par Adobe (gratuit), et l’installer par la (et non la version CS6):
    http://www.adobe.com/exchange/em_download/

  • @Stéphanie : Merci pour ton avis. En effet par rapport au PSD pixel perfect, je parle surtout dans le cadre d’un travail en agence, avec des clients qui ne sont pas mûrs pour du web par exmple. Il aiment avoir une maquette super-clean à imprimer pour l’admirer sur papier. Démarche complétement inadaptée bien évidement…

  • @Stéphanie, je suis d’accord avec ton point de vue (j’intègre jamais pixel perfect), mais aujourd’hui il y a encore des interfaces « fixes » à intégrer, et ces interfaces ne sont pas flexibles … Nous sommes encore bien loin des interfaces 100% responsives sur le web… et le plugin trouve toute son utilité dans ces cas là (en agence oui).

    Je l’ai acheté hier, c’est absolument magique, un gain de temps de fou, je suis déjà fan. Merci pour l’article !

  • Les auteurs du plugin m’ont filé une version d’essai. Alors soit je suis totalement pas douée, soit je n’ai pas compris l’utilité mais je n’arrive pas à faire fonctionner les margin entre deux éléments, il me fait toujours par rapport au bord de ma page, ce qui est assez inutile au final. Arnaud tu as eut l’occasion de « tester » en vrai ?

  • @Stéphanie : Très juste remarque. J’ai bien testé le plugin avant d’écrire l’article, en re-testant suite à ton commentaire j’arrive au même résultat. Le margin arrive toujours par rapport au bord de ma page. J’ai essayé avec différents calques, différents outils, mais rien n’y fait. Bizarre cette histoire :s

  • […] Specking, le plug-in de mesures sous Photoshop [+] Création home • iPhone & iPad app • android app • contact • blog • facebook • twitter to experience pearltrees activate javascript. […]

  • En fait je me sens con de pas y avoir pensé plus tôt, mais avec ctrl + click tu peux récupérer une sélection autour d’un élément. Du coup tu peux « facilement » récupérer une sélection autour du parent, et mesurer à l’intérieur d’un bouton par exemple. /

  • You can do design spec easily with Markly for Photoshop and Sketch. http://marklyapp.com

Laisser un commentaire :

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*