Combining Canva with Squarespace - Part Four

Welcome to part four of our Combining Canva with Squarespace free course. In this tutorial, we are going to have a look at how we can combine background photo textures with foreground images for a unique effect.

If you’ve missed parts one, two, or three, check them out by clicking the links.

We're going to be working with our very own PixelHaze template Greening and Co again in this chapter. We're aiming to try and get an effect where we've got a wood grain/surface of a desktop texture with a floating item on top. We want to try and work with a top-down angle image if we can find a suitable one.

Setting up

Head to Canva and create a custom-sized design. This time we're going to use sizing 800 x 800 pixels which should be plenty of size to work with.

What we're going to be creating now is an item with a transparent background which we'll then apply onto an existing image on the Squarespace website.

If this doesn't make sense to you yet, don't worry, it will become clearer as we start to work through the tutorial and start assembling our design.

Finding a suitable image

Go to Canva's image library and search for a 'top down' mug. Have a look through the options available. We want to avoid images that already have photo filters applied to them and ones where the photo is cropped in quite close to the content of the image.

If you are struggling to find an image that fits what you are aiming for, you can always try to expand your search to Unsplash or Adobe for more options.

Your image doesn't have to be perfect, as we can always adjust the color settings later on to give the image more 'punch'.

Scale up the image so that the content (in this case our mug) fills the space and is in the center of the design. A handy tip here is to double click on the image, Zoom right out so you can see the whole of the image, and then crop it down to get rid of parts of the image you are not interested in.

Manipulate the image by cropping, rotating and zooming to get the mug in the center

Manipulate the image in the design space so that it is large and in the center. You may wish to rotate your image. You may notice in our example that our mug from the top-down looks a little like a magnifying glass so there may be something more we can do with this design.

Editing our image

Next up we are going to remove the background. Click on 'edit image' and there is a wonderful in-built tool that removes the background quickly and easily. It's a really useful tool and works very well most of the time.

Once we have removed the background of our image, we will be able to save our mug image on a transparent background meaning that it will float on top of whatever surface we choose to put it on.

Adding a drop shadow

We could also add a bit of a drop shadow to our mug using a radial gradient. Head to Elements and search 'radial gradient'. It doesn't necessarily matter which one you choose here, as long as you can change the color next to the 'edit image' section.

Expand the radial gradient until it is behind the mug and right-click in order to send it to the back. Once you've done this, change the color of the outermost aspect of the radial gradient to black, and the middle part of the gradient to black as well just to make sure there are no other colors coming through.

In our example, we are going to offset the drop shadow slightly to one side, as a normal shadow might appear. Next up, click the checkerboard type symbol on the right in order to change the opacity of our drop shadow. We don't want the shadow to be too strong, so in this example, we're going to take the opacity down to about 60 or so. Remember that this image will end up on a transparent background, not a white one.

Additional image editing

Tweaking the color settings to maximize the effect

Now we have the drop shadow component completed, we can go to 'edit image' to see what adjustments we can make to our image to enhance it before we take it to Squarespace.

In this example, we're going to bump up the saturation and contrast and bring the brightness down a little bit so that it jumps off the page slightly. Be careful when changing the color tint as this not only changes the color of the mug but also the color of the coffee inside the mug.

What we could do instead is add a filter. Anything that gives a bit more color to our mug would be beneficial here. A good one to try in our example is the 'Dare' filter, but the intensity is much too high, so once you click on the filter, remember to change the intensity so that it doesn't overpower the image but allows it to pack some punch. We've taken the intensity to about 30 here.

Now we've got our mug in place with the drop shadow underneath it, so onto the next step!

Making sure the download settings are correct saves time and hassle later on

Next steps

The next step is to download our image, but It's key to get the download settings right. We want to download it as a PNG file and make sure we tick the 'transparent background' option.

Head over to Squarespace and our Greening and Co site and we're going to put this image in our hero unit section in the 'About Us' section in between the title and the content. Click 'Add Section' and choose a headline such as the one in our example.

Getting the right background

In the settings, under 'format', change the section height to medium, and then under 'background' remove the sample background image.

We are going to replace the background image. Click 'add an image' and then browse the free stock images for a 'wood surface' image. What we're looking for is an image with a bit of grain in it. Select your chosen image and wait for it to upload.

Editing our background image in Squarespace

With the image we've chosen, we don't want our background to be competing with our mug (ie we want the mug to stand out) so we need to edit our image. Where you just added the image, click 'edit' so we can play with the image settings such as saturation to gain the desired effect.

In our example here, we are going to reduce the brightness, contrast, and saturation. If you wanted to, you could download the image and upload it to Canva if you wanted to add more effects to your image.

There may be a degree of trial and error with selecting and editing your background image.

In our example, we found that the grain of the wooden texture was a bit too close together, so instead, we tried a slate image that looked more like a worktop surface.

If using a portrait image, Squarespace will massively zoom in on the detail, which may be too much for what we are aiming for here. So in the edit image section, click the 'crop' button at the top right and rotate the image 90 degrees. We also decided to crop our image to 16:9.

This effect is quite sophisticated which means you may have to try a multitude of different images and effects in order to get the desired look and feel. The main effect that helped us in our example was to increase the overlay opacity so we didn't have quite as much detail on the slate image to create a more subtle backdrop.

Adding our floating image onto the background

In the section where we put our background, click the plus button and add an image. Then go and find the downloaded PNG that we made on Canva and upload that.

With our example, we can see a few issues with the shadow effect around the mug.

Drag the mug image over to the right-hand side so that it's next to your text. Then in the top right change the content width of the section to large so that we use the full width of our website and get the effect that we're after.

We can then resize the image and add a spacer between the text content and floating image so that we have a nice amount of space (remember Spaceman is one of our PixelHaze Principles of Design!)

Showing off the effect

To see the full impact of the effect we've created, change the website mode to the mobile view in the top right corner, we can see that the image goes underneath our heading rather than squeezing everything to a smaller size.

As we drag our internet browser size smaller such as if we were using a split-screen with another window, we can see that the image is adjusting in size and position. We cannot achieve this effect if it is just one image.

Finishing touches

Since we weren't fully happy with the drop shadow effect, now we have laid the groundwork, we will pop back into Canva to alter a few settings and tidy up the effect.

We made sure that all the colors in the radial gradient were set to black and reduced the opacity even more so that we have just the slightest of drop shadows. In our example, we also had the drop shadow coming out of the edge of the artwork so it had a cut line that didn't look polished. So it's important to make sure that your effect doesn't go outside of the design box area.

We reduced the size of our effect so it was more concentrated around the mug. Make sure if you are editing your drop shadow effect to right click and 'send to back' so your effect is not in the foreground.

Follow the steps above to redownload your image as a PNG and then replace the first mug image with the new one on Squarespace.

Now we have it!

Our image is now sharp with a subtle drop shadow effect. This, in essence, is how we can implement images into our Squarespace website alongside text so that the image is flexible, resizable and slides over the top of the background, and moves below the text when we change screen size.

In the next chapter, we are going to create duotone effects for images in Canva. If you’ve enjoyed the free tutorials so far, check out our YouTube channel, and don’t forget to like and subscribe.

See you next time!

This post contains affiliate links. When you click on an affiliate link and make a purchase, we may earn a commission.