Using vector illustrations in designs to deliver your message
Do you ever wish you didn’t use stock photography so much? Recently I’ve found myself trawling through pages of stock images from sites such as Shutterstock, iStock and Fotolia, usually looking for a well-presented young professional smiling to camera. These sites contain some good photography but I’m always worried that the stock approach lacks creativity and uniqueness.
The use of simple vector illustrations can come to your rescue in this situation. Like the ones above they are eye-catching, can be doctored to incorporate your client’s colours and non-specific in terms of race or age. As they are not real people they’re less likely to receive criticisms from your client such as “too smug”, “too smiley” or too whatever. If you client doesn’t like the colour of hair it can easily be changed.
Increasingly, you see the use of a cartoon character, either human or animal, being used to freshen up a website. I would also consider them for HTML emails and direct marketing. Colourful, simple and friendly is the way to go.
These characters can be made easily in Adobe Illustrator or Photoshop. You may find it easier to do an image search and trace over. Or you can use Illustrator’s Live Trace tool.
Yeah, I see what you mean…cartoons can certainly brighten things up on drab web sites, where photography wouldn’t do the trick.
I noticed that SitePal are using cartoon-style characters for their services, and I can remember that the whole concept of it looked quite fresh and unique. So, I can see where such characters and use of vector illustrations do have their place on even professional websites.
Okay, those two are darling up there! How long did it take you?
Recently, I’ve found myself getting so much more into illustrator simply because it saves me on the overhead and I’ve managed to work more efficiently there, anyhow. Something about the way Photoshop selects items when you click on them drives me nuts.
Web Design in Miamis last blog post..Miami Web Design
You’re so right. It’s a great way to make a boring page so much more fun. Normal photography can really make a page wonderful but characters like these two makes it so much more fun to read a page with soooo much text. Illustrator saves you so much time. But it does take some practice to make it look like you actually know what you’re doing.
I’ve never been a fan of Photoshop for anything but for editing family pictures.
Yeap to true, and if its a vector then you can resize the image as big as you want
. I think if you go into photoshop with a camera image or a image from a stock photo site and apply a filter to it then you can achieve the same effect as the picture in the post.
PEACE
Yeah, photography can be a real pain in the arse. Vector Illustrations like this can be better and simple. After all the goal is to make the page presentable
Thank you for these wonderful comments.
@Andrew, yes, and the MailChimp site has a similar vector character. It can look professional.
@Web Design Miami, thanks they didn’t take me long to do as I used Illustrator’s Live Trace tool to trace some images I found and then played around with them until they looked original in their own right. In Photoshop, with the Move Tool (V) selected, uncheck Auto-Select in the Tools bar, and then it won’t select items when you click on them (but will if you hold down cmd/ctrl).
@Lisek, I’m a fan of Illustrator and Photoshop. These could be created in Photoshop as well with Shape Layers.
@Photoshop Makeovers, agreed, it could be done with posterise in Photoshop but you’d have to change the colours to suit and it may look a bit different by the time you’ve done it that way.
@lanre, yes, one must consider illustrations as well as photography.
Hey thanks, great tip! I also am always wasting time looking around for stock photos, this is a great alternative to keep in mind.
Hey, I love simple cartoons as you wrote they can be very effective for marketing. BTW: On the Fotolia you could also buy cartoons.
Cartoons are the most effect marketing out there. There is no one out there that won’t get attracted by cartoons because everybody when he was young he used to watch cartoons. For example look at the shoemoney blog, it is has his log as a cartoon or the university kid the design of his header is a cartoon.
Sarah Hayess last blog post..Mayra Veronica Rang the NASDAQ Stock Market Closing Bell!
hey really nice post.
i myself do illustrations, it’s a great fun doing that.
It’s a most simplest and cute way of expressing emotions.
especially in advertisement.
I have worked on some vector illustrations for a soft fruit website I worked on. It worked quite well and allowed me to be quite daring in the design of the site. The problems that I did find through were that there was some confusion as some of the different graphical images didn’t miox as well as I would have liked.
http://www.goodnaturedfruit.co.uk
Media Trainings last blog post..Does John McCain have a chance?
Where would you recommend me to look for this kind of use of illustration since I’m not a professional.I want to make some changes on my site.
I completely agree about moving away from stock photography and trying something more creative like vector illustrations. I think vector illustrations can grab visitors, new and old, attention more than stock. After awhile I feel stock photos, even good ones, blend into the background and don’t catch the eye of the visitor anymore. Bright vibrant colors in a vector illustration will cause the visitor to stop and stare more, in my opinion.
Webkinz Worlds last blog post..Curio Shop Rare Item for September 5th, 2008
@NJ Web Design, thanks for the comment. It’s a great alternative to stock photography.
What didn’t mix well?
@Niedermaier, yes I use Fotolia as well.
@Sarah Hayes, there’s something about the flat colours and simplicity.
@MOin, you’re right. It’s a direct way to convey emotions and works well in ads.
@Media Training, I’ve looked at your Good Natured Fruit website and it looks excellent to me. A really, fresh, simple eye-catching website!
@A dust collecting fool, iStock, Fotolia and Shutterstock sell vector images. There’s loads of very good free vector sites as well.
@Webkinz World, thank you, I couldn’t have put it better myself. I agree vector illustrations tend to stick out more than photography.
I’d like to say and big, big “thank you” to everybody who’s taken time to comment on this post. Really helpful and inspiring. I apologise for the tardiness of my replies, which is down to a spate of being busy and lazy.
Great! I loved the tip! I really think it´s much better than pics!
Thanks, Very interesting read, This is one of very few blogs that was worth the read, a great insight
Your website is very nicely designed, I have already bookmarked it.
Great tip! I think vector illustrations (never knew the real name) are cute and lively. I’m going to try a few and I’m going to bookmark this site. Good stuff and tips here.
google chromes last blog post..Chrome Browser Statistics Week 1
lovely post and comments. I really love reading it because i, myself, do illustrations as well and it’s fun.
It is very interesting to know that one can make their own graphics using photoshop. Do you know if the same applies for using GIMP. Have been searching around for making such pictures/cartoons using GIMP but can’t seem to find any.
Hello Diego, Totally Home, google chrome and Parker, and thank you for the comments. It seems that people are really interested in vector illustrations are that they are popular.
Dominique, I really don’t know if these can be made in GIMP but I suspect they can be. Vector illustrations are more of an Illustrator thing than a Photoshop thing (although they can be produced in both) and for this reason you may also be able to create them in Xara Xtreme which is an open source application similar to Illustrator. I hope this helps.
Thanks for such a great tip. Vector Images are definitely not only cute but also more catchy. They show creativity and freshness of the idea. Great tip to go…
The problem with illustrations is that they don’t allow for that human connection that photographs provide. But I do agree that illustrations can take a website from looking like “just another corporate website” to “a website that should be visited often”.
It would be a great idea to put together a list of online companies that will do illustrations for websites.
Food for thought
I too use illustrations in place of words, but I tend to use it for humorous connotations rather than helpful tips on my sites. Thanks for the article, I’ll consider doing even more illustrations to get the point across.
Nice tips. I did vectors in math but this seems good too!
Thank you, SEO Next, cute and catchey, creative and fresh they are!
xok, you’re right, sometimes a photograph of a real person just can’t be beaten. There are times when the vector illustrations will work and times when they won’t. Good idea about the list of companies who’ll do vector illustrations for websites – add my name to the top of that list!
Thanks, Hobo.
Hi Jeff, they’re good for humour. Good for breaking up the text of an otherwise boring webpage. Of course, always remember your alt and title tags for your illustrations so that the big G doesn’t ignore the benefit of them.
Hello Great Wall of China, it was Pierre Bézier of Renault in the sixties who used vectors to describe the parametric curves in car manufacture, his work was then adapted into the graphics programs that are widely used today. Not a lot of people know that!
This definitely gives a site a more personable look and some personality. Sure beats the sterile sites that cover the web.
That’s really great read for me, always enjoying your posts.
Yes, Dallas Web Design, I think it adds “character”.
I’m glad you enjoy the posts, Promotional Products, I hope you have subscribed!
Nowadays I am seeing avatars and vector mascots on most of the blogs/forums etc…so I have also decided to make one for me. the tool you mentioned for illustrator is cool, btw do you know of any online vector character/mascot generator?…like we have some for avatars out there…w8ing for your reply….
Nasirjumanis last blog post..Grab Kaspersky Internet Security 2009 Key For 100 Days!
Wow! This vector illustration was the first thing that grabbed my attention on this site. Whyat a great testiment to the fact that a simple solution can solve a big problem. Thanks!
Cosmetic Contactss last blog post..Cosmetic Contacts
The cartoon characters represents an inspired way of visual communication as they are friendly & expressive.
As an illustrator I was really really shocked by your article. To suggest tracing over artwork is in breach of copyright and could get people in to serious trouble.
I recommend using vector illustrations but commission artists to create them or you will litter the media with shoddy artwork. This is already happening and it’s depressing to see when there are millions of really talented illustrators around.
Nasirjumani, good question about if there is an avatar generator that outputs vector, it’s a good idea. I’m afraid I don’t know of one that exists.
Cosmetic Contacts, they do grab your attention, you’re right!
Respiro Media, they’re a good option to express emotion.
Fritha, sorry to have shocked you. If what I do is in breach of copyright I would be happy to argue my point in court. It depends entirely on what you’re tracing and how you trace it. Most of what I do I doubt the original artist would even recognise their own work. I won’t be wasting my money to commission a illustrator when I can do the same thing easily myself. The millions of talented illustrators around you refer to will be able to make money if they really are talented. But if they are always looking to make money from claiming breach of copyright it suggests that they really aren’t that talented in the first place. Thanks for the comment.
Totally agree with this post, we recently had some illustrations done by a cartoonist for a hosting website, the impact was unbelievable. The client was very impressed and it fit in to the web design brilliant…had alot of good feedback from the clients – clients about the feel of the site. Mainly down to the personality that the illustrations give.
Gettyimages and Jupiterimages provide a nice selection of illustrations too. By the way your Creative Suite tutorials are very useful for those wanting to learn design less and create graphic images faster.
I’ve been trying to get my adult kids to teach me to use photo shop adequately for some time now. They are both avid artists and are great with designs. I love designs, but just do not have the skills yet to put mine to good use.
Good one! Nice to know the use of simple vector illustrations.It’s really useful, whenver client used to change the colour of the hair or hair style or any changes.And also if the site seems to look very bored,using vector illusttrations, they can change.Thanks for explaining about vector illustrations.
Great article, totally true. I have been using vector clipart in .psds lately, no reason to prejudice.
[...] on Sun 28-12-2008 The Nike Burger by Olle Hemmendorff Saved by itachikitten on Tue 23-12-2008 Using vector illustrations in designs to deliver your message Saved by hifiway on Fri 19-12-2008 JavaFX and Adobe Illustrator Saved by ange1e on Tue 09-12-2008 [...]
Hello again, Web Design Liverpool, there’s something about cartoons, they’re so eye-catching. And appear to work well with certain websites.
Internet Entrepreneur, yes I often purchase vector files from stock photo agencies (there’s a lot of free stuff as well). I’m glad you find the Creative Suite tutorials helpful. More to come!
Paul, thanks, don’t forget to import vectors into Photoshop as Vector Smart Objects. They don’t lose quality even if they’re scaled up and down a million times and you can bulk edit them in Illustrator!
thanks, don’t forget to import vectors into Photoshop as Vector Smart Objects. They don’t lose quality even if they’re scaled up and down a million times and you can bulk edit them in Illustrator!
When we get orders for promotional items, we always suggest that the client uses a nice vector illustration.
We find that there is a better impact when an illustration is used on items and printed products.
most clients want images of real people
Hello Hellow, yes good point about Smart Objects in Photoshop layers and remember when you’ve copied them and then change one all the copies change – can be very handy when designing webpage mock-ups.
Yes, Promotional Products, simple illustrations are great for printed promotional material.
Hi, web, this is an alternative and is not always the right solution.
When we get orders for promotional items, we always suggest that the client uses a nice vector illustration.
It certainly helps to use vector sometimes!
Great tip! Yes, cartoons are much better than photographs. Using vector sometimes is certainly helpful sometimes.
I know what you mean, Aditya, although I would say sometimes vector is best, sometimes bitmaps!
I agree Rob Cubbon. Sometimes vector is best but then cartoons bitmaps are good too.
Another great article, keep up the good work.
Just to say that your outbound links make the user leave your site,,,,,,,,I would definately change that to open a new target window in html…………Just a thought Rob.
Hello Christopher, having a new window open up stops your site validating and is generally considered to be unhelpful to the user as people prefer to make their own minds up about when to leave a site and (according to research) the back button on browsers is one of the most regularly used. So, I used to think like that but now I reckon that if people want to leave my site they will and they’ll come back if I create quality content.