[intro] Our Image Builder is a fantastic tool for creating Design images to display on your EKM online shop. You can use the Image Builder with any elements within your Theme which are set to display images only. [/intro]
- Using a Stock Image
- Uploading your own Image
- Adding Text
- Adding Boxes
- Using Layers
- Adding Icons
- Finishing Touches
- Exporting your Design Image
- Dos & Don’ts
1. To access the Image Builder, simply open any design element and click the link for the Image Builder:
2. When you open the Image Builder, you will see a list of options down the left-hand side of the screen and a blank canvas in the middle. To begin, you need to add an image to your canvas. To do this, the Insert icon:
3. On the submenu, click Image:
4. You’ll then be presented with the option of either searching for a royalty-free image on Unsplash or uploading your own image:
Using a Stock Image
If you haven’t had any professional images taken of your Products, then you can use royalty free stock images in your Design Image instead. To do this, click Insert and then the Image symbol and enter a keyword into the search bar for the kind of image you’re looking for in the search bar provided.
When you see an image listed within the results, click it to apply it to your canvas and resize it if necessary, using the dots on the corners to stretch the image diagonally. By using this method, you won’t accidentally distort the image by stretching it:
Uploading your own Image
If you have an image of your own you would like to add to your canvas, click the Insert symbol, and then select an image, before clicking the ‘Upload Your Own Image’ button:
Select the image from your computer and apply it to your canvas. Resize it if necessary, using the dots on the corners to stretch the image diagonally. By using this method, you won’t accidentally distort the image by stretching it.
If, when you have stretched it, the image appears blurry or pixelated, this is due to the original image being too small for the canvas. You need to find a bigger version or your image or use a different image entirely to resolve the issue. You can read more about image issues here (link to Product Image Requirements here).
To add text to your image, click the Insert Icon, and then click Text:
Double click the in the field provided to change the default ‘placeholder text’ into your own words, and highlight the text to change the size, font and colour, using the options on the top left of the screen.
You can use the four-pointed arrow symbol to move the text to where you want it positioned on your Design Image.
When you have added text to an image, sometimes you need to add a box behind the text in order to make the text stand out from the image and make it easier to read. To do this, click Insert and then select Box:
You can stretch the box to fit over your text, and use the menu in the top left of the screen to make adjustments to the box, such as changing the colour of the box and it’s outline, adjusting the opacity of the box and adjusting the radius - which is how curved the corners are. Keep making adjustments until the box is roughly in the area you want it to be.
As we adding text before our box, the box is currently sitting ‘on top’ of our text, instead of underneath. To amend this, we need to change the order of the layers of our image. To explain further, in the world of graphic design images are made in layers. Currently, the example image has three layers - the image, the text and the box. Changing the order of the layers allows you to select which you want closest to the front.
To do this, select the Layers symbol, and then you can drag and drop your layers into the correct order. The layer at the top of the list is the one that is at the front, and the layer at the bottom of the list is the base layer, the one behind all of the others:
You can also use icons - also known as ‘vector images’ - onto your canvas too. Icons are simplified symbols that can be used as part of your branding or to add detail to your design images. To add an icon, click Insert and then select the Icon symbol:
Once you’ve selected your icon, you can select the colour and opacity for it and change it’s size before moving it into position, as you did with the text layer.
Once you have added all of your layers, you just need to make some final adjustments to get everything positioned correctly. You can double-click different layers to make further changes to them, and use the four-pointed arrow symbol to drag the layers into the right place:
Exporting your Design Image
When you have finished your Design Image, simply download it to your computer by clicking the Export symbol:
You will then be able to find the image in the Download folder on your computer:
Dos & Don'ts
- Use opaque shapes behind the text to make the text clearer if the image has a lot of detail;
- Keep text minimal and to the point;
- Check for spelling mistakes;
- Ensure that you use the largest images possible when uploading your own;
- Look at other websites for inspiration.
- Use more than two kinds of font per image;
- Use fonts with an excessive amount of detail - this can make text difficult to read;
- Use watermarked images;
- Don’t forget that your design images are as important as your product images - these must be high quality to encourage potential customers to click deeper into your EKM online shop.
[contact] If you need our help with your EKM online shop, contact your Account Manager or Customer Support, who will be able to point you in the right direction. We're open from 8am-6pm weekdays and 9am-5.30pm on the weekends.[/contact]