Configurator pour Photoshop CS4, c’est quoi ? Un outil en AIR très simple d’utilisation, qui permet de soit même personnaliser l’interface de Photoshop. Plus précisément, imaginons que vous souhaitez avoir une palette uniquement avec vos outils et filtres préférés, tout ça, au même endroit, c’est désormais possible avec cet utilitaire disponible gratuitement sur le labs d’Adobe.

Au passage, une vidéo de démonstration de l’outil, publiée par Emob, dans la suite de ce billet.

Cliquer ici pour voir la vidéo.

• Configurator pour Photoshop CS4

Et pour rappel, si vous souhaitez télécharger les logiciels pour une période d’essai de 30 jours, voici les liens :

• Photoshop CS4 extended
• Illustrator CS4
• Flash CS4 Profesionnal
• After Effects CS4
• Indesign CS4
• Premiere Pro CS4
• Dreamweaver CS4
• Creative Suite 4 Master Collection
• Creative Suite 4 Design Premium

Envie de tutoriels pour photoshop ? PSDTuts vient d’en publier 50 dans une liste diponible à cette adresse.

De l’effet typographique, à la création de bouton, la retouche photographique, etc. Du plus simple effet, à plus compliqué, il y en a pour tous les goûts.

Voici un nouveau type de billet sur ce blog, des petites astuces CSS que les intégrateurs confirmés connaitront sûrement déjà mais qui plairont je l’espère aux débutants.

La première astuce consiste à changer la couleur du soulignement d’un lien par rapport au texte avec l’attribut border ou insérer une image avec l’attribut background.

Le code html du lien

<div id="exemple">La <a href="#">couleur</a> de mon lien souligné</div>

Le css correspondant au lien

a {
color:#3300FF; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
border-bottom:1px dotted #CC0000; /* Couleur pour le nouveau soulignement avec l'attribut border */
}

Résultat pour cet exemple

On peut aussi si on le souhaite modifier les valeurs pour l’attribut a:hover, a:visited, etc. Pour par exemple changer la couleur du survol ou la taille du border, son style : solid, dotted, dashed, etc¹.

a:hover {
color:#3300FF; /* Couleur du lien au survol */
border-bottom:2px dotted #CC0000; /* Couleur du soulignement au survol avec une taille de 2px */
}

Et avec l’attribut background ?

Un peu plus original, vous pouvez aussi mettre une image pour souligner vos liens. Exemple ci-dessous :

a {
background: url(fond-lien.jpg) bottom no-repeat; /* Bottom pour que l'image soit en dessous du lien */
color:#CC0000; /* Couleur du lien */
text-decoration:none; /* Suppression du soulignement par défaut */
padding-bottom:3px; /* Un padding pour espacer l'image du lien, ne marche pas sur IE */
}

Conclusion pour cette astuce

Une astuce CSS très simple à mettre en place, avec des possibilités intéressantes pour apporter un peu d’originalité à son design / intégration non ? Qu’en pensez-vous ?

1. Vous pouvez voir les différents styles de l’attribut border sur ce lien.

A voir sur webdesignerwall.com, un très bon tutoriel pour décorer vos images / photos à l’aide du CSS sans avoir besoin d’éditer la source. Le principe est assez simple, il suffit d’ajouter une balise span avant l’image et de lui appliquer en background l’élément graphique que vous souhaitez en CSS¹. Les avantages sont nombreux en terme de flexibilité, rapidité et productivité, comme par exemple de pouvoir appliquer le même effet sur une galerie de photos.

Une page de démonstration est disponible ainsi qu’une archive à télécharger contenant l’ensemble des exemples.

1. L’exemple ci-dessous est peut-être plus parlant…

Très bonne initiative d’Emob, le blog du e-learning propose une quarantaine de tutoriels vidéo gratuits pour GIMP, l’alternative gratuite à Photoshop. Si vous souhaitez vous mettre au graphisme à moindre coût, c’est le moment ;).

Mon premier tutoriel sur ce blog, une adaptation et traduction d’un tutoriel disponible sur spoongraphics. Comment créer un ruban sous Illustrator, du style de celui en illustration ci-dessus. Cliquez sur « Lire la suite du billet » pour voir le tutoriel!

Choix des couleurs du ruban

En premier il vous faut choisir une palette de couleurs. Vous pouvez comme le propose spoon, vous aidez de quelques sites; ColourLovers, qui permet de télécharger votre choix de palette pour l’insérer directement dans Illustrator ou des outils comme ColorWizard ou ColorJack. Au passage une adresse avec un guide complet sur le choix et les outils disponibles pour les couleurs.

Commencez par créer des blocs avec l’outil rectangle (Touche M) avec vos différentes couleurs. Ca sera plus simple pour glisser / déposer vos couleurs après.

Les bases du ruban

Dessinez votre premier rectangle. Si vous souhaitez être précis, il vous suffit de cliquer avec l’outil une seul fois sur le plan de travail pour qu’une boîte de dialogue s’ouvre afin de rentrer votre largeur et hauteur. Par exemple 500px de Largeur et 15px de Hauteur.

Pour dupliquer notre rectangle, sélectionner le, appuyez sur la touche Entrée. Une boîte de dialogue s’ouvre. Dans un premier temps décochez Aperçu, puis rentrez la valeur pour la verticale, ici -15px (la hauteur de notre rectangle) et laissez à zéro l’Horizontale. Cliquez sur Copier. Voilà, nous avons un 2ème rectangle.

Pour répéter l’opération autant de fois que vous le voulez, il vous suffit d’utiliser la combinaisons de touches suivante : (CTRL + D).

Dernière opération pour avoir notre base de travail, il nous faut différencier nos rectangles par des couleurs différentes. Pour cela, nous allons utiliser les blocs de couleurs créés au début de ce tutoriel. Sélectionnez le premier bloc, et glissez la couleur de la palette d’outil vers le rectangle. Répétez la même opération sur les autres rectangles.

Distorsion et déformation du ruban

Sélectionnez l’ensemble des rectangles, puis allez dans le menu Objet > Distorsion de l’enveloppe > Créer d’après un filet. Pour l’exemple, entrez 4 dans les rangées et colonnes.

Pour commencer la déformation, sélectionnez avec l’outil Sélection directe (la flèche blanche, A), la première colonne de points sur la gauche. Utilisez l’outil Mise à l’échelle (S + Shift) pour déformer l’ensemble, comme sur l’exemple ci-dessous.

On va maintenant appliquer une Rotation (R) toujours sur les mêmes points de la première colonne.

Répétez les opérations Mise à l’échelle (S + Shift) et Rotation (R) sur les points de la deuxième colonne.

Résultat final du ruban vague

Maintenant que vous avez compris le principe, il vous reste à faire la même chose sur le reste des colonnes de points. Pour obtenir, par exemple, ce résultat :

Vous l’aurez compris, il n’y a rien de bien compliqué et les possibilités sont quasiment infinies. Regardez par exemple le résultat dans une des créations de SpoonGraphics.

J’espère que ce tutoriel va vous plaire. N’hésitez pas à laisser un commentaire ou à me contacter si vous avez des questions. Et peut-être que d’autres tutoriels suivront…

Quatre planches d’illustrations au format vectoriel à télécharger chez Spoon Graphics : 1, 2, 3, 4.

Au passage un petit tutoriel sympa pour créer un bouton RSS sous Illustrator.