How-to

How to: Create professional graphics for websites and social media

canva

Have you created your basic website layout, but are now looking to add some personality to your pages? Got a blog and want to create a quick infographic? Or maybe you’re looking to design an eye catching promotional image or poster for use on your homepage, Instagram feed, or Facebook account?

We recently heard about Canva, a slick online image tool you can use to design blog and social media graphics, Facebook covers, posters and a whole lot more. To demonstrate its features, we’ve made this step by step guide to creating a simple promotional graphic that can be incorporated into your Moonfruit site.

 

1

 

First, choose a design template. This dictates the size of the graphic and the pre-made layout options within the editor. Click ‘Social Media’ to create an 800x800px graphic.

 

2

 

You’ve now entered the editor. You’ll notice some pre-made designs on the left (a mixture of paid and free options), but we’re going to start from scratch.

 

3

 

To start with, we’ll add a photo to our graphic. Canva have a varied collection under ‘Search’ > ‘Photos’, but we’re going to upload our own. If you don’t have images of your own to use, why not try Unsplash, who offer free usage on a selection of beautiful, high quality photos. Once you’ve got an image ready, click ‘Uploads’ in the left toolbar and ‘Upload your own images’.

 

 

4

 

Once the file is uploaded to the editor, simply drag it onto your blank graphic to place it. Click and drag the corners to resize, crop the image, or even change transparency.

 

5&6

 

Our graphic’s pretty boring so far, right? Let’s add some shapes and text. Click ‘Search’ on the toolbar, then ‘Shapes’. There are loads to choose from here, but we’re selecting the simple rectangle.

 

7&8

 

You can edit your shape in exactly the same way as the image, including resizing, colour and transparency changes. We want to create a backdrop for some text, so our end result is a centred semi – translucent rectangle. Use the handy automatic grids to find the perfect position for your graphic elements.

 

9&10

 

To add text, we select the ‘Text’ toolbar option. Canva have some great text layouts you can click and drag onto your graphic, or choose a plain line of text if you prefer. After adding the text, you’ll have access to plenty of styling options including font face, size, colour, alignment and spacing.

 

11&12

 

Use lines to separate your text and other content. Go to ‘Search’ > ‘Lines’ for a huge selection of free options.

 

13&14

 

We’re creating an Easter sale promotion, so we want to add some themed icons to our graphic. Under ‘Search’ > ‘Icons’ you’ll find an extensive collection of simple icons for your site. Check out the Easter themed set – perfect for this time of year.

 

15&16

 

Use the ‘Copy’ button for replicating content – this works great for lines and shapes.

 

17

 

Once you’re done, you’ll have the option to download the file as an image or PDF. We select ‘Image’.

 

18

 

Now to bring it over to your Moonfruit site! Upload and embed the image into your site in the normal way (‘Insert’ > ‘Image’ > ‘Upload’). We’re going to add a link over our image, so users can click on a certain area of the graphic to go to our sale page. This is called an image map. Go to ‘Insert’ > ‘Widget library’ > ‘Image Tools’> ‘Image Map’ to add an image map to your page.

 

19

 

Place it over the area you want to link. From the floating Editor, go to the ‘Link tab’ > In this case choose the ‘Shop Page’ link option, and then the shop page you want to link to.

 

20

 

And there you have it! You’ve just made a smart graphic for your homepage. For more help, why not check out the Canva beginner tutorials. Or for some quick inspiration, have a peek at what others are creating here.

 

Ready to build a website or online shop? Get started here with our 14 day free trial.

 

 

Save

Save



More posts by this author


2 Responses to “How to: Create professional graphics for websites and social media”

Add a comment to arla

  • (will not be published)

More posts by this author