Combining Canva with Squarespace - Part Two
Welcome to the first practical part of our Combining Canva with Squarespace mini-course. In this chapter, we're going to be learning how to better frame our hero banner unit on our website. We're going to learn how to blend our hero images using simple linear gradients which is perfect for scenarios where the aspect ratio of the image doesn't match the hero unit container.
If you've missed the first part of the course, click here to start from the beginning.
In this example, we're using Greening & Co which is one of our very own PixelHaze Squarespace Templates available on the PixelHaze store. This template is currently 20% off for a limited time only!
Why do we need to use this technique?
The main issue that we can find with some templates is that the hero banner photograph is a little too zoomed in, which means we don't see enough of the other parts of the photo and it's not framed as well as it could be.
The aim of this tutorial will be to reduce the width of the image meaning that we can see more. We'll also be adding a gradient on either side of the image so that it fits better within the letterbox mode that the image is presented in by default.
Where do we start?
To start the process, head to Canva and create a new design in a custom size. Instead of clicking on a template, click on 'custom size' and enter 2200 (width) x 1000 (height) pixels into the boxes. This makes sure that the design is big enough so we don't lose any image quality on large screens but not too large so that we end up with an enormous file size.
This blank page will be where we build our hero banner unit. So next, we need to choose the perfect photo to fit in there. This is a good opportunity to try out some different photo options using Canva's large stock image library. Alternatively, you can upload your own image, but make sure to follow the guidance below to ensure it is of optimal quality. On the sidebar, click on 'photos' and search for the type of photo you're looking for. In this example, we're going to search for 'small business.’
How do you select a good photo for your banner?
When selecting a photo, there are a few things you want to consider to make it easier to frame. Firstly, we want our hero to be off-center which will help when it comes to adding text on our banner (such as our company name, or what we do). We also want to avoid reflections that could be distracting and avoid images that are cropped in too close. If we use an image that is cropped too close, when we enlarge it to the size we want for our banner so there's minimal space on either side, we end up cropping in quite a lot which isn't optimal.
A good option for a photo to use is one that you can enlarge without any loss of quality and even one where you can flip horizontally (if there are no giveaway signs like writing). This allows you to put a blurred-out part of the photo in the background where we could put text on our Squarespace site. Most sites have text flowing from left to right as it tends to look more polished, so flipping an image horizontally can help ensure there's space for text on the left-hand side.
A good option for a hero banner unit. It can be enlarged to size without loss of quality and flipped horizontally with no giveaway signs.
This is not such a good option due to the reflections and being cropped in quite close.
Lock the photo to the center of the design on Canva before moving on to the next part of the tutorial.
How do you make a gradient to apply to your photo?
On Canva, under elements, you can search for gradients and utilize a free or paid Canva gradient on the sides of your photo. However, the gradient that we use most often is difficult to find on Canva and doesn't give us all the control we are looking for, so there is an alternative tool. We are going to use an online tool called Angry Tools to generate our gradient. We can use this tool to convert a web gradient that we can select in the slider (alpha section) and download it as a transparent PNG file meaning that the gradient will overlay the photo and blend into the photo itself.
There will be a gradient preset for you which we will need to edit. Scroll to the 'alpha' section and click on the bottom right circle color and press 'delete color'. Then drag the bottom middle white circle to the bottom right-hand corner. Next, click on the bottom left circle and change the color to white as well. You can change the color in the bottom left corner depending on which color we want to blend in (depending on our photo). Click on the top right circle and change the alpha to 0. This changes the opacity of the second color. Above the alpha section, change the angle to 0 too. What we have created is a gradient going from white to transparent from left to right.
In summary, your gradient should have an angle of 0, the color you want to blend on the left bottom circle, and the opacity or alpha of the second color on the right set to 0.
Lastly, we're going to change the height to 1000 pixels to match the height of our photo in Canva. Then we can download our gradient as a PNG file.
Gradient creation settings used in this example
We can repeat this for any other color to match our photo. Usually black/charcoal and white are good options but it depends on the photo you have selected.
Once you have created your gradient, you only need to create and download the graphic once, as you can reuse it in the future.
How do you apply gradients to your photo?
Head back to Canva and upload the gradient file(s) you just created. Select one of your gradients and drop it onto the side edge of your photo. Then enlarge it so that it's the same height as your photo.
At this point, you should see that you have a nice smooth gradient blending from one side of your image into the background. To do the same for the other side, just copy and paste the 'to size' gradient and click 'flip horizontal'.
If you are using a color other than white for your gradient, you will also need to change the background color in Canva to match the gradient color. To do this, you can use a handy extension in Google Chrome called Colorzilla to click on the color you want which gives you the 6 digit hexadecimal value for the color copied to the clipboard. This means, on Canva, we can select 'background' from the sidebar and then use the color tool underneath the search bar to paste in the color code.
You may try this with multiple colors, but if you're unsure, the best results tend to be using black or white. At this point, we should have an image or two with linear gradients blending into the background.
If you feel you need a more fluid gradient going through your image, you can experiment with doubling up on the gradient (applying two in a row).
Here’s our finished product!
The beauty of creating this effect is that once we've created it once, we can just duplicate our page on Canva and change the photo to another one. It might not look polished the first time you create the effect, but there are ways that you can play around with the effect and blend the gradients differently but this should give you an idea of how things could look if you were to use gradients on your hero banner images.
How do I put the new image into Squarespace?
First up, we need to download the image we've created. Click the top-right download button and select the page(s) you want to download. In this case, it's best to download as a JPG file as we don't want any transparency now we've created our effect. If you select more than one image to download, it will save as a zip file, meaning you have to extract the files before uploading them to your site.
The last step is to head back to your Squarespace site and swap out the banner image. Click the 'edit' button and then 'background'. Then click 'replace' which will allow us to remove the current image and add a new image by uploading our recent creation. It's good practice to rename our uploaded image as well.
Once uploaded, you may need to adjust the focal point by dragging the circle in the center of the photo to the desired position. This makes sure that we have our hero in the main shot, especially if our masthead is not transparent as it may overlay our banner image. If this is still an issue, you can head back to Canva and move the image down so that the masthead doesn't overlay important aspects of our banner image. There may be some trial and error with the settings until you get what you want in terms of polished effect.
We can also in the banner image options adjust the opacity of the overlay to get the desired look. Other options to play with include the 'Colors' tab in the edit banner photo section to adjust the text and photo color options. This is your choice if you wish to change any of these options.
So there we have it, an initial example of how we can use Canva to create custom graphics for our Squarespace site.
Check in soon for the next chapter where we'll be going into more detail on frames for our Squarespace images using Canva.
Subscribe to the PixelHaze YouTube channel for more free courses and to stay up to date with the latest content.
NB: This post contains affiliate links. When you click on an affiliate link and make a purchase, we may earn a commission.
