Hello à tous !
Aujourd'hui nous allons voir comment recréer l'effet Aqua (ou encore Glossy) connu sous photoshop et très en vogue ce moment ... mais tout celà sous Illustrator !
Pourquoi ? tout simplement pour profiter de l'ergonomie de ce dernier et du tout (enfin presque) vectoriel.

Le but de ce tutoriel est de créer l'élément d'interface suivant :
Cliquez pour voir le fichier-joint
Allons-y Alonso !

/!\ Archtung ! Ce tuto est prévu à la base pour des éléments numériques à destination du web ou autre du genre, bref il est prévu pour un document en RVB et non CMJN. on peut cependant l'adapter pour des doc en CMJN et je donnerai les petites modifs à effectuer alors en rouge entourées de triangles comme vous devriez en avoir dans vos coffre de voiture /!\

I - la barre d'interface :

commençons par tracer un rectangle arrondi* de dimension 600x60 pixels avec un rayon de courbure de 10px (les dimensions sont juste à titre indicatif car nous travaillons en vectoriel) dont on supprime le contour* (on reprend son souffle) :
Cliquez pour voir le fichier-joint

Puis on y applique le dégradé* suivant :
Cliquez pour voir le fichier-joint

Au tour du reflet de lumière supérieur :
On sélectionne le rectangle arrondi que l'on a créé précédement et on le copie/colle devant (ctrl+F, Pomme+F).
Pour travailler tranquillement sur le reflet, je vous suggère de verrouiller* le rectangle de fond.
on applique, grâce au nuancier*, la couleur blanche à ce reflet et une opacité* de 20%.
On sélectionne les 2 points d'ancrage du bas avec l'outils de sélection direct* (flèche blanche en haut de la palette d'outils) puis on les supprime (touche suppr).
Nous reste plus qu'à joindre les 2 points du bas (clic droite -> joindre) à les sélectionner toujours grâce à l'outils de sélection direct et à les remonter vers la moitié de la hauteur de la barre de fond.
Cliquez pour voir le fichier-joint

Nous voilà avec une jolie petite barre dans le plus pur style glossy :
Cliquez pour voir le fichier-joint


II - un bouton :

Et allons-y pour nos 3 p'tits cochons ... euh ... boutons !

Ce coup-ci on trace un cercle* (pas de dimension précise, sachez juste qu'au final, ceux-ci font 33px de diamètre dans cet exemple).
Pour celui-ci, on va lui appliquer une couleur* bleue (#00DEEB pour les intimes).
Cliquez pour voir le fichier-joint

Ensuite, occupons-nous du reflet supérieur :
il suffit de retracer un cercle (ici le reflet fait à peu près 2/3 de la taille du cercle de fond soit 20x20px), de le placer et de lui appliquer le dégradé suivant en mode superposition et enfin on lui applique une opacité de 60% :
Cliquez pour voir le fichier-joint
/!\ Archtung !!! On vous avez prévenu et ben c'est ici que ça se passe : pour des raisons évidente de colorimétrie, les documents créés en CMJN ne supportent pas le mode d'opacité en superposition, on ne peut donc l'utiliser pour un doc à destination de l'impression par exemple.
Comment palier à cela ? C'est muchos simple, puisqu'il suffit de remplacer le dégradé noir -> blanc par un dégradé 'couleur du cercle de fond' -> blanc et appliquer une opacité simple (mode normal).
On peut également pousser le vice à ne pas jouer sur l'opacité et à faire un dégradé 'couleur du cercle de fond' -> 'couleur du cercle de fond clarifié' (cette manip est valable en CMJN mais également en RVB). fin de l'archtung /!\

plus que le reflet intérieur bas :
tracer une elipse (ici 19x8px), blanche sans contour, et appliqué lui une opacité de 60% et un flou gaussien* (attention ! le flou gaussien est un effet pixelisé et non vectoriel ! ce qui signifie que si vous modifiez la taille finale de votre bouton, il va falloir réajuster le valeur du flou gaussien et de tout autre effet pixelisé utilisé), ici la valeur du flou gaussien est de 10 pixels :
Cliquez pour voir le fichier-joint
Et voilà ! fini la petite sphère !

plus qu'à faire le contour des boutons :
on reprend le cercle de fond du bouton, on le copie/colle arrière (ctrl+B, Pomme+ et on modifie sa taille (ici 40x40px).
on lui applique le dégradé suivant :
Cliquez pour voir le fichier-joint
et le tour est joué !


III - Intégration des boutons à la barre :

Cliquez pour voir le fichier-joint

plus qu'à sélectionner le bouton et son contour, le copier/coller 2 fois, les placer ou l'on veut, et leur appliquer la couleur de fond voulue (ici #61CC00 et #FF7F00) :
Cliquez pour voir le fichier-joint

Petite cerise sur le gâteau en ajoutant l'ombre portée* suivante :
Cliquez pour voir le fichier-joint

Et voilà le résultat escompté obtenu !
Cliquez pour voir le fichier-joint

Encore une fois, toutes les valeurs sont données à titre indicatif, n'hésitez pas à les modifier pour obtenir différents rendus.

*Koucéti ke j'trouve ça ?

Le rectangle arrondi : Fenêtre -> Outils (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Le contour d'une forme : Fenêtre -> Outils (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Le dégradé : Fenêtre -> Dégradé de couleurs (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Vérouiller un calque : Fenêtre -> Calques (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Le nuancier : Fenêtre -> Nuancier (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Régler l'opacité : Fenêtre -> Transparence (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Outils de sélection direct : Fenêtre -> Outils (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Tracer un cercle : Fenêtre -> Outils (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Appliquer une couleur (en hexadecimal) : Fenêtre -> Outils (si vous ne l'avez pas à l'écran)
Cliquez pour voir le fichier-joint

Le flou gaussien : Effet -> Atténuation -> Flou gaussien ...

L'ombre protée : Effet -> Spécial -> Ombre portée ...

Et voilou ! bon courage à tous !

Nickel RaGe

merci bcp

Super tuto RaGe

Merci pour ce super tuto Rage !

Alors là le gars, merki beaucoup et en plus c'est plein d'humour. Je m'incline bien bas

Chapeau ! et merci

Ca pour un tuto, c'est un tuto !
Clair, précis, adapté au niveau "Je découvre Illustrator et j'adore avec un tuto pareil".

Rage, t'es pas un malade pour rien....
Félicitations!




fô épingler absolument.

Merci de vos remerciements
Content que ça vous plaise
Je pense que j'en ferai d'autre pour Illustrator dans le domaine du web design.
C'est la moindre des choses que je puisse faire

Ah oui effectivement, j'aurais pu préciser que ça s'adressait avant tout aux débutants.

Bonjour à tous,

RaGe ton tuto est EXCELLENT, vraiment !!!
Je le garde au chaud !!!

Merci ded
Etant frappé de plein fouet par la tutomania, je peux d'ores et déjà vous annoncer la couleur du prochain tuto qui se situera dans la section 'HTML et CSS' et qui est le fruit d'une soirée (nuit ?) passée à trifouiller du CSS :
une galerie photo full HTML/CSS (sans une goutte de JavaScript).
Qui est d'ailleurs visible dès maintenant ici.
A vos bloc notes !!

ecellent tuto

Genial

et c'est beauuuuuuuu

Et tout ça avec la plus grande "simplicité...

Vais ptet penser à compiler quelques uns de vos tutoriaux les Zozios

Chapeau bas @urels

j'ai que deux punaise dans mon degrades comment on fait pour en avoir trois.


au secours.

Tu cliques simplement entre tes 2 "punaises"

Merci Roger (sans vouloir récupérer les félicitations)

alors maintenant j'ai trois punaise mais je ne trouver pas le meme tableau des nuances qu'il y'as pour le debut des trois petits cochons.

Ops de rien Maurice j'suis un peu à coté de la plaque en ce moment

c'est la fenetre selecteur de couleur que je ne trouve pas


desoles je suis un peu a la masse cote graphisme mais bon j'essaie de m'ameliorer


plus vite je m'ameliorerait plus vite j'arreterai de vous souler avec mes questions de debutant



lol

encor deux à trois jour et tu y arrivera luboman courage

moi j'aurais dit semaine ptdr

j'ai trouvé !!!!

Ben ça m'a l'air bien tout ça ! étrangement l'affichage taille réel plante et je ne peux pas apprécier pleinement.
Mais bon, tu t'en es très bien sorti apparemment.
Avec ces bases, tu peux t'amuser à extrapoler le style et créer moultes choses sympathiques.


Sans rancune Gérard

Cliquez pour voir le fichier-joint
excellentissime !!!
Merci !

je te raconte pas comment j'ai galere mais j'ai a ppris plein de truc et attend tes autres tuto avec impatience.
encore merci rage

et un nouveau totem a ajouté ds ma galeries des dieux

Lot of merci..... Depuis le temps que je m' demandais comentKeskePasPossibleSurTateurToutça....
C'est bon une rage comme la tienne
ED

Bonjour à tous,

Cet effet est présent chez mac et on peut le mettre en plugin pour certains logiciels comme ichat

Salut,
apparemment je suis le seul dans ce cas, mais je suit à la lettre le tuto mais le reflet supérieur n'est pas en dégradé chez moi! c'est malheureusement ça qui rend le truc sympa...
si quelqu'un à rencontré ce souci ou à une idée, je suis preneur de solutions!!

merci beaucoup!!!

Cliquez pour voir le fichier-joint



EDIT: >>>>>> hop je me flagelle! en fait il fallait simplement que je sois en RVB, j'étais par défaut en CMJN et ça fonctionne pas en CMJN...

Bonjour ( bon c'est plus bonsoir, j'avoue ) !

Je suis tout nouveau sur le forum et un peu dans le métier quand même ^^'

Voilà 2 ans que j'ai fais un CAP Signalétique Enseigne et Décor ( Ancien peintre en lettre ) et maintenant je bosse dans l'évenementiel.

Je me suis inscrit pour en apprendre un peu plus sur les logiciels de photomontage et de vectorisation et voilà le premier sujet sur quoi je tombe ... Tout simplement un grand Bravo et Merci ^^

L'ambiance du forum à l'air géniale ( même si je comprend pas pourquoi vous êtes tous des "malaaades" ) et j'ai bien envie d'éplucher tous les posts pour paufiner ma maitrise de l'informatique

Bonne soirée à tout le monde, je retourne bosser xD
Y'a pas mal de drops et de pvc à faire ce soir ...

Bisous tout le monde

Bonjour tout le monde, bon j'ai bien fait tout le petit tuto ( vachement instructif!). Bon le seul petit soucis que j'ai c'est que le flou gaussien ne rend pas comme sur l'exemple... j'ai bien essayé de recommencer plusieurs fois mais rien n'y fait. je vous montre le resultat:

Cliquez pour voir le fichier-joint


si je change le rayon dans le flou gaussien ca pixelise encore plus mais j'ai pas l'effet recherché

Un petit coup de main?


Edit Tophy
Taille d'image importée

Bonjour stumminello, et bienvenue chez les Malaaades.


Déjà si tu compares le résultat escompté du tuto
Cliquez pour voir le fichier-joint


et ton résultat
Cliquez pour voir le fichier-joint


il doit y avoir un problème de manipulations que tu n'as pas respecté,
entre le noir qui est en haut et la netteté des 3 boules de couleur...

bien exact ca j'avais pas vu ca sous cet oeil; je vais me replonger dedans....

I'll be back......

Oui mais bon... ça peut toujours servir
Un grand MERCI

super tuto !! en attend d'autres ^^ merci encore

Bonjour, Je ss trés content d'être avec vous
Vraiment c'est Génial. Bravao pour toi.

Y a beaucoup de tutos un peu à droite et à gauche sur le net

Tout à fait Tendm, c'est ce qui est intéressant du reste, car cela permet de voir différentes façon de procéder et de se choisir la ou les techniques qui nous correspondent le mieux.

bonjour,
quelqu'un pourrait-il me dire si c'est bien ça la tendance web 2.0 ? si non, ben c koi alors??

Bonjour Jam STYLZ,
voici un lien sur Wiki sur cette technologie, mais d'autre membres t'apporteront de meilleurs réponses (Tu peux ouvrir un topic).

PS : bienvenue sur la Logo .

Bonjour, l'effet Aqua est apparu sur la 1ere version d'OSX d'Apple en 2001... c'est depuis l'habillage graphique de l'OS et la "signature" Graphique des OS Apple, depuis il à largement été reponpé un peu partout ...

Web 2.0 est une notion sans fondement ... pour créer le buzz quoi.
Au final ça ne veut rien dire.

Hormis sur Mac OS, cet effet s'est vu utilisé à outrance dans le domaine du web il y a 2-3 années.
Aujourd'hui, apparemment, on est toujours dans la tendance web 2.0 d'après les gonfleurs de pneus de train, or la mode vestimentaire du web semble encore avoir changé ... sauf pour les gros paquebots, qui, avec leur taille colossale ont du mal à braquer et à faire circuler l'info.

Bref, les effets aqua sont encore très présent, mais plutôt has been selon les spécialistes de la discipline du webdesign.
On est plus dans des aplats, des vectos 2D à la forme chiadée, moins de volumes et de reliefs et une plus grande sobriété.

M'enfin pour trancher dans le lard, perso, je dirai que les tendances ... c'est comme la mode vestimentaire, ça sert juste à rien

Pour moi, ce qu'il y a de plus intéressant à retirer de cette notion de web 2.0, c'est avant tout le progrès technologique des navigateurs entre autre, qui permette un web plus interactif, moins brut de décoffrage et donc plus agréable à utiliser.

ok ben, si je comprends bien les tendances actuelles sont moins attrayantes ke les effets aqua ou autre web 2.0? t'aurais kelkes links pr m'en rendre compte?
merci.

J'ai pas de lien en particulier.
Il faut faire de la veille et surfer à droite à gauche.
Tiens juste ce lien qui peut donner un vague aperçu :
http://www.smashingmagazine.com/2009/01/21...rends-for-2009/

Bref, pas mal de rétro, de photomontages et de styles épurés.

Un grand merci pour ce tuto très clair !!
ça me donne envie d'aller voir tous les autres!

Simplement excellent!!

Merci, très bien expliqué, très clairment...

Muy bien !!! Grrrrrrrrracias , Merci

Merci pour ce tuto très bien réalisé,
vais vite allez voir d'autres du même genre )

Excellent taff !