ReservoirTags

Générateur de palette de couleurs

Janguee — Fri, 26 Jun 2009 09:46:24 +0000

Un nuancier de couleurs est un outil très pratique pour choisir le bon schéma de couleurs pour contribuer au succès de ses projets. Le choix de votre palette de couleur devient plus facile si vous utilisez Palette Generator, un outil en ligne très simple d’utilisation qui crée un nuancier harmonieux à partir d’une simple photo. Les couleurs sont bien ordonnées avec le bon code héxadécimal et nommées lorsque le nom existe. Il est possible de télécharger ce nuancier au format Adobe Swatch Exchange (ASE), le format d’échange de palette d’Adobe, et même de copier les css à insérer dans la feuille de style. De plus ce générateur de palette est gratuit ! Alors qu’attendez vous pour l’essayer ?

Photoshop : simuler une chute de neige

Janguee — Fri, 26 Jun 2009 07:43:58 +0000

Photoshop : Comment réaliser un portrait typographique

Janguee — Tue, 23 Jun 2009 19:41:04 +0000

Dans ce tutoriel, nous allons voir comment réaliser un portrait typographique à partir d’une photographie. Remplacer facilement l’image d’une personne par du texte devient un jeu d’enfant avec Photoshop. Alors, allons-y !
Choisissez un portrait offrant suffisamment de contraste qui ne soit pas pour autant trop ni dramatique ni trop sombre. Les meilleurs résultats seront obtenus avec des portraits de face cadrés au niveau des épaules, mais vous pouvez tout aussi bien utiliser la photo de votre choix. Choisissez un portrait avec un arrière-plan uni pour un meilleur rendu. Si le contraste sur votre portrait est insuffisant, sélectionnez l’arrière-plan autour de votre personnage et éclaircissez-le.

Créez un nouveau document (Fichier > Nouveau) d’une taille légèrement inférieure à votre photo. Restaurez les couleurs par défaut en appuyant sur la touche D de votre clavier. Utilisez l’outil Texte (T) pour écrire plusieurs mots dans une taille et une police différente à chaque fois. À l’aide de l’outil de sélection (M) dessinez un rectangle autour de chaque mot, un par un et sélectionnez Définir une forme prédéfinie via le menu Édition. Nommez vos nouveaux pinceaux dans la boite de dialogue qui apparait et validez par Ok.

À présent, revenez sur votre photo. Choisissez Plage de couleurs via le menu Sélection. Dans la boite de dialogue sélectionnez Tons foncés dans la liste déroulante et validez par Ok (dans notre exemple aucune partie de l’arrière-plan n’a été sélectionnée, mais si tel était le cas utilisez le Lasso (L) en maintenant la touche Alt appuyée pour désélectionner les partie indésirables). Appuyez sur Ctrl+J afin de copier les pixels sélectionnés sur un nouveau calque (Calque 1). Puis cliquez sur le calque d’arrière-plan dans la palette pour le sélectionner à nouveau.

Comme précédemment, sélectionnez Palette de couleur via le menu Sélection. Choisissez Tons moyens dans la liste déroulante de la boite de dialogue et validez par Ok. Appuyez sur Ctrl+J afin de copier les pixels sélectionnés sur un nouveau calque (Calque 2).

Masquez le calque d’arrière-plan en décochant l’œil situé à gauche de sa vignette dans la palette des calques. Remplissez le calque des tons moyens (Calque 2) via le menu Édition > Remplir (Maj+F5). Utilisez 50% gris et cochez Conserver les zones transparentes, validez par Ok. Sélectionnez ensuite le calque de tons foncés (Calque 1), et réitérez l’opération en utilisant le noir à la place du 50% gris cette fois-ci. Vous obtenez ainsi un portrait très basique composé de noir et de 50% gris.

Si nécessaire faites réapparaitre l’arrière-plan (en cliquant là ou était l’œil) et utilisez le pinceau pour peindre avec du noir sur le calque de tons foncés (Calque 1) ou avec du gris (#808080) sur le calque de tons moyens (Calque 2). Vous pouvez également utiliser la gomme (E) pour effacer les parties non souhaitées. Lorsque vous êtes satisfait du résultat sélectionnez le calque en haut de la pile (Calque 1) et fusionnez le avec le calque inférieur (Calque 2) en appuyant sur les touches Ctrl+E.

Cliquez sur l’icône Créer un calque en bas de la palette. Restaurez les couleurs par défaut en appuyant sur la touche (D). Choisissez l’une de vos formes créées précédemment depuis le sélecteur de forme prédéfinie dans la barre d’option. Et dans la palette de Formes (Fenêtres > Formes) cliquez sur Forme de la pointe. Ajustez l’espace entre vos mots en augmentant le pas de votre forme. Puis cochez Dynamique de forme et faites varier l’angle et la taille de votre pinceau. Tout en peignant sur ce nouveau calque expérimentez différents réglages de la dynamique des formes. Répétez l’opération avec les autres formes. Peignez simplement quelques mots sur le calque pour l’instant, on terminera plus tard.

Créez un nouveau calque et placez-le au-dessus du portrait en noir et gris (Calque 2). Appuyez Ctrl+Retour Arrière pour le remplir avec la couleur d’arrière-plan (blanc). On obtient ainsi un arrière-plan pour notre image. Masquez tous les calques excepté le Calque 2, le portrait noir et gris et rendez le actif en cliquant dessus. Appuyez sur Ctrl+A pour tout sélectionner puis Ctrl+C pour copier la sélection.

Rendez tous les calques visibles et activez le calque avec les mots peints (Calque 3). Cliquez sur l’icône Ajouter un masque de fusion en bas de la palette des calques. Appuyez sur la touche Alt et cliquez sur la vignette du masque de fusion (cela cache le texte peint et seul le masque de fusion reste visible). Appuyez Ctrl+V pour coller la sélection sur le masque, puis Ctrl+D pour désélectionner. Appuyez Ctrl+I pour intervertir ce masque (votre masque devrait ressembler au négatif de l’image sélectionnée que vous venez de coller).

Activez le calque du texte peint (pas son masque !) en cliquant la vignette du calque et continuez de peindre en variant les pinceaux que vous avez créés. Vous pouvez continuer à faire des expérimentations en faisant varier la taille, le pas et l’angle de votre pinceau (bien que l’utilisation d’une tablette graphique ne soit pas indispensable, elle vous aidera surement !).

Les mots peints apparaissent uniquement à l’intérieur des parties noires et grises du masque. Pour renforcer le côté aléatoire de la disposition des mots sur notre portrait, ajoutez un calque supplémentaire au-dessus du calque du texte peint. Ajoutez ici et là quelques mots en débordant hors du masque en utilisant les mêmes mots que précédemment.

S’il y a des zones où vous souhaitez voir apparaitre le texte ou au contraire s’il y a du texte que vous souhaitez voir disparaitre cliquez sur le masque de fusion, peignez-le avec un pinceau doux : en noir pour dissimuler le texte, en gris pour le rendre plus ou moins visible et en blanc pour le faire apparaitre totalement.

Ajoutez un style au calque avec les mots peints : incrustation de dégradé. Cliquez sur l’icône Ajouter un style de calque (fx) en bas de la palette des calques et choisissez Incrustation en dégradé. Cliquez sur la vignette du dégradé et dans l’éditeur de dégradé choisissez le dégrade bleu, rouge, jaune. Validez par ok pour fermer l’éditeur de dégradé et changez le mode de fusion du calque en mode superposition.

Maintenez la touche Alt appuyée et déplacez le style de calque (fx) sur le calque des mots supplémentaires afin de lui appliquer le même effet.

Et voila le travail !

À présent le nombre de possibilités qui soffrent à vous semblent illimitées. Vous pouvez par exemple utiliser des blocs de textes entiers plutôt que des mots isolés. Où pourquoi pas mixer ces deux techniques. Dans l’exemple ci-dessus les mots sont les noms des polices utilisées, n’hésitez pas a utiliser vos propres mots et à nous faire partager vos créations. À vos pinceaux !

Photoshop : transformer une photo en dessin

Janguee — Wed, 17 Jun 2009 08:18:30 +0000

Si vous avez déjà essayé de transformer une photo en dessin vous savez certainement que cette tâche peut s’avérer fastidieuse et vous prendre énormément de temps ! Alors voyons ensemble comment transformer facilement une photo en dessin en quelques étapes simples et rapides.

Choisissez une image qui possède un arrière plan uni. Nous utiliserons ici la photo d’un guitariste solo sur un arrière-plan blanc qui sera un point de départ idéal pour obtenir l’effet dessin que l’on désir. Et ouvrez votre document sous Photoshop. Sélectionnez Edition > Utiliser comme motif, et dans la boite de dialogue qui apparait renommez votre motif puis validez afin de conserver l’état d’origine de cette image que nous utiliserons plus tard.

Dans la palette des calques, cliquez-déposez le calque d’arrière-plan sur l’icône création de calque pour le dupliquer (Arrière-plan copie). Ensuite on obtiendra une rapide esquisse qui nous servira de base à la construction de notre dessin via le menu Filtre > Esthétique > Tracés des contours.

Pour obtenir une texture réaliste pour notre affiche sans passer une vie entière à essayer d’en créer une vous-même, on utilise l’image d’une vieille feuille de papier. Cliquez sur l’œil du calque Arrière-plan afin de le cacher et placez ce nouveau calque (Calque 1) en dessous. Les dimensions de ce calque étant supérieures à notre document de travail nous devons les transformer manuellement via Edition > Transformation manuelle (Ctrl+T) afin de les ajuster à l’aide des poignées.

Cliquez sur la case à gauche du calque Arrière-plan copie pour le rendre à nouveau visible, puis cliquez sur le calque pour le sélectionner. Changez son mode de fusion en Produit. Cela permet de rendre le blanc invisible et fait apparaître le noir sur l’arrière-plan.

Appuyez et maintenez enfoncée la touche Ctrl et cliquez sur l’icône Créer un calque pour ajouter un nouveau calque (Calque 2) que vous placerez sous le calque Arrière-plan copie. Changez le mode de fusion de ce calque en Lumière crue.

Choisissez l’outil Tampon de motif (S) qui se situe sous l’outil Tampon de duplication dans la palette d’outils. Dans la barre d’options cliquez sur le sélecteur de motif pour l’ouvrir. Sélectionnez l’image que l’on a définie lors de la première étape, elle est la dernière de la liste.

À l’autre bout de la barre d’option, ouvrez le sélecteur de forme prédéfinie. Nous avons besoin d’une forme bien particulière de pinceaux. Cliquez sur la petite flèche en haut à droite de la fenêtre de dialogue qui vient de s’ouvrir. Dans la colonne, choisissez Pinceaux Humides. Cliquez sur Ok. Choisissez la forme « Aquarelle à pointe moyenne épaisse ».

Si vous vous servez d’une tablette graphique sensible à la pression, idéale pour ce type de projet, vous devez maintenant modifier les réglages de ce pinceau. Pour cela, appuyez sur la touche F5 de votre clavier pour accéder à la fenêtre de dynamique de forme. Cochez et sélectionnez Autre dynamique. Dans la partie droite de la fenêtre, réglez le contrôle de la variation de l’opacité sur Pression de la plume.

On va à présent peindre sur l’image. Puisque notre document de travail et notre motif sont identiques, ils devraient parfaitement se superposer. Peignez sur les zones où vous souhaitez voir apparaître l’effet dessin et vous remarquerez que l’effet est immédiat. Cela est dû à la façon dont l’outil Tampon de motif interagit avec les modes de fusions de chaque calque. Continuez de peindre en prenant soin de laisser ici et là quelques zones blanches pour donner à l’image un aspect non fini. Basculez autant de fois que nécessaire entre la Gomme et le Tampon de motif pour rétablir les traits ou augmenter l’effet peinture.

A présent on va effacer le bas du dessin à l’aide d’un masque de fusion. Sélectionnez le calque Arrière-plan-copie et créez un masque de fusion en cliquant sur l’icône Ajouter un masque de fusion, située en bas de la palette des calques. Appuyez sur la touche D de votre clavier pour réinitialiser votre palette de couleurs actives au blanc et noir. Appuyez ensuite sur la touche X pour changer la couleur de premier plan en noir. Activez l’outil Dégradé, dans la barre d’option cliquez sur le sélecteur de Dégradé pour l’ouvrir et sélectionnez le dégradé premier plan-transparent. Tracez un trait vertical partant du bas de l’image vers le haut. On obtient ainsi un joli dégradé sans aucune dégradation du dessin.

Il nous reste une dernière chose à faire pour que l’arrière-plan ne paraisse trop plat : ajoutons lui un subtil effet de lumière. Cliquez sur l’icône Créer un calque et placez ce nouveau calque (Calque 3) entre Calque 1 et Calque 2. Changez son mode de fusion en Superposition. Activez l’outil Dégradé, et choisissez dans la barre d’options : Dégradé radial. En partant du centre de l’illustration cliquez et tirez votre dégradé vers l’extérieur.

Pour finir, ajoutez un second dégradé radial et ajoutez du texte pour parachever votre dessin. Et voilà !

Faites la couv !

Janguee — Thu, 23 Apr 2009 06:00:47 +0000

Après MagMyPic.com, un site américain qui vous permet d’utiliser un de vos photos perso sur la couverture d’un magazine, c’est au tour de Relay de reprendre l’idée pour un adaptation à la française : Faiteslacouv.com vous permet de faire la “Une” de l’Express, Closer, Entrevue, Marianne, etc.

Photoshop CS4 : ajouter une ombre portée

Janguee — Mon, 20 Apr 2009 06:13:56 +0000

Créez gratuitement votre typographie en ligne sur FontStruct

Janguee — Thu, 09 Apr 2009 18:43:29 +0000

Développé par créé par Rob Meek et Franck Müller, FontStruct est un outil gratuit de création de polices de caractères en ligne. Il permet de créer rapidement et facilement une police grâce à FontStructor, l’éditeur de polices. Fontstruct vous propose propose de multiples fonctionnalités pour créer vos propres polices d’écriture. Relativement simple à manier, vous avez accès à une palette d’outils de mise en forme (gomme, traçage de ligne, de rectangle…) mais surtout à un ensemble des formes géométriques arrangées sur une grille. Elles vous permettront de construire une à une les lettres qui formeront votre typographie.

Pour cela, il vous suffit de placer ces briques sur le papier millimétré virtuel qui vous sert de support (une brique par case). Une fois vos 26 lettres en minuscules/majuscules et vos caractères spéciaux prêts, vous pouvez les télécharger et les utiliser en tant que police TrueType prête à être utilisée dans n’importe quelle application Windows ou Mac. Par défaut, toutes les FontStructions sont privées, mais FontStruct encourage les utilisateurs à les partager. Lorsque vous partagez vos FontStructions vous pouvez choisir parmi un certain nombre de différentes licences Creative Commons. Ces licences sont affichées sur la page Web de chaque FontStruction et sont inclues dans le fichier .zip de la police proposée au téléchargement.

Vous pouvez parcourir les créations des autres membres par catégorie : serif, sans serif, blackletters, pixel, etc. Et si vous le voulez vous pouvez même y apporter vos propres modifications ! Le clonage vous permet de modifier une FontStruction pré-existante. Le nom de l’auteur original sera toujours affiché sur la page d’accueil d’une FontStruction clonée. Elle ne peut donc être revendiquée comme totalement originale.

Le widget FontStruct vous permet d’intégrer une FontStruction sur votre site web (cf. ci-dessus). Facilement paramétrable, il permet à vos visiteurs de visualiser votre FontStruction sous toutes ses coutures.

Introduction à FontStruct par FontStruct sur Vimeo.

La vidéo d’introduction au fonctionnement de FontStruct est un excellent point de départ pour vous lancer dans vos FontStructions. Alors qu’attendez vous pour créer un compte FontStruct et partager vos FontStructions avec le reste du monde ?

Photoshop CS4 : Enregistrer pour le Web

Janguee — Wed, 01 Apr 2009 06:43:48 +0000

Assembler plusieurs calques sous Photoshop

Janguee — Fri, 27 Mar 2009 07:29:33 +0000

Campagne gratuite d’eye-tracking avec Crazy Egg !

Janguee — Thu, 12 Mar 2009 20:10:27 +0000

L’eye-tracking (ou oculométrie en français) est une technique destinée à analyser les mouvements oculaires d’une personne sur un support spécifique capturés à l’aide d’une caméra, pour calculer la direction du regard du sujet. L’idée est de suivre les mouvements des yeux d’un sujet, ce qui est difficilement applicable au Web à grande échelle. Puisqu’il n’est pas possible d’analyser directement ce que voit le visiteur, la méthode s’est légèrement adaptée et s’est déplacée vers les données les plus pertinentes à disposition en ligne : les clics et les déplacements de la souris (on parle alors aussi de « mouse-tracking »).

Analyses de clics gratuite !

Crazy Egg est un service qui permet d’analyser le comportement des visiteurs d’un site en mettant en évidence de manière visuelle la façon dont ils utilisent. Lancer une campagne eye-tracking sur son site avec Crazy Egg est assez simple puisqu’il suffit de créer un compte et d’insérer un morceau de code Javascript à la fin des pages que l’on souhaite analyser. Dans la version gratuite de Crazy Egg vous pouvez d’analyser jusqu’à 6000 visiteurs/mois sur 4 pages différentes à la fois. Ce qui est largement suffisant pour un blog classique, vous en conviendrez, pour se faire une bonne idée de son intérêt.

Crazy Egg permet de se rendre compte des actions entreprises par les visiteurs grâce à une carte de la page arborant des zones de chaleur (c’est-à-dire les parties où se concentrent les clics des utilisateurs). Il ne reste alors qu’à faire preuve de patience le temps de collecter suffisamment d’informations. Au final, vous pourrez analyser les résultats via ce qui est appelé une heatmap (une carte de chaleur) sur laquelle les zones chaudes sont mises en avant (cf. ci-dessous).

Quelque soit le type de site ou de blog que vous possédez, il sera intéressant de savoir quelles sont les parties qui attirent le regard de vos visiteurs, quelles sont les zones les plus souvent cliquées… car cela permet alors d’améliorer, éventuellement, l’ergonomie générale de votre espace Web mais aussi d’amener le visiteur à l’action de transformation voulue. Que ce soit la conversion en acte d’achat sur un site d’ e-commerce, un clic sur une publicité de votre blog, une meilleure visibilité de la zone d’abonnement, un dossier ou un fichier à faire télécharger un maximum de fois… tous peuvent bénéficier d’une campagne d’eye-tracking avec Crazy Egg.

Confetti

Si Crazy Egg ne permet pas de savoir où l’utilisateur regarde, il fournit par contre beaucoup d’informations sur la façon dont il navigue. Approfondissez votre analyse et apprenez en davantage sur les clics de vos visiteurs : Top 15 des sites référants, termes de recherche, système d’exploitation, navigateur, etc… Vous avez toujours voulu savoir d’où proviennent les visiteurs qui cliquent sur vos annonces? Confetti vous donne la réponse !

Essayez Crazy Egg gratuitement !

N’attendez plus pour mettre en place vos propres pages de tests et connaitre le comportement de vos visiteurs sur votre site. La version gratuite peut sembler limitée, mais l’intérêt de Crazy Egg est de voir et comprendre le comportement d’un visiteur sur une courte période, ou comment celui-ci réagit lors de changements effectués sur le site (design, navigation…). Essayez donc sans plus tarder la version gratuite de Crazy Egg que vous offre Lunarpages.