Branding & Graphic Design
Photography
Startup Website
Wordpress
What we will cover
The key to a professional looking ecommerce category page is product image consistency, at Vu, our editing suite of choice is Adobe, as we use a range of tools consistent across the industry including Photoshop, but Photoshop isn’t an easy learning curve or an affordable option.
Enter Canva, not as widely known but a simple, free, online tool. Then the next questions is “How can I use Canva for images on my website?”, so here we are lets go…
Creating consistency with Canva images on your website
The best ecommerce stores will display products that are the same size and shape as each other regardless of whether you are viewing a zoomed-in image or a thumbnail.
The background will be the same colour each time (normally white) and the products will sit inside identically shaped and sized frames. In many cases, the frame will be invisible for an ultra clean, simple aesthetic.
There’s loads to it too including editing tools and social media templates that get updated every time the platforms decide to tweak their designs but first we will start at the beginning.
Introducing Canva
Canva is a browser-based, cloud-hosted graphic design app that has made it easy to create slick looking designs in just a few clicks.
There is nothing to download and if you have a Google account you won’t even have to go through the hassle of filling in your name and email address to get started.
Canva is a freemium software, meaning that the basic package is totally free to use but that you can pay to upgrade to access additional features.
With the exception of background transparency (covered later), everything you could possibly need to create professional standard product displays is included in the free version.
Getting started: sizing your canvas, uploading media and using frames
Regardless of what e-commerce platform you use (Woocommerce, Shopify, Magento, etc.) you will need to upload product images that are of a decent size. This will enable the customer to zoom into the product without it becoming pixelated.
With Canva, you can set the size of the canvas accordingly by clicking ‘Create a Design’ and then the ‘Custom Size’ button. If you don’t know the recommended size, setting the canvas to 1000px by 1000px will be fine in most cases.
Your square canvas should then pop up together with a toolbar on the left. See the ‘Uploads’ button? Here is where you can upload your products (Tip: use professional background paper and manual camera settings to ensure your product photos are consistent in themselves).
Once you’ve uploaded your products, click the ‘Elements’ button on the left-hand menu and select ‘Frames’ from the buttons that appear.
Your menu window will display several different shaped frames to choose from. In most cases, you will want to choose a square frame but feel free to experiment. Click the frame and it will appear within your canvas.
Resizing and cropping
Next, go back to ‘Uploads’ and simply drag a product into the frame you have just placed. Ideally, the product will completely fill the frame without having any parts missing. In most cases, you will need to crop the image to achieve this.
To do this, click the frame and select ‘Crop’ from the toolbar above. The opaque area around the frame will become semi-transparent so you can see the full product image you uploaded. Using the circular corner handles you can now resize the product image to fit the frame perfectly. You can also drag the image around to reposition it. Once you’re happy, click ‘Done’.
Next, use the circular corner handles to resize the entire frame within the canvas. As you do this, you will see a small grey box pop up near your cursor.
It is usually best to leave only a small border so you could opt for 900px by 900px. Drag the frame around to centre it (you will see a purple cross appear when you are in the exact centre).
Adding colour to the canvas
Next, choose a colour for your canvas. The colour you choose should tie in with the overall design of your image gallery page (the default colour is white).
Click to highlight the canvas (not the frame!) and then select the rainbow button on the toolbar above. Click a coloured tile to apply that colour to your canvas. If the colour you want is not in the default palette, click the ‘+’ button to add a new colour. You can use the colour selector or type in the six digit ‘hex’ number for the colour you want.
Many e-commerce store owners prefer an invisible canvas and there are two ways to achieve this using Canva.
First, you can simply pay to upgrade to Canva Pro and unlock the transparent background feature. Second, you can match the frame colour to that of your gallery page.
Finally, click ‘Download’ to save your product image to your computer. It is now ready to upload to your ecommerce store.
So there we have it, hopefully you have a handle on how you can start to use Canva images on your website
We hope you learned a lot from this guide and can finally be proud of the photos in your image or product galleries.
We’ve plenty of other free photography and editing tips in our blog. If you need some hands-on help, check out our Photography Services page.
Do you know anyone who may be interested in this project?
Click to share:
