Table des matières:

Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web : 8 étapes
Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web : 8 étapes

Vidéo: Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web : 8 étapes

Vidéo: Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web : 8 étapes
Vidéo: Trouver des background CSS stylés pour épicer ses interfaces 🌶️ 2024, Novembre
Anonim
Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web
Créer des motifs en mosaïque pour l'image d'arrière-plan du site Web

Voici une méthode directe et simple (je pense) pour créer des images qui peuvent être mises en mosaïque sans avoir l'air trop "grille". Ce didacticiel utilise Inkscape (www.inkscape.org), un éditeur de graphiques vectoriels open source. J'imagine que cette méthode peut également être appliquée à des programmes de graphiques vectoriels coûteux comme Adobe Illustrator. Hé, c'est ton argent.

Étape 1: Configurer le document

Configurer le document
Configurer le document
Configurer le document
Configurer le document
Configurer le document
Configurer le document

Après avoir ouvert Inkscape, vous souhaiterez configurer les propriétés du document. ([Fichier -> Propriétés du document]) Tout d'abord, modifiez la largeur et la hauteur du document en un nombre plus facile à utiliser. Pour ce tutoriel, j'ai créé une image carrée, mais n'importe quelle proportion fera l'affaire. Ensuite, vous voudrez configurer la grille. Dans les anciennes versions d'Inkscape, il n'y avait qu'une seule grille possible. Dans les versions plus récentes, vous devrez créer une nouvelle grille. Modifiez l'espacement de la grille afin que ces valeurs se divisent uniformément en valeurs de largeur et de hauteur du document. En général, c'est une bonne idée de travailler à partir d'une grande image, puis de la réduire si nécessaire. Parce que c'est de l'art vectoriel, la taille n'a pas d'importance techniquement, mais en pratique, ce sera plus facile conceptuellement avec de plus grands nombres. Dans ce tutoriel, j'ai utilisé une image de 500x500px, et ma grille est à intervalles de 10px. Enfin, assurez-vous que l'option "Activer l'accrochage" est cochée.

Étape 2: Outil Rectangle

Outil Rectangle
Outil Rectangle

Utilisez l'outil rectangle pour dessiner un carré/rectangle qui occupe toute la taille du document. Une grande valeur d'espacement de la grille (voir l'étape précédente) fera que l'outil rectangle s'accrochera facilement aux bordures du document.

Étape 3: Clonage du motif

Clonage du m-t.webp
Clonage du m-t.webp
Clonage du m-t.webp
Clonage du m-t.webp

Groupe])", "haut":0.38721804511278196, "gauche":0.354, "hauteur":0.35902255639097747, "largeur":0.372}]">

Clonage du m-t.webp
Clonage du m-t.webp

Ajoutez l'image que vous souhaitez avoir dans votre modèle. Si votre image est un fichier SVG, vous pouvez généralement le faire glisser et le déposer sur votre document ouvert. Créez un clone de cette image. ([Modifier -> Cloner -> Créer un clone] ou vous pouvez appuyer sur Alt+D) Déplacez l'image d'origine pour qu'elle n'interfère pas avec votre espace de travail. Déplacez l'image clonée dans le carré et créez quelques copies du clonage. La raison de l'utilisation de clones au lieu de copies de l'original apparaîtra plus tard. Voici un moyen simple de faire des copies dans l'espace d'encre: faites glisser l'objet à copier et appuyez sur la barre d'espace pour déposer une copie à cet endroit (maintenez le bouton de la souris enfoncé). Généralement, vous n'avez probablement pas besoin de plus de 2 ou 3 copies pour créer le motif. Comme vous pouvez le voir, j'avais 3 copies de l'image mais j'ai fini par en supprimer une plus tard. Une fois que vous pensez que vous en avez assez, regroupez ces éléments.

Étape 4: plus de clonage

Plus de clonage
Plus de clonage
Plus de clonage
Plus de clonage

Réactivez l'accrochage si vous l'avez désactivé à l'étape précédente, comme je l'ai fait. Dans la capture d'écran, vous ne voyez pas la grille, mais elle est activée. Sélectionnez le groupe d'objets que vous venez de créer et créez un clone de ce groupe. Alignez les bords du clone avec la bordure de la page et continuez à déposer des copies de le clone jusqu'à ce que vous ayez au moins une grille 3x3 de clones autour de l'original au milieu.

Étape 5: Déménageurs experts

Déménageurs experts
Déménageurs experts
Déménageurs experts
Déménageurs experts

Maintenant que vous avez réparti vos clones, il est temps de lisser votre schéma. À l'heure actuelle, le motif semble plutôt en blocs et trop régulier, nous voulons donc étaler un peu les choses. puis regrouper les objets. Cependant, cela rompra les liens avec les clones. Au lieu de cela, nous voulons garder le groupe intact tout en manipulant des objets uniques au sein du groupe. Pour ce faire, maintenez le bouton Contrôle enfoncé et cliquez sur l'objet que vous souhaitez modifier. Contrôle-clic sélectionne des objets uniques au sein d'un groupe. Si vous déplacez maintenant les objets, les clones environnants refléteront également le changement. En utilisant cette méthode, vous pouvez maintenant déplacer les images jusqu'à ce que vous soyez satisfait de votre motif général. Vous pouvez également redimensionner, faire pivoter ou supprimer les images. J'ai fini par supprimer l'une des images car je n'en avais besoin que de 2 pour réaliser le modèle.

Étape 6: À propos de l'utilisation d'images clonées

J'ai mentionné à l'étape 3 que vous devriez utiliser des clones au lieu de copies d'images lors de la création du carré du milieu ("l'original"). La raison en est que si votre image est elle-même un groupe d'objets, la méthode contrôle-clic de sélection d'éléments groupés sélectionnera les objets individuels de l'image. Les clones eux-mêmes ne peuvent pas être modifiés (sauf pour la taille et la couleur) et donc la méthode de contrôle-clic entraînera la sélection de l'objet clone entier quel que soit le nombre d'objets dont l'image d'origine est composée.

Étape 7: Touches finales

La touche finale
La touche finale
La touche finale
La touche finale

En tant qu'étape facultative, sélectionnez le carré d'arrière-plan (Ctrl-clic) et définissez la couleur de remplissage sur aucune (c'est-à-dire transparente) ou sur la couleur de votre choix pour l'arrière-plan. ([Objet -> Remplissage et contour]) J'ai également diminué l'opacité du groupe dans son ensemble (sélectionnez par clic régulier) afin que le motif puisse être en arrière-plan et ne pas être intrusif. Enfin, l'étape importante de l'export. Ouvrez la fenêtre d'exportation ([Fichier -> Exporter le bitmap]). Cliquez sur le bouton "Page". Cela exportera uniquement les parties du document qui se trouvent dans les limites de la page, c'est-à-dire à l'intérieur du carré de "l'original". Modifiez la taille du bitmap exporté si vous le souhaitez, puis cliquez sur "Exporter".

Étape 8: Produit final

Produit final!
Produit final!
Produit final!
Produit final!

Vous avez terminé ! Mettez-le sur votre bureau, utilisez-le pour votre site Web ou imprimez-le et vendez-le comme papier peint ! Profitez-en.

Conseillé: