Au regard de la campagne électorale qu’il a put mener, et qui lui à valut son succès, Barack Obama à montré que l’une de ses principales préoccupations a été la conception de pièces de campagne. Tout le matériel publié, même son site web nous le confirme.
Et maintenant, nous allons vous donner quelques conseils pour reconstruirel’image de fond de son site avec le logiciel Fireworks.
L’image originale est celle-ci.
Donc, nous allons commencer à construire cette image et voir comment certains de ces effets se font sur Fireworks. (Rappelez-vous, ce n’est que la partie 1 … Bientôt, nous allons vous apprendre comment faire le CSS complet.) .

ETAPE 1
Commençons par l’ouverture d’un nouveau document de 1280 x 1024px. Réglez la couleur de fond sur # 01245C. Nous allons utiliser les lignes de guides pour délimiter la zone centrale de contenu.Faire tous 160px de la frontière (à gauche, à droite et en haut), donc un espace central de 960px.


ETAPE 2
Créer un rectangle de 960 x 850px (il faut aller au bas de la page). Appliquer un dégradé linéaire de # FFFFFF à # 01245C.


ETAPE 3
Maintenant, nous allons commencer à construire le fond embrasé. Sélectionnez l’outil Plume (P) et commencer à dessiner une forme comme indiqué. Utilisez un Gradient radial de FFFFFF # à # 85CFF2 et 65% d’opacité pour cette dernière couleur. Après cela, appliquez un 100% de plume avec la texture Swish (20% de celui-ci). Après cela, nous appliquons une Dodge de couleur et toute la forme avec un alpha à 60%.


ETAPE 4
Pour appliquer à ce fond embrasé la couleur que nous voulons, nous devons créer des 2 formes de plus. Pour la première, copiez simplement celle que nous venons de faire et modifiez un peu ses points pour obtenir une petite forme où nous crérons des effets différents partout. Pour celle-ci, utilisez la texture Swish à seulement 2% et passer de la couleur Dodge à Incrustation.


ETAPE 5
Pour la troisième forme brillante, nous allons créer une fois de plus, une formeun peu plus petite que la précédente. Appliquez la couleur # FFFFFF, la plume 100%, la texture à 0%, la densité couleur et l’opacité de 40%.


ETAPE 6
Maintenant, nous allons créer l’ombre. Ce sera également une forme irrégulière.Faire la forme comme ci-dessous, utilisez la couleur # 01245C et 22% de plume.


ETAPE 7
Jetez un regard sur la façon d’ordonner les couches et à l’effet réalisé jusqu’ici.


ETAPE 8
Maintenant, nous allons créer la zone en haut à droite. Pour rendre cet effet de mélange nous allons utiliser une autre commande de Fireworks. Avant de faire cela, créez une ligne comme indiqué, puis aller à Commandes> Creative> Twist and Fade. Jouez un petit peu les valeurs afin de trouver le meilleur résultat. Ici, nous utilisons les valeurs affichées.


ETAPE 9
Maintenant, copiez ce résultat plusieures fois, faites une opacité très faible, environ 8% et positionnez-le comme indiqué. Appliquer un peu de textes et autres éléments, ici nous utilisons quelques étoiles. Jetez toutes les couches qui sont au-dessous de celle-ci, cette façon, les lignes vont obtenir un teint plus lumineux en raison de la Dodge Couleur dans les autres formes.


ETAPE 10
Pour la zone de logo, nous allons créer une autre forme pour faire croire qu’il ya une lumière différente sous cette lueur. Utilisez la couleur # FFFFFF et appliquez une plume de 40%. Nous utilisons aussi quelques éléments supplémentairs, comme certains cercles avec l’alpha aux alentours de 5%.


ETAPE 11
Maintenant, seule la zone centrale est vide. Créez une forme similaire à l’image ci-dessous. Appliquez un dégradé (Gradient) linéaire de # FFFFFF à # 336994. Ensuite, utilisez le rectangle en dessous comme un masque. Couper la forme créée et collez-la dans le rectangle (CTRL + MAJ + V en sélectionnant le rectangle).


RÉSULTAT FINAL
Maintenant, placez quelques éléments-dessus de tout pour faire un fond personnalisé.

Résultat final en pleine taille.

Le fichier PNG est DISPONIBLE ICI.

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. N’hésitez pas à me contacter ou à me suivre sur Twitter.