Dessinez le nuage “Mobile Me” d’Apple avec Fireworks CS3

Mobile Me est un service qui a été lancé par Apple en 2008. Son logo représente un nuage visuellement sympathique que je vous propose de recréer à l’aide de Fireworks CS3.

Le logo de Mobile Me intrègre derrière le nuage des icônes d’applications que nous n’allons pas aborder pour que ce tutorial puisse rester accessible à un plus grand nombre de personnes. Il n’est cependant pas impossible que vous retrouviez les méthodes de construction de ces icônes dans des tutoriaux ultérieurs.



Étape 1

Commencez par créer un rectangle aux bords arrondis. Appliquez un raduis maximum pour que les extrémité du rectangle ressemblent à des cercles. Appliquez ensuite un dégradé bleu clair et une bordure plus foncée.

Étape 2

Prenez maintenant la plume afin de modifier la forme que nous venons de créer. Il vous faudra créer un nouveau point et modifier les courbes de bézier afin de faire ressembler l’une des extrémités de notre rectangle à un cercle.

Étape 3

Créez un nouveau cercle d’une couleur quelconque et appliquez une ombre intérieure selon les réglages suivants. Veillez à cocher la case “Knock Out” qui fera apparaître unique l’ombre intérieur que nous voulons appliquer.

Positionnez le cercle de telle manière à ce qu’il soit décalé par rapport au reste de la forme.

Étape 4

Maintenant, vous allez devoir créer un nouveau cercle en appliquant un dégradé. Ce dégradé doit aller du bleu vers le blanc et l’opacité de 50% à 100%.

Étape 5

Créez ensuite un second cercle un peu plus petit. Appliquez une ombre interne selon les réglages suivants. Veillez à cocher la case “Knock Out” comme vous l’avez fait précédemment.

Placez ensuite ce cercle derrière notre forme principale.

Étape 6

Dupliquez la forme que vous avez créé dans l’étape 5. Placez le cercle au-dessus de tous les autres, de la même manière que dans la figure suivante.

Étape 7

Vous pouvez vous amuser à ajouter autant de cercles que vous voulez à votre nuage. Vous pouvez par exemple supprimer le contour de certains cercles afin de varier les effets.

Étape 8

Créons maintenant un peu de brouillard. Dessinez une forme de type “patate” et remplissez-le d’un dégradé allant du blanc vers le bleu clair.

Étape 9

Appliquez un flou gaussien d’environ 7 à la forme que vous venez de créer. Ceci va permettre de masquer les croisement des bordures des bulles qui sont en trop. Modifiez votre patate en fonction de ce que vous voulez masquer ou “brouiller”.

Étape 10

Ajoutons le texte “mobile” avec la police Arial Rounded. Vous pouvez appliquer une légère ombre intérieure au texte pour lui donner plus de profondeur.

Étape 11

Au tour du “me” maintenant. Appliquez un dégradé à ce texte si vous voulez un résultat identique à celui qu’Apple a voulu donner. De la même manière que pour le texte précédent, vous pouvez appliquer une ombre intérieure afin de donner de la profondeur à ce texte.

Étape 12

Dernière petite touche : Dessinez une forme de couronne et remplissez-la de bleu. Cette forme va permettre de donner un peu de relief à notre nuage.

Étape 13

Appliquez un dernier flou gaussien à cette forme, et voilà !

Étape 14

Pour ceux qui veulent aller un peu plus loin, je vais maintenant décrire les techniques permettant d’appliquer une ombre et de faire un reflet sur le nuage.

Créez une nouvelle forme grise derrière votre nuage.

Étape 15

Applatissez la forme comme ci-dessous :

Étape 16

Pour créer le reflet, il faut d’abord dupliquer notre nuage.

Transformez ensuite le nuage en le renversant.

Étape 17

Pour créer le dégradé du reflet, nous allons utiliser un masque. Créez un rectangle rempli d’un dégradé allant de gris foncé (en haut) vers noir (en bas). Sélectionnez ensuite votre rectangle, appuyez sur SHIFT, et sélectionnez le calque correspondant à votre nuage retourné.

Sélectionnez ensuite Modify > Mask > Group as mask pour créer le masque. Libre à vous de retoucher le dégradé de votre masque pour modifier l’opacité du reflet.

About the author

Benjamin David
Hey there, I'm Ben ! I'm multimedia project manager, and when I'm not designing or writing posts, I listen to good music like Jack Johnson.



Ajoutez un commentaire

Laissez un commentaire à cet article à l'aide du formulaire ci-dessous. Vous pouvez aussi laisser un trackback à partir de votre site. Il y a actuellement 1 réponses et trackbacks à cet article.

Envoyer votre message

Rappelez vous de mes informations

Notifiez-moi des réponses par email

    ou remonter au début de l'article


1 commentaires et trackbacks

Gravatar par déafaut

Julien Lavergne a dit...

Sympa !!!

Le 06/17/2008  à  09:36 PM

Gravatar par déafaut

Benjamin David a dit...

Suite à de petits dysfonctionnements avec l’enregistrement de commentaires, certains message datant d’hier ont été supprimé. Merci de nous excuser du désagrément

Le 06/18/2008  à  01:59 PM

Gravatar par déafaut

Juan a dit...

Hello from Colombia!!!

Amazing Job

Le Travail Étonnant

Le 06/22/2008  à  12:22 AM

Gravatar par déafaut

Benjamin David a dit...

Thanks Juan !

Le 06/22/2008  à  03:43 PM

Revenir en haut de la page