Les Docs de Doc - Tag - Tutorial

Photoshop : Disquette en pixel art

Docslumpy — Sat, 10 Nov 2007 15:04:00 +0100

Je vais vous apprendre à faire une disquette en Pixel Art en 8 étapes. L'utilité de savoir faire ca c'est que cette disquette peut vous servir d'icône pour vos site si vous avez du contenu à télécharger par exemple. Voici le rendu final

Etape 1 : Créez un nouveau fichier de 24x24 pixels avec fond transparent. Zoomer sur la création à environ 1200%

Etape 2 : utilisez l'outil crayon avec un diamètre de 1px et tracez une forme comme ceci. On continu le traçage Dernière étape du traçage du contour noir

Etape 3 : on a finit avec le traçage du contour nous allons commencer la colorisation. Vous pouvez choisir d'autres couleurs. J'ai pris les miennes à titre d'exemple. Nous allons créer l'étiquette présente sur la disquette, utilisez le code couleur #5E7A40 Etape 4 : on met le fond de la boite en blanc et on trace deux lignes avec le code couleur : #B0A8BD Etape 5 : Remplissez la case du haut en gris (#C4C9DC) et en vert (#ABDD7C) comme ci-dessous Etape 6 : on va rajouter des lignes de contours. Ligne extérieur a le code suivant #8da588 et l'autre ligne interne a le code #dffec2 Etape 7 : on remplit le reste de la disquette en vert (#b0e692) Etape 8 : Bravo vous savez maintenant faire une disquette en pixel art

Merci à graphic Mentor pour m'avoir inspiré ce tuto

Photoshop : barre de navigation

Docslumpy — Mon, 05 Nov 2007 01:02:00 +0100

Je vais tenter de vous apprendre à travers ce tuto à réaliser un petit menu de navigation en 17 étapes.

1. Pour commencer, créer un nouveau document de 500 par 400 pixels .Créez un dégradé radiale avec votre premier plan pour fixer la couleur # 598dbb et votre couleur de fond fixé à # 233749. Ca va permettre d'avoir un background et de créer l'ambiance. Ce dégradé est facultatif pour la suite du tuto.

2. Nous allons créé la boite de dialogue. Pour cela, utiliser l'outil rectangle arrondi, appliquer un rayon de 20px et passer le style en taille fixe avec les données 300x250px.

3. Dans la liste des calques cliquez sur la forme qui vient d'être créée afin de la sélectionner et créer un nouveau calque dans la sélection, nous allons appliquer un dégradé linéaire de #3272aa en haut à gauche de #193955 en bas à droite

4. Maintenant nous allons appliquer des effets à la sélection. Pour cela fait une clique droite sur le calque puis Options de fusion

5. Appliquons une lueur externe, je vous invite à rentrer les mêmes données que moi.

6. Puis un contour

7. Maintenant, nous allons faire l'en-tête de la boîte. Donc, créez un nouveau calque, et sur cette nouvelle couche sélectionner la zone de la boîte (Alt + cliquez sur la case du calque). Puis en utilisant l'outil Rectangle de sélection soustraire en laissant le haut de la création pour la tête comme sur l'image. Petite astuce : Pour soustraire une sélection vous devez maintenant la touche Alt puis sélectionner ce que vous voulez soustraire.

8. Créer un nouveau calque, remplissez la sélection avec un dégradé de transparence en haut à # ffffff au bas de la sélection. Vous devez arriver à ce rendu.

9. Passer le calque sous une opacité de 10%

10. Rajouter le titre de votre Menu. Pour ma part je suis parti sur un Verdana 24pt

11. Ensuite, nous allons mettre les liens de navigation. Donc, ajouter des liens dans la barre de navigation, j'ai également mis le texte avec les paramètres sur la droite. J'ai rajouté aussi de petites puces dans ma création.

12. Maintenant, nous allons ajouter les séparateurs entre les liens de navigation. Sur un nouveau calque sélectionnez l'outil de sélection rectangle une rangée et faire des sélections entre chacun des liens, les remplir avec #ffffff. Vous arrivez à ce rendu.

13. Effectuez une sélection de la boite de dialogue qu'on a créé au début, pour cela cliquez sur le calque de la boite de dialogue à l'aide d'un Crtl + clic. Ensuite faite une sélection inversée. Petite astuce pour faire une sélection inversée : Soit vous faites dans le menu Sélection -> Intervertir, soit vous faite Crtl + Maj + i. Ensuite appuyez sur la touche « supprimer » de votre clavier pour supprimer tout ce qui dépasse. Pensez à recliquer sur le calque des séparations sinon ça ne fera rien.

14. Appliquons un effet sur ces séparations. Faites clic droit sur le calque puis Options de fusion

15. Pour terminer ce tuto, nous allons simuler un effet de sélection ou de navigation dans le menu. Créez un nouveau calque, et en utilisant l'outil Rectangle de sélection puis faites une sélection de 300 par 30 pixels sur la page de l'un de vos liens de navigation (entre les diviseurs). Remplissez la sélection avec #ffffff.

16. Abaissez l'opacité de la couche à 5%.

17. Félicitations vous savez maintenant faire une barre de navigation

Merci à anothertutorialsite qui m'a inspiré ce tuto

Menu de navigation Web 2.0

Docslumpy — Sat, 03 Nov 2007 19:09:00 +0100

Un tutorial Photoshop pour vous apprendre à faire un menu de navigation Web 2.0 le tout en 16 étapes

Je vais vous apprendre à réaliser avec Adobe Photoshop une barre de navigation qui fait très Web 2.0 comme c'est à la mode en ce moment.

1. Nous allons créer un nouveau document. Fichier ->Nouveau... Les dimensions pour cet exemple sont de 550 pixels(px) sur 100 pixels (px) avec un fond blanc

2. Dans le document nous allons créer un rectangle arrondi comme ci dessous. Pour la couleur du rectangle je suis parti sur un gris pale (#8F8F8F)

3. Nous allons appliquer maintenant quelques effets d'ombre sur ce calque. Pour cela fait un clic droit su le calque puis Options de fusion. Tout d'abord nous allons mettre une Ombre portée. Rentrez les données comme ci dessous.

4. Puis une lueur interne a appliquer comme le montre l'image.

5. On va mettre une incrustation de dégradé :

6. Pour le dégradé il faut mettre 3 couleurs : #212121, #424242 et #3e3e3e

7. Pour finir, on va mettre un petit contour #2a2a2a comme ceci :

8. A ce niveau vous devriez avoir quelque chose comme ceci :

9. Nous allons commencer à mettre du texte dans notre création. Pour cela nous prenons l'outil texte et la police : Trebuchet MS en Bold (gras) et en 15 pt. La couleur pour le texte sera le blanc. Petite astuce : pour faciliter le placement de votre texte, mettez un calque vierge entre votre claque de fond et votre calque de texte. Cela va éviter que l'outil texte ne se colle à la forme du fond. Vous devez obtenir ceci

10. Maintenant nous allons mettre des effets sur le texte. Pour cela même technique clic droit sur le calque puis Options de fusion. Puis ombre portée pour appliquer les données suivantes :

11. Vous devez obtenir ceci :

12. Afin de bien séparer les rubriques du menu, nous allons utiliser l'outil Texte et faire des bandes comme ceci | Petite astuce : pour faire des petites bandes maintenant appuyez sur votre clavier Alt Gr et 6 Pensez aussi à réduire la taille de la police par exemple j'ai mis 12 pt et j'ai retiré l'effet Bold pour remettre Regular. La couleur que j'ai utilisé est #b3b3b3.

13. Pour atténuer les espaces nous allons passer le calque des barres en lumière vive pour cela fait un clic droit sur le claque puis option de fusion. Puis dans fusion générale passer le claque en mode de fusion lumière vive comme ceci

14. Vous arrivez au résultat suivant :

15. Pour terminer ce tuto nous allons simuler un effet hover sur le lien. Pour cela on va sélectionner Tutoriaux par exemple et le mettre avec la couleur #aefa1d

16. Félicitations vous savez maintenant créer un menu de navigation très Web 2.0

Ce tuto a été inspiré de pscloud