tuto

Design de blog type WordPress

Bonjour à tous. Dans ce nouveau tutoriel consacré à Photoshop nous allons réaliser un design sympa pour un blog de type WordPress. demo source 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: …

 

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

4 commentaires

S'abonner au RSS des commentaires
  1. research papers
    Posté le 11/07/2010 à 19h40

    Hello ))) Thanks for tips, I could design my own site using it.

  2. Stephane
    Posté le 29/04/2009 à 15h06

    Oui tout à fait, comme tu peux le voir, nos créations sont sous licence Creative Commons.
    Nous t’autorisons à l’utiliser du moment que ce ne soit pas à des fins commerciales et que tu fasses apparaître snoupix comme le créateur du design.

    Merci, et n’hésite pas à nous montrer le résultat final.

  3. Lemuria
    Posté le 29/04/2009 à 0h24

    Salut j’aimerais utiliser votre design pour le faire découper par un site. Si je laisse une mention de votre site en tant que créateur du design dans le footer , ca marche ? Mon site parle d’un peu de tout , wordpress , photoshop, et ce design assez simple me plais beaucoup par sa clarté.

  4. Zakisan
    Posté le 17/04/2009 à 17h59

    Super tuto merci!

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>