Créer une barre de séparation sans coupure

On a parfois besoin de faire des images qui peuvent se répeter sans qu'on voit la limite entre chaque image, par exemple si on veut créer une barre de séparation pour un forum. On pourrait faire une barre très longue, mais avec une barre qui se répète bien, on est sûr qu'il n'y aura pas de vilaine coupure quel que soit la taille de l'écran du visiteur.

1) Ouvrir un nouveau document de la taille normale d'une barre de séparation, moi par exemple je vais prendre 700x40 pixels

2) Faire un fond à la barre comme vous le voulez, vous pouvez comme moi ajouter un dégradé blanc de haut en bas pour donner du volume. Voici ma barre:



3) Nous savons que sur un forum, une barre de séparation se répète plusieurs fois si elle n'est pas assez grande pour recouvrir toute la largeur du forum, et comme selon la taille des écrans, ou la déformation du forum dûe à une image trop grande, il faudrait une barre de séparation énorme, le mieux est de faire une barre qui est jolie une fois répétée. Voici ce que la mienne donnerais si je la mettais sur un forum comme elle est là:


Vous avez tous vu la coupure toute moche? Si si ici là regardez:

Il faut éviter ça, alors comment? Vous savez faire un fondu? Vous avez vu le tuto pour ça ici ?
non? alors zou on file lire ce tuto, ça vous aidera! Le principe ici est de faire un fondu entre les deux barres pour éviter la coupure.

4) Faites un masque comme ceci, de la même taille que votre barre:



5) Copiez votre barre et collez là à gauche de votre masque, en utilisant édition => collage spécial => assembler le collage et en cochant "gauche"
On a:

6) Copiez votre ensemble barre/masque et collez le sur la barre seule en utilisant édition => collage spécial => image et masque associé, puis déplacer votre collage sur la droite comme ça:


puis validez.

J'obtiens:

7) Copiez ce que vous avez obtenue, et coller le par dessus, puis déplacer votre selection à gauche comme ceci, de façon qu'on ne voit plus que la partie droite de tout ce qu'on a collé, comme ça:


En déplaçant l'image collée peu à peu, on peut remarquer qu'il y a une position exacte dans laquelle on ne voit aucune séparation si on valide le collage, cette position correspond à avoir exactement le même écart à gauche que celui qu'on avait à droite tout à l'heure. A vous de retrouver cette position, ça peut paraitre compliqué, mais avec un tout petit peu d'habitude on le retrouve toujours très vite.
Une fois que c'est fait, le principe est de récupérer cette partie là de la barre:

C'est cette partie qui se répètera convenablement.
Pour cela valider le collage, puis faites réapparaitre votre sélection en cliquant sur , puis effacer votre sélection (clic droit => effacer)
et enfin recadrez votre barre (on sélectionne avec précision la partie qu'on veux garder et clic droit => recadrer

ça donne:

C'est fini, regardons ce qu'elle donne si on en met deux bout à bout:

Plus de trait qui montre la coupure entre les deux, c'est parfait =)


Retour a la liste des tutos pour Photofiltre


Revenir en haut de la page


Nous sommes le 21/08/2017 et il est 06 heures 47.

© Ame Stram Graph - Design Lunard - Codage Lunard et Rock Lee ♥ - 2010