Aujourd’hui, nous commençons une nouvelle série de tutoriels, au sujet des schémas de développement pour le web, depuis la création de conception au codage CSS. Ces tutoriels viendront en 2 parties: 1 – Mise en page; 2 – CSS.
Mais notre différence est que nous allons unveal et développer les tutoriels sur des sites Web existants. Il est probable que nos étapes ne soient pas les mêmes que celle utilisées pour construire ces sites, mais l’idée est de montrer simplement comment obtenir des résultats très proches de l’original.
Pour débuter la série, notre premier article est sur le menu Newspond. Les couleurs et les effets sont vraiment lisses et modernes. Et c’était les petits détails dans le design qui a attiré notre attention et nous a fait décider de l’utiliser comme notre premier tutoriel
Nous allons utiliser Fireworks pour développer toute la conception, les démarches sont simples, mais ce sont les ajustements et les dégradés qui feront la différence dans le résultat final.

ETAPE 1
Pour commencer, ouvrez un nouveau document avec les dimensios 1000×660. Pick # 595D67 pour la couleur de fond.



ETAPE 2
Faire un rectangle de 1010×100, et appliquer un dégradé qui va de 3F444D # à # 000000. Placez-le à X =- 5 et Y = 0 (Cette position X aidera à notre prochaine étape).

ETAPE 3
Appliquer le filtre>Ombre interne (Filter > Inner Shadow), et choisir ces valeurs comme dans l’image: 0, 90%, 5.



ETAPE 4
Maintenant, faisons le menu. Créer un rectangle de 830×30, centrez-le sur la scène et positionnez-le en Y = 100. Appliquez le dégradé linéaire (Linear Gradient) en utilisant les couleurs comme dans l’image.



ETAPE 5
Ok, maintenant occupons-nous de la zone de contenu d’arrière-plan. Créez un rectangle et appliquez un dégradé linéaire (Linear Gradient) qui va de # 434752 à # 000000. Déplacez le dégradé comme indiqué. C’est éfiicace pour rendre l’ombre dans le menu ci-dessous.



ETAPE 6
Déplacez le calque rectangle derrière tous les autres et appliquez le filtre> Ombre portée (Filter > Drop Shadow), avec les valeurs: 0, 90%, 7.



ETAPE 7
Écrire des textes dans le menu à utiliser comme liens. Ici, on en utilise 4,mais vous en utilisez autant que vous voudrez. Après cela, tracez une ligne # 9EA8B2 au sommet du rectangle. Cela fera le menu pop out.

ETAPE 8
Maintenant, nous allons créer l’arrière-plan des liens actifs. Créez un rectangle et appliquez-lui un dégradé linéaire (Linear Gradient) qui va de # 000000 à # 434752. Positionnez le dégradé comme indiqué. Vous pouvez voir dans le détail que nous avons créé une ligne # 555C68 au-dessus du rectangle.



ETAPE 9
Maintenant, nous allons créer les lignes qui separent chaque lien du menu. Nous allons également aligner les liens dans le menu. Suivez les étapes ci-dessous la création de lignes (notez que, outre les couleurs, vous devez grouper les lignes et appliquer une opacité 40%), puis en créant des lignes guides en laissant un espace de 30px de la frontière, et ajustez l’espacement pour construire enfin un lien supplémentaire aligné à droite du menu.

ETAPE 10
Créer les dégradés de petite frontière. Créez un rectangle 20×30. Appliquez un dégradé linéaire (Linear Gradient) dans la position horizontale avec les couleurs et l’opacité montrés (notez le Feather = 2).Après cela, copiez-le sur l’autre face et appliquez une Modifier > transformer > flip horizontal (Modify > Transform > Flip horizontal).



ETAPE 11
Nous avons presque fini.Occupons-nous du menu pop de plus près, en créant une ombre plus forte en dessous. Pour ce faire, j’ai créé une ellipse # 000000 avec des plumes (Feather) = 33. Déplacez ce calque ellipse vers le bas, juste au-dessus du rectangle qui sera le corps de contenu.



ETAPE 12
Maintenant, ce qui nous reste à faire est de créer du contenu dans le corps central.Vous pouvez afficher le contenu comme bon vous semble. Nous avons utilisé des blocs de texte en vue d’obtenir un rendu plus proche du site d’origine. Ensuite, mettez votre logo en haut.Vous pouvez créer une ellipse # BCC9D9avec Plume (Feather) = 75 et la placer au dessous du logo pour la faire briller.

Résultat final :

Hope you all liked it.

Auteur: Fabiano Meneghetti

A propos de l’auteur
Je suis du Brésil, co-fondateur de Zee avec Fabio. Aujourd’hui, j’aime à jouer avec Fireworks, Photoshop et améliorer mes compétences en CSS. Si vous voulez poser des questions sur certains postes, s’il vous plaît n’hésitez pas à me contacter ou me suivre sur Twitter.