AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Création avec éléments sortant du cadre

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 6 Sep 2007 - 0:30





    Pour obtenir ce genre d'effet :


    ou




    Je vais vous montrer comment pas à pas faire une petite bannière de forum en faisant ressortir des éléments. Il est aussi possible par la même méthode de faire dépasser un personnage du cadre.

    Etape 1 :
    Ouvrez Photoshop ! Ben ouais, ça peut paraître bête, mais c'est une étape importante :p
    Prenez un nouveau document : Fichier / Nouveau
    Mettez par exemple comme tailles : 800x350
    N'oubliez pas avant de valider de mettre "Contenu de l'arrière plan" = transparent !

    Etape 2 :

    Vous allez délimiter la zone d'image, qui devra donc être forcément plus petite que le document que vous avez là :
    Prenez l'outil rectangle, choisissez la couleur de remplissage blanc ou noir de préférence afin que ce soit bien différent du reste (ici je prends blanc), et tracer votre rectangle en veillant non seulement de le centrer, mais aussi de laisser assez de place sur les bords.



    Afin de mieux distinguer le cadre, vous pouvez d'ors et déjà y mettre un contour : Clic droit sur le calque dans le cadre des calques (en bas à droite), et Option de Fusion. Cliquez sur Contour, puis mettez en Taille : 2px.

    Ensuite dernière chose : faites clic droit sur le calque dans le cadre de calque et mettez "Pixeliser le calque".

    Vous avez maintenant votre cadre de base, à partir d'ici, vous devrez travailler sur d'autres calques que celui-ci, afin de le laisser intact. Il sert de délimitation... vous allez comprendre.

    Etape 3 :
    Créez un nouveau calque, dans lequel vous allez mettre ce que vous voulez. Commencez par quelques brushs par exemple, puis une image de décors, ou des personnages, à votre choix. Par exemple, je fais une bannière Star Wars :
    (je fais simple)

    - je rempli tout le calque de noir avec le pot de peinture
    - je crée un second calque par dessus
    - je prends un brush en spirales couleur rouge que j'applique partout
    - je vais dans Filtre / Atténuation / Flou directionnel : Angle 0, Distance 700px, et je valide
    - clic droit sur la barre de claque (en bas à droite) et "Fusionner avec le calque inférieur" : j'ai donc fusionner les traits rouges avec le fond noir.

    Et c'est là que vous allez voir l'intérêt du cadre blanc :

    Sélectionnez dans la liste de calque, le fameux cadre blanc. Puis, allez prendre l'outil "Baguette Magique". Cliquez à l'extérieur du cadre blanc. Vous allez donc sélectionner tout le tour du cadre.



    Là, sans rien toucher, allez dans la liste de calque et re-sélectionnez votre image de fond (le fond rouge et noir fait plus haut).
    Il vous suffit alors de cliquer sur SUPPR, et vous supprimerez tout le tour, tout ce qui dépasse du cadre blanc.
    C'est la base pour faire des images avec des éléments sortant du cadre.

    Etape 4 :

    Je comble rapidement l'intérieur du cadre avec d'autre personnage, ou motifs, peu importe, le principe est le même, chaque fois pensez bien à créer un nouveau calque, puis à mettre ce que vous voulez, puis à sélectionner la base (cadre blanc) et à supprimer ce qu'il y a autour.

    Voici ce que ça peut donner après quelques ajouts d'images :



    Vous remarquez que j'ai laisser dépasser le vaisseau de gauche, ainsi que le truc (je sais plus comment il s'appelle ce machin ><") avec les deux sabres laser au centre. Seulement ce perso là à les pieds qui dépassent en bas, du coup au lieu de simplement supprimer la sélection, je laisse les pointillés tels qu'ils sont et je prends la gomme pour enlever ce qui dépasse en bas. Les pointillets délimitant la zone, pas besoin d'avoir des doigts de fée, ça part tout seul.

    Etape 5 :
    Il est intéressant de mettre un calque qui servira de "fond provisoire" à l'image, pour avoir une idée de ce que ça donnerait. Là, je vais créer un nouveau calque, que je vais déplacer pour le mettre tout en bas de la liste. Pour le déplacer, il suffit de le sélectionner puis de le faire glisser.
    Je le rempli de noir.
    Remarque : du coup le fin contour noir de mon calque blanc ne se voit plus.
    Je retourne donc dans les options de fusion de ce calque pour mettre une autre couleur... (ici rouge vif, avec opacité 70).

    A vous de rajouter ce que vous voulez par la suite, comme un reflet sur le cadre par exemple...
    (cf. tuto reflet)

    Etape 6 :
    Une fois votre image terminée, vous pouvez aussi rajouter des brushs autours, là je mettrais des étoiles (normal...Guerre des etoiles..^^).
    Il faut penser à mettre le calque noir qui a servit de "fond provisoire" en "invisible". Pour cela, il siffit de cliquer sur l'oeil noir qui se trouve au début de la barre de ce calque (dans le cadre des calques).

    Ue fois fait, sauvegardez votre création, en sélectionnant bien le format "PNG" (.png).



    Remarque : le danger avec la transparence, c'est qu'il est fréquent d'avoir des "traces" si les images ont été mal découpées par exemple.
    L'inconvéniant également c'est que la transaprence et l'animation ne sont pas compatibles.
    Mais il est possible de passer outre, si vous connaissez la couleur de fond du forum, il vous suffit de remplir le fond de votre création avec cette couleur et elle devient un format JPG normal, sur lequel vous pouvez faire des animations en transformant en GIF.

    Si vous avez des questions n'hésitez pas... Posez-les plutôt ici que par MP, car sinon je perds du temps et les réponses sont individuelles, vaut mieux que tout le monde en profite.


    Dernière édition par Sparrow-style le Mer 13 Aoû 2008 - 14:02, édité 4 fois



    Scooby3991
    MasculinAge : 25Messages : 1193

    le Jeu 6 Sep 2007 - 17:29

    Ouais c'est cool merci pour le tuto Cap'taine ^^
    avatar
    Ho Seung
    MasculinAge : 27Messages : 5

    le Ven 7 Sep 2007 - 18:49

    J'était content de trouver ce toturial mais j'ai un petit problème.

    Je fais déjà l'étape numéro une sans problème (normal me direz vous).
    Le problème commence à l'étape deux,je ne peux cliquer sur pixeliser le calque,celui étant griser,il m'est impossible de cliquer dessus,donc je passe cette étape.Pour l'étape trois je me débrouille pas trop pour le début mais je ne peux pas utiliser la fonction Suppr pour supprimer le contour.Donc j'ai continuer sans cette étape et la: "galère",je rate toute ma signature et j'abandonne .Donc j'ai trouver une autre technique pour le faire (comme pour ma signature actuel) mais pas sur de m'en rappeler totalement.Alors si vous pouviez m'éclairer sur les deux points ou je bloque s'il vous plait.




    Kit Hitsugaya By me
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 7 Sep 2007 - 22:51

    Alors, déjà quelques trucs à vérifier :

    - as-tu pensé à prendre un "nouveau document" en sélectionnant "fond transparent" ?

    - si c'est le cas vérifie aussi qu'il soit en RVB (couleurs quoi en gros).

    - si tu peux pas le pixeliser, c'est soit car il l'est déjà (dans ce cas c'est bon et ça devrait marcher mais si tu dis que t'arrive pas à supprimer c'est que c'est pas bon ><"), ou alors peut-être qu'il y a un petit dessin de verrou sur la barre du calque à droite, si c'est le cas il suffit que tu décuples le calque et supprime celui avec le verrou.



    Malgré tout, je te donne une éventuelle autre méthode pour faire ce cadre de base :

    - sélection l'outil "rectangle de sélection" (celui tout en haut le premier)
    - dessine ton cadre de la taille que tu veux, puis en gardant la zone sélectionnée en pointillés vas prendre l'outil pot de peinture et cliques dans le cadre pour le remplir. Là t'auras un calque pixélisé déjà.


    Remarque générale :
    Lorsque vous remplisser ce cadre de sélection, il est possible avant de remplir de créer un nouveau calque, pour le remplir dans ce nouveau calque, afin de ne pas toucher au calque déjà existant.


    J'espère que t'y arriveras avec ça.



    avatar
    Clowride
    MasculinAge : 27Messages : 194

    le Sam 8 Sep 2007 - 10:02

    merci beaucoup pour ce magnifique tutorial
    avatar
    Madara Uchiwa
    MasculinAge : 23Messages : 159

    le Sam 22 Sep 2007 - 23:32

    super capitaine ce tutorial va beaucoup m'aider je te remercie de vos tutorial



    je suis maintenant un expert...!!!
    avatar
    keitox
    Age : 24Messages : 29

    le Dim 23 Sep 2007 - 20:05

    merci bcp pour ce tutorial
    Scooby3991
    MasculinAge : 25Messages : 1193

    le Ven 28 Sep 2007 - 17:48

    Cap'taine je viens d'essayer et le problème que j'ai c'est avec l'étape 3.
    Tu vois enfait quand un moment tu dis de retourner dans le calque de base et avec la baguette magic de sélectionner le contour du rectangle blanc, jusque là sava mais c'est juste aprés qu'il est le problème.... c'est quand tu dis d'aller sur le calque rouge et noir et de le supprimé bas à moi il me suprimme tout le truc.

    La preuve:
    1) http://i22.servimg.com/u/f22/11/15/23/43/photo10.jpg
    2) http://i22.servimg.com/u/f22/11/15/23/43/photo_10.jpg
    3) http://i22.servimg.com/u/f22/11/15/23/43/photo_11.jpg

    Pourquoi sa fait commça! snif ?
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 28 Sep 2007 - 17:56

    T'es sûr que t'as fais plusieurs calques là ? J'en vois qu'un sur l'image dans le cadre des calques...



    Scooby3991
    MasculinAge : 25Messages : 1193

    le Ven 28 Sep 2007 - 18:02

    J'en ai fais 2 jusqu'à là
    1) Pour le remplir de peinture noir
    2) Pour mettre les brushs

    Et aprés tu dis de Fusionner avec le calque inférieur c'est ce que j'ai fais.... ensuite tu dis d'aller prendre la baguette magic et d'aller sur le calque principal.. et il faut séléctionnner l'extérieur du rectangle blanc, puis pour finir de le supprimé, c'est juste ou pas ? ^^
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 28 Sep 2007 - 18:18

    Vous avez maintenant votre cadre de base, à
    partir d'ici, vous devrez travailler sur d'autres calques que celui-ci,
    afin de le laisser intact. Il sert de délimitation... vous allez
    comprendre.

    non il faut pas fusionner les calques, je me sers à un moment de l'option de fusion ce qui n'est pas la même chose ^^.

    Ton cadre (rectangle) blanc doit rester tel quel, et tu dois travailler par dessus sur d'autres calques.



    Scooby3991
    MasculinAge : 25Messages : 1193

    le Ven 28 Sep 2007 - 19:46

    Bas tiens regarde ce que j'ai fais, est-ce que c'est juste ?
    mais malheuresement je sais pas comment faire avec les brush....

    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 28 Sep 2007 - 21:23

    Oui c'est l'idée en effet, après il reste à meubler pour que tout soit remplis, car là ça fait vide.



    Scooby3991
    MasculinAge : 25Messages : 1193

    le Ven 28 Sep 2007 - 22:03

    Ha meubler ? c'est quoi sa lol ^^
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 28 Sep 2007 - 22:33

    Ben ta création fait "vide", y'a des espaces non occupés, etc...



    Scooby3991
    MasculinAge : 25Messages : 1193

    le Ven 28 Sep 2007 - 22:35

    Oui je sais, c'étais juste pour voir si j'arrivais à mettre des images en dehors du créat bas je peux constater que c'est un succsé.... mais pour les prochaines fois je ferai avec des brushs ect... là c'étais vite fait Razz
    avatar
    kyo
    Messages : 346

    le Sam 29 Sep 2007 - 4:24

    Simple efficace et rapide Wink

    Perso je connaissais déjà mais sa peu toujours servir Razz
    avatar
    Amasis
    FémininAge : 44Messages : 302

    le Jeu 26 Juin 2014 - 22:22

    Bonsoir!

    Voici mon rendu pour ce tuto. :)

    Spoiler:
    avatar
    Shaïka
    FémininAge : 20Messages : 76

    le Sam 1 Oct 2016 - 15:30

    Merci !
    avatar
    valou
    FémininAge : 50Messages : 33

    le Dim 21 Mai 2017 - 8:04

    Merci pour ce tuto
    Contenu sponsorisé


      La date/heure actuelle est Lun 21 Aoû 2017 - 1:10