Dans ce tutoriel vous allez apprendre comment dessiner un produit sous photoshop. Le MP3 portable RCA Lyra X3030.

Bien que vous vous dites « Pourquoi j’aurais besoin de ce truc ? », la raison de ce tutoriel est de vous apprendre les techniques de création du design d’un produit.

step 1 diagram

Etape 1

Commencez avec un large document. choisissez l’outil rectangle arrondi et placez le radius à 20px.
Sur un nouveau calque tracez un rectangle arrondi su fond de couleur : #F6F5F3. Largeur 417 Hauteur 268.
Sur votre document, qui sera rempli avec un effet de dégradé. Hauteur de 60px et largeur de 800px.
Puis ajoutez les éléments de styles suivant :

Ombre interne

step 2 diagram

Lueur interne :

step 2 diagram

Incrustation couleur :

step 2 diagram

Satin :

step 2 diagram

Contour :

step 2 diagram

Vous devriez obtenir quelque chose de similaire à ça :

step 2 diagram

Etape 2

Sélectionnez le calque du haut puis cliquez sur le menu Sélection > Paramètre par défaut.

Mettez le fond à la couleur #FFFFFF puis choisissez l’outil pinceau avec un pinceau large.

Dans un nouveau calque, Pot de peinture > #FFFFFF pour le calque, comme sur l’image ci-dessous.

step 3 diagram

Etape 3

Créez un nouveau calque appelé bouton.

Dans ce calque dessinez un cercle en #323943 avec l’outil ellipse. Largeur 95 et hauteur 95

step 4 diagram

Etape 4

Encore une fois créez un nouveau calque et dessinez un cercle en #40454B ( Largeur 87 et hauteur 87).

Ajoutez l’effet suivant :

Ombre interne :

step 5 diagram

Lueur interne :

step 5 diagram

Contour :

step 5 diagram

Et on obtient cela:

step 5 diagram

Etape 5

Dessinez un cercle en #40454B . (Largeur: 27 x hauteur: 27)

Ajouter les effets suivants:

Ombre interne :

step 6 diagram

Lueur externe :

step 6 diagram

Lueur interne :

step 6 diagram

Contour :

step 6 diagram

On obtient donc :

step 6 diagram

Etape 6

Avec le pinceau dessinez une flèche dans un nouveau calque.

Ajouter les effets suivants:

Contour :

step 7 diagram

Placer l’opacité du calque au niveau 60% comme ça :

step 7 diagram

Puis on copie la flèche sur les 4 coins :

step 7 diagram

Etape 7

Créez un nouveau calque appelé Screen.

Prenez l’outil rectangle arrondi avec un radius de 2px.

Dans un nouveau calque dessinez en #7B7A80 un rectangle arrondi. (Largeur: 259 x hauteur: 195).

Ajouter les effets suivants:

Ombre interne :

step 8 diagram

Lueur externe :

step 8 diagram

Incrustation dégradée :

step 8 diagram

Contour :

step 8 diagram

On obtient donc :

step 8 diagram

Etape 8

Prenez l’outil rectangle arrondi avec un radius de 2px.

Dans un nouveau calque dessinez en #2A242E un rectangle arrondi. (Largeur: 235 x hauteur: 182).

Ajoutez les effets suivants:

Contour.

step 9 diagram

Comme ça :

step 9 diagram

Etape 9

Prenez l’outil rectangle arrondi avec un radius de 20px.

Dans un nouveau calque dessinez en #000000 un rectangle arrondi. (Largeur: 96 x hauteur: 25).

Ajoutez les effets suivants :

Ombre interne :

step 10 diagram

Lueur interne :

step 10 diagram

Incrustation couleur :

step 10 diagram

incrustation dégradé :

step 10 diagram

contour :

step 10 diagram

Comme ça :

step 10 diagram

Etape 10

Ecrivez « music » avec la police « Verdana » en mode « regular » taille 14pt et en blanc.

Ajoutez-y une petite flèche ça fera mieux.

step 11 diagram

Etape 11

Dupliquez le calque du bouton. Supprimez lui l’incrustation couleur.

On modifie le texte pour « photos » [-_-]

Complétez le menu avec les boutons « Audible », « Files » et « Setup ».

step 12 diagram

Etape 12

Ajouter la photo suivante:

step 13 diagram

Comme ça :

step 13 diagram

Etape 13

Dans un nouveau calque dessinez un rectangle arrondi avec #121921. (Largeur: 11 x hauteur: 12).

Ajoutez les effets suivants: Drop Shadow

step 14 diagram

Ombre interne :

step 14 diagram

Lueur externe :

step 14 diagram

contour :

step 14 diagram

Comme ça :

step 14 diagram

Etape 14

Dans un nouveau calque pixelisé dessinez le modèle suivant. Ce sera le motif du haut parleur.

Une fois que la configuration est dans votre liste modèle, dans un nouveau calque blanc, dessinez un rectangle à l’aide de l’outil rectangle arrondi.

Allez à Sélection> Sélection Load> Paramètres par défaut. Cela devrait ajouter un contour à la sélection de rectangle arrondi.

Alors que la sélection de rectangle arrondi est sélectionnée, dans un nouveau calque ajoutez le modèle en utilisant l’outil pot de peinture.

step 15 diagram

Etape 15

Dernière touche .. Le logo.

step 16 diagram

il doit être comme ça :

step 16 diagram

Et voila le résultat final :

step 16 diagram

Traduit depuis Zymic

8 Reponses

  1. DuMe dit :

    Très bonne traduction… La prochaine fois tu nous fais un effet de lumière magique?
    http://www.smashingmagazine.com/200

  2. Rémi dit :

    Joli rendu en tout cas :-D

  3. weetabix dit :

    jarod, traduire de l’anglais ?
    on aura tout vu, heureusement qu’il y a beaucoup d’images !! LOL

  4. jarodxxx dit :

    DuMe > Je sais pas comment je prendre ca …

    Et pour l’effet lumière il arrive très rapidement !

    weet > La prochaine traduction sera moins longue :p

  5. lesloups dit :

    bonjour,
    c’est un super rendu puis je le prendre pour mon forum svp :)
    car c’est géant

    svvpp je mettrain un lien vers votre site web ;)

  6. Lionel dit :

    « Sur votre document, qui sera rempli avec un effet de dégradé. Hauteur de 60px et largeur de 800px. »
    ça veut dire quoi? où? comment? même en anglais, cette étape est sautée, donc si tu pouvais rajouter une petite explication ça serait vraiment cool, parce que planté là, c’est la loose.
    Merci

  7. David dit :

    super tuto! merci :-)
    Music Now :p

Leave a Reply