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.
Ajoutez un commentaire 1 Commentaires
É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
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
1 commentaires et trackbacks
![]()
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
![]()
Juan a dit...
Hello from Colombia!!!
Amazing Job
Le Travail Étonnant
Le 06/22/2008 à 12:22 AM
Contribuez à Web Designer Things, partagez votre inspiration !
Articles populaires
Articles par catégorie
Tous les articles
- 20 sites Flash impressionnants
- 28 Vidéos Motion Graphics Reels littéralement bluffantes ! (Showreels)
- 30 Magnifiques photos HDR
- 40 Portfolios Ajax/CSS très inspirés
- 9 Frameworks CSS pour simplifier vos mises en pages
- Coda 1.6 : Plugins & Subversion
- Comparez vos polices pour le web avec Typetester
- Créer des fonds originaux pour votre site internet.
- Créer un bouton glossy Web 2.0 avec Fireworks
- Désactiver les ombres de captures des fenêtres de Mac OS X
- Développer un site Internet optimisé pour iPhone et iPod Touch
- Dessinez le nuage “Mobile Me” d’Apple avec Fireworks CS3
- Expression Engine 2 arrive bientôt
- Faire connaître son site grâce aux galeries Web
- Filtrage de masse des réseaux en France
- Galeries, Diaporamas et Lightboxes javascript pour Mootools
- Goplan 2.0, système de gestion de projet en ligne, est sur les rails
- Kronos - Application de gestion de temps
- Liste d’agences qui créent les plus beaux génériques et habillages Tv
- Monétiser le traffic de son site avec BuySellAds
- Mootools 1.2, Framework Javascript/Ajax est arrivé
- Navigation fluide et automatique à travers vos ancres avec Smooth Navigation
- Sites de photographes talentueux en Flash, Ajax/Javascript et CSS
- Validez vos pages Web grâce aux outils de validation du W3C
- Versions - Client Subversion pour Mac
- Vidéo de skate slow motion au Palais de Tokyo



Julien Lavergne a dit...
Sympa !!!
Le 06/17/2008 à 09:36 PM