Tester si un BG répète correctement la mosaïque dans Photoshop?

9

Je travaille fréquemment à créer des textures d'arrière-plan dans Photoshop à utiliser sur le Web. Malheureusement, je dois généralement deviner ou simplement utiliser des cadeaux provenant d'autres sites Web.

Je voudrais créer mes propres textures dans Photoshop et vérifier si elles sont correctes avant d' exporter l'image. Y a-t-il un moyen de le faire rapidement? Je me souviens d'une méthode utilisant l'offset, mais je ne connais pas les outils.

Vous trouverez ci-dessous quelques exemples de tuiles d'arrière-plan afin que vous puissiez voir de quoi je parle:

tile1

tile2

adobe-photoshop website-design background tiles Îles du destin
la source

Réponses:

17
  • créez votre image. Par exemple, disons que c'est 200px carré
  • allez dans FILTRES> AUTRE> OFFSET et tapez des nombres x et y qui sont la moitié de votre taille d'image (dans ce cas 100px)
  • cela déplacera votre image sur autant de pixels et placera les pixels qui ont été déplacés hors de la toile de l'autre côté. Vous verrez maintenant une couture au milieu de votre image où le motif ne se répète pas complètement.
  • retouchez cette couture pour en faire un mélange lisse en utilisant les outils que vous aimez (l'outil de clonage est une option courante).
  • enregistrez votre nouvelle image.

Pour les images plus complexes, vous devrez peut-être faire un décalage final de disons 1/4 des dimensions en pixels pour retoucher les bords que vous pourriez avoir manqués la première fois qui sont tombés près du bord de la toile.

DA01
la source
Merci c'est parfait! Exactement ce que je cherchais
Destiny Islands
5

DA01 répond à comment le faire mais votre question est de savoir comment le tester. La réponse à cette question est:

  1. Sélectionnez votre calque de motif
  2. Édition> Définir un motif
  3. Créer un nouveau calque
  4. Tout sélectionner
  5. Édition> Remplir> Motif> Choisissez votre motif
  6. Frappez bien et voyez si ça a l'air bien
Ryan
la source
2
Pouah. J'ai mal lu la question! Bon conseil. Une autre option consiste simplement à créer un fichier HTML de test avec un arrière-plan répétitif. Continuez ensuite à réenregistrer le fichier et à recharger le navigateur.
DA01
1
Oui, je savais comment le faire en HTML / CSS mais je ne savais pas que Photoshop pouvait également tester. Merci pour le conseil!
Destiny Islands
2

J'enregistre traditionnellement l'image au format jpg ou png, puis j'utilise du HTML de base pour tester le pavage.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Ouvrez-le dans un navigateur et vous pouvez voir le pavage et simplement ré-enregistrer "image.jpg" et rafraîchir la page Web pour vérifier les révisions.

Scott
la source
1

Il existe également une autre façon de le faire, mais la limite est que tous les autres modèles doivent être de la même taille, vous verrez pourquoi.

Pas:

  • Faites une boîte de 200px par 200px.
  • Convertissez-le en objet intelligent.
  • Dupliquez et alignez-le pour qu'il y ait 3 cases horizontalement. Assurez-vous qu'aucun chevauchement ou espace entre les deux.
  • Dupliquez les trois cases sélectionnées dans 3 colonnes verticales.
  • Si ce n'est déjà fait, activez les fenêtres flottantes dans Préférences.
  • Double-cliquez et ouvrez l'objet intelligent.
  • Alignez les deux fenêtres afin que vous puissiez voir les deux fichiers.
  • Remplissez l'objet intelligent avec le motif que vous voulez et voyez-le en action dans une autre fenêtre simultanément.
Muhammad Umer
la source
1

Il existe un excellent outil (gratuit pour un usage personnel) appelé AMP Tile Viewer qui vous permet de vérifier très rapidement si une image peut être carrelée et à quoi elle ressemblera. Je l'utilise tout le temps et ça marche super bien. Pas besoin de créer des motifs dans Photoshop que vous n'utiliserez jamais ou que vous n'aurez plus à supprimer par la suite.

TaranQ
la source
1

J'ai écrit une extension Chrome appelée Affichage en mosaïque qui vous permet de cliquer avec le bouton droit sur une image et de voir comment elle se mosaïque.

tknomad
la source
Il y a aussi cet outil en ligne que j'ai découvert récemment: tile.toyls.com
Thomas Guyot-Sionnest
0

La façon dont je le fais est simplement d'enregistrer la tuile au format jpg et de la mettre en mosaïque sur mon bureau. Assez rapide et facile.

jill
la source