Créer une image de goutte d’eau (Tutoriel de conception web)
Les différences et les couleurs entre les points créent un Blob entièrement aléatoire pour votre site. Vous pouvez ensuite le mettre facilement en œuvre sur votre site en copiant et en collant le Code SVG ou en le téléchargeant dans SVG, en le convertissant dans n’importe quel format d’image que vous voulez, puis en le téléchargeant sur votre site Web.
Cet outil est génial parce qu’il crée des blogs entièrement aléatoires selon vos critères, ce qui signifie que vous pouvez continuer à bouger jusqu’à ce que vous trouviez un blog qui fonctionne bien sur votre site. Vous pouvez également définir des couleurs pour en faire une solution tout – en – un pour créer SVG Blob pour votre site Web. Voici quelques blobs que nous avons générés en quelques secondes avec cette application: créer un Blob image (méthode 1) Si vous voulez créer une image semblable à un Blob à utiliser sur votre site Web, vous pouvez facilement le faire en masquant l’image sur votre blog en utilisant Photoshop.
Tout d’abord, utilisez Blob pour créer une application pour générer un Blob aléatoire. La couleur n’est pas importante, mais assurez – vous que vos paramètres de complexité et de contraste correspondent parfaitement à vos besoins. Une fois que vous avez trouvé le Blob, téléchargez – le sur votre ordinateur et téléchargez Photoshop. Placez le Blob SVG directement dans la toile Photoshop (nous vous recommandons d’utiliser une toile standard de 1000 x 1000 pixels parce que nous allons exporter PNG, donc la taille ici n’a pas d’importance). 
Une fois que le Blob est sur la toile, il suffit d’importer l’image dans la couche qui chevauche le Blob. Faites un clic droit sur cette couche de l’image et créez un masque de coupure qui s’applique au Blob ci – dessous. Tu vois, maintenant tu as une image de la taille d’une goutte d’eau.
Augmenter les changements dans les valeurs des propriétés de la boîte de visualisation (les augmenter diminue le Blob).
Si vous cherchez d’autres effets d’image Blob (ou juste des effets Blob normaux), voici quelques codes que nous avons trouvés sur codepen. Pour les installer sur votre site Web, vous devez généralement ajouter CSS à la Feuille de style, au HTML que vous voulez voir les effets, et au JavaScript intégré en utilisant des scripts autonomes ou des balises de script HTML. En utilisant Javascript, ce Blob répond à l’entrée de la souris de l’utilisateur. Lorsque vous le touchez avec la souris, les gouttelettes d’eau réagissent en se déplaçant dans la direction opposée, produisant diverses formes d’ondes.
L’animation Droplet va plus loin, créant un rendu 3d réaliste au niveau de la photo qui se déplace et coule. Le titre du stylo de code est \
Conclusion si vous souhaitez ajouter un Blob, un Blob d’image ou un Blob d’animation à votre site Web, cet article devrait vous présenter plusieurs méthodes. Si vous essayez de générer une image PNG, il est bon de créer un Blob d’image en utilisant la méthode Photoshop, tandis que le masquage SVG peut être effectué entièrement en ligne et nécessite l’utilisation de SVG sur le site Web. Vous pouvez également utiliser codepens pour intégrer des blobs d’animation avancés dans votre site Web. Si vous avez des questions sur la façon de gérer les blogs, les sites Web et la conception web, veuillez nous contacter dans les commentaires ci – dessous. Abonnez – vous et partagez si vous aimez ce contenu, abonnez – vous à notre carrell
Nouvelles mensuelles de WordPress, inspiration du site, offres exclusives et articles intéressants. Désabonnez – vous à tout moment. Nous n’enverrons pas de spam et ne vendrons pas ou ne partagerons pas vos e – mails.