Geisha, Panda, Muzli : des plugins Chrome bien sympas pour aguicher votre créativité

Alors en fait, au départ, je vous ai parlé de Geisha, en faisant des blagues dignes d’un Pierre Palmade des internets :

“Voilà un nouvel outil pour votre veille graphique : Geisha. Contrairement à ce qu’on pourrait penser, non, le service n’est pas payant !”

Voilà voilà. Prenez le temps de faire une petite pause…

Sauf qu’en fait, Geisha n’existe plus, s’est devenu Panda, toujours gratuit (non sérieusement, faut que j’arrête). Le principe est toujours le même : un plugin Chrome permettant de faire sa veille facilement et rapidement. À chaque nouvel onglet, vous aurez un panel des posts Dribble, Behance, Awwwards, etc. … les plus populaires du moment, ainsi qu’une sélection d’articles et liens de Sidebar, Designer News, etc. …

Le nombre de liens, articles, sites, pokémons, … est sacrément impressionnant et très régulièrement mis à jour ! Idéal pour votre veille quotidienne, même si la tentation d’aller voir un peu plus de la DA de cet artiste, visiter ce site, checker les dernières illus dribbble restera très tentant à chaque fois que vous ouvrirez un nouvel onglet Chrome.

À noter que pour ceux qui boudent le navigateur de Google, une version webapp est également dispo. Et en même temps, adieu la tentation à chaque nouvel onglet.

Pour ma part, j’ai adopté depuis quelques temps déjà un autre plugin très similaire : Muzli (dont vous avez put voir le vers de terre un peu plus haut dans l’illustration).

Muzli propose un service très similaire à Panda, à 2–3 différences près :

• Muzli propose sa propre sélection de site, animation, vidéos, etc. … qui, en plus d’être bien faite, est plus en adéquation avec ce que je recherche dans ma veille quotidienne : pas uniquement de l’illu Dribble ou du site, mais plutôt un mélange de tout ça. Cette sélection est mise à jour quotidiennement et on y retrouve donc sites, animations, vidéos, focus sur des artistes avec leurs portfolios, mais aussi parfois des articles de Muzli. Le tout, en plus des dernières tendances Dribble, Behance, etc. …
• L’ergonomie : on a une vision très clair et la navigation est très simple, contrairement à Panda où le changement de mode/de listing est moins clair. On se retrouve avec une colonne pour la sélection, une colonne avec les tendances en question, et une colonne où peuvent s’ajouter des favoris.
• Un mode “Zen” pour ceux qui auraient besoin de rester concentré et qui masque Muzli (ou du moins ces liens).

Made by sources : 3 plugins photoshop étonnants pour le Webdesign (et + si affinités)

Source est une plateforme pour les web developers et les designers. Fondé en 2010, elle propose des outils comme CSS Hat, Enigma64 et Subtle Patterns que je vous invite à découvrir dans la suite de cet article. Je sors donc ma casquette de présentateur du télé-achat et vous pouvez lire cet article avec la voix de Pierre Bellemare.

CSS hat — Calques Photoshop et CSS

CSS Hat transforme vos calques Photoshop en CSS3. Il génère automatiquement votre code CSS dans Photoshop, vous n’avez après plus qu’à le copier/coller dans votre fichier .css. L’installation est rapide, et fonctionne avec Photoshop CS4, CS5 et CS6 (je pense aussi CC, à tester).

En plus de générer votre CSS, vous pouvez très bien le générer en SASS, LESS ou Stylus : le code comporte automatiquement ces options. Vous pouvez également ajouter des commentaires à votre code ou en générer automatiquement.

Au niveau de Photoshop, vous avez uniquement l’ajout d’un nouveau plugin qui s’affichent comme l’onglet texte, dans lequel apparaît le CSS associé à l’élément sélectionné. Simple à activer et rapide.

J’ai testé le plugin, mais je ne l’ai pas encore moi-même utilisé dans un cas concret : ça ne saurait tarder. Je vous laisse voir la vidéo pour satisfaire votre curiosité et n’hésitez pas à me faire part de vos retours si vous utilisez déjà (ou vous allez utiliser) ce plugin.

Enigma64 : exportez vos images plus rapidement/facilement

Il est parfois fastidieux, pour un intégrateur, d’exporter chaque image d’une maquette photoshop. Avec ce nouveau plugin, le travail se fait en un rien de temps. Il vous suffit de cliquer sur un ou plusieurs calques (qui correspondent à l’image que vous souhaitez exporter) et de l’exporter via Enigma64.

Le poids des images est automatiquement optimisé, l’export est rapide. Le BON GROS BEMOL DE SA MERE : la mise à jour pour Photoshop CC 2014 n’est toujours pas dispo à ce jour, et je pleure intérieurement à chaque fois que j’ai une quantité astronomique de jpeg à générer.

Une fois de plus, la vidéo de présentation sera peut-être plus efficace que mon laïus.

Subtle Patterns Photoshop Plugin

Le plugin qui m’a sûrement le plus séduit parmi les trois dont je vous parle : vous pouvez, d’une manière ridiculeusement simple, ajouter des textures (pattern) à vos calques, et en modifier l’opacité et la taille.

L’application et l’aperçu du résultat est instantané : vous constatez directement sur votre calques les modifications ou ajustements que vous faites à votre texture. Elle est également synchronisée avec la base de donnée de SubtlePatterns afin de ne manquer aucune nouvelle texture.

Enfin, le plugin proposera également de collectionner et de créer de nouvelles textures, automatiquement synchronisées avec nos ordinateurs.

Je vous propose de vous rendre directement sur le site du plugin pour le tester : c’est rapide et vraiment très simple : http://plugin.subtlepatterns.com/

Achtung, Attention, Warning : il s’agit là de plugins payants. Mais l’investissment vaut le coup !

Le site : https://madebysource.com/

Emmet Livestyle

Emmet LiveStyle est un plugin disponible sous Google Chrome, Safari et Sublime text, vous permettant de coder et voir le résultat de votre code instantanément. Pour l’avoir moi-même installé, le résultat est bluffant et très pratique.

L’installation est rapide, et ne nécessite pas de fichier en local : uniquement l’installation du plugin chrome et du plugin via sublime text. Ainsi, vous pouvez :

• voir sur Chrome les modifications que vous effectuez sur votre fichier.css depuis Sublime Text
• mais aussi modifier directement sur Chrome (inspection de l’élément) et voir vos modifications s’ajouter directement à votre fichier.css sur Sublime Text

Bref, le résultat est bluffant : n’hésitez pas à regarder la vidéo pour plus de détails.

The Noun Project

L’être humain communique avec des symboles depuis plus de 17 000 ans, et à l’heure de l’internet, la communication visuelle par symboles est devenu un langage mondial.

The Noun Project est un site qui vous permet de trouver des symboles pour presque tout et n’importe quoi : gratuits pour certains, mais payants pour d’autre. Il permet d’une part de trouver des icônes au format vectoriel sur plusieurs thèmes mais également de mettre à profit ces propres créations et en obtenir des bénéfices.

Modern Pictograms

Une très belle font-icône, qui vous facilitera la vie aussi bien dans vos Webdesign que dans vos travaux graphiques print.

Copy Paste Character

Ah les caractères spéciaux. Ce joli embrouillamini (oui ce mot existe, et je me fais à chaque fois une joie de l’employer) quand il s’agit de les réaliser sur son clavier : enchainement de caractères qui peut s’avérer parfois fort fastidieux. Depuis que je possède un mac, j’ai même carrément abandonné. Oui. Je l’avoue. Je suis faible.

En revanche, j’ai découvert Copy Paste Character : ce site vous permet de voir tous les caractères spéciaux qui existent, de les sélectionner et de les copier directement dans votre texte. Fonctionne avec Photoshop et Illustrator, mais attention, pas avec n’importe quelle police : encore faut-il que le caractère existe dans cette police (hé oui, sinon c’est pas marrant).