Nous avons publié une série d’articles avec des images tout simplement fantastiques, crées par les plus célèbres graphistes et illustrateurs, de partout dans le monde. La plupart d’entre eux ont repoussé les limites du mélange, entre effets de lumière et superpositions de couleurs, intriguant.
Nous avons aussi vu quelques sites qui utilisent ce style, même notre nouveau design en possède certains traits. Mais dans ce tutoriel, nous allons vous montrer comment créer un en-tête de site Web avec Fireworks et l’aide d’éléments de conception graphique, et , bien sûr, l’application sur le Web.

REFERENCES
Pour vous inspirer, nous avons sélectionné 5 images de certains articles que nous avons publié ici. De ces images, nous avons pris les éléments que nous voulions appliquer dans notre modèle, tels que des néons, des superpositions de couleurs, effets de lumière, des étoiles, des étincelles, et du gomage pour donner l’idée de mouvement.

Ci-dessus vous pouvez voir les images dans l’ordre: 1 – James White, 2 – Paul-Willock, 3 et 4 – Chuck-Anderson, 5 – Tony-Ariawan.

ETAPE 1
Commencez par télécharger cette image. Créez un nouveau document avec 1200×400 pixels en fond noir. Placez ensuite l’image et redimensionnez-la pour s’adapter à la toile. Utilisez l’image ci-dessous comme référence.

ETAPE 2
Ajoutons un rectangle sur le dessus de l’image. Remplissez le rectangle avec un dégradé, nous utilisons le Spectre (Spectrum) qui est un style par défaut dans Fireworks. Après cela, modifiez le Mode de fusion pour Incrustation. Ce rectangle sera au-dessus des autres éléments que nous allons créer, ainsi vous pouvez même créer une autre couche pour déplacer ce rectangle de cette couche et le verrouiller.

ETAPE 3
Maintenant nous allons créer les éléments sur l’image, comme s’ils étaient des lumières venant du ciel. Pour ce faire, créez un rectangle de 360 x 95 pixels. Changez la plume pour 100% et ajoutez une Texture diagonale avec 22% de Transparence. Après cela, ajoutez un dégradé à ce rectangle. Utilisez le style Argent (Argent Style) et faites-le pivoter de 45 °. Utilisez l’image ci-dessous comme référence.

ETAPE 4
Déplacez le rectangle vers le haut de l’image. Dupliquerzle calque pour en faire augmenter la luminosité. Puis, dupliquez un des rectangles et déplcez-le vers la droite, réduisez un peu sa taille. Cela donnera l’impression qu’une autre lumière, moins forte, vient du sommet.

ETAPE 5
Afin de créer les étoiles, nous allons utiliser l’outil Pinceau (Brush Tool(B)). Pour le type de Contour (Strokes) choisir Aquarelle (WaterColor)> Fine (Thin), après cela allez dans Options de Contour (Stroke Options) et utilisez les valeurs de l’image ci-dessous. En faisant cela, nous allons créer une brosse qui génèrent des points aléatoires.Ensuite, il suffit de sélectionner la couleur blanche pour commencer à peindre quelques étoiles dans le ciel. Astuce: modifiez l’épaisseur de la brosse pour créer des étoiles différentes.

ETAPE 6
Maintenant, nous allons ajouter les lignes de néon. Nous allons utiliser l’outil Vecteur de Chemins (Vector Path Tool(P)). Créez quelques lignes de forme libre et avec l’outil Plume (P), vous pouvez ajuster les segments de courbe en déplaçant simplement le point d’ancrage. Astuce: lorsque vous créez des lignes, essayez de déplacer la souris rapidement, cela va créer des lignes avec moins d’ancrage, et plus lisses.

ETAPE 7
Ici, vous pouvez ajouter de nouveaux éléments, comme des étoiles en plus, de l’éclairage, et faire quelques ajustements comme l’opacité. Aussi, vous pouvez ajouter votre logo et créer une en-tête vraiment cool pour votre site Web.

RÉSULTAT FINAL
La chose la plus fraîche de ce tutoriel, est que vous pouvez jouer avec les couleurs de dégradé du rectangle qui est au-dessus des autres couches, et qui modifiera tous les autres éléments.Vous pouvez créer des ambiances très différentes. Encore une fois, c’était juste un exercice pour vous montrer comment utiliser une inspiration de conception graphique, et l’appliquer sur le Web. Maintenant c’est à vous.

Cliquez pour voir en taille réelle
A propos de l’auteur (Fabiano) :
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. Je vous invite à me suivre sur Twitter.