Gestion des favoris
Gérez vos favoris en toute simplicité, classez-les, notez-les et retrouvez vos tutoriels
favoris en un seul clic.
Pour utiliser cette fonctionnalité vous devez être membre GOLD
Déja membre GOLD, cliquez-ici pour vous connecter / Inscription et informations Cliquez-ici

Nous allons voir comment créer une page internet avec des onglets dynamiques comme celle-ci avec photoshop, la découper avec l'outil "tranche", enregistrer nos images pour le web et la mettre au format html pour qu'elle soit visible sur le web avec namoweb editor et aussi dreamweaver .
Donc ce tutorial va être divisé en quatre quatre tutoriaux.

Créez un nouveau document.




Choisissez un format de 800/600 avec un fond blanc et une résolution de 72 dpi



Affichez les règles en faisant "Affichage >> règles" ou en utilisant le raccourci clavier "Ctrl+T"



Placez des repères sur les bords du document comme ci-dessous.



Et placez deux repères supplémentaires un à "150 px" et le second à "500 px".Voila nous venons de délimiter les zones qui vont afficher nos informations dans le navigateur.




Maintenant faites "Image >> Taille de la zone de travail" et augmentez la largeur à "1000 px"



Voila comment va ce présenter votre projet, il va ce diviser en trois parties. la première ou nous allons placer notre logo, une bannière pour la pub et un espace pour le titre de votre site.
La deuxième sera l'emplacement du contenu de votre page.
La troisième votre bas de page ou seront stocké vos infos personnelles (adresse,tel....)



Nous allons d'abord définir la zone ou sera stocké le contenu de votre page.Créez un nouveau calque comme si dessous et nommez-le "Cadre_navigation"



Sélectionnez l'outil "rectangle" avec la couleur de premier plan "blanc" et sélectionnez "pixel de remplissage"
Et tracez un rectangle comme ci-dessous



Puis "Ajouter un style de calque" et "Ombre portée"



Appliquez les réglages suivants à "Ombre portée"



Puis mettez un "contour" comme ci-dessous


Faites "Edition >> Transformation manuelle"



Et Ajustez votre rectangle comme ci-dessous


Créez un nouveau "Groupe de calque" que vous nommerai "Navigation"



Dans ce nouveau groupe, créez un "Nouveau calque" que vous nommerai "bouton"



Sélectionnez l'outil "Rectangle arrondi" en mode "Pixels de remplissage" un "Rayon" et la "couleur de premier plan"
Tracez un rectangle comme ci-dessous débrdant de votre cadre précédemment créé



Faites "Ajouter un style de calque" et "Biseautage et estampage"



Dans "Biseautage et estampage" , rentrez les valeurs suivantes



Et celle-ci dans "Contour"



Voila nous venons de créer la base de nos boutons de navigation



Faites ensuite glisser votre "groupe de calques" "Navigation" en dessous de votre calque "Cadre_navigation"



Voila c'est mieu ainsi



Sélectionnez votre outil texte avec la police de votre choix
Et saisissez le nom de votre lien



Maintenant nous allons créer les effets de "navigation haut" de nos boutons.En tenant la touche "Ctrl" sélectionnez les calques du groupe "Navigation" et duppliquez les comme ci-dessous




Avec votre outil "Déplacement" sélectionnez
Remontez vos calques de quelques pixels vers le haut d'une "vingtaine de pixels" comme dessous



Voila votre bouton à son état initial



Et dans son état survolé



Sélectionnez tous les calques du groupe "Navigation" et faites les glisser sur "Créer un nouveau groupe de calques" et nommez le "lien1"



Maintenant le travail va être facileDuppliquez votre groupe de calques "lien1" comme ci-dessous en le faisant glisser sur "Créer un nouveau calque" , renommez le "Lien2" et modifiez vos calques de texte "lien1 en lien2" puis décalez-les vers la droite
:?: !!! ASTUCE !!! Pour garder l'alignement de vos calques, maintenez la touche "Maj" enfoncée en effectuant votre déplacement :?:




Voila le résultat obtenu :D



Cliquez deux fois sur le calque "Arrière-plan" afin de le dévérouiller



Nous allons maintenant créer le motif qui va nous servir pour notre arrière plan

Créez un "Nouveau document" de "8px/8px" avec une résolution de "72 dpi" et un fond "blanc"



Créez un "Nouveau calque"



Sélectionnez l'outil "Crayon" de taille de "1px"



Tracez un motif comme ci-dessous



Puis faites "Edition >> Utiliser comme motif"



Et nommez-le "FOND"Fermer votre document ou nous venons de créer notre motif sans l'enregistrer




Revenez sur votre projet et faites, "Ajouter un style de calque" et "Incrustation de motif"



Et appliquez le motif que nous venons de créer



C'est déja plus joli comme ça :D



Nous allons maintenant créer un emplacement ou mettre un peu de pub en l'occurence une bannière de 468 px par 60 px étant le standard

Créez un "Nouveau groupe de calques" et nommez le "banniere"



dans ce nouveau groupe, créez un nouveau calque et nommez-le "banniere"



Sélectionnez l'outil "Rectangle de sélection" avec les paramètres suivants


Et tracez votre bannière




Sélectionnez le "Pot de peinture" et remplissez votre sélection active puis déselectionnez en faisant "Ctrl+D"
la couleur n'a aucune importance car elle va nous servir uniquement de repère pour le découpage de notre page web

Faites "Ajouter un style de calque" et "Contour"



Et appliquez les paramètres suivants



Voila nous venons de créer le cadre de notre bannière



Créez un "Nouveau groupe de calque" et nommez le "logo"



Et insérez un logo que vous aurez préalablement créé



Voila notre page et enfin crée.
Nous allons voir dans notre prochain tutorial comment découper cette page et exporter nos images afin de pouvoir les utiliser dans un éditeur html Créer une page internet avec photoshop cs2 (Partie 2)

Voila nous sommes au bout de ce tutorial