WKS L'apprentissage du web design et du graphisme pour professionnel

Saga twitter 1 - +100 ic�nes d'inspiration twitter

Wonka — 2009-07-08T21:53:25Z

Apr�s avoir r�cemment d�couvert twitter je me suis dit qu'il serait int�ressant de faire un tutoriel concernant ce service de micro blogging. Twitter est un site qui permet d'envoyer des minis messages � sa bande de followers (comprendre ceux qui suivent vos minis aventures). Mais bien �videmment, vous le savez d�j� … d�j� plusieurs millions de personnes utilisent ce service quotidiennement et moi je suis � la traine.

Je vous propose aujourd'hui de d�couvrir le service de twitter en s'int�ressant d'avantage � son esprit graphique. Nous �tudierons son logo puis son site Internet et nous finirons par cr�er nous aussi du graphisme styl� twitter !

Cet article se compose de trois parties :

L'univers graphique de twitter
Les ic�nes Follow me, sp�cial twitter
Cr�er une publicit� twitter avec Photoshop.

L'univers graphique de twitter

Ce service se doit d'�tre simpliste au maximum. Twitter joue donc la carte de la sobri�t� que ce soit sur son site Internet ou son logo. Quand on arrive sur la page d'accueil on doit reconnaitre le service mais surtout identifier les diff�rentes actions possibles. Explication du service, inscription et ou connexion.

Il suffit de regarder la page d'accueil du site :

Ou encore la page d'inscription qui est d'une simplicit� enfantine … hormis le captcha qui reste une v�ritable abomination.

Ou encore la page d'administration du compte qui permet de modifier le design en quelques clics.

Le logo repr�sente relativement bien cet esprit simple et a�r� du service, les couleurs sont �galement judicieusement s�lectionn�es.

Ou encore l'oiseau mascotte qui repr�sente au mieux l'ambiance : rapide et a�rien.

Les ic�nes Follow me sp�cial twitter

Depuis le succ�s grandissant du service twitter, de nombreux webdesigners de talent ont d�velopp� des ic�nes, ou des mascottes pouvant aider au mieux les internautes � suivre le micro blogging. Voici une s�lection des meilleures cr�ations disponibles en t�l�chargement sur le web.

ICONE 1

http://www.iconarchive.com/show/web-2-icons-by-fasticon/Twitter-icon.html

ICONE 2

http://www.productivedreams.com/its-twitter-time-free-vector-icon-set/

ICONE 3

http://designreviver.com/freebies/6-free-new-social-icons-digg-twitter-stumble-rss-delicious-reddit/

ICONE 4

http://vector.tutsplus.com/illustration/create-a-twitter-style-bird-mascot/

ICONE 5

http://phiredesign.deviantart.com/art/Twitter-Icon-103468482

ICONE 6

http://www.hongkiat.com/blog/100-remarkably-beautiful-twitter-icons-and-buttons/

ICONE 7

http://randaclay.com/freebies/free-twitter-graphics/

ICONE 8

http://kailoon.com/free-vector-icons-set-twitter-birdy-icon/

ICONE 9

http://icontexto.blogspot.com/2008/09/icontexto-webdev-social-bookmark-bonus.html

ICONE 10

http://monkeyworks.wordpress.com/2008/11/12/twitter-icons-with-attitude/

ICONE 11

http://www.smashingmagazine.com/2008/09/23/practika-a-free-icon-set/

ICONE 12

http://thedesignsuperhero.com/2008/10/free-psds-give-away-high-resolution-twitter-bird-icons/

ICONE 13

http://www.webdesignerdepot.com/2009/07/50-free-and-exclusive-twitter-icons/

ICONE 14

http://juliusx.deviantart.com/art/Twitter-Icons-PSD-117644880

ICONE 15

http://www.webdesign.fm/free-twitter-icons-happy-birds/

ICONE 16

http://web-kreation.com/index.php/articles/freebies-2-awesome-twitter-icons/

ICONE 17

http://ithemes.com/free-rockin-twitter-icons-for-your-blog/

ICONE 18

http://littleboxofideas.deviantart.com/art/TWEETA-A-Free-Twitter-Icon-Set-120816409

ICONE 19

http://cyberella74.deviantart.com/art/Twitter-dock-icons-125995572

ICONE 20

http://milomark.deviantart.com/art/Twitter-103084309

ICONE 21

http://antonist.deviantart.com/art/twitter-icon-117679205

ICONE 22

http://poeticpixel.box.com.ph/2009/03/26/free-twitter-icon/

ICONE 23

http://aleandros.deviantart.com/art/Twitter-icon-87333441

ICONE 24

http://tribalmarkings.deviantart.com/art/Twitter-Dock-icon-119835593

ICONE 25

http://catmy.deviantart.com/art/Lovely-Twitter-Icons-119310358

ICONE 26

http://www.iconspedia.com/icon/twitter-bird-5-63.html

ICONE 27

http://www.flickr.com/photos/darkmotion/2691565773/

ICONE 28

http://www.blog.spoongraphics.co.uk/freebies/8-free-cute-and-simple-twitter-bird-vector-graphics

ICONE 29

http://inaliblast.deviantart.com/art/Twitter-Birds-117712134

ICONE 30

http://thedesignsuperhero.com/2009/03/tweet-tweet-cute-tweet-another-free-twitter-icon/

ICONE 31

http://www.productivedreams.com/free-twitter-bird-icon-set/

ICONE 32

http://freakyframes.deviantart.com/art/Twitter-Bird-127757230

ICONE 33

http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/

ICONE 34

http://tylersticka.deviantart.com/art/TweetDeck-Replacement-Icons-105464224

ICONE 35

http://graphicleftovers.com/graphic/Twitter-Eggs/

ICONE 36

http://fasticon.com/freeware/index.php/twitter-block-icons/

ICONE 37

http://monkeyworks.wordpress.com/2008/09/30/tweeter-icon/

ICONE 38

http://www.jankoatwarpspeed.com/post/2009/01/26/Free-Fat-twitters-icon-pack.aspx

ICONE 39

http://www.flickr.com/photos/maustuff/3174449299/

ICONE 40

http://monkeyworks.wordpress.com/free-twitter-icons/

ICONE 41

http://monkeyworks.wordpress.com/2009/02/10/follow-metwitter-icon/

ICONE 42

http://limeshot.com/2008/follow-me-on-twitter-badges

ICONE 43

http://www.smashingmagazine.com/2009/06/24/birdies-cute-free-twitter-icons-for-your-blog/

ICONE 44

http://leanneboyd.posterous.com/for-the-birds-social-networkin

ICONE 45

http://weblog.404creative.com/2008/12/20/free-vector-twitter-icons/

ICONE 46

http://darkmotiondotcom.deviantart.com/art/Twitter-fellows-123633286

ICONE 47

http://catmy.deviantart.com/art/Twimo-87583007

ICONE 48

http://www.flickr.com/photos/matthamm/3383916444/in/pool-twitterbirds

ICONE 49

http://www.luclatulippe.com/index.php/site/comments/free_twitter_birds/

ICONE 50

http://www.littleboxofideas.com/blog/freebies/tweetbird-free-twitter-icon

Apr�s cette belle liste d'ic�nes Twitter, voici un tutoriel pour cr�er une publicit� toujours dans la m�me th�matique.

Pour lire le prochain article de la saga, merci de patienter un petit peu Je le publierai dans les prochains jours.

Cr�er une interpolation de forme dans Flash MX

thomeuxe — 2009-07-03T09:01:18Z

Sommaire

Voici le rendu final :

I. Cr�ation de l'objet

1. Objets normaux

Aller � la premi�re de votre animation et dessinez-y votre objet (un carr�, un rond …). Cr�ez ensuite � X images (variable suivant le temps voulu pour la transformation) une image-cl� o� vous dessinerez ce que vous voulez � la fin de votre transformation.

2. Objets particuliers

Pour les textes ou les Bitmaps, avant de cr�er l'interpolation, cliquez droit sur ceux-ci et cliquez sur � s�parer � jusqu'� ce que votre texte ou votre bitmap soit recouvert de petits points blancs. Cr�ez ensuite � X images (variable suivant le temps voulu pour la transformation) une image-cl� o� vous dessinerez (ou �crirez et s�parerez) ce que vous voulez � la fin de votre transformation.

ATTENTION : Pour s�parer un texte de plusieurs lettres, vous devrez s�parer le tout 2 fois !

II. Cr�ation de l'interpolation

• Cette �tape est extr�mement simple : cliquez-droit au milieu du sc�nario et cliquez sur � cr�er une interpolation de forme �. Vous pouvez ensuite constater qu'une interpolation s'est cr��e et que, par exemple, votre carr� devient progressivement un rond.

• Vous pouvez, sur l'interpolation, cr�er une acc�l�ration positive ou n�gative (cliquez dans le sc�nario, au milieu de votre interpolation et modifiez ce param�tre dans le panneau des propri�t�s).

• Pour un meilleur rendu lors de la publication, vous pouvez copier la 1^re image de votre animation � X images (m�me nombre que tout � l'heure) de la fin de votre animation et cr�er une interpolation de forme.

III. Les points de rep�re

Les points de rep�re servent � choisir quelle partie du 1^er objet deviendra telle partie du second objet. Pour cr�er un point de rep�re, placez vous � la 1^re image de l'interpolation et faites CTRL+MAJ+H. Vous verrez normalement un point rouge avec marqu� � a � � l'int�rieur. Ce point se situe aussi � la derni�re image de l'interpolation. Placez-les l� o� vous voulez pour qu'une partie de l'objet se transforme en une autre :

Vous pouvez bien entendu cr�er autant de points de rep�re que vous le voulez.

Comment r�aliser une composition fantastique color�e pour iPhone

Asti — 2009-07-02T13:24:41Z

Bonjour � tous !! Je vous propose aujourd'hui de partager mon travail concernant le TutoGame III. C'est au travers d'un tutoriel (nouvelle chose pour moi) que je vais reprendre pas � pas les �tapes de mon background pour iPhone.

La r�alisation de cette composition est assez longue � entreprendre, et c'est pour cela que je vous propose de diviser le travail en plusieurs chapitres pour une meilleure compr�hension.

I ] Cr�ation du fond :

Apr�s avoir ouvert Photoshop, je cr�e un nouveau document de 320px / 480px sur fond blanc.

Notre but pour ce chapitre est de r�aliser nous-m�me un fond grunge qui servira de support � notre background.

Pour ce fond, j'ai choisis 3 images que je vais superposer sur 3 calques diff�rents en r�glant leur opacit�.

Voici un petit sch�ma r�capitulatif :

Sur ces 3 calques diff�rents, je r�gle les opacit�s comme ceci :

Normalement vous devez avoir un r�sultat comme celui-ci (libre � vous de varier les param�tres pour d�poser votre touche personnelle) :

Comme vous le remarquez, le fond est trop clair. Ce n'est pas ce que nous voulons. Pour rem�dier � cela, je vais ajouter un nouveau � calque de r�glage � des � Niveaux � � ma compo pour assombrir le fond.

Apr�s avoir entr� les param�tres de l'image, vous devez avoir un r�sultat plut�t satisfaisant :

Nous sommes donc arriv�s � la fin de la cr�ation du fond. Les plus faignants pourront prendre un fond d�j� tout fait ou une simple texture pour continuer la suite du tutoriel ( ce que je ne vous conseille pas :p). Nous allons donc tout de suite continuer la cr�ation du background dans le prochain chapitre .

II ] Ajout du personnage et transformations :

Nous voil� donc dans la partie o� nous allons int�grer le personnage qui sera l'�l�ment central de la sc�ne.

Pour cette cr�ation, j'ai choisi une photo d'un homme de dos qui tend les bras. Pourquoi cela ?? J'ai voulu faire en sorte que le personnage soit un sur-homme dans les nuages.

Rendez-vous dans le dossier ressource pour trouver la photographie de n�tre personnage.

Apr�s un petit exercice de d�tourage � la plume, j'ajoute mon personnage au centre du fond comme ceci :

Il est bien �vident que je redimensionne le personnage de fa�on � ce que la t�te ne soit pas coup�e par les menus et options de l'iPhone (enfin ce n'est pas ce qui nous int�resse pour le moment).

Nous allons donc maintenant cr�er les diff�rents effets et habillages de notre personnage. Premi�rement, nous allons faire d�gouliner des bras des gouttes de peintures. Pour ce faire, j'utilise des brushes t�l�charg�s gratuitement � partir du site Brusheezy, disponibles dans le dossier ressource.

Ensuite nous allons proc�der � la transformation des habits du personnage. Le but �tant de leur ajouter de la couleur. Dans le dossier ressource, vous trouverez un fichier .ai (ouvrable avec Photoshop) contenant plusieurs formes color�es. Elles seront donc tr�s int�ressantes pour notre projet dont le th�me principal est la couleur ! Libre � vous de choisir ce qui vous pla�t le plus. L'�tape suivante consiste � choisir les formes de ce fichier et � les ˵ coller ˶ sur notre personnage en mode ˵ Incrustation ˶.

Il me suffit de faire une s�lection de mon personnage et d'aller dans le menu Edition —> Coller dedans.

Apr�s plusieurs tests, nous obtenons un r�sultat plut�t satisfaisant (il est aussi possible d'ajouter plusieurs brushes pour habiller votre personnage) :

Nous avons fini l'habillage tout neuf de n�tre personnage. Maintenant il va falloir s'attaquer � la r�alisation des nuages du premier plan et � l'ajout des montgolfi�res.

III] R�alisation du premier-plan

J'aurais tr�s bien pu int�grer une photo de nuage dans notre composition, mais un brush fera parfaitement l'affaire. Il suffit de vous rendre sur n'importe quel site de formes pour trouver votre bonheur. Ici, ce sont 2 brushes diff�rents qui sont ajout�s sur un nouveau calque. Cepandant pour une meilleure int�gration, il me faut ajouter un masque de fusion (ou utiliser la gomme) pour effacer l�g�rement les pieds de mon personnage.

Voici le r�sultat obtenu :

Pour ajouter un effet de profondeur � ma composition, je rajoute 2 brushes de nuages plus petits avec une opacit� r�duite.

Nous avons vraiment l'impression que notre personnage est sur un nuage ! Mais pour ajouter encore plus de r�alisme, j'ajoute deux montgolfi�res d�tour�es des photos pr�sentent dans le dossier du tutoriel.

Pour clore ce chapitre nous ajoutons une ombre � notre personnage qui s'�tend sur le nuage.

Pour r�aliser cette �tape, il vous faut :

Dupliquer le calque de notre personnage (sans aucun habillage),
Faire une rotation 180� dans le menu Edition —> Transformation,
Dans ce m�me menu Perspective pour �tendre l'ombre au premier-plan,
Apr�s dans les options de fusion, il nous suffit de remplir la calque de noir et de r�gler l'opacit� � environ 15%.

Vous devriez obtenir ce r�sultat

Et voil�, notre cr�ation commence � prendre forme ! Mais d�trompez vous, ce n'est pas encore la fin ! Le prochain chapitre consiste � ajouter les effets � sp�ciaux � sur n�tre background.

IV] Les effets

Nous allons commencer notre dernier chapitre par la r�alisation des 2 faisseaux lumineux sortant des mains.

Pour les r�aliser, je me suis servi principalement de l'outil plume ainsi que des options de fusion du calque.

Je vais commencer par r�aliser 2 trac�s � chaque extr�mit� des 2 bras du personnage comme ceci :

Je vais ensuite faire un clic droit sur notre trac� (vous trouverez les trac�s dans l'onglet situ� � c�t� des calques ), et s�lectionner contour du trac�.

Vous choisirez alors l'outil Pinceau de formes r�gl� sur un diam�tre de 15px et d'une duret� de 0%.

Apr�s cette �tape vous devriez obtenir un r�sultat plut�t similaire :

Nous allons ajouter quelques brushes d'�toiles scintillantes (brushes que l'on peut trouver dans le tutoriel de Wonka pour r�aliser un background iPhone).

Ajoutons du style � notre calque pour avoir un effet N�on.

Notre derni�re �tape va consister � rajouter des formes color�es autour de la t�te de n�tre personnage. Vous vous rappelez du fichier contenant les formes color�es qui ont servi � habiller notre personnage ? Servons-nous en pour r�aliser des arc color�s.

Je tiens � pr�ciser que pour cette �tape plus d�licate, j'ai utilis� des brushes avec texture abim�e pour effacer certaines parties de la forme.

Je vous l'avoue, ces �tapes sont les plus compliqu�es du tutoriel. N'h�sitez surtout pas � choisir d'autres formes color�es ou bien m�me � en cr�er vous-m�me pour ajouter une touche personnelle � votre travail.

Apr�s avoir ajout� quelques �tincelles de lumi�re autour de n�tre personnage et r�gl� quelques petits d�tails, voici la version finale de n�tre background iPhone.

Merci aux plus courageux qui ont lu et suivi le tutoriel depuis le d�but. J'esp�re qu'au travers de ce tutoriel, vous aurez pris du plaisir � r�aliser ce background. Si vous avez des questions ou des remarques, n'h�sitez pas.

� bient�t.

Asti.

Gagner le magazine HS1 Advanced Photoshop en 10 secondes termin�

Wonka — 2009-06-30T06:48:08Z

Rien de plus simple, lis attentivement le r�glement ci-dessous, et participe vite � ce concours de rapidit� ! Seul le plus rapide d'entre vous pourra gagner le mag Bonne chance � tous.

Comment gagner ?

C'est tr�s simple, pour remporter ce magazine il suffit de poster le 34^e commentaire de cet article.

Les r�gles ?

Vous n'avez pas le droit de poster deux commentaires � la suite suite ni m�me avec la m�me adresse email et avec la m�me adresse IP.

Vous devrez remplir le formulaire avec votre pseudonyme, ainsi que votre email (obligatoire). Comme message, vous ferez appel � votre imagination pour trouver une phrase comportant � Advanced Photoshop le meilleur des tutoriaux Photoshop � !

Le cadeau ?

Un num�ro Hors s�rie 1 du magazine Advanced Photoshop offert par le magazine lui-m�me � un lecteur de wks.fr ! Il vous sera envoy� directement dans votre boite aux lettres !

Le comptage des commentaires ?

Un commentaire compt� est un commentaire respectant les r�gles cit�es ci-dessus. Un commentaire qui ne les respectes pas sera tout simplement hors concours.

Bonne chance � tous, et bon jeu.

Interface Graphique : Color Folio 2 Web Design

Wonka — 2009-06-29T21:11:31Z

ColorFolio1 est le kit graphique qui a �t� le plus vendu sur le site kitgrafik.com ! Aujourd'hui le studio Wonka revient avec une nouvelle version de ce fabuleux kit graphique reprenant toutes les fonctionnalit�s ayant fait son succ�s depuis plus de deux ans !

De haut en bas voici ce qu'il ne faut pas manquer de ColorFolio2 : Un logo unique et original (les sources sont disponibles), une section membre personnalis�e, un header avec info premium avec � sa droite un bloc galerie glissant en jquery.

Pour le contenu nous avons pr�vu des blocs de textes ainsi qu'une galerie JavaScript / PHP Image Flow avec effets glissant et de miroir, une page de contact avec v�rification JavaScript et syst�me d'envoi en PHP.

Pour la sidebar des menus verticaux sous forme de listes ainsi qu'une ic�ne d'auto promotion (source disponible). Nous avons �galement ajout� le moteur de recherche Google personnalis�, qui permet de lancer une recherche Google directement � partir du kit graphique ColorFolio 2.

Exclusif, si vous achetez la version Blue de ce kit graphique (ColorFolio2) vous obtiendrez en m�me temps les versions Red, Green, Pink et Red, soit 5 versions vendues pour le prix d'une seule, ce qui repr�sente une �conomie de 60 euros ! De plus en cas de probl�me vous b�n�ficierez de l'assistance technique Wonka !

La th�matique ? Aucune, bien que ce kit soit particuli�rement adapt� pour pr�senter les services d'un webdesigner. En fait ColorFolio est totalement personnalisable ce qui permet de l'adapter pour tout type de site Internet !

N'h�sitez pas une seconde, choisissez ColorFolio2.

Autres aper�us du kit graphique Color Folio2 :

Autres versions de ce m�me kit graphique :

Reproduire l'affiche MoonwalkeR de Michael Jackson - Partie 2

Wonka — 2009-06-26T12:59:22Z

Si vous d�barquez sur cette page, je vous conseille de visiter la premi�re partie de cet article en cliquand ici.

ETAPE 5

Je vais ajouter des reflets brillants sur les lettres de mon texte, pour cela je dois d'abord cr�er de petites �toiles qui seront des scintillements sur le m�tal. La m�thode d�crite ci-dessous sera � utiliser � nouveau pour cr�er les �toiles (un peu plus tard dans ce tutoriel).

Pour cr�er une �toile voici la m�thode : Je commence par cr�er un nouveau calque puis avec un pinceau diffus de 50px (par exemple) je cr�e un point discret, avec un pinceau deux fois moins grand, je cr�e une lueur bien plus lumineuse que la premi�re. Et enfin je vais chercher le brush �toile �clat�e et je cr�e cette effet d'explosion d'�nergie. Pour trouver cette forme de pinceau, rendez-vous dans l'image ci-dessous.

Pour comprendre les diff�rentes �tapes de cr�ation d'une �toile, voir l'image ci-dessous.

Puis je dispose les �toiles sur le haut gauche de chacune des lettres comme ceci :

Et voila ce que cela donne une fois termin� :

ETAPE 6

Je cr�e un nouveau calque et avec un pinceau tr�s clair je vais ajouter des train�es de reflets sur les c�t�s de chaque �toile. Observez l'image ci-dessous pour comprendre la manipulation :

Et voici le r�sultat :

ETAPE 7

Ensuite je vais cr�er une sorte de relief 3d sur mon texte, pour cela je commence par dupliquer mon calque texte que je pixelise en faisant un clic droit sur le calque puis pixeliser le calque.

Je place ce nouveau calque sous le premier texte et je vais dupliquer ce calque plusieurs fois pour donner cet effet de profondeur. Pour cela je s�lectionne l'outil d�placement et j'appuie successivement sur les touches du clavier bas + gauche + Alt six fois. Ce qui a pour cons�quence de d�caler le texte de 1 px vers le bas et 1 px vers la gauche tout en cr�ant � chaque fois un nouveau calque.

Pour terminer, je fusionne tous les calques qui se trouvent sous le texte.

ETAPE 8

J'ajoute une couleur en faisant calque > style de calque > incrustation de couleur, puis je r�cup�re la s�lection du relief. Avec un pinceau l�g�rement plus clair je vais cr�er des lignes sous le bas gauche de chaque lettre.

Voici le r�sultat sur l'ensemble du texte :

ETAPE 9

En utilisant la m�me m�thode que celle pr�c�demment expliqu�e, j'ajoute le texte Jackson.

ETAPE 10

Puis j'ajoute un troisi�me texte MoonwalkeR qui est le titre du film. Je fais attention � une particularit� : la premi�re lettre et la derni�re ont une taille bien plus grande que les lettres int�rieures.

ETAPE 11

J'utilise ensuite la m�me m�thode pour donner le style sur ce texte, le seul changement r�side dans les couleurs du d�grad� principal.

ETAPE 12

Je vais maintenant cr�er un parterre �toil�. Voici ce que cela donne en vue proche :

J'applique ces petites �toiles � l'ensemble du document :

ETAPE 13

Je vais maintenant cr�er une �toile filante, symbole repris plusieurs fois dans le film MoonwalkeR. Pour cela je commence par cr�er la train�e que laisse l'�toile dans le ciel, je commence donc avec l'outil plume pour cr�er une forme comme ceci :

Puis je la transforme pour avoir une train�e ascendante, j'utilise pour cela le menu �dition > transformation > sym�trie horizontale (et / ou verticale) selon votre forme de d�part. Enfin je duplique la forme deux fois et j'ajoute un flou gaussien de 2 � 6 (menu filtre > att�nuation > flou gaussien).

ETAPE 14

Ensuite je cache la forme blanche de d�part. Il ne reste donc que les deux train�es floues. Je cr�e un calque par-dessus et avec un pinceau diffus je peins � droite en vert puis � gauche en bleu et je change le mode de fusion de ce nouveau calque en couleur. Voici une image explicative :

Et voici la train�e dans toute sa splendeur :

ETAPE 15

Ensuite en utilisant la m�thode expliqu�e, plus haut je cr�e une belle �toile bleut�e sur la gauche de ma train�e.

ETAPE 16

Tout autour de cette �toile filante j'ajoute d'autres petites �toiles.

ETAPE 17

Dans un nouveau dossier que j'appelle bande color�e, je cr�e un nouveau calque et avec la s�lection rectangle je cr�e une bande que je remplis de rouge.

ETAPE 18

Je r�p�te l'�tape pr�c�dente � d'autres bandes de diff�rentes couleurs.

ETAPE 19

Puis j'ajoute un style de calque pour chaque bande : lueur interne dont voici la configuration :

Et voici ce que cela donne :

ETAPE 20

Je me place sur le dossier et j'ajoute un masque de fusion : menu calque > masque de fusion > tout faire appara�tre. J'utilise un d�grad� blanc-noir pour cacher la partie basse de mes bandes color�es.

ETAPE 21

Je t�l�charge l'image ci-dessous :

Puis je fais un copier-coller du vaisseau sur mon document. Observez l'image ci-dessous et r�pliquez chacune d'elle pour recr�er les effets de lumi�re du vaisseau. Pour les cr�er rien de plus simple, j'utilise un pinceau diffus bleut� puis un pinceau blanc plus petit. Pour les train�es, j'utilise l'outil doigt sur une lueur blanche.

Voici ce que cela donne sur le document :

ETAPE 22

En utilisant la m�me image source, je copie puis colle le visage de Michael Jackson sur la droite des bandes color�es. J'aurai s�rement besoin de retravailler un peu le visage en bas � gauche ainsi que sur le contour du visage.

ETAPE 23

En utilisant un pinceau et une couleur bleut�e, j'ajoute une lueur bleue sur la droite � la gauche du visage de Michael Jackson.

ETAPE 24

Et avec toutes les m�thodes expliqu�es dans les �tapes pr�c�dentes je cr�e une nouvelle �toile filante derri�re le visage de Michael Jackson. Voici les �tapes de la cr�ation :

Et voici le document :

ETAPE 25

Voici l'�tape la plus simple de ce tutoriel Profitez-en, car apr�s �a se g�te ! En utilisant l'outil texte j'ajoute un slogan en haut et le Copyright du film en bas.

ETAPE 26

Cette �tape consiste � cr�er des collines rocheuses. Attention cette �tape s'apparente plus � du matte painting que d'une r�el technique de cr�ation. La base est constitu�e d'une forme bleue cr��e avec l'outil plume ; la suite est : pinceau de diff�rentes formes et couleurs et outils doigt et goutte d'eau pour travailler.

Voici une image explicative des �tapes de la cr�ation :

Et voici le document g�n�ral avec les collines :

ETAPE 27

En utilisant la m�me technique que pour l'�toile filante, je cr�e une �norme lueur verte derri�re les collines. Voici une image explicative pour la cr�ation de cette lueur :

Et voici le document g�n�ral avec la lueur verte :

ETAPE 28

Je vais ajouter un phare sur l'une des collines. Pour cela je r�utilise toute mon imagination et le pinceau pour donner l'illusion qu'un phare de lumi�re est vraiment pr�sent sur la colline. Voici une image explicative de la cr�ation du phare.

Et voici le document :

ETAPE 29

Et j'en ajoute un deuxi�me :

ETAPE 30

J'applique un copier-coller � quelques personnages trouv�s sur l'image (voir �tape 21) et sur chaque personnage j'ajoute un masque de fusion. Avec le pinceau de 1 px noir, je les d�toure minutieusement.

ETAPE 31

J'ajoute quelques personnages suppl�mentaires.

ETAPE 32

Sur un nouveau calque je retravaille toutes les torches port�es par les personnages. Pour cela rien de plus simple j'utilise un pinceau diffus tr�s clair.

Je passe en revue toute mon image pour d�celer d'�ventuels probl�mes. Puis je me f�licite car OUI mon image est termin�e ! Enfin, g�nial non ?

Des probl�mes sans doute, vous pouvez utiliser les commentaires ci-dessous pour poser vos questions. Merci d'avoir lu ce nouveau tutoriel sur Wks.fr

25 wallpapers de paysages vraiment incroyables

Wonka — 2009-06-19T18:16:15Z

Il n'y a rien � dire ... admirez tout simplement.

Voici une s�lection de 25 wallpapers vraiment magnifiques.

Wallpaper – Magnifique fond d'�cran de paysage #1

Wallpaper – Magnifique fond d'�cran de paysage #2

Wallpaper – Magnifique fond d'�cran de paysage #3

Wallpaper – Magnifique fond d'�cran de paysage #4

Wallpaper – Magnifique fond d'�cran de paysage #5

Wallpaper – Magnifique fond d'�cran de paysage #6

Wallpaper – Magnifique fond d'�cran de paysage #7

Wallpaper – Magnifique fond d'�cran de paysage #8

Wallpaper – Magnifique fond d'�cran de paysage #9

Wallpaper – Magnifique fond d'�cran de paysage #10

Wallpaper – Magnifique fond d'�cran de paysage #11

Wallpaper – Magnifique fond d'�cran de paysage #12

Wallpaper – Magnifique fond d'�cran de paysage #13

Wallpaper – Magnifique fond d'�cran de paysage #14

Wallpaper – Magnifique fond d'�cran de paysage #15

Wallpaper – Magnifique fond d'�cran de paysage #16

Wallpaper – Magnifique fond d'�cran de paysage #17

Wallpaper – Magnifique fond d'�cran de paysage #18

Wallpaper – Magnifique fond d'�cran de paysage #19

Wallpaper – Magnifique fond d'�cran de paysage #20

Wallpaper – Magnifique fond d'�cran de paysage #21

Wallpaper – Magnifique fond d'�cran de paysage #22

Wallpaper – Magnifique fond d'�cran de paysage #23

Wallpaper – Magnifique fond d'�cran de paysage #24

Wallpaper – Magnifique fond d'�cran de paysage #25

Et si vous en connaissez d'autres, n'h�sitez pas � poster vos bonnes adresses dans les commentaires ci-dessous !

Utiliser l'outil pi�ce de Photoshop

arnaud512 — 2009-06-19T18:04:31Z

Voici la photo que je souhaite retoucher.

Je voudrais enlever les voitures.

Comment faire ?

> Utiliser un filtre flou gaussien ? NON

> Copier une partie d'une image et la mettre par dessus et changer nous m�me le teinte ? Presque pas.

Dans cette situation, l'outil pi�ce semble le plus appropri�. L'outil pi�ce, c'est cette petite ic�ne :

Je vais commencer par enlever la voiture blanche. Je zoome dessus et je s�lectionne l'outil pi�ce. Je contourne l�g�rement la voiture.

Ensuite, je me mets a l'int�rieure de ma s�lection et je d�place ma s�lection sur la partie o� il y a de l'herbe.

(on dira que la route s'arr�te un petit peu plus t�t, mais � la taille originale, il n'y a pas de diff�rence).

Voila, la voiture blanche n'est plus pr�sente.

Faites de m�me pour les autres voitures. Mais maintenant, en choisissant la route comme copie.

Voila le r�sultat final.

Ce tutoriel a �t� r�alis� par Arnaud512 pour Wks.fr Toute reproduction, totale ou partielle, est interdite.

Tout savoir sur la cr�ation d'ic�nes avec Photoshop

Wonka — 2009-06-16T10:06:34Z

Sommaire

Bien qu'une ic�ne soit � la base totalement basique de par sa fonction d'indication (comme un panneau de signalisation), toutes les productions de ce type sont aujourd'hui � design�es � et deviennent de v�ritables illustrations � par enti�re. Le cas le plus frappant de cette �volution est sans conteste les ic�nes utilis�es sur l'OS Windows (voir l'image ci-dessous) !

Vous remarquez bien la diff�rence entre le style W95 et le style XP bien plus travaill�, presque en 3d, ces ic�nes deviennent belles et prennent une nouvelle dimension !

Ce nouveau style � ainsi �t� d�velopp� de plus en plus. C'est gr�ce � la vague du � Web 2.0 � que ce style s'est vraiment d�mocratis� sur Internet comme sur tous les softwares. Encore une fois, nous pouvons prendre le cas de Windows en observant les ic�nes de sa derni�re version Vista :

Vous pouvez �galement observer le design tr�s prononc� du logiciel AntiVirus McAfee qui repr�sente totalement cette nouvelle tendance.

Aujourd'hui les ic�nes stagnent sur ce style Web2. Si vous observez les ic�nes du prochain Windows (version Seven) vous ne remarquerez pas de grandes diff�rences ! Aujourd'hui les ic�nes �voluent non pas vers un nouveau style (illustration) mais vers une nouvelle utilisation (ergonomie), ces nouveaut�s sont mises en place pour faciliter l'exp�rience utilisateur.

LES CONSEILS POUR CREER LES IC�NES

Tr�s simplement il vous suffira de comprendre un concept pour assimiler tous les conseils d�crits ci-dessous : le concept de l'unicit�. Lorsque vous voyez une ic�ne vous devriez pouvoir donner : sa symbolique avec l'action qui en d�coule, mais �galement sa provenance.

Par exemple quand vous voyez cette ic�ne :

Vous pensez � Firefox puis � Internet.

Vous n'�tes pas convaincu ?

Essayez de reconnaitre les ic�nes ci-dessous :

Et oui encore Firefox et Internet. En observant simplement le style d'une ic�ne vous pouvez reconnaitre un logiciel !

Ce petit jeu permet de mettre en lumi�re le concept suivant : Chaque ic�ne d'un pack doit avoir une symbolique unique, mais toutes doivent suivre un design commun. Le design est compos� : de sa taille, des tonalit�s de couleurs, des effets de style.

Voici maintenant quelques explications sur le concept de cr�ation des ic�nes.

La taille :

Chaque ic�ne doit avoir la m�me taille, aussi bien en largeur qu'en hauteur, certaines pourront �tre plus petites ou plus grandes, elles devront avoir alors la m�me proportion. Vous pouvez vous aider des rep�res de Photosop (ou d'Illustrator pour cr�er des formes identiques).

Les tonalit�s des couleurs :

Tr�s important, si vous avez commenc� vos ic�nes avec des tons pastels pensez vous qu'il soit tr�s logique d'utiliser un rouge vif pour une ic�ne suppression ? Bien s�r que non, veillez toujours � respecter un panel de couleurs !

Les effets de style :

Les effets tels que les ombres, les reflets, les d�grad�s devront �tre list�s et utilis�s pour chaque nouvelle ic�ne ! Attention � ne pas en oublier.

CREER SA PREMIERE IC�NE

Voici maintenant un tutoriel pour cr�er une ic�ne d'interdiction. Vous verrez dans la derni�re �tape comment mettre en �vidence les styles graphiques utilis�s.

Tous les fichiers Photoshop sont t�l�chargeables en bas de cette page. Si vous avez des questions merci d'utiliser le formulaire en bas de page.

Voici le r�sultat final de cette ic�ne :

ETAPE 1

Je lance le logiciel Photoshop et je cr�e un nouveau document de 600 px de c�t�s, sur fond blanc.

Je s�lectionne l'outil des formes personnalis�es puis je cr�e le logo du panneau d'interdiction. S�lectionner la forme ad�quate dans la fen�tre de configuration de l'outil :

ETAPE 2

Je vais ajouter deux styles de calques � ma forme, je commence par une incrustation de d�grad� puis par un contour.

ETAPE 3

Je pix�lise le calque de ma forme puis je r�cup�re sa s�lection en faisant ctrl + clic sur le calque. Je cr�e un nouveau calque. Avec un large pinceau diffus je cr�e une lueur sur la partie basse.

ETAPE 4

Je passe ce calque en mode de fusion incrustation.

ETAPE 5

Je cr�e un nouveau calque, normalement ma s�lection est toujours active. Je la remplis de blanc en utilisant le pot de peinture. Je v�rifie que l'outil s�lection est actif. Je d�place la s�lection de 5 px vers le haut. J'appuie sur la touche Suppr.

ETAPE 6

J'ajoute un masque de fusion et je cache le haut pour ne garder que la partie basse de mon contour. Je diminue l'opacit� de ce calque � 50M d'opacit�.

ETAPE 7

Je cr�e un nouveau calque, je r�cup�re la s�lection de ma forme. Je remplis gr�ce au pot de peinture cette s�lection.

ETAPE 8

J'ajoute un masque de fusion pour cacher la partie basse de la forme blanche.

ETAPE 9

Je r�p�te les �tapes 7 et 8, seulement, avant d'ajouter le masque de fusion je d�cale de 10px vers le bas la s�lection et j'appuie sur Suppr pour cr�er le contour.

ETAPE 10

Je cr�e un nouveau calque, puis avec l'ellipse de s�lection je cr�e un ovale noir tr�s aplati. J'applique ensuite un filtre, menu filtre > att�nuation > flou gaussien : 5px. Je place ce calque au dessus de l'arri�re plan.

Et voici mon ic�ne est d�j� termin�e. La partie graphique est maintenant termin�e.

Voici une image avec les explications concernant les diff�rents styles graphiques utilis�s sur cette ic�ne :

CREER UN PACK

Le but maintenant est de pouvoir cr�er une ic�ne de m�me type, pour cela veuillez suivre les conseils ci-dessous.

ETAPE 1

J'ajoute des rep�res qui me permettent de cr�er une seconde ic�ne de la m�me taille.

ETAPE 2

Je cr�e une ellipse qui va me servir de forme de base pour ma seconde ic�ne.

ETAPE 3

J'ajoute les styles de calques, je fais attention � utiliser la m�me configuration en modifiant simplement les couleurs.

ETAPE 4

Je fais un copier coller des reflets utilis�s dans l'ic�ne pr�c�dente.

ETAPE 5

Avec l'aide des rep�res je cr�e une zone centrale qui servira � accueillir les symboles. Le but �tant de ne jamais d�passer la limite !

ETAPE 6

Je cr�e mon symbole, ici une fl�che tourn�e vers la droite, qui invite l'utilisateur � cliquer pour se rendre sur une page suivante par exemple.

ETAPE 7

Comme pr�c�demment j'ajoute les contours autour de ma forme !

ETAPE 8

Et c'est termin�.

Voici ma nouvelle ic�ne, vous pouvez v�rifier que toutes les sp�cificit�s graphiques sont � nouveau respect�es.

En haut � droite vous avez une visualisation des ic�nes cr��es en taille � small �.

Si vous avez bien compris cet article, il sera facile pour vous de cr�er une suite d'ic�nes et de d�cliner ce style en un pack complet. Si vous y parvenez j'esp�re que vous posterez vos cr�ations dans la galerie ci-dessous !

Merci � tous d'avoir lu ce nouveau tutoriel sur Wks.fr !

Gagner le num�ro 8 du magazine Webdesign en 10 secondes - termin�

Wonka — 2009-06-12T11:42:49Z

Voici le premier concours rapide sur wks.fr, c'est tr�s simple le but est de remporter le cadeau mis en jeu aujourd'hui soit le magazine 8 de WebDesign.

Comment gagner ?

C'est tr�s simple, pour remporter ce magazine il suffit de poster le 24^e commentaire de cet article.

Les r�gles ?

Vous n'avez pas le droit de poster deux commentaires de suite avec la m�me adresse email et avec la m�me adresse IP.

Vous devrez remplir le formulaire avec votre pseudonyme, ainsi que votre email (obligatoire). Comme message vous ferez appel � votre imagination pour trouver une phrase comportant � WebDesign num�ro 8 � !

Le cadeau ?

Un num�ro 8 du magazine WebDesign offert par le magazine lui-m�me � un lecteur de wks.fr ! Il vous sera envoy� directement dans votre boite aux lettres

Bonne chance � tous Et bon jeu.