55 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

[Tuto Photoshop] Réaliser une boite Vista.

 
n°11635
M4X 365
Profil : New Penguin
Avatar
profil
Posté le 06-08-2007 à 18:11:16  
 

Bonjour à tous !

 

Vous aimez le style de la boite Vista ? Non ? Alors passez votre chemin, parceque c'est ce qu'on va essayer de créer dans ce  tuto :winktongue: [qui est mon premier :^^: ].

 

Pour celà, il va nous falloir :
1. Un Ordinateur [eh oui, c'est plus pratique avec :lol: ]
2. Le logiciel Adobe Photoshop [j'utilise la version CS2]
3. Quelques connaissances élémentaires du soft et en informatique en général.
4. Du temps libre.
5. Une bouteille d'eau et un truc à manger [optionnel]

 

Vous avez tous ça ? Cool, on peu commencer :cool:

 

I Préparation du patron :

 

:ar: Déja, pour commencer, vous devrez ouvrir l'image suivante sous Photoshop [si vous utilisez FireFox, Glissez/Déposez l'image dans Photoshop, sinon, clic droit sur l'image puis Enregistrer sous... ensuite dans Photoshop, faites  Fichier > Ouvrir ou Ctrl + O et ouvrez votre image]
http://img255.imageshack.us/img255/545/boitevistapatronld3.png
:ar: Double cliquez sur Calque 0 et appliquez-lui les deux styles suivants :
Un très léger Biseau interne ...
http://img124.imageshack.us/img124/8774/vistabox001eb9.gif
... et une incrustation en couleur #EEEEEE
http://img410.imageshack.us/img410/4683/vistabox002jp7.gif
Si tout se passe bien, vous devriez obtenir ceci :
http://img299.imageshack.us/img299/8799/vistabox003ae6.gif
:ar: Faites Shift + Ctrl + Alt + N [ceci vas nous créer un nouveau calque au dessus du Calque 0]. Puis  Ctrl + Clic sur Calque 0 [ce qui aura pour effet de séléctionner Calque 1 et Calque 0. Ensuite, Ctrl + E pour fusionner nos deux calques [[i]on fait ça pour éviter que les styles appliqués à Calque 0 ne gâchent  la perspective de la boite].
http://img403.imageshack.us/img403/961/vistabox004bt0.gif
:ar: Nous allons maintenant ajouter de la perspective à notre imgae, pour cela, faites Ctrl + T. Puis, Clic droit  sur l'image > Perspective :
http://img524.imageshack.us/img524/3295/vistabox005ce2.gif
Ensuite, Modifiez l'image pour obtenir à peu près ce résultat [n'hésitez pas à refaire la manipulation si ça ne correspond  pas bien à ce que vous vouliez avoir, c'est un bon entrainement :wink: ]
http://img184.imageshack.us/img184/5536/vistabox008kw1.gif
Validez
:ar: L'étape suivante nécéssite un peu plus de concentration [Vérifiez que l'Outil Déplacement séléctionné, c'est très  impotant] :
a. Maintenez le bouton Alt de votre clavier enfoncé
b. Appuyez une seule fois sur le bouton Flèche bas de votre clavier
c. Relachez le bouton Alt
d. Appuyez une seule fois sur le bouton Flèche gauche de votre clavier

 

e. Répétez les étapes a, b, c et d 16 autres fois
Vous devirez obtenir ceci :
http://img259.imageshack.us/img259/9658/vistabox010yr1.gif
Remarque : Cette méthode est généralement utilisée, comme vous avez pu vous en douter, pour obtenir des élments en 3D tels  que des Textes. En fait, le Alt + Flèche bas duplique le calque séléctionné et déplace le calque dupliqué d'un pixel  vers le bas, pour réspecter la perspective, on doit aussi déplacer ce calque vers la gauche, voilà pourquoi on appuye sur  Flèche gauche. En répétant les étapes précédentes, on obtient une sorte d'image 3D [pas très parfaite], c'est en fait  le léger biseautage au début qui nous a pemit d'avoir cette impression de "3D" :wink:

 

:ar: Séléctionnez l'Avant dernier calque [normalement, c'est Calque 1 copie 16, maitenez la touche Shift enfoncée et séléctionnez le Calque 1 [celui qui est tout en bas de la liste des calques], faites Ctrl + E [Pourquoi ? -> Parce que ces calques ne sont plus utiles séparément, il sont là pour donner "l'effet" de 3D  tout simplement :wink: ], et enfin renommez ce nouveau calque : Milieu et celui qui reste [le Calque 1 copie 17  normalement] : Face
http://img340.imageshack.us/img340/3228/vistabox011jt2.gif
:ar: Comme vous le voyez sur l'image suivante, cette impérféction rend notre perspective un peu... imparfaite :lol:, nous  allons donc la corriger :fouet: .
http://img505.imageshack.us/img505/2692/vistabox012vv6.gif
Séléctionnez le calque Milieu et zommez à 300% sur ce coin de la futur boite. Prenez l'Outil Rectangle de  Séléction et configurez-le comme suit :
http://img510.imageshack.us/img510/9154/vistabox013lw3.gif
Cliquez n'importe où dans l'image puis allez dans Séléction > Transformer la séléction :
http://img105.imageshack.us/img105/7563/vistabox014wm1.gif
Configurez comme suit et validez :
http://img166.imageshack.us/img166/7849/vistabox015kj0.gif
Vérifiez que le Calque Milieu est séléctionné et appuyez sur la touche Suppr[b] sur votre clavier. Et on obtient :
http://img503.imageshack.us/img503/6167/vistabox016cc0.gif
:ar: Maintenant nous allons ajouter le piti "cylindre" au coté gauche de la futur boite. Pour cela, séléctionnez l'[b]Outil  Ellipse de séléction
[clic droit sur le Réctagle de séléction] :
http://img184.imageshack.us/img184/8081/vistabox017hy8.gif
Zoomez à 200% et créez une séléction comme ceci :
http://img262.imageshack.us/img262/4134/vistabox018fk4.gif
Transformez cette séléction [Séléction > Transformer la séléction] comme ceci :
http://img115.imageshack.us/img115/9127/vistabox019dj1.gif
Validez, puis faites Shift + Ctrl + N pour créer un nouveau calque que vous appelerez Cylindre :
http://img508.imageshack.us/img508/6269/vistabox020bk7.gif
Validez puis déplacez ce nouveau calque en dessous des deux autres :
http://img262.imageshack.us/img262/8430/vistabox021jg6.gif
Réinitialisez les couleur en appuyant sur le bouton D[b] de votre clavier puis faites [b]Ctrl + Suppr ou bien Ctrl  + Retour Arrière pour remplir notre séléction de noir.
http://img518.imageshack.us/img518/7074/vistabox023ru1.gif
Double-cliquez sur le calque Cylindre appliquez-luis les deux styles suivants :
http://img124.imageshack.us/img124/8774/vistabox001eb9.gif
http://img410.imageshack.us/img410/4683/vistabox002jp7.gif
En fait ce sont les mêmes styles que pour le tout premier calque [Calque 0 pour ceux qui suivent :jap: ]
Validez, munissez vous de l'Outil Déplacement[b] et... déplacez la "galette" en bas de façon à obtenir ceci :
http://img166.imageshack.us/img166/3130/vistabox024ga3.gif
[pour déplacer droit, utilisez la touche [b]Flèche bas
, ou bien déplacez avec la souris en maintenant la touche Shift enfoncée]
Comment obtenir un cylindre avec une galette ? :ar: On faut Alt + Flèche haut bien sûr :idea: , eh bien c'est ce qu'on  va faire :wink: Maintenez la combinaison de touches Alt + Flèche haut enfincée un bon moment à fin d'obtenir un cylindre  comme ceci :
http://img466.imageshack.us/img466/6631/vistabox025lc2.gif
[Dans mon cas, j'ai obtenu 276 nouveaux calques, mais ce nombre dépend de la hauteur de la boite, c'est pour cela que j'ai  insisté sur le fait d bien réussir la pérspéctive plus haut dans ce tutoriel]
Séléctionnez le calque Milieu puis faites Ctrl + Clic sur la vignette du dernier calque  Cylindre copie xxx et  zoomez à 800%
Prenez l'Outil Doigt et configurez-le comme ceci :
http://img265.imageshack.us/img265/8708/vistabox026gx4.gif
http://img116.imageshack.us/img116/2223/vistabox027jy2.gif
"Ramenez" un peu du calque Milieu [grâce à l'Outil Doigt] sur la séléction de manière à obtenir ceci :
http://img130.imageshack.us/img130/4307/vistabox028jx9.gif
Désséléctionnez.
Séléctionnez maintenant tous le calques de Cylindre copie xxx à Cylindre [Clic gauche sur le dernier Cylindre copie xxx, maintenir Shift appuyée puis clic gauche sur Cylindre :wink: ] et fusionnez-les [Ctrl +  E]
Renommez ce nouveau calque : Cylindre
http://img441.imageshack.us/img441/3428/vistabox029dg1.gif
:ar: Séléctionnez le calque Milieu[b], faites [b]Ctrl + Clic sur le vignette du calque Face, supprimez.
:ar: Mettez le calque Face en dessous de Milieu
:ar: Double-cliquez sur Face et appliquez-lui cet effet :
http://img341.imageshack.us/img341/2598/vistabox030iy0.gif
:ar: Séléctionnez les calques Face et Milieu puis fusionnez-les [Ctrl + E]
[Si ce n'est pas déja le cas, renommez le nouveau calque : Face]
http://img101.imageshack.us/img101/3296/vistabox031pk5.gif
Vous pouvez être fiers de vous, le plus dur est fait :party: :party: on passe maintenant à la suite, ne vous découragez pas :wink:

 

II Réalisation du contour :

 

:ar: Séléctionnez le calque Face, Ctrl + Clic sur sa vignette, puis Ctrl + Alt + Clic sur la vignette de  Milieu[b]
:ar: [b]Shift + Ctrl + I
pour inverser la séléction puis supprimez.
:ar: Dupliquez les calques Face et Milieu [Clic sur le calque puis Ctrl + J]
:ar: Ramenez les calques Face copie et Milieu copie au dessus des deux autres puis baissez leurs fonds à 0% :
http://img102.imageshack.us/img102/3586/vistabox033qy2.gif
:ar: Double-cliquez sur le calque Face copie puis appliquez-lui le contour suivant :
http://img338.imageshack.us/img338/7814/vistabox034fs7.gif
[Zoomez à 600% sur le coin en haut à gauche de la futur boite si il y a une imperfection comme sur l'image suivante,  prenez l'Outil Rectangle de séléction, séléctionnez-la, supprimez-la, puis revenez en zoom 100%]
http://img166.imageshack.us/img166/4187/vistabox036ia2.gif
:ar: Appliquez le même contour au calque [b]Milieu copie

http://img338.imageshack.us/img338/7814/vistabox034fs7.gif
[Zoomez à 600% sur le coin en haut à gauche de la futur boite si il y a une imperfection comme sur l'image suivante,  prenez l'Outil Crayon (taille 3px, Opacité 100%) et couvrez-la].
http://img166.imageshack.us/img166/374/vistabox038eh6.gif
http://img148.imageshack.us/img148/1797/vistabox039xz2.gif
:ar: Séléctionnez les calques Face copie et Milieu copie et fusionnez-les [assures-vous d'avoir mis leurs fonds  à 0% d'abord !!]
:ar: Zoomez à 600% sur le coin gauche en bas et corrigez les imperfections de la courbe avec l'Outil doigt et L' Outil Crayon [choisissez le diamètre en fonction de vos besoins] puis revenez en zoom 100%.
http://img408.imageshack.us/img408/8134/vistabox040jm8.gif
http://img505.imageshack.us/img505/3991/vistabox041ci2.gif
:ar: Renommez le calque des lignes rouges : Contour et double-cliquez dessus pour lui appliquer ces effets :
http://img406.imageshack.us/img406/4564/vistabox042bl2.gif
http://img184.imageshack.us/img184/3420/vistabox043dv6.gif
:ar: Prenez l'Outil Gomme et configurez-le comme suit :
http://img62.imageshack.us/img62/5432/vistabox044ez3.gif
http://img516.imageshack.us/img516/6488/vistabox046yc9.gif
:ar: Effacez la ligne de gauche.
http://img111.imageshack.us/img111/3438/vistabox047il5.gif
:ar: Dupliquez le calque Contour et déplacez le calque dupliqué [qu'on renommera : Contour.Ombre] de 2 pixels  vers le bas.
:ar: Double cliquez sur Contour.Ombre et appliquez lui cet unique effet au lieu des autres [[i]décochez Biseautage  et estampage
]
http://img340.imageshack.us/img340/6521/vistabox045md5.gif
:ar: Allez dans Filtre > Atténuation > Flou gaussien, mettez une valeur de 2.0 pixels et validez.
:ar: Faites Ctrl + Clic sur la vignette du calque Face + Clic sur la vignette du calque Milieu puis Shift + Ctrl +  I et supprimez.
:ar: Baissez l'Opacité du calque Contour.Ombre à 50%
http://img443.imageshack.us/img443/6448/vistabox048pz5.gif
Le contour est términé !

 

III Application des textures/Effets :

 

Et nous y voilà, la partie la plus amusante de ce tutoriel, restez concentrés et surtout, reposez vous un peu...

 

:ar: Allez dans Fichier > Importer et choisissez l'image à mettre en façade, puis pixellisez-la [Remarque : il faut que les proportions de l'image soient d'environ 1/1.4]
http://img184.imageshack.us/img184/4681/vistabox053fa4.gif
:ar: Adaptez la taille de l'image à votre boite, puis [grâce au Ctrl + T > Clic droit > Perspective] mettez votre image  en perspective suivant la façade de la boite et validez.
http://img129.imageshack.us/img129/3674/vistabox054af3.gif
:ar: Ctrl + Clic sur le vignette du calque Face puis Shift + Ctrl + I et supprimez ce qui dépasse.
http://img341.imageshack.us/img341/7374/vistabox055ix8.gif
:ar: Mettez le calque de l'image juste au dessus de Face et renommez-le : Image. Double-cliquez dessus et  appliquez-lui ce Satin :
http://img104.imageshack.us/img104/7618/vistabox056ma2.gif
:ar: Séléctionnez le contenu du calque Image [Ctrl + Clic sur la vignette du calque] et créez un calque qu'on  nommera Face.Reflet [Shift + Ctrl + N
:ar: Allez dans Séléction > Modifier > Contracter, mettez 2 et validez puis appuyez une fois sur Flèche gauche
:ar: Prenez l'Outil Dégradé[b] et tracez le dégradé Blanc vers Transparant suivant [il faut que se soit un tout petit peu  peu incliné par rapport à la verticale] :
http://img530.imageshack.us/img530/2956/vistabox057af0.gif
:ar: Tracez cette séléction avec l'[b]Outil Ellipse de séléction
puis supprimez :
http://img407.imageshack.us/img407/7079/vistabox060qi6.gif
:ar: Suivant votre image, baissez l'opacité du calque Face.Reflet à environ 50%
:ar: Appliquez un léger Flou au calque [Filtre > Atténuation > Flou] et mettez le juste au dessus du calque Contour.Ombre.
:ar: Séléctionnez le calque Milieu puis allez dans Image > Réglages > Niveaux et réglez comme ceci :
http://img407.imageshack.us/img407/9439/vistabox061rq4.gif
Notre boite est presque finie, il ne lui manque que le bouton d'ouverture et le reflet :wink:

 

IV Derniers préparatifs :

 

:ar: Créez un nouveau calque que vous appelerez Bouton et que vous metterez juste au dessus du calque Contour
:ar: Avec l'Outil Réctangle de séléction, créez un réctange de 16px/32px puis allez dans Séléction > Modifier >  Lisser, mettez la valeur 3 et validez
:ar: Zoomez de 800% sur la séléction et toujours avec le Réctangle de séléction [en mode Normal] maintenez Shift appuyée et séléctionnez les bords lissés du coté droit :
http://img409.imageshack.us/img409/4329/vistabox062ch6.gif
http://img19.imageshack.us/img19/6584/vistabox063hi6.gif
:ar: Réinitialisez les couleurs [D] et remplissez la séléction [Alt + Suppr]
:ar: Déplacez la séléction comme ceci puis faites Ctrl + D pour désséléctionner.
http://img184.imageshack.us/img184/1122/vistabox064vb9.gif
:ar: Double cliquez sur le calque Bouton pour lui appliquer ces effets :
http://img106.imageshack.us/img106/8008/vistabox065zc4.gif
http://img130.imageshack.us/img130/8290/vistabox066qs2.gif
Dégradé de #EEEEEE vers #CACACA
:ar: Créez un calque au dessus de Bouton et appelez le Flèche puis prenez l'Outil Forme pérsonnalisée et  choisissez le triangle arrondi :
http://img340.imageshack.us/img340/3232/vistabox067ws1.gif
http://img184.imageshack.us/img184/6996/vistabox068rz1.gif
:ar: Dessinez un triangle isocèle un peu aplatit [zoomez, se sera plus précis] et faites-le pivoter de -90° :
http://img407.imageshack.us/img407/5281/vistabox069if6.gif
:ar: Appliquez les mêmes effets au triangle qu'au bouton mais au lieu de mettre l'estompage vers le Haut, choisissez Bas , inversez aussi le dégradé [cochez la case Inverser[/]b]
:ar: Fusionnez les calques [b]Bouton
et Flèche, puis faite Ctrl + T pour transformer le nouveau calque gràce  à l'option perspective et transformation manuelle comme ceci :
http://img158.imageshack.us/img158/3165/vistabox071zb5.gif
:ar: Séléctionnez tous les calques, allez dans Calque > Nouveau > Groupe d'après les calques et appelz le groupe Boite
:ar: Faites un clic droit sur le groupe pour le dupliquer
:ar: Ouvrez le nouveau groupe de calques, séléctionnez tous ses calques et fusionnez-les
:ar: Renommez le nouveau calque Boite.Ombre et mettez-le en dessosu des autres.
:ar: Appliquez un Flou gaussien de 4 pixels, une incrustation en Noir puis transformez le calque [Perspective et  Transformation manuelle] comme ceci [n'hésitez pas à supprimez ce qui dépasse avec l'Outil lasso :
http://img130.imageshack.us/img130/813/vistabox072fg3.gif
:ar: Baissez l'opacité de l'ombre à 50%
http://img518.imageshack.us/img518/8158/vistabox073wr6.gif

 

Bravo ! Vous avez fait une Boite syle Vista :party: :party:

 

Ce long tutoriel est finit, mais si vous rencontrez des problèmes d'aliasing, faites un ptit flou sur le contour ou bien  réduisez la taille de l'image, ça marche souvent.
Enfin, ne vous contentez pas de suivre les étapes à la lettre, mettez-y votre touche personelle et perfectionnez ce vous faites jusqu'à obtenir ce qui vous parait être le mieu :wink:

 

Merci d'avoir lû jusqu'au bout et @ bientôt pour un prochain tuto [ou peut être une expo :whistle: ] :meuh:

answer
mood
GoogleAds
profil
Posté le 06-08-2007 à 18:11:16  
 

answer
n°11657
dlb
q|p
Profil : Admin
Avatar
profil
Posté le 11-08-2007 à 09:49:42  
 

Bon je valide. Ce tuto pourra être utile. MAIS je trouve qu'il y a beaucoup de "rafistolage"  :ouch: et c'est bien dommage. D'un côté ça permet d'avoir des méthodes pour corriger les petits problèmes qu'on rencontre... de l'autre ça n'encourage pas à faire du travail propre :he:

 

De même, la forme de base étant plutôt simple, une explication pour la créé avec l'outil plume n'aurait pas été de trop :wink:
Idem pour la perspective, il est possible de relever quelques données (fournis en dessous des menus) pour aider les gens :oui:

 


Merci quand même :wink:

answer
n°11658
leskimo
Profil : Penguin Pro
Avatar
profil
Posté le 11-08-2007 à 10:11:48  
 

+1 il y a des trucs pas mal dans ce tuto mais c'est pas tres propre :ouch:

answer
n°11659
Bidi
Hylien à bonnet vert
Profil : Penguin Pro
Avatar
profil
Posté le 11-08-2007 à 13:34:30  
 

Ouais chuis d'accord aussi, je trouve que ça fais un peu cracra l'ensemble, même si le principe de réalisation est plutôt bon...

 

En plus tu commences bien avec le début du tuto, donc continue à en écrire, faut juste une belle réalisation ^^

answer
n°11660
davol
Profil : New Penguin
Avatar
profil
Posté le 11-08-2007 à 14:51:52  
 

waa sa à l'air plutôt pas mal je mis mets tout de suite +1 :great:

answer
n°11661
leskimo
Profil : Penguin Pro
Avatar
profil
Posté le 11-08-2007 à 14:58:13  
 

Heu...ta signature est légerement hors-normes :ouch:

answer
n°11662
Christoquiz
Il fait beau dehors!
Profil : Penguin
Avatar
profil
Posté le 11-08-2007 à 16:07:00  
 

C'est quand même bien pour un premier tuto! :fouet:

 

Mais, il me semble que le dessin n'est pas pareil! :mdr:

answer
n°11667
M4X 365
Profil : New Penguin
Avatar
profil
Posté le 12-08-2007 à 07:11:59  
 

Merci tout le monde [et spécialement dlb pour l'avoir validé], je vais essayer de m'améliorer. Le prochain tuto sera le bon :wink:
Pour la forme, en fait, j'ai pas utilisé l'outil plume [j'aurais dû, mais je la maîtrisait pas encore à ce moment-là].
Sinon, ben, si vous avez des questions, n'hésitez pas à les poser, je me ferai un plaisir d'y répondre.
@+

answer
n°11688
Dark-Koopa
Profil : New Penguin
Avatar
profil
Posté le 17-08-2007 à 20:34:32  
 

t'aura pas du enregistrer en gif. la qualité est minable :frown:

answer
n°11758
Sadik'
Avatar
profil
Posté le 08-09-2007 à 18:27:56  
 

salut tout le monde je n'arrive pas à fusioner les calque ! quand je le fait voila ce que ca me donne :

answer
n°11760
M4X 365
Profil : New Penguin
Avatar
profil
Posté le 09-09-2007 à 07:47:56  
 

Pour fusionner des calques :
1. Séléctionner le premier calque à fusionner
2. Maintenir [ Ctrl ] enfoncée et séléctionner les autres calques à fusionner
3. Faire [ Ctrl + E ]

answer
n°11761
Sadik'
Avatar
profil
Posté le 09-09-2007 à 09:43:25  
 

ok merci   :smile:

answer
n°12107
seb921
Profil : New Penguin
Avatar
profil
Posté le 04-11-2007 à 19:44:16  
 

Bonjour à tous,

 

Quand je me sers de l'outil déplacement cela marche, au bout de 16 fois j'ai bien une perspective en 3D mais aucun calque ne c'est créer je suis toujours avec mon calque 0 qui n'a pas bougé!

 

Que faire???

 

Merci d'avance
Seb :meuh:

answer
n°12129
DarkRavaFire
Profil : New Penguin
Avatar
profil
Posté le 06-11-2007 à 14:32:45  
 

as-tu enfoncé la touche ALT ?

answer

Aller à :
Ajouter une réponse