Je suis un grand fan de Photoshop, c’est un outil fantastique pour à peu près tout ce que l’on veut, cependant quand il s’agit de web design mon outil préféré est plutôt Fireworks. Je ne sais même plus depuis quand je l’utilise, mais je peux dire qu’avec ses capacités vectorielles combinées à son positionnement de précision au pixel, il devient très facile de concevoir des sites web.
J’ai tout d’abord utilisé ce modèle pour examiner  un service qui reçoit votre design et le code pour vous. Alors j’ai décidé que ce serait bien d’expliquer un peu la manière dont j’ai conçu ce site. Donc dans ce tutoriel, je vais vous montrer comment créer un site en une seule page pour votre portfolio personnel.

Etape 1
La première chose à faire lors de la conception d’un site web est la structure. Vous aurez besoin d’un jeu dans lequel les éléments du site seront, la navigation, le contenu principal, les encadrés, le pied de page, et etc. Il existe des règles de convivialité qui sont toujours agréable à suivre, comme Steve Krug dit: « Ne pas faire des choses qui forcent les gens à penser inutilement quand ils utilisent votre site » Management Consulting News. C’est pourquoi nous allons suivre certaines normes.
Dans ma conception, l’ensemble du site tiendra dans une seule page, comme vous pouvez le voir sur l’image ci-dessous j’ai 6 zones bien définies: la navigation, le contenu principal, le contenu secondaire (featured), le portfolio, les contacts, et le pied de page.

Etape 2 (navigation et logo)
Commençons par la navigation et le logo. Dans notre wireframe nous avons défini une zone de 50px de hauteur pour le menu et où le placement du logo. Avec l’outil Rectangle (U), créez un rectangle de 50px de hauteur et de 1200px de largeur. Allez à l’outil Dégradé (G) et appliquez un dégradé vertical sur le rectangle. Changez les couleurs pour # 989898 (en bas) et # e0e0e0 (en haut). Ensuite, positionnez le rectangle à 1pixel en Y, cela va donner une ligne blanche entre le rectangle et le stage, qui va créer un effet 3D très agréable dans notre menu.

Etape 3
Placez votre logo, j’ai utilisé le logo abduzeedo avec un dégradé très sombre qui va du noir au gris foncé. Après cela, ajoutez un filtre en cliquant sur l’icône (+). Selectionnez Ombre portée.Utilisez 2px pour la distante, 100% pour l’opacité, 0 pour la douceur, et 315 º.

Etape 4
Ajoutons les liens du menu. Mon site personnel n’aura que 3 liens: À propos, qui sera un texte sur ma carrière et en sidebar une liste de mes dernières entrées sur Twitter. Portefeuille, où je vais montrer quelques unes de mes œuvres. Et le contact, où il y aura un formulaire de contact et une hCard avec mes coordonnées.
J’aime vraiment les menus avec le nom du lien et une brève description en dessous. Dans mon menu, j’ai utilisé la police Arial Black 18px, qui est une police dont à peu près chaque ordinateur dispose et que l’on utilise pas tant que ça, avec la description figurant en Arial 12px réguliers. J’ai appliqué sur les textes la même ombre que celle utilisée sur le logo. Elle donnera une touche agréable. Cependant via CSS, elle ne sera visible que sur Safari et le nouvel Opéra. Les deux ont la propriété text-shadow.

Etape 5
Afin de faire une répartition claire dans notre menu créons un diviseur. Si vous prêtez attention aux jolis effets de 3D, ils sont très subtiles et pourtant assez simples à créer. Dans ce cas, avec 2 lignes de 1px de largeur et de couleurs différentes, une lumineuse et l’autre dans l’obscurité, nous pouvons parvenir à un résultat très sympa.

Etape 6 (Feature)
Faisons la partie graphique du site. Je pourrais utiliser Flash pour créer une animation ou un effet de Javascript. L’idée ici est de montrer l’importance du processus créatif lors de la conception d’une page.
Aujourd’hui, nous pouvons remarquer que les sites sont de plus en plus nombreux à utiliser des éléments tels que des textes écrits à la main et des skecthes, des textures et des éléments aussi différents que vintages, pour donner un sentiment plus humain au site. Pour cette conception je vais utiliser une texture que j’ai créé dans un autre tutoriel que j’ai écrit, le « Une typographie en frou-frous vectoriels, un tutoriel Photoshop ». Vous aurez à le redimensionner à l’échelle pour l’adapter à la mise en page. Aussi, vous devrez créer un fond noir, derrière l’image de texture. Qui fera la maquette de notre travail, peu importe la résolution.

Etape 7
Ici, j’ai utilisé une capture d’écran de l’un de mes projets les plus récents, j’ai travaillé dessus et je l’ai placé sur la scène. Ensuite, j’ai corrigé pour l’adapter à la région en vedette en utilisant le masque en vedette (Mask featured).

Etape 8
Maintenant, nous allons ajouter les éléments dessinés à la main. Tout d’abord j’ai choisi une superbe police provenant de dafont.com, il est appelé «Return of RelayScript ». J’ai aussi utilisé une autre police, Helvetica ultra léger, car je pense qu’elle donne un sentiment élégant et moderne à la conception.
Pour certains autres éléments j’ai utilisé l’outil pinceau, et pour d’autres des vecteurs de iStockphoto.com. Toute l’idée de la conception est de montrer les étapes du projet avec les suggestions et les ajustements qui sont faits tout au long du processus.

Etape 9 (Main Area)
Pour la zone A propos, où presque tout le texte du site sera, j’ai utilisé la Divine Proportion qui divise en 2 colonnes. Je vous recommande de lire un très bon article de Smashing Magazine appelé Application Divine Proportion To Your Web Designs, ils expliquent comment et pourquoi cela fonctionne si bien.
Donc, ma principale zone a été divisée en 2 colonnes, l’une avec 605px et l’autre avec 397pixels, avec un espacement à gauche et à droite de 25 pixels pour chaque colonne.
Pour les textes, j’ai fais le premier alinéa du contenu principal avec Arial Black taille 20px et 140% hauteur de ligne (line height). Et j’ai utilisé la même pour créer le titre de la barre latérale. Pour le reste du texte sur la zone principale, j’ai utilisé Arial à 14px et 140% de hauteur de ligne en noir. Toutefois, pour la barre latérale j’ai réduit la taille de la police à 12px et changé la couleur au gris # 666.
Aussi, j’ai créé un autre rectangle et je l’ai remplit d’un dégradé. Encore une fois, j’ai utilisé l’espace 1px pour créer un effet 3D subtile.

Etape 10 (Portfolio)
La zone du portfolio sera pour l’essentiel, composée de vignettes des travaux, d’un titre, d’une petite description et une seconde navigation pour choisir les travaux Web ou imprimés. J’ai créé un rectangle de 1200 pixels de large par 290 pixels de hauteur. J’ai utilisé # 999 pour la couleur et une texture de la palette de styles, qu’on appelle Diagonal en 30px largeur. Aussi j’ai appliqué une ombre interne au rectangle avec 0 de distance, 65% d’opacité, 4 pour la douceur et le noir pour la couleur.

Etape 11
Les vignettes sont en 200×125 pixels et j’ai ajouté l’effet de sol mouillé. Créer cet effet est assez simple, il faut juste dupliquer l’image, allez à Modifier> Transformation> Symétrie axe vertical. Après cela, allez à Modifier> Masquer> Tout révèler. Puis avec l’outil Dégradé (G), utilisez un dégradé de noir et blanc et remplir l’image avec. Où il fait noir, il va devenir transparent et le blanc apparaît. Les gris seront en tons moyens.

Etape 12
Ici, je finis le portefeuille avec 4 images. Pour le titre, j’ai utilisé la police Arial Black, en 32 pixels et majuscules. Aussi j’ai appliqué une ombre portée. Pour les autres textes j’ai utilisé les mêmes caractères d’écriture qui seront enregistrés en tant qu’image lors du montage du HTML.
La seconde navigation utilise les écritures à la main, mais j’ai créé un cercle pour afficher l’élément sélectionné avec l’outil de tracé vectoriel. Toutes les images seront affichées dans une liste Carrousel, de sorte que les 2 icônes de flèches seront les boutons pour déplacer les images.

Etape 13 (Contact)
La dernière partie est le Contactez-nous. C’est juste un formulaire avec nom, email et les champs Message hCard avec une icône dans la barre latérale le moment où l’utilisateur sera en mesure de télécharger mes coordonnées. Pour créer le formulaire j’ai utilisé l’outil Rectangle, cependant si vous voulez créer des formulaires avec des éléments réels, vous pouvez télécharger les éléments du formulaire en PSD à http://www.designerstoolbox.com/. Ils donnent des images de toutes sortes d’éléments de formulaire à partir de tous les principaux navigateurs et plateformes.

Conclusion
Dans ce tutoriel, je vous ai montré un peu de mon processus de conception et comment j’arrive à trouver quelques idées. Vous pouvez remarquer que j’ai utilisé quelques références à des sites différents, tels que Smashmagazine, iStockphoto, Steve Krung, et autres. Il est très important de rester en veille avec tout ce qui se passe, ce qui vous donnera beaucoup de ressources très utiles pour des conceptions meilleures et plus efficaces.
J’ai créé ce modèle pour examiner un service qui reçoit votre design et le code pour vous, vous pouvez allez voir http://abduzeedo.com/psd2html-review. Toutefois, si vous voulez le code, je vous recommande de consulter cette vidéo de John Hicks sur l’avenir du Web Design, il traite de son processus de création d’un site web. C’est vraiment quelque chose à voir.

A propos de l’auteur :
Mon nom est Fabio Sasso, je suis un graphiste / Web designer de Porto Alegre, au Brésil et je suis le fondateur de Abduzeedo. Je vous invite à me suivre sur Twitter ou mon site personnel à http://fabiosasso.com.