[intro] Our Image Builder is a fantastic tool for creating Design Images to display on your Obodo shop. You can use the Image Builder with any elements within your Theme which are set to display images only.  [/intro]

[summary]

[/summary]

1. From the Dashboard, click the Shop tab:

2. On the Shop tab, ensure that the Edit Design button is turn on, in the top right-hand corner:

3. You can use the Image Builder with any element containing a Design Image throughout your Theme. Simply locate the Image you would like to replace and click Edit Image, and then Edit:

4. In the Edit Element window, click Content:

5. Now click the green Edit In Image Builder button on the right-hand side of the window:

6. When you open the Image Builder, you will see a list of options down the left-hand side of the screen. To begin, you need to add an image to your canvas. To do this, the Insert icon:

7. On the submenu, click Image:

8. 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

9. 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:

10. When you see an image listed within the results, click it to apply it to your canvas and resize it if necessary. When it comes to resizing your image, you can choose to either stretch the image to size or distort it so it will fit the canvas. Click the image to edit it, and you'll see three symbols below the bottom middle of the image:

11. The circular arrow is used to change the orientation of the image. Click the circular arrow symbol and then use the dots around the edge of the image to rotate it into the correct position:

12. When you have rotated the image, click the circular arrow again to remove the green line below it (turning it off) and then use the dots around the image to resize it to fit your canvas:

[tips] If you cannot see the entire banner canvas within your browser window, press the use the keys on your PC keyboard to zoom in and out. By pressing CTRL and the + key, you can zoom in incrementally, and CTRL and - will allow you to zoom out again. [/tips]

Uploading your own Image

13. If you have an image of your own you would like to add to your canvas, click the Insert symbol, select Image and then click the button to upload an image from your computer:

As before, resize it if necessary, using the dots on the corners to stretch and rotate the image until it covers your canvas.

Adding Text

15. To add text to your image, click the Insert Icon, and then click Text:

16. 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 and using the options on the top left of the screen:

17. You can change the colour here by clicking the square, and add a specific colour hex code:

You can then use the four-pointed arrow symbol to move the text to where you want it positioned on your Design Image.

Adding Boxes

18. 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:

19. Your cursor will turn into a cross shape. hold your finger down and create your 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 the 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.

Using Layers

20. 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:

Adding Icons

21. 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:

22. Once you’ve selected your icon, you can select the colour and opacity for it and change its size before moving it into position, as you did with the text layer:

Finishing Touches

23. 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

24. When you have finished your Design Image, simply download it to your computer by clicking Save Image in the bottom left-hand corner of the screen:

It's strongly recommended that you the 'Save To Shop' option is only used to test how the image will appear on your shop. This is because in it's current state with different layers of images, icons, boxes, text and anything else you have added to your image, it will have a large file size and as a result, can make your Obodo shop take a long time to load. If you are happy with the image, download it to your computer and then upload it to the relevant element on your Obodo shop. You will then be able to find the image in the Download folder on your computer.

[tips] When you have downloaded the image to your computer, we recommend that you optimise the image by uploading it to Tiny Png. This is a free service, and when you upload your image it will remove any superfluous data from the image file, ensuring that you lose no detail or resolution. When you have the image has been processed by Tiny Png, upload it back onto your Obodo shop. Optimising your images ensures that your Obodo shop will load quickly and give customers a better experience. [/tips]

Dos & Don'ts

Dos

  • 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.

Don’ts

  • 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 Obodo shop.

[more]

[/more]

[contact]If you need our help with your Obodo shop, contact our Customer Support Team, 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. If you have a non-account specific question ask the Obodo Team, join us in the Obodo Community on Facebook. [/contact]