We use cookies to provide you with a better service. Carry on browsing if you're happy with this. By using our website, you agree to the use of cookies.

https://www.haydnsymons.com/blog/how-to-improve-your-website-illustrations/ How To Improve Your Illustrations To Maximise Your Website English Unique illustrations can add a lot of appeal to your website, to your brand, and can also positively impact how well your website performs. Crisp and beautiful illustrations can make the difference from a user staying on your website, to... https://www.haydnsymons.com/blog/wp-content/uploads/2019/03/how-to-improve-your-website-illustrations.png 2019-03-24

How To Improve Your Illustrations To Maximise Your Website

Unique illustrations can add a lot of appeal to your website, to your brand, and can also positively impact how well your website performs. Crisp and beautiful illustrations can make the difference from a user staying on your website, to bouncing (not what we want!).

From it’s uniqueness which offers a personal touch with your delivery, 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, and with more and more high-end 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 crucial tips and techniques to improve your illustrations to maximise your website. From icons to creating ready made website illustrations, this blog post is here to help you create eye catching illustrations for your website.

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 them to be scalable 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.

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.

Outline Stroke In Illustrator

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.

Create Outlines In Illustrator

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.

Understanding The Colour Wheel & 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 in the primary colours).

When you look at the colour wheel, you are approached with 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.

Adobe Colour CC

You can select the sort of colours and combinations for your illustrations;

Analogous – colours that of the same chroma, but different hue.

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

Triad – colours which are based at thirds along the colour wheel.

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

Compound – colours that are selected 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.

But how can you improve your illustrations that make a positive impact on your website?

Probably the best tip is choosing colour schemes that work alongside your brand colours. For example, if you wanted to create a homepage banner and the brand or logo includes the colour blue, then a good idea would be to create illustrations that subtly use a combination of blue hues, but also with the complimentary colour of red.

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!).

To add extra appeal and uniqueness to your website illustrations, consider adding animations. This could be in the form of a repeated animated GIFFs, or more complex animations that require more thought and expertise from Premier Pro to After Effects.

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.

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

Timeline In Photoshop

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’. (Which can also be done when you ‘Save for Web’).

Save the animated GIFF through ‘Save for Web’, where you can make the file smaller, change the colours, and most importantly, change the ‘Looping Options’ at the bottom right of the box if you want the animation to loop continuously.

Create Amazing Website Illustrations!

I hope you have enjoyed this article on how to create amazing illustrations that can maximise your website.

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 Google + 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!

Have an illustration, design or creative project you want help with? Contact Haydn today!