Editing images for your website
You may be required to create an image for your website, this could be for a header, a key message or even a news article. We have provided Photoshop templates as well as a basic guide on how to use the templates and edit images for the web.
Image sizes and templates
Below you can find our image size guide and links to our Photoshop templates, they may include helpful information or be set at the appropriate size for the chosen image content type. To use a template just select and download it to your computer. You can open and use the template within Photoshop or by using the free online editing tool photopea.com
Image editing
Below is a basic guide on how to edit imagery for use with our content management system. The guide covers basic techniques such as loading, scaling an image and preparing it for use on the web.
Step 1. Go to photopea.com (or if available, you can use Photoshop), using the top navigation bar select: File / Open.. and select your template.
Step 2. Some templates provide guides on where to place the focus point of your image.
Step 3. You can turn the guides on or off by selecting/deselecting them from within in the layer’s menu to the right of the canvas.
Step 4. You can copy/paste or drag your image onto the canvas. If you wish to use the guides the image must be placed below the guide layers within the layer panel. You can do this by selecting the image layer and dragging it underneath the guide layers.
Step 5. To move your image, you can select the move tool which is located at the top of the toolbar to the left of the canvas. If your image is too big you can scale it using the Transformation Scale tool, using the top navigation bar select: Edit / Transform / Scale. The handles allow you to adjust your image.
If you would like to find out more about Photopea’s other tools and techniques there are many tutorials available on youtube.
Step 6. When you are satisfied with your image you can save it to your computer, using the top navigation bar select: File / Export as / JPG.
Step 7. By selecting the ‘Export as’ option it allows you to control the file size of the image. By changing the Quality setting to 30% (Our preferred size) the smaller file size will load faster on a webpage. Sometimes 30% may be too low and the image can look pixelated, you may need to increase the Quality setting for a better result.
Step 8. Once saved, you can upload and use your image in your chosen T4 component. You should preview your webpage and check your design in various browsers (eg Firefox, Edge, Chrome) as well as both mobile, tablet and desktop displays.
