De la création du visuel sous Photoshop à l'intégration HTML/CSS, ce tutoriel va vous apprendre, en près de 45 minutes, à créer et intégrer un menu composé d'une seule image (un sprite).
Il y a plusieurs avantage à l'utilisation de sprites pour réaliser vos menus :
- Simplicité de mise à jour
- Pertes de poids de vos fichiers
- Meilleure visibilité dans vos fichiers
- Moins de requêtes HTTP à votre serveur = plus de rapidité à l'affichage de vos pages
Jetez un oeil à ces autres tuto Photoshop, CSS
Créer une photo panoramique…
Dans ce tuto dédié à la création d'un panoramique HDR ou…
Apprendre l'outil point de…
Très peu utilisé, l'outil point de fuite et pourtant très…
Création d'une chaîne réaliste…
Dans ce tuto Photoshop accessible à tous, vous apprendrez comment…
Une eau enfin réaliste.
Dans ce tuto Photoshop en vidéo, vous apprendrez à réaliser…
Sherlock Holmes : création…
Voici un tuto Photoshop / After Effects sur la création du…
Effet HDR pour affiche de…
Dans ce tuto HDR vous allez grâce à Lightroom, Photomatix,…
Un menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…
Comment prendre et retoucher…
Dans ce tuto niveau débutant vous allez apprendre à : Régler…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Photoshop, CSS de 43 minutes est proposée dans une résolution plus grande que l’extrait suivant :
banji
, Formateur
Formé à l'Institut Ingémédia (Toulon, Var), Benoît à travaillé 2 ans en tant qu'ergonome à Montréal chez Yu Centrik, la première firme d'utilisabilité au Québec.
Depuis un an, il travaille depuis Francfort en tant que Webdesigner et Developpeur Web front-end Freelance pour des clients directs ou agences Web.
En savoir plus sur banji
Notes attribuées par les utilisateurs (20 votes)
Les avis / Questions des utilisateurs (13)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto Photoshop, CSS d’une durée de 43 minutes a été acheté 391 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 6 novembre 2009 par banji, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Photoshop webdesign.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.












(a acheté ce tuto - 27 février 2012)
" nickel ! tuto clair et limpide qui m'a aider a comprendre vraiment le principe des sprites ! "
(a acheté ce tuto - 07 février 2012)
" Tuto tres bien expliqué, difficle de ne pas comprendre. Excellent. "
(a acheté ce tuto - 31 janvier 2012)
" Tout simplement excellent :)))
Une très bonne initiation aux sprites et à photoshop concernant le style 2.0.
Grace à toi j'ai un très jolie menu, merci encore ! "
(a acheté ce tuto - 17 mars 2011)
" tres bon tuto, félicitation, clair, précis, et bien expliqué ^^ "
(a acheté ce tuto - 26 février 2011)
" tres bon tuto, bien expliqué. Parfait pour un débutant qui commence dans le CSS "
(auteur de ce tuto - 05 janvier 2011)
" Bonjour,
Content que la vidéo te plaise :)
Peux-tu me dire quelle version d'Internet Explorer tu utilise ? Cette méthode fonctionne en principe sous la plupart des navigateurs mais il peut être parfois nécessaire d'ajouter quelques lignes à ton CSS.
Je vais étudier la question dès que j'ai Internet Explorer sous la main, en fin de semaine.
Je te tiens au courant. "
(a acheté ce tuto - 04 janvier 2011)
" Salut,
Ton tuto est vraiment super, mais j'ai une petite question qui me pose probleme sur internet explorer. Y'a t'il pas autrechose que text-indent:-10000px pour cacher le text parce que sur internet explorer ca beug et on ne sais plus appuyer sur les bouton a part le dernier.
Ci tu as une autre solution, elle est la bienvenue ;-)
Merci encore,
DrewDrew "
(a acheté ce tuto - 30 septembre 2010)
" Bravo pour cette formation simple et clair "
(a acheté ce tuto - 04 mars 2010)
" Tuto simple et efficace. Partie sous Photoshop un peu trop longue à mon goût ^^ Bonne continuation.
"
(auteur de ce tuto - 20 novembre 2009)
" En fait le principe est le suivant; lorsque tu ajoutes la classe "visite" a un éléments <li> de ta liste, celui-ci va prendre l'état de bouton que nous avons défini en écrivant la classe css suivante :
ul#menu li.visite a.m_accueil{width:83px; background-position: 0px -68px ;}
Il faut donc par exemple que sur la page "accueil" tu ajoutes la classe "visite" à l'élément <li> correspondant à l'accueil, comme ceci :
<li class="visite"><a href="#" class="m_accueil">Accueil</a></li>
Si tu veux que ce soit le bouton "photos" qui soit différent, tu dois ajouter cette classe à l'élément <li> correspondant à photos comme ceci :
<li class="visite"><a href="#" class="m_photos">Photos</a></li>
Et retirer bien évidemment la classe du <li> de l'accueil bien évidemment. Le code pour le menu sur la page "photos" devrait donc être le suivant :
<li><a href="#" class="m_accueil">Accueil</a></li>
<li class="visite"><a href="#" class="m_photos">Photos</a></li>
<li><a href="#" class="m_videos">Videos</a></li>
<li><a href="#" class="m_contact">Contact</a></li>
Et ainsi de suite pour les autres pages... "
(a acheté ce tuto - 20 novembre 2009)
" Bien sympathique comme tuto, merci!
Cependant, si l'on veut que le bouton reste grisé en changeant de page (comme sur l'AppleStore), comment faire ? "
(auteur de ce tuto - 10 novembre 2009)
" Effectivement il est un peu bas, désolé sur ce point. C'est mon premier tutorial et je prends note pour la suite ;)
Merci du commentaire :) "
(a acheté ce tuto - 10 novembre 2009)
" Sympa, moi qui me mets aux css en ce moment, jdoi dire que c'a m'a aidé.
Seul bémol, fais attention au son pendant l'enregistrement..
c'est juste dommage a ce niveau, sinon c'est nice :) "