Tutoriel Photoshop : faire une icône RSS avec un effet plastifié
Pour le premier tutoriel Photoshop de la série je vous propose aujourd’hui de créer votre propre icône RSS en 10 minutes chrono. Il s’agit donc d’un tutoriel assez facile pour commencer.
On commence donc par ouvrir un nouveau document en 400×400 avec comme « contenu de l’arrière plan » un beau transparent.
Ensuite on va créer nos repères de base. Pour cela on va faire Affichage >> Nouveau Repère et la on fait deux repère à 50% l’un à la verticale et l’autre à l’horizontale. Cela nous permet de déterminer le centre de notre document, ce qui va nous être utile par la suite.
On va commencer par tracer un premier cercle. Personnellement je préfère utilise la sélection que l’outil forme donc on va sélectionner l’outil ellipse de sélection en restant appuyer longtemps sur l’icône de l’outil rectangle de sélection. Puis on tracer notre premier cercle en partant du bas à gauche pour aller en haut à droite en maintenant la touche SHIFT enfoncée, ce qui va permettre de créer un cercle parfait et parfaitement inscrit dans notre document.
Pour enlever la partie centrale du cercle et ne garder qu’une portion de 50 pixels on va créer 4 repères parallèles aux 4 bords de notre document et à 50 pixels des bords. Donc on va dans Affichage >> Nouveau Repère et successivement on indique 50 pixels horizontal, 350 pixels horizontal, 50 pixels vertical et 350 pixels vertical.
Ensuite arrive le seul point technique de ce tutoriel. On va soustraire de notre première sélection une deuxième sélection. Pour cela rien de plus simple on maintient SHIFT et ALT enfoncés pendant qu’on trace le cercle partant du croisement de repères en bas à gauche et allant jusqu’au croisement de repère en haut à droite.
Maintenant on va pouvoir remplir cette sélection en allant dans Edition >> Remplir (ou MAJ + F5) en on remplit avec du blanc ou tout autre couleur. De toute façon on modifiera ça par la suite via les styles de calques.
Si vous êtes arrivé jusqu’ici la suite vous avez compris la technique principale de ce tutoriel. On va donc espacer notre deuxième cercle de 20 pixels du premier. On va donc créer les repères nécessaires à la construction du deuxième cercle. Dans un premier temps, les repères qui serviront aux bords extérieurs : 70 pixels vertical, 330 pixels vertical, 70 pixels horizontal et enfin 330 pixels horizontal.
On fait de même pour les bords intérieurs du cercle. On va donc créer les repères suivant : 120 pixels vertical, 280 pixels vertical, 120 pixels horizontal et 280 pixels vertical.
Ensuite on va faire le cercle externe en partant du deuxième croisement de repères en bas à gauche pour aller au deuxième croisement de repères en haut à droite avec la touche SHIFT enfoncée. Puis comme précédemment on va soustraire un autre cercle à la sélection en maintenant SHIFT et ALT et en partant des troisièmes croisements de repères.
On va également remplir ce cercle (MAJ + F5) en blanc et on va aller chercher l’outil recadrage (C) et sélectionner le quart supérieur droit de notre image, puis valider en appuyant sur entrer. On se retrouve donc avec une image de 200×200. Puis on efface les repères : Affichage >> Effacer les repères
Maintenant il est temps de faire le petit rond en bas à gauche. Pour cela on va une nouvelle fois s’aider de repères. (D’ailleurs si vous voulez obtenir un petit coté « fait main » vous pouvez suivre ce tutoriel en utilisant la plume au lieu de l’outil ellipse de sélection.) Pour les repères : 40 pixels vertical et 160 pixels horizontal. Puis on trace le cercle inscrit dans le carré formé par les repères et on le remplit de blanc.
Pour finir on va effacer les repères et jouer avec les styles de calques pour obtenir un résultat un peu plus sympa. On va par exemple essayer de donner un effet plastifié à notre icône RSS. Pour obtenir le même résultat que le mien vous téléchargez le fichier source du tutoriel et vous copiez le style de claque sur votre calque. Voici le résultat :
Et enfin voici le fichier source que vous pouvez télécharger et utiliser librement :















Bonjour,
j’ai l’impression que vous sauvegardez ainsi vos astuces en les documentant pour les rendre plus conviviales).
Je suis tombé sur votre site en faisant une recherche php. Mais les autres articles sont bien sympas (en fait je retrouve une utilisation du blog proche de la mienne
Mais j’apprécie aussi la mise en page qui exploite un peu mieux les écrans « d’ajourd’hui » (allez-voir mon thème qui affiche les post sur une largeur ridicule).
Dommage que le tuto ne soit pas pour Gimp ?
Salut,
.
Ouais on essaye de sauvegarder des astuces ou de faire un peu de contenu. Mais on manque souvent de temps pour le blog
Sinon pour ton blog, la résolution 800×600 est morte et enterrée depuis longtemps. Même la résolution 1024×768 n’est plus qu’a 30% d’utilisateurs.
La prochaine fois qu’on refait le design du site on passera d’ailleurs surement à 1240 de large.
Et gimp c’est bien mais pour avoir utilisé les deux je préfère toshop, mais c’est subjectif.