Création d'un ruban (Photoshop)

gollum88

Membre confirmé
24 Mars 2008
26
0
Bonjour,

Je cherche à faire mon propre ruban pour mettre dans un coin de mon site web. J'ai trouvé des générateurs de ruban mais c'est moche.
J'ai trouvé un tutoriel en anglais pour Photoshop, mais je galère avec ce logiciel, je n'arrive pas à faire la dernière étape avec le masque de fusion.
Voici le lien : http://www.boxedart.com/Tutorials/Photoshop/Diagonal-Corner-Text-Message-In-Photoshop.php

Si quelqu'un a un autre tuto, ou si quelqu'un peut m'aider avec celui-ci, ça serait cool.

Merci.
 
Bonjour, personne ne pourrait m'aider?
au final, ça doit donner ça :
MessageStrip_steps09.gif


Merci.
 
salut,

moi je fais autrement sous adobe fireworks, la base est bien sur la même mais pour donner l'effet de torsion du bandeau au mileu, je fais une ombre.

1. Je fais un rectangle avec dégradé linéaire gris - blanc - gris et bordure gris foncée
2. J'écris le texte avec un dégradé linéaire gris foncé - gris tout petit peu plus clair - gris foncé.
3. Je duplique mon rectangle en 1 que je fais passé au premier plan, je supprime la bordure, je change le dégradé linéaire en dégradé radial blanc au centre 70% opacité et blanc 0% d'opacité sur la périphérie.
4. Je crée un ovale assez allongé que je met à l'arrière plan, je le met en gris foncé et je lui met un effet flou gaussien
5. je selectionne tout et je pivote.

ça me donne ça :
24995445vo3.png
 
Merci brucetheplayboy, je vais essayer en début de semaine prochaine, j'espère que je vais réussir...
 
alors ça a marché?
 
Bonjour,
Oui, j'ai réussi, j'allais faire un tuto en français avec des captures, mais là j'ai pas trop le temps.

Voilà ce que ça a donné :
Ribbon_nav.png
 
salut, ton ruban manque clairement de volume... Ton dégradé ne sert à rien :( les bleus ne semblent pas parents, mais c'est peut-être mon écran aussi . Utilise peut-être plus les outils densité.
 
Ribbon_nav.png
ribbonnavcd8.png

regarde la différence. il faut que tu joue beaucoup plus sur les ombres. si la bande est bombé, les extrêmités seront plus foncés que le centre. tu peux également augmenter la longueur de la zone plus claire au centre (en créant deux "stylo" de la même couleur au centre)...
image2dk2.png


l'ombre sous ta bande n'est pas assez longue et trop aplati, c'est l'arrondi de l'ombre (donc de l'ovale) qui donne l'impression que l'arête de la bande est courbée.
tu peux placé l'ombre plus vers une extrêmité que l'autre pour donner un effet 2D/3D par perspective

si tu n'arrive pas à donner un effet bombé, diffère les couleurs des extrêmités (en terme de contraste ou en choisissant une teinte proche), ça impliquera un jeu de lumière et accentuera le réalisme.
le reflet blanc sur la bande ne doit pas être centré (d'ailleurs il n'y en a pas du tout sur ta bande), les jeux de lumière et d'ombre sont rarement symétrique dans la réalité, il faut donc jouer sur cet "imperfection de la nature" en ne centrant pas tout.

j'espère que mes conseils pourront t'aider t'aider

salut, ton ruban manque clairement de volume... Ton dégradé ne sert à rien :( les bleus ne semblent pas parents, mais c'est peut-être mon écran aussi . Utilise peut-être plus les outils densité.
nan c'était pas ton écran moksX ;)
 
Ok merci pour ces précisions les gars, je vais réessayer...

EDIT :
C'est quoi ton histoire de stylos??

EDIT 2 :

Je viens de réessayer en modifiant le gradient avec les "stylos", je pense que ça devait être ça.
Voilà ce que ça a donné mais je trouve pas ça génial :

ribbon-navigation2.png


Le précédent donnait ça :

Ribbon_nav.png


Voilà qu'est ce que vous en dites??

L'ombre c'est toujours pas ça...
 
J'ai réessayé en modifiant l'ombre :

ribbon-navigation4.png


Mieux non??
Maintenant je pense que j'ai pris un bleu trop foncé.

EDIT :

Ca vient de quoi le fait qu'on voit les pixels sur mon image? Du fait qu'elle est petite?
 
bah les stylos, c'est les trucs qui distingue les différentes couleurs du dégradés... (les trucs en forme de petites maison :D) je sais pas ce que c'est exactement...

pour l'ombre c'est mieux mais on ne doit pas voir la seconde moitié de ton ovale, ici la médiane est trop loin (on ne doit pas voir en clair après la ligne rouge) car l'ombre rend compte de la forme du bandeau

ribbonnavigation2oj2.png

ton dégradé linéaire ne doit pas être mis dans la longitudinale de ton bandeau, il doit être penché...

tu peux essayer de rajouter un dégradé à ton texte bleu très clair - blanc -bleu très clair pour lui donner du volume comme à ton bandeau

moi je trouve que c'est pas mal. ça viendra avec le travail ;) pour te satisfaire il est nécessaire que tu bidouille et tu trouveras certainement l'effet que tu recherches
 
bah les stylos, c'est les trucs qui distingue les différentes couleurs du dégradés... (les trucs en forme de petites maison :D) je sais pas ce que c'est exactement...

OK :)

Mais le plus dure c'est de rendre l'effet bombé/relief/volume. :(

Encore une question :

Ca vient de quoi le fait qu'on voit les pixels sur mon image? Du fait qu'elle est petite?
 
Cette fois ci, je pense que c'est bon :

ribbon-navigation5.png


Maintenant encore une autre question :

Je dois faire toute une série de ruban identiques sauf pour le texte. Sachant que l'insertion de celui-ci ce trouve au beau milieu de la création du ruban, y a t il un moyen pour remédier à cela????

Je remet ma question de tout à l'heure :

Ca vient de quoi le fait qu'on voit les pixels sur mon image? Du fait qu'elle est petite?
 
my.php
Ben c'est toujours un peu plat. Rajoute du noir dans le bleu des côtés. Elargis un peu le texte qu'il aille dans l'ombre. Essaye de le faire en noir.
un exemple, l'ombre s'élargit et fonce au fur et à mesure que le dégradé s'éclaircit.
rubancr8.jpg

my.php


my.php
my.php
my.php
 
ou alors ton ruban tu ne prend pas comme base un rectangle mais tu crée une forme vectorielle dont les arêtes sont curviligne... et ça accentuera l'effet bombé... je sais pas si c'est visible sur mon exemple...:(

nouveau courbé
ribbonnav2br8.png

ancien rectiligne
ribbonnavcd8.png
 
  • J’aime
Réactions: koeklin
Bonjour,
J'ai essayé de faire comme me l'a conseillé brucetheplayboy, de faire des arrêtes courbées.

Je suis parti de ma forme que j'ai sélectionné et que j'ai modifié en transform > warp.

voilà ce que ça a donné :

ribbon-navigation6.png
 
c'est pas mal :D!
manque plus qu'à cacher les petits bouts aux deux extrémités et c'est bon
 
Ba non, justement, les bouts c'est fait exprès :

ribbon-final.tiff


Pour donner un effet en plus, comme s'il était par dessus le cadre.
 
ok, j'avais pas saisi :)