Design de blog type Wordpress | Snoupix

Bonjour à tous. Dans ce nouveau tutoriel consacré à Photoshop nous allons réaliser un design sympa pour un blog de type Wordpress.

Voici le rendu final :

Ici tout est fait maison. Dnas l'archive vous trouverez une police du nom de Fontin (gratuite) qui m'a aidée à la réalisation.

Etape 1 : Création du document photoshop

On commence par créer un nouveau document photoshop avec les dimensions suivantes:

Pensez à bien respecter les standards liés à l'internet. C'est à dire des dimensions qui restent dans un ordre de grandeur raisonnable (max. 1400px de largeur) et une résolution de 72 dpi (pixels par pouce) qui permet de réaliser des images pas trop volumineuses mais qui s'affichent parfaitement et sans défaut à l'écran.

Etape 2 : le header

Suivez ces étapes:

Pour le fond puis pour le header. Tout d'abord le fond bleu du header fait par un dégradé de bleu dans une sélection de 150px de hauteur

Le lettrage est fait avec la police Fontin.ttf que vous trouverez dans le dossier source. Dessus on applique une couleur et une ombre interne. Résultat et actions à faire:

Puis pour donner un leger effet sous le titre, nous faisons un dégradé angulaire du blanc vers le transparent avec une faible opacité.

Etape 2 : le menu

Pour le menu. Faire une nouvelle forme de type rectangle avec bords arrondis de 5px. Lui appliquer une bordure.

Pour lui donner un effet d'ombre, refaire cette même forme avec des dimensions légèrement supérieures et un fond noir. Puis pixellisez cette forme et appliquez lui un flou gaussien de 3px. Le flou gaussien se trouve dans Filtre > Atténuation > flou gaussien. Puis grâce à l'option de déformation qu'on atteint par Edition > Transformation > Déformation, donnez lui une forme sympa qui donne l'effet que le fond du menu est légèrement courbé.

Passons maintenant aux boutons et plus particulièrement à l'effet du hover, c'est à dire l'effet qu'aura le bouton au moment où l'on passera la souris dessus. Résultat et actions à faire :

Conclusion

Voila pour les explications des principaux éléments de ce design. Pour ce qui est du cadre de contenu, appliquez la même technique d'ombrage que le menu et pour les petites étiquettes contenant la date appliquez les mêmes effets que le bouton hover.

Merci à vous et bonne création