Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels Photoshop

Apprenez à maîtriser les rudiments d’Adobe® Photoshop® pour redonner de l’éclat à vos compositions graphiques !

Tutoriels Photoshop

Texture Art Digital

Un effet techno, métal, hype ou ce que voulez ! Mais un effet d’art digital vraiment sympa pour un site sur les nouvelles technologies ou d’inspiration futuriste.


  • Ouvrez un nouveau document avec un fond noir.
  • Ici les dimensions réelles de mon exemple sont 800×200 px.
  • Puis appliquez le filtre Rendu > Halo avec une Luminosité de 120% et un objectif de 50-300 mm (zoom).

  • Appliquez ensuite le filtre Esquisse > Chrome avec les paramètres Détail : 10 et Lissage : 0.

  • Double cliquez sur l’aperçu du calque intitulé Arrière-Plan et cliquez sur « OK » pour convertir le calque de fond en calque normal.
  • Passez le calque en mode Eclaircir.
  • Puis dupliquez celui-ci quatre fois (Ctrl + J).

  • Puis, respectivement, appliquez à chacun des calques dupliqués le filtre Déformation > Onde.
  • A chaque application du filtre, pressez le bouton Phase initiale aléatoire autant de fois que vous le désirez pour obtenir un effet d’onde différent à chaque fois.
  • Surtout, ne répétez pas l’effet en pressant les touches Ctrl+ F.
  • Finalement applatissez les calques (Ctrl + Maj + E).

  • Pour donner un peu de relief, appliquez à votre création une Image > Réglages > Luminosité/Contraste de +30/+30.
  • Puis, pour un effet bleuté, appliquez une Image > Réglages > Teinte/Saturation de Teinte 205, Saturation 100, et Luminosité 0 en ayant au préalable coché la petite case « Redéfinir ».

  • Pour l’effet de lumière, il faut d’abord appliquer le filtre Atténuation > Flou Gaussien d’un rayon de 3px.
  • Puis, rattrapez l’effet en sélectionnant Edition > Estomper Flou Gaussien (Ctrl + Maj + F) en paramètrant une opacité de 100% en mode Eclaircir.
  • Et voilà, l’effet est vraiment sympa !


Libre à vous, maintenant, de travaillez un peu plus l’effet.


Ce que nos lecteurs en disent :

  1. antiz

    salut,
    manifique cette texture mais j’aimerai savoir la police que tu utilise pour tes logo babylone j’la trouve tres sympa! merci d’avance
    bye!

  2. Shemu

    Ici la police est « Alba« .
    Pour mon logo c’est « Soopafresh » ainsi que « Sveningsson » ;)

  3. r

    au lieu de mettre en incrustation essayer de le mettre en eclaircir ca donne aussi pas mal je trouve ^^

  4. mathieu

    Superbe effet, avec un petit texte en bas a droite avec un coutour blanc c’est genial. Merci encore pour ce super site.

  5. DarK.SaSuke

    J’adore cette effet !!Regarder ce que j’ai fait avec: poupouille.the.best.free….

  6. Hinata-sama

    c’est vraiment joli moi jai fait img55.imageshack.us/img55…

  7. Stelloudu44

    vraiment trop bien , moi j’ai changé les dimensions afin de le mettre en fond avec des photos dessus !
    par contre moi ca fait pas le meme effet mais ca donne vraiment bien !

  8. Antoinetek

    Je viens de découvrir ce topic !
    Superbe ! Voila ma création !
    img222.imageshack.us/img2…
    Merci a vous !

  9. mooo04

    hello !
    excellent cet effet ! chapeau ! ;) et tres bien expliqué aussi !

    Sinon une question que je me pose : comment faire pour que le luminosité du texte que l’on met par dessus, s’adapte à celle du fond ?… Comme sur l’exemple, on voit la gauche du "Babylon" bien illuminée, et le reste un peu moins.
    On fait un effet de néon et apres on met un calque dégradé par dessus ? Ou c’est plus facile (peut etre en jouant avec, entre autres, la transparence) ?
    Voila merci d’avance pour la réponse et encore bravo ;) !

  10. Shemu

    C’est une lueur externe blanche en mode Incrustation.

  11. Pyrra2000

    pour un effet sympa, fait nouvo calque, appliquer les nuage et metter le calque en inscrustation, sa rajoute 2 3 truc qui me plaise

  12. Snake

    j’en ait fait trois de differents couleurs et le rouge pour moi est le meilleur :

    img177.imageshack.us/img1…
    img98.imageshack.us/img98…
    img53.imageshack.us/img53…

  13. oxysyle

    héhé merci pour ce tuto regardez moi çà :P img81.imageshack.us/img81…

  14. âdmiX

    magnific gg

  15. Johnny

    Regardez mon image^^ je trouve ce tutoriel extra!
    img406.imageshack.us/my.p…

  16. Dray

    Salut ! Superbe effet !
    Et très bien expliqué.

    Une question : Comment on fait les rayures horizontales derrière le texte ?

    Merci d’avance !

  17. 40-12designer

    Super tuto !! J’ai fait une superbe couverture pour le première album de 40-12.

  18. yasoft

    c’est un tres jolie tuto malheureusement sa ne fonctionne que avec le halo

  19. PrYsMax

    Ce tuto est vraiment simple et le resultat est tellement beau : pour moi un petit wallpaper pix.nofrag.com/db/27/1b47…

  20. Kyuu

    Très bon tuto ^^
    Voilà ce que j’ai fait:
    img181.imageshack.us/img1…

  21. Chouby'z

    Hello!
    J’adore ce tuto et j’adore ce site… Je suis fière de ce que j’arrive à faire grace à tout ça! Merci encore! Seulement ici (désolé :S) je ne comprend pas ce qu’il faux faire au debut de l’étape n°3… Pouvez-vous m’aider? Merci d’avance…

  22. Diabler

    voila le mien
    pix.nofrag.com/55/c3/d72c…

  23. fixs

    salut,
    j’ai fais se tuto et une idee met venue: faire en 800*600 avec double halo et double couleur et apres jouer avec la luminositer. c’est pas mal aussi. je vous aurais bien montrer pas un lien mais je ne sais pas comment on fait :s

  24. foncouxvinc@hotmail.com

    Bonjour j aimerais savoir si vous pouviez me retrouver la police de cette image.

  25. Katal

    Moi ausi comme Chouby’z j’ai un problème avec l’étape 3 et avec les calques. Si quelqu’un peut m’aider ??? Merci

  26. skype

    salut moi sa marche pas pour estomper le flou gaussien je le trouve pas dans édition et aussi j’ai essayer maj. mais cela n’a pas marché… mais la touche maj. c la quel de touche! majuscule? si oui cela marche pas =( …Pouvez-vous m’aider en passant j’ai adobe photoshop elements 1.1 je pense?

  27. skype

    ok je l’ai trouver c’est parce que il faut avoir la version CS merci quand même

  28. Sarrek

    Suppppperr tuto, merci j’ai fait ceci
    img263.imageshack.us/img2…

  29. jmt21mars

    Le tutoriel est très bien expliquer ! Par contre je me pose la même question, comme fait-on les barres horizontal derrière le texte ?

  30. Alain Grinbaum

    Je suis un passionné de montages et de créations en tous genres.
    J’utilise surtout PhotoshopCS dont j’ai quand même suivi … 240 heures de cours! Donc ça va pas mal!
    Je découvre malgré tout des choses superbes ici, que je je connaissais pas, ou plutôt que je n’avais pas l’habitude d’employer. Franchement génial! Pour moi c’est un gros plus!

  31. Alain Grinbaum

    Les résultats obtenus sont étonnant !
    J’en ai choisi un parmis ceux que j’ai réalisé … et je suis heureux de vous le soumettre … super !

    img207.imageshack.us/img2…

    Franchement bien fait ce tuto ! Bravo !

  32. antrax

    … tu pixellises le texte, tu dupliques le calque deux , trois fois.. tu décalques les calques chaque fois un peu plus du coté ou tu veux avoir les traits, puis tu fusionnes (en laissant le premier calque texte a part) . Ensuite filtre ==> attenuation ==> flou directionnel ==> 0° et 50 a 100 de distance.. puis tu vois le mode de fusion que tu preferes.

  33. Maxime

    je travaille sur adobe photoshop 7.0 et je peut vous dire que ses tuto sous tous simplement géniaux ils n’y a rien a dire. Shemu tu fais du super boulots avec tous ces tuto. Voilou bonne continuation a toi. LES GENS PRENEZ DE LA GRAINE SA VOUS SERVIRAS PLUTARD ^^!

  34. Antoine

    Moi je trouve ca super mais je bloque au moment de faire les ondes : je fait donc filtre deformation puis onde mais la j’essaye de paramétré mais sa fait toujours un truc bizare alors j’aimereis un ordre d’idée pour ces réglages !
    ps: j’utulise Adobe photoshop CS3

  35. Ellen

    J’adore ce tuto, il est très clair et l’effet est magnifique… Seule petite question, personne ne saurait faire cet effet avec the gimp ? Je sais que cela doit être possible mais je ne parviens pas à trouver un équivalent de l’effet chrome (pas faute d’avoir tenté ^^ ).
    Si quelqu’un pouvait me donner une astuce je lui serais redevable à vie =)
    Merci d’avance et en croisant fort les doigts…

  36. flo2929

    Regardez moi ce que j’ai fais !
    pagesperso-orange.fr/tiya…
    Franchement bien fait ce tuto !

  37. djam

    salut;je vous tire chapeau monsieur! cette texture est formidabe!!!ça ce voi que vous avez un gout spéciale. j’ai réussi à réaliser cette texure mais ça me donne un effet different avec un panneu publicitaire de taille 300 cm sur 80cm. que dois je faire svp et merci beucup.

  38. namos

    voici a quoi j’arrive en jouant avec des degradés transparent et un effets a la matrix en mode de fusion superosition, a arrive au meme resultat pour c’est effets en créant des degradés en mode difference pour la base aprés le principe est le meme tout en mode eclaicir et effets de deformation a fouason^^
    http://img241.imageshack.us/i

  39. bobmartien

    Sympa comme tutos, je donne quelques trucs que jai modifié et dont j’apprécie le résultat.

    Lors du reglage de la couleur, choisissez votre teinte et mettez SATURATION: 45 et LUMINOSITE: -20

    Un effet moins flashy que je trouve très très cool

    On peut aussi ajouter, une filtre Nuages puis nuage par dif. :)

    Merci encore

Les commentaires sont clos.