School of Pub, où la perfection est à la portée de chacun. (Dixit Audidounette)

AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

 


Partager | 
 

 [Thème complet] Etape 5 : Les boutons (3/3)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l'émission de SoP

Nombre de messages: 44143
Age: 24
Localisation: Lille
$ops: 21084
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

 
MessageSujet: [Thème complet] Etape 5 : Les boutons (3/3)   Ven 10 Sep - 13:06

La plupart de nos boutons sont prêts et le thème est pratiquement terminée.

Après avoir fait les boutons des forums, attaquons nous aux boutons des sujets



C] Les boutons des sujets



Avant de commencer, mettons nous d'accord sur ce que sont ces boutons Smile Ils correspondent aux boutons "nouveau sujet", "répondre au sujet" et "sujet verrouillé".

Ici, nous allons faire quelque chose de simple. Ces boutons ne seront que du texte.

*** Le bouton "Nouveau sujet"

1/ Créez une image de dimension 80px de haut sur 150 de large

2/ Avec la même typo qu'utilisait pour la bannière et les boutons, écrivez en grand "Nouveau" et en plus petit en dessus "sujet" (j'ai mis un fond blanc pour mieux voir ce que je faisais. Je le supprimerai par la suite)



3/ Dupliquez vos 2 calques de texte. Masquez (en cliquant sur l'oeil) un des calques et fusionnez ensemble les 2 restants



4/ Récuperez la sélection de ce calque (dans la fenêtre des calques, clic droit >> alpha vers sélection). Créez un nouveau calque nommé "contour". Faites ensuite : Sélection >> Agrandir >> 1px. Choisissez une couleur clair pour le contour et faites édition >> tracer la sélection (couleur pleine et épaisseur : 1px)



5/ Appliquez sur ce calque un flou gaussien de 5 (filtre >> flou >> flou gaussien)

6/ Récupérez de nouveau la sélection. Créez un nouveau calque "lum_texte" que vous placerez sous votre calque de texte. Faites ensuite sélection >> agrandir : 5px ; sélection >> adoucir : 22px. Remplissez d'une couleur clair. Baissez ensuite l'opacité à 60%



7/ Grâce à l'outil "recadrage", découpez votre image pour enlever un maximum de blanc.

8/ Enregistrez votre image en "nv_sjt.png"



*** Le bouton "Répondre au sujet"

Refaites la même chose que précédent. Cependant, cette fois, écrivez en grand "répondre" et en plus petit en dessus "au sujet".

Enregistrez votre image en "rep_sjt.png"



*** Le bouton "Sujet verrouillé"

Même procédure que pour le bouton "nouveau sujet". Cependant, on écrit en grand "Verrouillé" et en petit au dessus "Sujet"

Enregistrez votre image en "sjt_verr.png"






Tous vos boutons sont faits !

Il ne nous manque que la barre de nav' et les boutons des messages. Tout ceci fait partie de notre prochain tutoriel.

[Etape suivante : la barre de nav']




Pour toutes questions concernant le tuto, c'est par [ici]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l'émission de SoP

Nombre de messages: 44143
Age: 24
Localisation: Lille
$ops: 21084
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

 
MessageSujet: Re: [Thème complet] Etape 5 : Les boutons (3/3)   Lun 13 Sep - 16:47

Prochaines étapes en ligne Wink

>> Faire la barre de nav'

>> Les boutons de message

Bon courage Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

[Thème complet] Etape 5 : Les boutons (3/3)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Pub :: Les cours :: Tutoriels :: Arts plastiques :: The Gimp-


Aller en haut
Aller en bas