Design d’un portfolio

Ce premier tuto Photoshop de Snoupix sera consacré à la réalisation d’un portfolio. La création du design se base sur l’utilisation des styles de calques, et des outils principaux tel que les dégradés, les formes et les sélections. demo source Voilà le résultat final : Pour créer ce design, j’ai utilisé les images créees par Iunewind, et les icônes proviennent du site Dryicons. Le texte générique présent sur le design …

 

Ce premier tuto Photoshop de Snoupix sera consacré à la réalisation d’un portfolio. La création du design se base sur l’utilisation des styles de calques, et des outils principaux tel que les dégradés, les formes et les sélections.

Voilà le résultat final :

tuto portfolio

Pour créer ce design, j’ai utilisé les images créees par Iunewind, et les icônes proviennent du site Dryicons. Le texte générique présent sur le design vient de Blindtextegenerator qui est une alternative au très commun « Lorem ipsum…« .

Étape 1 : le background

On commence ce tuto par créer un nouveau document de 1000×895 pixels. J’utilise comme background un motif que vous pouvez récupérer sur cette page. Il faut placer le fichier dans Adobe>Photoshop>Paramètres prédéfinis>Motifs. Il suffit ensuite de l’appliquer via les styles de calque dans « Incrustation de motif ».

dégradé_tuto_1

Créez un nouveau calque, avec l’outil dégradé, du noir vers le transparent, effectuer un dégradé en partant du bas jusqu’à la moitié de la page.

Étape 2 : le titre

Pour créer le titre du portfolio, j’ai utilisé la police Gentium Book Basic pour « Mon portfolio » et Journal pour le sous-titre. Ces deux polices sont disponibles sur yensdesign.

titre_tuto_1

J’utilise l’option « Petites capitales » afin d’obtenir une différence de hauteur entre mon « M » et les autres lettres.

petitesCaps_tuto_1

Voici les styles de calques à appliquer afin d’obtenir cet effet sur « Mon portfolio » :

style1titre1tuto1.jpgstyle2titre1tuto1.jpgstyle3titre1tuto1.jpg

Étape 3 : le premier bloc

Pour créer le premier bloc, prenez l’outil « Rectangle arrondi » avec un rayon de 5px.

style1conteneurtuto1.jpg

On lui applique ces styles de calques :

style2conteneurtuto1.jpgstyle3conteneurtuto1.jpgstyle4conteneurtuto1.jpg

Étape 4 : le bloc compétences

Pour créer les lignes du bloc des compétences, il faut d’abord tracer un rectangle de couleur #484A48. Ensuite avec l’outil trait d’une épaisseur d’1 pixel, je trace deux traits en haut du rectangle; le 1er avec la couleur #1F1C1C et le 2ème #5E5D5D. Dupliquez-les et maintenez la touche Maj afin de les déplacer vers le bas du rectangle.

Voilà ce que l’on obtient :

competencestuto1.jpg

Étape 5 : le bloc réalisations

style1reatuto1.jpg

Pour donner du style à l’image de présentation du site, on l’entoure d’un cadre blanc avec un effet de profondeur. Pour cela, prenez l’outil de sélection et créer un rectangle. Créez un nouveau calque et remplissez la sélection de blanc. Allez dans le menu Sélection>Modifier>Contraction et entrez une valeur de 5px.

Appuyez sur la touche « Suppr ». Maintenant que le cadre est fait, on lui applique une ombre portée :

style2reatuto1.jpg

C’est le même principe pour les miniatures du dessous. Afin d’aligner facilement les miniatures, n’oubliez pas d’utiliser les propriétés d’alignement disponibles dans la barre d’outils verticale en haut de votre espace de travail.

proprietesaligntuto1.jpg

Grâce au motif du background qui est disponible en 6 couleurs, ils vous est facile de changer le thème global du template.

Si l’on souhaite intégrer ce site en xHTML/CSS, il faudra pour les blocs à bords arrondis, soit utiliser plusieurs

pour chaque bloc; où alors se servir des propriétés CSS3 qui permettent de créer des bords arrondis.

tuto portfolio

21 commentaires

S'abonner au RSS des commentaires
  1. gillous
    Posté le 10/01/2012 à 19h40

    Qui a le ficher de la texture merci

  2. custom essay writing services
    Posté le 19/01/2011 à 15h10

    Merci pour le tutoriel. Il a été très utile pour moi

  3. mimou
    Posté le 27/10/2010 à 16h10

    merci moon ami vraiments super merci a le deuxiéme fois.

  4. academic writing service
    Posté le 01/10/2010 à 12h50

    useful information as well as share good stuff with good ideas and concepts

  5. Mano
    Posté le 22/09/2010 à 15h09

    Eat ce que si Je refait ce tutoriel et Je met mes creations, et ce que Je peut utiliser pour ub future site portfolio pour mes creations????
    Merci de me repondre a mpn courriel:
    echampiongame@yahoo.ca

  6. Stéphane
    Posté le 26/07/2010 à 19h30

    Oui tout à fait.

  7. Qunn
    Posté le 24/07/2010 à 18h34

    Possibilité de le reprendre en le modifiant ?

  8. research paper
    Posté le 11/07/2010 à 19h38

    Hi there ))) Really excellent article, it’ll help me to improve my Photoshop skills!

  9. Freedent
    Posté le 28/05/2010 à 15h27

    Bonjour,
    Excellent tuto mais il aurait super cool d’avoir la manière de mettre ce design en place à base de CSS/XHTML.
    Cordialement,

    Bonne continuation

  10. Adr2ien
    Posté le 25/08/2009 à 23h55

    Super tuto big_smile , Jvais l’faire puis le codé et on verra ce que sa donne wink

  11. nikopol01
    Posté le 23/08/2009 à 20h57

    Merci pour toutes ces bonnes idées j’ai reproduis le même schéma avec quelques variantes , même chose que valbuena72 il reste à ajouter du code .
    Je pense y ajouter aussi mes icônes et plein d’autres trucs smile

  12. Valbuena72
    Posté le 18/07/2009 à 22h51

    Salut,
    apparament je suis le 1er a rendre mon devoir lol :
    http://upload.stabland.fr/images/img24/webdesign.jpg
    Merci pour ton imagination et de partager c’est super sympa en plus
    le temps que ça prend ! j’ai mis moins de 2h quand même
    exactement 1h50 ! il me reste plus qu’a le codez le plus dur pour moi .
    Merci encore je vais jeter un coup d’oeil aux autres tutos ^^
    sinon super portfolio que je découvert :p (iunewind magnifique franchement)

  13. Stephane
    Posté le 01/06/2009 à 19h17

    D’autres tutoriels sont déjà en préparation, il va falloir patienter un petit peu avant de voir un tutoriel sur la découpe de ce genre de design.

  14. Daklin
    Posté le 31/05/2009 à 8h16

    Ouai, comment on fait pour le découper ?

  15. Robin
    Posté le 18/05/2009 à 19h58

    Je pense qu’un tutoriel sur le découpage d’un site web serrait le bienvenue!

  16. Ariden
    Posté le 15/04/2009 à 12h59

    Très belle proposition de design pour un portfolio smile

  17. Juju17
    Posté le 06/03/2009 à 15h40

    Très beau tuto! Mais après faut voir le découpage puis le codage… hmm

  18. Unforcrew
    Posté le 19/02/2009 à 10h38

    Super jolie big_smile
    J’attends d’finir mon téléchargement et je m’y met :p

  19. -TySoN-
    Posté le 17/02/2009 à 21h58

    Tres bien merci smile .

  20. François
    Posté le 16/02/2009 à 21h31

    [citation][de]Réponse à -TySoN-:[/de]Votre tutoriel est vraiment génial, et le rendu de même c’est pour cela que je demande est ce que nous pouvons utiliser ce WebDesign pour notre Projet ?

    Merci de me contacter à l’adresse suivant : Carbon.01100@gmail.com

    Merci cordialement Tyson.[/citation]

    Ouai bien sur si c’est pas pour un usage commercial, (mais change juste le titre ^^)…

  21. -TySoN-
    Posté le 16/02/2009 à 19h53

    Votre tutoriel est vraiment génial, et le rendu de même c’est pour cela que je demande est ce que nous pouvons utiliser ce WebDesign pour notre Projet ?

    Merci de me contacter à l’adresse suivant : Carbon.01100@gmail.com

    Merci cordialement Tyson.

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>