isotropic-2022
Share
Blog
Search
Menu

Making Blob Images (Web Design Tutorial)

By James LePage
 on July 15, 2020
Last modified on January 7th, 2022

Making Blob Images (Web Design Tutorial)

By James LePage
 on July 15, 2020
Last modified on January 7th, 2022

This tutorial is going to cover a number of methods that you can use to add blob images to your website. In the past couple of years, incorporating blobs into your website has exploded in popularity as many major SAAS product offerings have adopted this unique shape.

Many are saying that it's the complete opposite of the predominant flat/angular UI trend that has been around since the mid 2010s.

Psst! Here's what we're making. Image is random, refresh the page for another.

Typically, images are placed in front of blobs, Or specifically masked in them. In a recent web design project of ours, we used the blob images to add a modern touch to the website , and wanted to discuss some of the main methods that you can use to add blob images (or just basic blob shapes) to your website.

Examples Of Websites That Use Blobs

Many websites are incorporating this trend into their general design, using images that have no discernible corners or edges. Here are a couple examples of this trend found in the wild:

The Elementor website uses a unique blob image that has a solid photo blob as a background, while overlaying screenshots of their tool on top. This gives a nice 3D effect to the whole visual.

Nordcloud, a leading European cloud implementation company, incorporates blobs throughout their website.

SaltInOurHair, An award-winning blog uses image blobs as featured images.

Now that we've feasted our eyes on a couple of visual examples, let's run through a couple of methods that you can use to easily generate blobs and blob images for your website.

Creating Blobs With Blobmaker

If you're looking to incorporate simple blobs (without masking images over them) you can easily do this by using a web application called Blobmaker.

You can select the distortion, number of points, difference between points, and color to create a completely random blob for your website. You can then easily implement this into your website by copy and pasting SVG code, or downloading it as an SVG, converting it to whatever image format you'd like, and then re uploading it to your site.

This tool is great because it creates completely random blobs based off of your criteria, meaning that you can toggle through it until you find a blob that works well in your website. You can also set the color then in there, making this an all-in-one solution for creating SVG blobs for your website.

Here are a couple of blobs that we generated with this application in a matter of seconds:

Creating image blobs (method one)

if you're looking to create a blob like image for use on your website, you can easily do that by masking an image over a blog using Photoshop.

First, use the blob maker app to generate a random blob. The color doesn't matter, but ensure that you have the complexity and contrast set to be exactly how you want it.

Once you've found the blob for you, downloaded onto computer and load up Photoshop. Place the SVG blob directly into the Photoshop canvas (We recommend using a standard 1000 by 1000 pixel canvas, as we will be exporting a PNG so the dimensions here don't matter).

Once your blob is on the canvas, simply import your image into a layer that overlaps the blob. Right click that image layer and create a clipping mask that applies to the blob underneath. And voila, you now have a blob sized image.

To quickly export this, you can merge the image in blob layer together, right click, and select “quick export as PNG”. Now you have a PNG format of an image blob that you can use on your website.

You can further customize this image by adding a gradient overlay, or having images that are cropped by the blob at the top, but overflow out of the bottom making a 3D effect.

You may be thinking, “well that's cool, but I don't have Photoshop and I don't want to spend any money on this just to create a blob image”. That's why we have method 2, which allows you to create a blob image by using HTML, and a little bit of elbow grease.

Creating a blob image using SVG's and HTML

If we're not looking to go the Photoshop route, and are happy to use an SVG to display our blob, this can also easily be done by using a clip path, and masking an image directly over the SVG blob.

To do this, generate your blob using the app, and then edit the following code:

<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="user-space" clipPathUnits="userSpaceOnUse"> <path fill="#FF0066" d="M49.5,-65.4C58.2,-51.8,55.1,-30.5,54.2,-12.9C53.4,4.7,54.7,18.5,49.1,28.6C43.6,38.6,31.1,44.8,17.6,50.9C4.1,57,-10.5,62.8,-22.5,59.5C-34.5,56.1,-44.1,43.5,-53.7,29.7C-63.3,15.8,-73,0.6,-73.4,-15.7C-73.8,-32,-65,-49.4,-51.2,-62.2C-37.4,-75,-18.7,-83.1,0.9,-84.1C20.4,-85.2,40.9,-79.1,49.5,-65.4Z" transform="translate(100 100)" </clipPath> </defs> <image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="https://source.unsplash.com/random" clip-path="url(#user-space)"/> </svg>
Code language: JavaScript (javascript)

Replace the path with the path generated by the blob maker app. The path is what actually ends up making the blob. Then, in the image element, replace the XLink URL with the path to your own photo. Currently, we have it set to use the Unsplash API and fill the blob with a random image (Refresh this page, and the image will change). You can fine tune other elements of the code, but if you're looking for a quick and simple way to add blob shaped images to your website, this is a great option.

However, if you're looking to layer or use a format such as PNG for JPEG, going the Photoshop route is probably a better option.

To add this element into your website, simply copy and paste the HTML code into your site. For example, if you're using Elementor, you can do this with an HTML element. If you're using Gutenberg, you can do this with a Gutenberg HTML block. you can also throw this directly into your theme PHP.

You can manipulate the size by either using CSS to transform the entire element, or increasing the changing the view box attribute values (Increasing them makes your blob smaller).

Other cool blob effects to incorporate into your website

If you're looking for additional blob image effects (or just blob effects in general) here are a couple of codes in the bits that we found on CodePen. To install them on your website, typically you'll need to add the CSS to your stylesheet, HTML to where you want the effect to show up, and JavaScript using either a standalone script or incorporating it via HTML script tags.

Using JavaScript, this blob is responsive to user mouse input. When you touch it with your mouse, the blob reacts by moving in the opposite direction, causing waves throughout its form.

This blob animation takes it a step further and creates a photo realistic 3D rendering that moves and flows. The code pen is titled “AI assistant blob” but it's definitely a cool visual effect that you can incorporate anywhere within your website.

If you're looking for a unique blob like background to incorporate into your website, this code penny uses a collection of SVG's , background images, and animations to create a unique effect. The blobs float around on the screen, intersecting and connecting with each other.

Conclusion

If you're looking to add blobs, image blobs, or animated blobs into your website, this article should have presented you with multiple ways to do this. Using the Photoshop method of creating image blobs is great if you are trying to generate PNG images, while masking SVG's can be done completely on line that comes with the requirement of using the SVG on the website.

You can also make use of the Codepens to incorporate advanced animated blobs on to your website. If you have any questions on how to do anything regarding blogs, websites, and web design, reach out in the comments below.

isogroup-cover
Join The IsoGroup
A vibrant Facebook Group to talk about web design and the business of agency. Daily curated resources and conversations.
oxygen-course-isotropic
Oxygen Builder Course - Coming Soon
The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.
Get Launch Notification & Discount
bricks-builder-course
Bricks Builder Course - Coming Soon
The Bricks Builder Mastery course will bring you up to speed on this popular builder.
Get Launch Notification & Discount
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Omer
Omer
6 days ago

I want to make a blob of three images but not in Photoshop as i am further interested to add that to my website which i don't know till now how to make it i just reached blob by my own interest can u help me

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram