How To Improve Your Illustrations To Maximise Your Website

Do you want to learn how to improve your illustrations for your website?

Unique illustrations can add a lot of appeal to your website.

Not only can it positively affect your website, it can affect your brand, marketing and sales. Crisp and beautiful illustrations can make a user remain on your website for longer.

High-quality illustrations for your website is highly recommended.

In today’s saturated world, illustrations offer so much more than the over-used, unpersonalised stock photography. With more websites catching onto this notion, how can you stay up-to-date with your illustrations, and improve them so they perform better for you and your website?

Within this article you will discover tips on how to improve your illustrations to maximise your website. Create eye catching illustrations for your website – from icons, vector graphics, to creating ready made website illustrations.

I’m here to help you improve and create high quality illustrations to maximise your website.

Convert Your Digital Icons Into SVG Format

One of the most important aspects of improving your illustrations, and in particular digital icons, is turning them into .SVG format.

Scalable Vector Graphics, is a XML-based vector image that is built for the web and digital use.

Formatting your icons so it’s .SVG format will allow your graphics to scale to any size. Smaller, larger, 2 pixels bigger: anything goes. In contrast to SVG files, if you were to scale a PNG or JPEG image, you will lose quality as it’s not built for scaling. These images are pixel based, not vector.

As users arrive onto your website from different devices, from 320, 768 to 1440 screens (and everything in-between), it’s crucial you create website icons that is suitable for everyone, as you want to present clean, quality and stunning illustrations on any size.

When you’re working with your web developer to create a stunning website design (or if you understand web development yourself), they can use your SVG files and make it work easily on your website, regardless of the size you want it.

Avoid These Common Traps

There’s some common traps that you want to avoid when converting your icons to SVG from Adobe Illustrator (I’ve chosen AI as this is the program you’re most likely going to be creating your digital icons with);

If you have lines and strokes within your vector, convert them to outlines by clicking Object – Path – Outline Stroke.

Do the same with type too (if you have type included within your vector file), by converting your text to outlines by clicking Type – Create Outlines.

Use Pathfinder to reduce the file size of your SVG’s. For example, you can subtract a shape that overlaps another shape, instead of exporting 2 shapes.

When exporting, work with your web developer by choosing the correct file format for you (by clicking File, Export in AI). You can choose different styling, how many decimals per illustration you want, and can even preview the code or how it looks on website before exporting.

This doesn’t just apply to SVG files either, as it’s crucial that you use high quality files for your website. If you have an image based illustration, convert the illustration to JPG, or if the illustration has text included, then a PNG is the way to go.

Choose Your Colour Wisely

One of the best ways of improving your illustrations for your website is the colour that you use.

Colour is the first thing that users react to when first looking at an illustration – it communicates atmosphere, tone and impact. If you can create an illustration for your website that uses an epic colour scheme, then you will be on your way to success.

The first point of call is looking and understanding the colour wheel.

Artists and designers generally work from the primary colours of red, yellow and blue, which in turn, creates secondary colours – like orange, green or violet for example (even though some argue that green should be included as a primary colour).

Understanding The Colour Wheel

The colour wheel consists of 3 subjects;

Chroma – this is the strength of a colour in relation to white. The centre of the colour wheel is neutral grey, and the outside of the colour wheel increases in chroma (or how much a colour is desaturated or saturated).

Hue – this is where it appears on the edge of the colour wheel. What is the dominant colour that you are looking at (green, yellow, blue)?

Value or lightness – how dark or light the colour is.

From my experience, chroma, or how saturated the colour, is the most important thing to focus on when selecting colour for your illustrations. If you use too many saturated colours within your colour palette, an illustration can look too bright and garish. However, mixing between desaturated and saturated colours will keep an illustration balanced and add interest.

When you’re creating an illustration for your website, it’s crucial that you have the colour wheel at the back of your mind, and balance an image so it communicates the perfect message to your users.

Having a good understanding of the colour wheel will help your illustrations, design work and website hit that new level. It can help in all parts of your image creation by choosing colour schemes that work perfectly together.

Adobe Colour CC (previously called Kuler), from the creators at Adobe, is one of my favourite digital colour tools that helps me choose colour wisely. I love the application and use it daily to help me.

Selecting Your Colour Gamut

You can select lots of different colour combinations for your illustrations;

Analogous colours – a limited colour palette compromising of three or four colours that sit next to each other in the colour wheel.

Monochromatic colours – colours that are of the same hue, but differing in chroma.

Triad colours – shaped as a triangle around the colour wheel.

Complementary colours – colours that are opposite a particular colour that are of the same chroma (orange / green for example).

Compound – colours from a gamut (or limited colour palette).

Shades – colours which are of the same chroma and hue, but of different shades or lightness.

This tool allows you to selectively choose colours that work in your illustration.

How To Improve Your Illustrations On Your Website

To make successful illustrations, they must work alongside your brand colours. For example, if your brand includes blue, then your illustrations should do too. It depends what on the brand guidelines you’re working towards of course. You can subtly use a combination of blue hues, but also with complimentary colours too.

Or another example, if the brand or logo uses blue throughout, creating a gamut of colours (a limited colour palette), which uses colours like blue, green and yellow is a good way to go.

Thinking about the colours you use will improve the quality of your illustrations ten-fold.

Think About Animation

Have you ever noticed those quirky and fun animated illustrations on particular websites?

I’m not sure about you, but I can watch those animations all day (which is where you can take full advantage of!).

Consider adding animations to add extra appeal to your website illustrations. This could be repeated animated GIFFs, or more complex animations (made in Premier Pro to After Effects for example).

If you want to produce something quick and easy, and something which you can get your head around, a Photoshop animated GIFF is the way to go.

Creating A Photoshop Giff

To produce a Photoshop animated GIFF;

– Create or open your Photoshop file.

– Make sure most (or all) of your layers are separate from one another, so you can animate them individually.

– View the Timeline window by clicking Window, Timeline

– Click ‘Create Video Timeline’ in the centre of the box

Here you can start to build your animation from your Photoshop layers, increase the duration of each layer, and bring in new layers into the mix that you want to animate.

If you want your animated GIFF to be forever looping, don’t forget to click the drop down at the bottom left corner of the box. Click this and select ‘Forever’. (Set this setting when you ‘Save for Web’).

Save your animated GIFFs through ‘Save for Web’. This allows you to reduce the file size, change the colours, and change the ‘Looping Options’.

Delivering The Same Experience For Mobile & Desktop Users

There’s nothing worse than spending a good amount of time and money on quality illustrations, for them not to be responsive. You want to make your illustrations work perfectly for mobile, tablet and desktop users.

Ever visited a website where the images are too big for your device? or the text runs off the page?, forcing you to scroll horizontally?

Viewing websites on mobiles is popular, so you need to consider different devices when coding your website illustrations. They need to be responsive – shrinking down for mobile users and enlarging for desktop and tablet users.

Make sure you keep up with the pace or you’ll be left behind. You want all of your users to have the same experience when they are on your website. I recommend discussing this with your web developer if you’re not familiar with coding and creating responsive illustrations.

The Next Steps

Now you have a good understanding of how to improve your illustrations, (and you know the importance of it), whats the next step?

First of all, I recommend any image you upload to your website are good quality but low in file size. If your images are large file sizes, your website’s SEO is negatively affected.

Always use the ‘Save For Web & Devices’ setting, which is found on most Adobe Export settings. I alluded to this whilst saving your GIFF files earlier, but this is also recommended for your PNG and JPG files too. Use quality 70%, as your images don’t need to be 100% on the web (screenshot below).

After this, drag your images into TinyPNG, which reduces your images even more (without loss of quality). This is a great image compression website, which reduces the number of colours in an image.

This can reduce your file size, but isn’t visible to the naked eye. I always use TinyPNG to compress my images before uploading to my website.

Lastly, you’ll want to name your files correctly. This will improve your SEO rankings for your images. Admittedly Google robots only scan text and is the main component for SEO, but it’s good to have accurate keywords in your images.

For instance, instead of naming a business card design image ‘picture.jpg’, name it ‘business-card-design.jpg’ instead. This is a much stronger file name.

To sum up – the main components you need to think about is to keep your file size low, keep your image quality high, and name it correctly.

Create Amazing Website Illustrations!

I hope you have enjoyed this article on how to improve your illustrations!

From your use of colour, saving images to SVG, to including mesmerising animations into the mix, there would be no stopping you in creating amazing website illustrations!

If you would like to find out more about myself and my work, do head on over to my illustration portfolio, or give me a follow on the social media linkes below. Many thanks!

Many thanks for listening and visiting my news page today. You can follow what I’m up to on my Twitter, Facebook or Instagram pages, I’ll really appreciate it if you do, and don’t be afraid to say hi to me! Many thanks again, and have a great day!