AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Tuto UserBars - Photoshop

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3, 4  Suivant
AuteurMessage
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Tuto UserBars - Photoshop   Lun 6 Fév - 14:10

Nouveaux tutorial edité by chouk




Avant toute chose, il vous faut d'abord créer un motif de stripes qui vous servira par la suite. (Il faut aussi que je vous dise que je ne travaille généralement que par raccourci).



1) Commencez par créer un nouveau document en 4 x 4 (ou 3 x 3), fond transparent






2) Prenez l'outil crayon en taille 1 pixel et tracez une diagonale de bas gauche à haut droite



Puis enregistrez ce motif en faisant Edition > Utiliser comme motif

Et voilà vous avez votre motif.



Maintenant passons à l'userbar




1) Choisissons ensemble une image commune vouez-vous, disons celle-ci :

http://www.phantomcastle.it/phantom/ffspiritscastle/ff7/Final_Fantasy_7_pal-front.jpg



2) Ouvrez là donc sur toshop pour l'avoir du côté, puis créez un nouveau document de 350 x 19 en fond blanc.





3) Maintenant prenez votre image de FF7, allez dans la fenêtre de calque, prenez celui nommé Arrière-plan et faites un copier-glisser dans le document de l'userbar ce qui vous donnera ça :






4) Maintenant nous allons redimensionner l'image de fond. (Pour ça, mieux vaut travailler en plein ecran (touche F) afin de voir les contour de l'image). Faites un CTRL + T afin de pouvoir redimensionner manuellement l'image. Allez sur les angles et maintener le clic afin de pouvoir redimensionner (Astuce si vous laissez la touche MAJ enfoncée vous redimensionnerez en gardant les proportions). Après cela vous devriez avoir ce genre de truc.





5) Maintenant nous allons intégrer le motif à la bar. Créez un calque que vous placerez AU-DESSUS du claque de l'image. Puis faites un MAJ + F5 (Edition > remplir) et choisissez Remplir avec : Motif et choisissez votre motif créé précédemment.




Mettez vous donc sur ce calque et régler l'opacité à 23%. ce qui vous donnera ceci :





6) Tout doucement nous nous rapprochons de l'usb. Maintenant ça va être la partie la plus chaude à réaliser. Il va falloir que vous réalisiez une ellipse qui prendra 1/3 du l'usb. Vous ferrez ceci grâce à l'outil ellipse de sélection, en gros il faut que vous réussissiez à faire quelque chose comme ça :



Une petite astuce pour y arriver : Faites une ellipse que vous débuterez dans l'angle supérieur gauche et qui se terminera dans l'angle inferieur droit. Là vous aurez une ellipse aplatie. Vous n'avez plus qu'à deplacer cette sélection vers le haut de maniere à ce que cette selection prenne entre 1/3 et 1/2 de l'usb (Pour la déplacer tout simplement, appuyer sur la fleche de direction haut)



7) Bien maintenant créez un nouveau calque au dessus des autres, et remplissez le de blanc (MAJ + F5).


Comme vous le constatez, ce n'est que ce qui est sélectionné par l'ellipse qui est rempli par le blanc. Jouer maintenant avec l'opacité du calque (mettez la entre 35% et 50%) Ce qui vous donnera ceci (un léger effet 3D) :





Cool Ca se concrétise de plus en plus. Maintenant on amorce l'avant-dernière partie de la construction de cette userbar. Créez une fois de plus un nouveau calque au-dessus des autres. Appuyez sur D afin de mettre les couleurs d'avant et arrière-plan par défaut (Noir et blanc). Appuyez maintenant sur X pour inverser les couleurs d'avant et arrière-plan (logiquement vous devriez avoir le blanc en premier-plan et le noir en arriere-plan. Faites maintenant un CTRL + A afin de sélectionner toute la bar puis faites Edition > contour Puis mettez ces réglages :




Vous vous retrouvez alors avec un contour faisant le tour de la bar de 2 px de couleur blanc.

Maintenant faites X afin d'inverser à nouveau les couleurs, puis refaites Edition > contour et cette fois-ci choisissez l'épaisseur à 1 px (et non 2) et faites ok. vous aurez alors une bar à double contour.





9) Il ne vous reste plus qu'à ajouter la police en mettant ces réglagles :


Couleur : blanc

Taille : 10 px

Lissage : sans

En gros ces réglages ci :



1 contour noir dans les options de fusion.

ATTENTION : La police choisie pour la bar est conventionnellement une police bitmap (généralement Visitor BRK) téléchargeable ici :

>> VISITOR BRK <<


Et voila votre résultat (logiquement)





Dernière édition par le Jeu 23 Fév - 16:55, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
.::Lily::.


avatar

Nombre de messages : 55
Date d'inscription : 09/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 13:33

Merci pour le tuto Wink

J'ai juste un petit souci lors du remplissage avec le motif



Je clique sur Edition --> remplir --> motif

Mais là ça m'ouvre une fenêtre "motif personnalisé" avec différentes textures... je ne vois pas comment récupérer le motif (dont j'ai laissé le nom donné automatiquement par photoshop, à savoir "Forme échantillonée 1")

Est-ce que tu peux m'éclairer sur ce tout petit point ? I love you

miciii, Lily
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 18:02

Et bien normalement quand tu fais ton motif et que tu l'enregistre en tant que tel, tu dois pouvoir le choisir que tu as enregistré et qui est affiché avec les autres...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
.::Lily::.


avatar

Nombre de messages : 55
Date d'inscription : 09/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 18:09

Oui, excuse ! C'est moi qui me suis trompée Embarassed

J'avais fait "Définir une forme prédéfinie" au lieu de "Utiliser comme motif"

Là c'est bon, ça marche super ! Merci
Laughing
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 19:26

Oublie pas la police Visitor
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
.::Lily::.


avatar

Nombre de messages : 55
Date d'inscription : 09/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 19:28

Ah mais je ne l'ai pas oubliée Laughing C'est celle que j'ai utilisé sur toutes mes bars ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Ven 10 Fév - 19:37

Ca rend differement, amoins que tu met des effets mais c'es tres bien comme ca ! cheers
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 20:18

Enregistrez ce motif en faisant : EDITE > DEFINE PATTERN

Appliquez ensuite ce motif à votre premier document, dans un nouveau calque EDIT>FILL>PATTERN :


Pour sa je sais pas le faire j'ai photoshop 8 en francais je dois allez ou alors ? Merci
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 21:03

cynthia-67 a écrit:
Enregistrez ce motif en faisant : EDITE > DEFINE PATTERN

Appliquez ensuite ce motif à votre premier document, dans un nouveau calque EDIT>FILL>PATTERN :


Pour sa je sais pas le faire j'ai photoshop 8 en francais je dois allez ou alors ? Merci


Il faut que tu fasse : Fichier => Utiliser comme motif.

Ensuite tu fait utiliser le motif et tu choisis celui que tu as enregistre.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 21:12

Lol j'ai appuyez sur utilisez motif et apres ? Car apres je retourne sur mon userbar et j'appuie sur utilisez motif mais sa marche pas
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 21:14

Tu as bien enregistre ton motif avant de le choisir dans la liste des motifs disponibles ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 21:19


Désolée je m'y connais pas en photoshop lol regarde la capture d'image
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Sam 18 Fév - 21:26

Il te dis "aucune zone selectionnee", il faut donc que tu selectionne la zone ou tu veut utiliser ton motif, l'userbars dans l'exemple. Avec l'outil de semection ou en cliquant sur ton image.

Par contre reduit la taille de ton image pour pas deformer le forum Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
Italodancer




Nombre de messages : 2
Date d'inscription : 19/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 14:58

nikel le tuto ! j'ai pu faire ma userbar ET découvrir quelques nouveaux truc sur photoshop Very Happy
par contre la sélection circulaire c'est quoi? c'est le petit lasso ? parce qu'à chaque fois jfais mes sélections à l'arrache et c'est pas toujours esthétique Laughing
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 15:25

TheGreenMan tu pourrais m'envoyez cette image la :


Car j'arrive pas a la faire est sa me prends la tête lol
Soit tu me l'envoi par msn : manga-girl-onepiece@hotmail.fr
Ou par e-mail sa serai sympa :)
merci
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 15:46

Italodancer a écrit:
nikel le tuto ! j'ai pu faire ma userbar ET découvrir quelques nouveaux truc sur photoshop Very Happy
par contre la sélection circulaire c'est quoi? c'est le petit lasso ? parce qu'à chaque fois jfais mes sélections à l'arrache et c'est pas toujours esthétique Laughing

Oui moi pour la selection circulaire je prens le lasso c'est plus pratique que la selection classique...

cynthia-67 a écrit:
TheGreenMan tu pourrais m'envoyez cette image la :

Il te faut quoi exactement ?? La barre avec les rainures ou juste le motif pour appliquer sur ta barre ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 15:47

La barre avec les rayures :)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Italodancer




Nombre de messages : 2
Date d'inscription : 19/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 17:00

ben avec le lasso c'est super moche mes trucs lol..jdois pas avoir le coup de main Suspect Neutral
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 17:52

Oui sinon tu peut essayer avec le filtre => Rendu =>Nuages
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 18:14

cynthia-67 a écrit:
La barre avec les rayures :)

Si tu pouvait te connecter que je t'envoie le .psd...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
cynthia-67


avatar

Nombre de messages : 18
Date d'inscription : 18/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Dim 19 Fév - 18:27

j'ai reussi c'est bon :)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
jefjef10




Nombre de messages : 6
Date d'inscription : 20/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Lun 20 Fév - 2:46

Question bete comment tu fais pour que l'image la de lost soi petite car moi elle est trop grande et quand je la redimensione avec photoshop cs2 sa va pas
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Lun 20 Fév - 2:48

Le mieux c'est deja de prendre une photo qui soit pas grande histoire de pouvoir faire ce que tu veut ensuite. Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
jefjef10




Nombre de messages : 6
Date d'inscription : 20/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Lun 20 Fév - 3:06

ok merci mais jarive pas le degrader sa me mais en noir et blanc ou en vert tu peut m'aider
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
TheGreenMan
TGM Tout Puissant
TGM Tout Puissant
avatar

Masculin Nombre de messages : 4363
Age : 36
Localisation : sur E-Design...
Date d'inscription : 06/02/2006

MessageSujet: Re: Tuto UserBars - Photoshop   Lun 20 Fév - 3:15

As tu deja essaye d'utiliser la pipette et de prendre les couleurs de ton image pour appliquer ton degradé ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://daleetstudios.free.fr/dotclear/
Contenu sponsorisé




MessageSujet: Re: Tuto UserBars - Photoshop   

Revenir en haut Aller en bas
 
Tuto UserBars - Photoshop
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 4Aller à la page : 1, 2, 3, 4  Suivant
 Sujets similaires
-
» Tuto créer un template (photoshop)
» Challenge 2012 image d'extérieur - cqld - Sketchup Artlantis Photoshop
» tuto clin d'oeil et bisou
» Tuto #3/Effet de désintégration faciale
» Tuto #11 "Créer une illustration numérique avec Photoshop"

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
UserBars France :: Tutoriels / Support :: Tutos :: Photoshop :: Userbars/boxs, Squareboxs-
Sauter vers: