God Templates  : Outils pour webmasters Découvrez nos promos packs à partir de 3,6 euros nom de domaine
Accueil | Tutoriels | Annuaire | Astuces Google | Outils pour webmasters | Définitions Web | Kit web à 5€
Ressources - webmasters
  Kits par catégories
  osCommerce
  Css template
  Kit graphique Flash
  Kit graphique design
  Kit de Jeux-vidéo
  Site Flash dynamique
  Site avec entête Flash
  Logo kit graphique
  Logo set
  Identité d'entreprise
  Thèmes Php-Nuke
  Intro en Flash
  Entête + intro Flash
  Promo Packs
  360 kits à 5 €
  128 kits à 4 €
  60 kits à 1.80 €
  Kit bas budget
  Zero-download
  Autres devises
Ressources pour webmaster
 Référencement et trucs et astuces pour Google Outils Astuces Google
 Webmaster en vidéo Vidéos Webmasters
 Comment créer un site Internet attractif ! Comment créer un site
  Affiliation 20%
  Les 10 stratégies...
  Outils webmaster
  Définitions (dico)
 Les tutoriels Les tutoriels Tutoriels PhotoshopTutoriels GimpTutoriels tutoriaux tuto sodipodi
  Annuaire Généraliste
  Ressource webmaster
  Création bannières Actualité outils de recherche & référencement
  Où se référencer ?
  Clipart gratuit
  Générateur MétaTags
  Webmasters news
  Kit graphique gratuit
 Charte graphique gratuit Charte graphique
 Cartes virtuelles en Flash Carte virtuelle Flash

Partenaires, échange de liens automatique

  Echantillons gratuits
 template templates Kit graphique pro
  Ressources gratuites
  Internet Services
  Freegaia

  Active Art Animations
  Création de site
  Topsite
  Partenaires 2 3 4 5 6
Kit graphique du jour
 FAQ F-A-Q
  Rechercher
  Faire un lien
 
  Dans vos favoris
  Plan du site
  Sitemap XML
 Formulaire de contact - contactez-nous Contact
Des dizaines de kits graphiques de qualité pour votre site, classés par catégories.

Un effet de neige sur un bouton

éditorial A la demande générale, voici un petit truk pour réaliser un effet de neige sur des boutons ou autre. Attention, c'est une méthode parmi d'autres .... Evidement, nous partons sur un fond blanc, puisque la neige est sensée etre .. blanche ;) mais le reflet peut s'appliquer à n'importe quel fond ...

On pourrait parler du détourage et de l'export en png (puisque le gif supporte mal les effets de transparence) mais en l'occurence, le fond étant blanc, ne nous préoccupons pas du détourage

Voici exactement ce à quoi nous voulons arriver :....

Résultat final


Première étape

à la une Ouvrez par exempple l'image t_new.gif du skin par défaut d'Invision Board. Vous remarquerez qu'elle est en couleurs indexées puisqu'en .gif.

le bouton t_new.gif

Passons là en mode "couleurs RVB" de manière à pouvoir la manipuler sans contraintes.

le bouton t_new.gif

Deuxième étape

à la une Créeons une nouvelle image de 500*500 pixels, de manière à avoir de la place.

créer une nouvelle image

Importez le bouton t_new.gif sur cette nouvelle image par cliquer/déposer

importation de l'image

Troisième étape

à la une Nous allons maintenant créer l'effet de reflet. Pour cela, duppliquez le calque "bouton t_new" ( clic droit dans la palette des calques > duppliquer le calque). Puis, sélectionnez ce nouveau calque en faisant un CTRL+Clic gauche. Faites ensuite un clic droit dans la sélection > transformation manuelle
Vous devriez avoir ceci à l'écran :

l'effet de reflet

à la une Refaites un clic droit sur la sélection puis > Symétrie axe vertical

l'effet de reflet

à la une Validez la transformation et déselectionnez vos calques. Nous avons donc maintenant, deux images du bouton : une "normale" et une inversée. L'inversée est bien sur celle du reflet. Déplaçons là vers le bas afin de commencer à voir l'effet.

deux images du bouton

Afin de lui donner son effet réel, nous allons supprimer une partie de l'image reflet. Sélectionnez, à l'aide de l'outil sélection rectangulaire" (M), la partie basse du bouton reflet.

deux images du bouton

Faites ensuite un CTRL+ALT+D et entrez les paramètres suivants :

contour progressif

Validez. Faites un ou deux "suppr" ensuite : l'image se rogne avec un contour progressif ...

rognage du contour progressif

Pour le reflet, il ne reste plus qu'à lui attribuer une opacité de 50% via la palette des calques :

attribuer une opacité de 50%

Quatrième étape

à la une Passons à la neige sur le bouton "normal". Sélectionnez le calque correspondant dans la palette des calques et activez l'outil plume (P). Attention à ce que les paramètres de la plume soient bien les suivants :

l'outil plume

à la une Ceci fait, traçons les formes de la neige à l'aide d'une courbe de beziers. N'hésitez pas à zoomer si besoin est.

Nota : pour vous déplacer dans la fenetre, vous pouvez à tout moment utiliser la barre espace (en la maintenant enfoncée): la main apparait, vous permettant de déplacer l'image dans la fenetre ....

Cliquez avec la plume une première fois pour marquer le point de départ. Cliquez une seconde fois puis, sans relacher la souris, tirer sur ce deuxième point pour déformer la ligne. Lorsqu'elle a l'arrondi souhaité, relachez la souris :

l'outil plume

De manière à pouvoir reprendre la courbe depuis le dernier point (carré noir au centre des deux points sur la droite), il faut "désactiver une des deux "poignées" qui servent à modifier la courbe. Pour faire simple, faites un ALT+Clic sur le carré, au centre de la droite. La partie droite de la ligne disparait ...

l'outil plume

Vous pouvez maintenant cliquer plus loin pour créer un deuxieme arrondi (deuxieme bosse de neige). Repétez l'étape précédente pour désactiver la poignée (faites un ALT+Clic sur le carré, au centre de la droite. La partie droite de la ligne disparait ...) faites autant de "bosses" de neige qu'il vous semble nécessaire
Au final, l'image devrait ressembler à ça :

résultat avec l'outil plume

Toujours avec l'outil plume, faites un clic droit dans le tracé > définir une sélection

définir une sélection

Entrez les paramètres suivants

définir une sélection

La forme tracée devient une sélection :

une sélection

Cinquième étape

à la une Sans déselectionner, créez un nouveau calque. Activez ce calque (de manière à ce que la sélection s'y applique) et remplissez la sélection de blanc. Désélectionnez.

remplir la sélection de blanc

Sixième étape

à la une Il ne nous reste plus qu'à donner un effet de calque à cette forma blanche de manière à lui donner un peu de volume. Une légère ombre portée ainsi qu'un estompage bleu ciel devraient suffir ... Double-cliquez sur le calque contenant la forme blanche : les options de calque apparaissent. Activez "ombre portée" et donnez lui les paramètres suivants :

ajouter une ombre portée

Septième étape

à la une Activez maintenant le "biseautage et estompage" et attribuez lui les paramètres suivants :

biseautage et estompage

Huitième étape

à la une voilà : votre image est enneigée :)

résultat enneigé :)

Source : Kloobik

 

© GodTemplates 2003-2007. Tous droits réservés.