This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.
What this guide covers
- Getting started with image editing apps
- Image styles and optimised sizes
- Getting set up for multiple image sizes
- Create multiple image sizes
- Crop an image (Aspect ratio)
- Remove background for images
- Create photo collages
- Further support and guidance
1. Getting started with image editing apps
There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.
Where do I start?
- We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
- We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.
Do I need an account?
- Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
- Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version
Workflow: Create, edit and repeat
Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.
Â
2. Image styles (including image aspect ratios) and optimised sizesÂ
Before we jump in there are some default sizes and sizes to consider when preparing images ÂImage styles include image aspect ratios for displaying images on your intranet.
They can render within widgets or on pages.
|
Image style/ |
Visual reference |
Suggested size |
Scale |
|---|---|---|---|
|
1:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
2:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
4:3 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
5:7 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
16:9 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
| Â | Â | Â | Â |
Â
3. Getting set up to create multiple image sizes
To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets
Download file set to your local drive
Download image aspect ratio placeholder file set
Set up artboards
Â
4. Create multiple image sizes
Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.
Â5. Crop an image (Aspect ratio)
Â
6. Remove background from image
Â
7. Create photo collage
Â
8. Further guidance and support
Free web app tools
|
App |
Guidance and support |
| https://www.canva.com/en_gb/help/ |
Paid for and licenced Software
Â
This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.
What this guide covers
- Getting started with image editing apps
- Image styles and optimised sizes
- Getting set up for multiple image sizes
- Create multiple image sizes
- Crop an image (Aspect ratio)
- Remove background for images
- Create photo collages
- Further support and guidance
1. Getting started with image editing apps
There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.
Where do I start?
- We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
- We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.
Do I need an account?
- Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
- Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version
Workflow: Create, edit and repeat
Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.
2. Image styles (including image aspect ratios) and optimised sizes
Before we jump in there are some default sizes and sizes to consider when preparing images
Image styles include image aspect ratios for displaying images on your intranet.
They can render within widgets or on pages.
|
Image style/ |
Visual reference |
Suggested size |
Scale |
|---|---|---|---|
|
1:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
2:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
4:3 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
5:7 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
16:9 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
3. Getting set up to create multiple image sizes
To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets
Download file set to your local drive
Download image aspect ratio placeholder file set
Set up artboards
4. Create multiple image sizes
Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.
5. Crop an image (Aspect ratio)
6. Remove background from image
7. Create photo collage
8. Further guidance and support
Free web app tools
|
App |
Guidance and support |
| https://www.canva.com/en_gb/help/ |
Paid for and licenced Software
This guide provides a range of simple methods and tools to manage images before and after you upload them to your site.
What this guide covers
- Getting started with image editing apps
- Image styles and optimised sizes
- Getting set up for multiple image sizes
- Create multiple image sizes
- Crop an image (Aspect ratio)
- Remove background for images
- Create photo collages
- Further support and guidance
1. Getting started with image editing apps
There are a range of different free online and paid-for offline applications that can be used manage your images and achieve the same outcomes. In these tutorials, we will focus on a number of easy-to-use free web apps that can provide anyone with the tools to achieve your image goals in the quickest and easiest way.
Where do I start?
- We have reviewed all these apps and identified which ones are ideal for the appropriate outcome or result.
- We suggest starting with the ones you might need to use and then later exploring the others that may offer more complex and comprehensive features and functionality.
Do I need an account?
- Most of these apps do not require an account but to save or retain files or assets that you have created we recommend that you create one.
- Most of these apps are free but there are options to pay for more features or remove peripheral advertising that displays while using the apps. Regardless, you will still be able to achieve your image goals in the quickest and easiest way with the free version
Workflow: Create, edit and repeat
Just like other workstreams that you may deal with on a day-to-day basis, it helps to organise your files and assets for easy and regular use. This may also help when sharing or discussing with other teams or colleagues. Many of these web apps have the functionality to clearly label files, folders and assets that you may want to access regularly.
2. Image styles (including image aspect ratios) and optimised sizes
Before we jump in there are some default sizes and sizes to consider when preparing images
Image styles include image aspect ratios for displaying images on your intranet.
They can render within widgets or on pages.
|
Image style/ |
Visual reference |
Suggested size |
Scale |
|---|---|---|---|
|
1:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
2:1 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
4:3 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
5:7 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
|
16:9 |
|
Width: 960px |
This style can scale up or down in widgets or on a page |
3. Getting set up to create multiple image sizes
To speed up repetitive actions required for multiple image sizes, it is recommended that you create a set of predefined reusable artboards. These are based on the image aspect ratios that you site uses for it’s image display on pages and widgets
Download file set to your local drive
Download image aspect ratio placeholder file set
Set up artboards
4. Create multiple image sizes
Your image may display in a number of different ways on your site. Perhaps on a page or in a widget. In all these instances they may display with different image aspect ratios. So how do you optimise your images for multiple sizes. Simple.
5. Crop an image (Aspect ratio)
6. Remove background from image
7. Create photo collage
8. Further guidance and support
Free web app tools
|
App |
Guidance and support |
| https://www.canva.com/en_gb/help/ |
Paid for and licenced Software