32
Comment réaliser une composition fantastique colorée pour iPhone
Venez découvrir de superbe technique pour créer un fond d’ecran pour iphone mettant en scène un personnage coloré ainsi que des explosions énergétiques !
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.
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Asti
Vous aimez cet article? Partagez le !
Je suis passionné depuis déjà de longues années par l’informatique, l’univers d’internet la création graphique. J’essaie d’apprendre quelques langages informatiques tels que l’xHTML/CC le PHP... L’un de mes projet pour le futur est de créer un blog sur l’univers du Design en général.
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 29 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
2 juillet 2009 15:32, par Thomeuxe
Une seule chose à dire : WOUAH ! cette création est vraiment superbe !! il y a des couleurs et plein d’idées ! encore une fois : trop beau !
Répondre -
3 juillet 2009 01:07, par Fab
Rohlala depuis le temps que j’attendais que tu mettes la compo online... Merci à toi pour cette compo très originale et magnifique et pour ce tutoriel très bien expliqué
Répondre
-
3 juillet 2009 11:00, par Asti
Merci à vous ! Sinon j’avais aussi fourni à Wonka un dossier ressource avec toutes les images nécessaires à la réalisation du tuto :p
Répondre -
3 juillet 2009 11:09, par Clems
C’est vraiment beau, c’est amusant par ce que ca me fais penser aux tutos de chez psdtuts.com, enfin pas aussi long mais presque
Répondre Bravo ! -
3 juillet 2009 11:27, par Wonka
Asti, j’ai ajouté le lien de téléchargement du dossier ressource, et par la même occasion j’ai changé le nom de l’auteur par le tiens, car pour le moment c’était écris wonka
D’ailleurs se serait bien de remplir la description et pourquoi pas un avatar ! Enfin c’est toi qui vois En tout cas bien joué pour ce tutorial, il est magnifique ! Du grand art bravo. J’aimerais en avoir plus de cette qualité sur wks !
Répondre -
3 juillet 2009 22:54, par Tomtom2t
Très très bon tuto, j’adore l’effet final. Bravo
Mais je n’arive pas a poster ma compo :s
Répondre -
4 juillet 2009 21:16, par Fiziko
Hum si on retire « quelques » éléments de psdtuts (pour rappel : Le fond : Tutorial de psdtuts... L’image du perso : Tuto sur comment créer une bulle autour d’une personne. L’image des mongolfières : Tuto de psdtuts) : c’est vrai que la composition personnelle est... bien ! bravo
Répondre-
28 juillet 2009 00:06, par Fragredocroix
Hum tout a fait d’accord, surtout que les montgolfières... Ca fait trop j’veux faire comme les grand graphistes, on en vois sur toutes les images en ce moment c’est relou !
Voir en ligne : http://fragredocroix.free.fr
Répondre-
1er août 2009 19:22, par Asti
Je ne prétends en aucun cas être un « grand graphiste » comme tu le dis.. J’essais juste de m’inspirer des tendences actuelles .. Et même si mon travail ressemble à certains travaux de PSDTuts, je n’ai pas remarqué un travail sur leur site exactement comme le mien avec les mêmes couleurs la même mise en scène etc..
Répondre
-
-
-
10 juillet 2009 00:15, par Sanakama
Magnifique =) Des que je trouve comment UP mon image sur la galerie je montre mon résultat =D
Répondre -
13 juillet 2009 19:16, par crash68
Merci et Bravo pour ce Tuto, j’ai réussi a le faire mais dans mon cas c’est un fond pour mon ordi
Répondre -
16 juillet 2009 13:52, par Chasia
Merci pour ce tuto ...
je matte les tutos de mister Wonka depuis un moment maintenant et je dois avouer que si je suis en école d’infographiste aujourd’hui c’est en très grande partie grâce à ses créations qui m’ont grandement motivé à devenir graphiste. Et aujourd’hui je me suis décidé à faire ce tuto d’asti que je trouve magnifique. (j’ai posté le résultat, je l’ai un peu modifié)
tuto très bien pensé et très bien expliqué. Well played !!!!
Bonne continuation à vous deux et encore merci à Wonka pour son site génial.
Répondre -
16 juillet 2009 19:40, par Asti
Merci beaucoup pour vos commentaires !! Ca me donne encore plus envie de continuer dans cette voie là et pourquoi pas continuer à rédiger des tutoriels pour WKS. Par contre il faut que je dise à Wonka s’il peut rétablir la galerie d’images pour que vous puissiez poster vos créations
Encore merci.
Bye
Répondre -
30 août 2009 00:13, par Fad
merci pour ce tuto... par contre, je ne comprends pas comment faire les deux sources lumineuse qui partent des bras...pourtant, j’ai bien fait deux tracés au pinceau, puis mémoriser mes tracés, après, g cliqué droit, puis contour du tracé, puis pinceau de formes...j’appuie sur OK...et...ça ne fait rien...lol... est ce que qql aurait une idée de la solution à trouver au problème ? merci d’avance. Fad.
Répondre -
11 septembre 2009 04:09, par mavis
j’adore ce tuto il est magnifique je suis pas experte je débute mais la malheureusement je bloque au 2em nivaux je croit pour rajouter l’habillage du mr avec ai je ne sais pas du tout comment faire :’( aidez moiiiii svp
Répondre -
16 novembre 2009 00:08, par chocotte
Bonsoir à tous !
Tout d’abord je tenais à dire que ce tuto est tout simplement extra ! Cependant j’ai un petit souci, je n’ai pas trouvé les formes colorées... Où puis je les avoir ?
Répondre -
29 novembre 2009 23:00, par Obsylone
Bonjour !
Je viens juste demander de l’aide car le dossier qui contient les formes (fichier ai) je ne sais pas comment tu fais pour les installer sur photoshop pourtant je gère bien ce logiciel.
Répondre -
20 décembre 2009 12:04, par Dr. Komic
Voilà la mienne ? Vous en pensez quoi ? Je suis débutant hein...
Répondre
-
22 janvier 2010 14:57, par miz
Whaa ! Super ce tuto !! Rendu magnfique ! J’ai beaucoup appris, merci beaucoup Asti :D
Répondre -
16 février 2010 21:51, par Victoria
Bonjour ! Je suis débutante et j’essaie de suivre au mieux le tuto. Jusqu’à maintenant je n’ai eu aucun problème mais voilà, je bloque au niveau du « détourage à la plume » ?! What is it ? Est ce que quelqu’un pourrait m’éclairer ??
Merci !! Et super tuto !! J’ai vu les images qu’ont fait les autres et c’est vraiment super
Répondre-
17 février 2010 10:41, par Wonka
So the cut off with the pen tool in photoshop is a very special but easy tip to... non je blague
Répondre tout simplement cela sert à détourer un élément en utilisant la plume, il suffit de créer des points d’ancrages en suivant le tour de ce que tu veux détourer. A la fin il est alors facile de supprimer tout ce qui est extérieur à cet élément ! Bon courage.
-
-
17 février 2010 22:06, par lo-riine
bonsoir,je suis bloqué au niveau du fichier .ai je n’arrive pas a le trouver. pourriez vous m’aider ? merci
Répondre -
6 mars 2010 11:48, par thenini34
Merci pour le tuto, c’est assez sympa ^^ Voila ma créa. : http://www.wks.fr/stockpix/513/4731.jpg
Répondre
