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 :

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 ».

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.

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

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

Étape 3 : le premier bloc

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

On lui applique ces styles de calques :

É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 :

Étape 5 : le bloc réalisations

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 :

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.

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.

Vous avez peut être manqué ces articles :

• 

  Design de site business

  (20/03/2009)
• 

  Design de blog type WordPress

  (04/03/2009)

• Effet de texte design

  (19/02/2009)

 

Son portfolio

A propos de Snoupix