Malinic is a leading London graphic designer and illustrator. In his latest project, The West End Show, he explores the magical and bustling part of the capital in a series of elaborately illustrated poster designs, bringing together classic old century design with the dazzling neon future of the 22nd century.

Through a combination of bold typography, illustration and poetry, each piece tells the delicate story of classic design over-shadowed by the limitless offerings of this exciting city.

Malinic interprets his love for London by exploring the true characters of the real life musical that is London’s West End. ‘The West End Show’ offers an inspiring touch of nostalgia for the frenetic capital resident.

The show is now open to public at Nancy Victor Gallery, London, admission is free until March 2. Check out the promo video and the posters after the jump…

The show is now open to public at Nancy Victor Gallery, London, admission free until March 2. Limited edition prints and merchandise are now sold at the gallery, online store fully opens on March 3.

Please share your comments on Malinic’s work below…

Never Ending WordPress Business Bundle – only $14!

Today I want to dig into some key ways that this tool has been put to work so we can draw new ideas to inspire and challenge the designs we produce.

Let’s begin someplace I seldom do, with a basic definition: Illustrated: 1) To make clear; 2) To make clear by giving or by serving as an example or instance; 3) To provide with visual features intended to explain or decorate.

It seems that in the real world of web design, illustration tends to perform both functions at one time. It beautifies while it clarifies. And if it is only doing one of these you might need to ask yourself why. Perhaps by putting illustration to work fulfilling both roles is the way to truly leverage the design element for all it is worth.

This is, of course, not to say that a design can’t be successful if it only handles one or the other; certainly it can. But in order to get the most out of our work I find that challenging our thinking is always helpful. As usual, let’s dig into some groupings of samples to see what can be done with this visual device. Along the way, consider if each approach provides clarity or decoration, or both.

Thematic illustration

The first approach to illustration that I want to cover here is the use of this style to produce an overall thematic approach. In this situation illustrations are put to work to establish an overall theme. Are we climbing mountains, visiting a space station or exploring a company’s office?

While this approach doesn’t have to take us to a location, it quite often does. In other situations the style simply establishes an overall motif that the site follows.

The reason we are interested in it here though is that it is being used to drive the overall design in a radical way. The illustration is not some small supporting element. Instead, it is the most prominent design element and control the entire layout.

Get my boss to North Cape

In this sample the approach could not be clearer. The design of the site clearly echoes its most basic purpose. The illustration provides a visual reference to what the individual will do. And in terms of defining the illustration, the artwork provides decoration and beauty to the page.

In this case the theme firmly establishes the site’s purpose and helps the user buy in on the concept.

Launch Kit

A thematic approach doesn’t have to be so blunt in a way. Sometimes it can be a more natural part of a more typically structured site. In this case, the site is slightly unique in its layout, and the theme doesn’t force some over-the-top interface based on rocket ships.

Instead, the theme is woven into the design in such a way that it communicates its decorative touches without interfering with the content. Here the illustration serves to decorate, but not clarify so much. This is not surprising at all and of course demonstrates that there is no formula to follow.

Atelier Anonyme Design

In other situations such as this one, the thematic illustration literally IS the site. It is not a supporting element, but rather completely becomes the design itself.

Here the use of illustration clearly plays a decorate role. But I would argue that it also provides a great level of clarity to the visitor. This is a web site for a design agency. The design and nature of this site communicates a great deal to it’s visitors. As such, I am certain it serves as a massive filter to their client base. You will either be drawn in and love their playful and creative approach, or, you will be totally turned off by it. So to this point, I think it provides a great deal of clarity about the agency and their mentality.

Allure Graphic Design

On this site the use of illustration plays a clear thematic approach as well. Though the site follows some standard layout formulas, the entire design is wrapped in a thematic layout. These elements drive not only the design of the site, but they merge with the main logo and copy used on the site. The theme is immersive and drives the entire message the site presents.

Additional thematic samples

Here are some additional sites that make use of thematic illustrations to establish an environment or theme for a site.

Chipmunk

Drift Boys

Iutopi

Chandu4u

Mascots

How could I possible cover the idea of using illustrations without reviewing one of the most obvious: mascots? With this visual element the designers tend to personify the site, its product, or purpose with a character. Not only does the implementation of such an element vary, but the power and reasoning behind it does as well.

inkFinder

In this design the illustrated mascot plays a rather clear role. Clear in that it echos the name of the product. It not only provides some life for the design, but it puts a face to it. In this way the audience has something a bit more unique to file away in their brain. Hopefully, the mascot helps to make a more memorable and unique experience that will help the product to stand out from the heard.

Perhaps that is the most powerful purpose behind a mascot, to help something stand out. The great thing about an illustrated mascot like this is that it can be totally unique and specific to this product. Assuming it was custom made for this design it should be the only place this exact illustration exists.

The Evnt

Ironically we find here another illustrated octopus-like mascot (what is a three legged sea creature?). In this case the mascot is obviously a much larger step away from reality: a robot three-legged creature with a brain in a bubble.

While it might be an odd choice, it does provide a beautiful distinguishing element for the event. This unique mascot gives a cool visual element to connect with the event. It takes on a life all its own and really connects people with something concrete. I suppose this is exactly the purpose of a mascot.

This site’s design is beautiful, but consider how dull it would be without this crazy mascot in place. Producing such an element isn’t easy, but it is extremely effective in this situation.

Big Eye Creative

For an example of a non-octopus based mascot take a look at the Big Eye Creative site. Here the mascot doesn’t play as much of a predominant role in the design. It does, however, add a lot of personality to it. Obviously the other illustrations and overall style of the site make for a less formal presentation. But the mascot in the logo is present throughout the site. This ensures their light-hearted style permeates the design.

Additional mascot illustrations

Here are a few extra samples of mascots at work in design. Including yet another octopus one; it would seem that is a popular one to use.

Pioneer Records Management

Argyle Octopus

Coucou

Konsebt

Illustrated decoration

The next type of usage I would like to consider is what I refer to as thematic decoration. This is when illustration is put to work in a decorative way that doesn’t really provide a specific physical reference. For example, most often illustration includes pictures of people, animals, objects, or places. But in this case the illustration doesn’t so much represent anything real, but rather, it simply provides decoration to beautify the design in a way only illustration can. As always, let’s clarify this through some samples.

1000 WP Themes

For our first example, consider the 1000 WP Themes web site. On this site the use of illustration provides an underlying framework and style for the site. But it does so in what is most purely decorative. The overall style feels like an illustration, and yet, it doesn’t have the typical humanistic elements.

Now, I want to totally contradict myself. I think the style is predominantly decorative. But I can actually see how we could argue that it does provide a level of clarification for the site. The style the design is using connects with a certain audience. It says something about the style of the site, and the themes they might produce. In so many ways, the quality of the illustrated layout demonstrates the quality of work you might expect to see through this site. In that way, the clarification is perhaps more subtle and less in your face, but present nonetheless.

Coca-Cola History

On this web site we find another design driven by illustration. There are some illustrated elements here that demonstrate real things, but most of the thematic approach is established with pure decoration. Not only does this example demonstrate the approach, but it also shows that almost no technique is used in a purist fashion. The reality is that you will likely merge these elements I various ways.

Metaphiziks

In this final example for decorative illustration you find some excellent background elements. Some of these are more tangible than others, but overall they are more about stylistic support elements than anything else. It is remarkable how beautiful such simple line drawings can be when combined with beautiful text, well chosen colors, and simple icons. The end result here is fantastic and remarkably beautiful.

More designs with illustrated decoration

Here are some additional samples to round out this type of illustration in design.

Moo’s Cupcakes

Tech Jobs

Pixel Stadium

Custom Bags HQ

Illustrated text

Hand rendered text is certainly not a new concept, and is something I have covered many times before. However, I have never considered such an approach with an illustration perspective.

Hand rendering text is one popular variation of illustrated text, and a great solution for many creatives. For one, it is a great way to put all that hands-on art school training to work. Secondly, it’s a great way to produce something unique. After all, if you hand render some text it will be 100% unique. Even if you sketch over an existing typeface, it will still become a distinct creation.

Rangus

This is a perfect example of illustrated type. The style is extremely gorgeous, totally unique, and very inviting. But it doesn’t stop there. The hand rendered type actually demonstrates the individuals talents. It shows he creates artwork with his hands and it connects perfectly to his animation skills. I particularly love the fact that it is all based on a chalkboard theme as it really ties the theme and elements together perfectly. In my opinion this site demonstrates how unifying illustration can be with the purpose and message of the site.

Joey Lomanto

In this case, the illustrated text is far more subtle. Instead of driving the entire direction of the design, it simply plays along nicely. In fact, on first take you might not even notice the hand rendered style of the large home page text. Granted, the text might actually be a font, but it has been used in such a way that it merges perfectly with the style of the site. Regardless, the style is beautifully unified and illustration plays many roles in the overall design.

Go Live

Illustrated text need not be hand rendered though. As you will find in this example the text is styled in various ways that turn the text itself into bits of the overall illustration. The beauty of this approach is that it unifies the text with the other illustrations. This avoids a less unified feel where you simply have illustrations over standard web-based text. The latter can work, but in this case the impact of illustrated text is clear.

Additional samples of illustrated text

The following examples fit loosely into this category. I say loosely because it is hard to say at times as it is sometimes a subtle thing. In some of these cases the text merely feels like a work of art, so I have placed it into this collection.

Contrast Rebellion

Fakta

La Web Shop

Informative illustrations

By the very definition of illustration, one of its purposes is to clarify and explain. So it is only fitting that we find some examples where the illustrations do this in with extraordinary clarity.

Bookish

Let’s begin with the Bookish site. In this unusual layout we find that the illustrations very clearly symbolize the various points of the home page layout. Each block has a visual element that not only beautifies it, but more importantly, explains it. So much so that as a reader I almost don’t even have to read the copy. The devices artwork in the bottom left especially demonstrates this.

Conferize

In a much less prominent way the illustration in this design proves equally informative. The simple illustration single handedly demonstrates the topic of the site. It might not beat you over the head with its message, but it echoes the site’s purpose beautifully.

Activate

The illustration in this design not only communicates information about the event it represents, but also echoes the very purpose of the event. This particular event revolves around disconnecting from technology. It is a chance for people inundated with technology to escape it’s clutches.

The illustration here shows us what attendees will be doing, so it is informative. And by it’s very nature, the illustration breaks with technology and roots itself in a purely organic feel, a fundamentally great way to communicate the sites purpose.

More informative illustrations

These extra sites also demonstrate the idea of illustrations that inform us. Some are tiny and basic icons, while others are immersive elements that fully define and represent the content.

Vitality City

Uklizenodoma.cz

Qubiq

A technological antidote

With the last example (The Activate site) we stepped into what I want to consider next, the use of illustration to break with the technology oriented feel of things. Sometimes it is necessary to disconnect from the web’s technological underpinnings and demonstrate a very organic feel. Illustration is one of the most powerful tools for accomplishing such an idea.

Shipment App

This straightforward coming soon page is nothing short of extraordinary. And clearly how it accomplishes its beauty is radically simple. A single huge illustration single-handedly distracts us from the fact that this is a web page. It feels more like a work of art that happens to have a small interactive element, certainly a great way to make a huge impact on users and establish a memorable image.

Muziekpark

While this site doesn’t make use of quite as radical an approach, the illustration is still large and prominent in the layout. Here the animated imagery breaths life into the page. Combine this with a creative and unusual layout and it feels fully detached from the technology that drives it. Perhaps the fact that it doesn’t look like a normal site plays a powerful role in this as well. Also consider that the illustration in this case really helps to inform us of the theme of the site.

Egopop

In yet another atypical layout we find that illustration has been put to work. Here the artwork not only tells us about the individual the site represents, but they also break us out of the normal web mindset a visitor might have. Again, it feels more like an interactive work of art than a website. If this is your goal and need, then this is a great approach to consider.

Zaarly

Compared to the previous examples, the Zaarly site stands in stark contrast. Although the design is ruled by a single large illustration, and this illustration serves to set a tone for the site, the underlying function is far more complex than these other samples.

This site is an application that is intended to be used. And the illustration helps establish a certain set of expectations. It gives a light-hearted, humanistic feel that is clearly very organic and natural feeling. Imagine this in contrast to semi-minimalistic apps with no personality at all. The design gives the site a sense of approachability and shifts our expectations.

Conclusion

The use of illustration in design is an age-old practice, and its application to the web is clear. As with any design element I enjoy the process of reconsidering its purpose and use. Through such an effort I inevitably find that I gain a better understating of how it works, ways to leverage it for an intended purpose, and, ultimately, some fresh and inspiring ideas.

Patrick McNeil is a freelance writer, developer and designer. In particular he loves to write about web design, train people on web development and build web sites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

How do you use illustration in web design? Please share your own experiences below….

Never Ending WordPress Business Bundle – only $14!

It’s one of the hardest tools to master in Illustrator, but if you want to achieve a 3-D look in your illustrations, you have to really understand how to use this tool properly.

We’re going to create a Super Mario-style mushroom in order to better understand how to use this tool using a real life example.

When you get to the end of the tutorial, please share your results with us. And do let us know if you ran into any trouble along the way.

Step 1

Let’s open Adobe Illustrator and create a canvas that is 25 × 11 cm (9.84 × 4.33 inches), in RGB, and at 300 DPI.

Let’s start on the left side of the canvas.

Make the rulers visible (Command/Control + R), and then draw one down the y axis.

Using the Ellipse tool (the shortcut is the letter L), draw a circle (hold down Shift to make the circle perfect).

Using the Pen tool (P), make this mushroom head shape. Don’t forget to include a straight line on the right, because we’re going to be reflecting this side later for the rest of the illustration.

Again using the Pen tool (P), draw the following contour (which will be one of the white dots) on the mushroom head, staying in perspective.

Create the face of the mushroom with the Pen tool (P), again to allow it to be reflected.

Finally, using the Ellipse tool (L), draw an ellipse, and adjust it with the Direct Selection tool (A).

Step 2

Using the Selection tool (L), select everything except the perfect circle. Hold them, and press Shift, and then drag across, which will duplicate the elements.

Right-click on these elements to open the context menu. Go to Transform → Reflect.

Choose the vertical axis.

Now, select everything, and go to the Pathfinder panel. Select “Unite.”

Now that our lines are done, let’s color them in.

Step 3

Before we can start with the Mesh tool, we have to choose the main colors of the mushroom, set them as fills, and disable all strokes.

I chose four colors…

Beige for the face (R:233 G:201 B:126)…

Red for the head (R:196 G:1 B:1)…

White for the dots (R:255 G:255 B:255)…

And black for the eyes (R:0 G:0 B:0)…

Ok, everything’s set. Time for the Mesh tool.

Step 4

Like me, you’ve probably used the Mesh tool only a few times, if ever. Mastering a tool is hard if you don’t know the basics, so let’s try a simple exercise before proceeding. First, create a perfect beige circle using the Ellipse tool (L) + Shift.

Use the Mesh tool (U) to create the grid below. The tool creates two axes at a time, so you might have problems plotting them on the shape the first time you try it. Practice on simple shapes like this circle, and always try to make the grid symmetrical. A good trick is to start with one point in the center.

Use the Lasso tool (Q) to select the points you want. This is the same selection tool that you know from Photoshop, so you’re probably already comfortable with it. Select the points in the upper-left portion of the ball.

Now go to the Color panel, and select the color you want. Don’t worry if the color is too harsh right now; you’re just testing it. You can adjust every color point by selecting it with the Eyedropper tool (I). (A good trick is to use the Eyedropper tool on colors that are already on the ball. The results are easier to control this way.)

Repeat the same process on the opposite side, with a lighter color this time.

If you didn’t achieve the result below, keep practicing. It’ll get easier. After a couple of tries, you’ll understand the dynamics of it.

Step 5

Before starting on the mushroom, lock the other elements so that you don’t accidentally select them with the Lasso tool (Q). But lock one element at a time (face, then head, then eyes, etc.).

Let’s begin with the face. Make a net using the Mesh tool (U). Try to make it symmetrical.

Use the Lasso tool (Q) to select the points at the botton. Use the Color panel to choose a darker color (something like brown), and adjust the gradient using the Eyedropper tool (I).

Do the same thing at the top of the head, using a darker color this time to make it look like a shadow.

Step 6

Use the Mesh tool (U) on just one of the eyes. We’ll duplicate it later to save time.

Make a symmetrical grid. Choose the points in the center using the Lasso tool (Q), and adjust the amount of gradient using the Eyedropper tool (I), selecting each point individually.

Add some white for light in the eye. Take your time adjusting it.

Duplicate the eye, reflect it, and position it across from the left eye.

Step 7

Use the Mesh tool (U) on the head. Making this grid will be a bit tougher because it’s bigger, but it doesn’t have to get too complex.

Use the Lasso tool (Q) to add some white to the top of the head. Adjust the gradients using the Eyedropper tool (I).

The black gradient at the bottom is unusual and so might be a bit hard to get. But practice the selection and adjust it as you go along. It’s easy, trust me.

Step 8

I decided not to use the Mesh tool on the circles, because they are fairly simple shapes and have way less light to be managed. Instead, I used the Gradient tool (G) to get a white-to-gray radial gradient, and I just adjusted its direction and amount.

I repeated the process with the circles on the side. Just be careful with the gradient’s direction.

Step 9

For a final touch, I added a simple ellipse to the bottom using the Ellipse tool (L). Then, using the Gradients panel, I applied this fading black gradient and adjusted its amount and shape. Quite simple, and better than a Gaussian blur to achieve the same effect.

Our mushroom is finally done!

The Result

Well, I hope you had a great time following this tutorial and learning more about the Mesh tool.

Download the Illustrator file

Exclusively written for WDD by Marcos Torres. He is a Brazilian freelance illustrator and art director, and a contributor to Abduzeedo as a tutorial designer. You can see more of his work on his website or by following him on Twitter.

Please share your results with us. Did you run into any trouble?

Never Ending WordPress Business Bundle – only $14!

And when you survey hundreds of websites, you often see patterns that you would otherwise miss. One such pattern is the frequent use of tags and ribbons.

These small flourishes have become increasingly popular. This article addresses the two elements because they are used together so frequently.

While ribbons are self-explanatory, by tags I mean the faux labels that hang down from the top of the screen, like a tag on a t-shirt.

The websites that use these elements are truly outstanding in quality. Putting together this gorgeous showcase turned out to be remarkably easy. Few trends are like this: one usually has to wade through many poor examples to find the tasty ones.

Why use these ribbons and tags?

Tags are useful because they draw the user’s attention by creating the illusion of depth. They push their content out to the user. Tags are also often styled with punch, whether via 3-D effects or bold contrasting colors.

These factors make the tag a prime location for critical information: logos, navigation, calls to action. We see this in the showcase below. Of course, as always, assess your needs before implementing this element on your own website.

The ribbon shares the same qualities, which is indeed the reason we find it and the tag together so often: it draws attention and is a great place for important information. The shape of the ribbon sets it apart from the tag, though; the two arrows on its ends seem to point to the content within, subtly directing the user’s attention.

A family of styles

Another reason these two elements are often found together on websites is that they are both digital representations of fabric. No surprise then that many of the websites below have other fabric-related elements, including subtle stitching, textures and other organic elements.

Ribbons

Letter Learner

The ribbon nicely frames the name Letter Learner here. Also, the page is laid out as a single column; the ribboned title encourages the user to start their journey at the top and flow down from there.

Ribot

Ribot’s ribbon is fairly subtle. The flourish livens up the page, while summing up the company’s focus in a two-word tagline. A perfect way to set expectations, because the company name does not tell us what it does.

Alex Pierce

With the text being so enormous on the home page of Alex Pierce’s portfolio, it would take a rather bold element to balance it out. In this case, the ribbon does a good job of setting off the header. I also love how the folded layer in the middle of the ribbon adds focus to the designer’s name.

Rockaholic!

On the rather unusual Rockaholic!, the ribbon directs the user’s attention down, playing nicely into the vertical scroll of the website and helping the user dig into the content.

Paris Jones

The delicious red of the ribbon makes the band name Paris Jones pop out here. Even though the text treatment is rather subtle, the bold pattern ensures that you notice it.

Blog en Bois

On Blog en Bois, the arrow effect of the ribbon is especially powerful, largely due to the contrasting dark behind the yellow. I find myself drawn back to the logo over and over again. It’s certainly a powerful way to engrain the brand in the user’s mind.

HTML5 Boilerplate

The popular website HTML5 Boilerplate uses ribbons to draw our attention to the most important action items on the page. I love that the ribbons do their job without having to say “Download here.” The combination of ribbons and labels tells us this is where to download the resources.

Cantilever Fish & Chips

The purpose of the ribbon is not so clear on Cantilever Fish & Chips. The detail about being “Open 7 days a week” would seem relatively minor, but presumably it’s an important distinction for this restaurant.

Wells Riley

Wells Riley is a perfect example of ribbons in service of aesthetics. The ribbons look great here and become the focus of the page.

Dhiraj Singh Karki

I always love designs that depart from convention. The portfolio of UI designer Dhiraj Singh Karki is just such a website. Here, the ribbon is used rather cleverly and does not pack nearly the same visual punch as on other websites. It blends right into the page and yet has enough style to keep the design from looking too simple.

Chipmunk

Chipmunk is a great example of how well a ribbon can work with organic elements. The ribbon around the primary navigation fits in perfectly with the rich illustrations below. It also keeps the navigation from getting lost among the powerful artwork.

Ryan M. Stryker

Once again we see the power of the ribbon to focus attention. Its central location and bold contrast ensure that you don’t miss Ryan M. Stryker’s name.

Tags

Ennea

Given that Ennea is a clothing brand, it’s no surprise that the tag here contains the logo and brand name. Sometimes a straightforward approach works best.

Philip Meissner Design

The tag contains the main navigation on Philip Meissner Design. Usually I would be put off by this unusual configuration of links, but the arrangement and colors here ensure that the links are super-easy to find.

Tinkering Monkey

What could be more important on an e-commerce website then guiding users to check out? Tinkering Monkey has a nice little bold tag to help users complete their purchase.

Parkbud

With all of the smartphone applications out there, the good ones need to communicate their key differentiators. Parkbud is free, and the bold red tag makes sure you know it. The tag is nicely tucked out of the way but always visible from the corner of your eye, reminding you that this tasty app is free.

Lense

Lense is a perfect example of tags combined with fabric textures. Notice first the textured denim background; also, the scalloped border under the main navigation feels very much textile-oriented.

Coreymade

While a small detail, I really love the way the script font makes the tag on Coreymade feel more like a tag on a shirt than a normal website logo. And the pseudo-3D effect makes the tag really pop for the viewer.

Netastica

The tag on Netastica is mainly there to look pretty, although it still does contain important information and links visitors to the home page.

Ryan Havoc Taylor

The tag is in such a visible location on Ryan Havoc Taylor’s website that it does not need a lot of contrast to stand out. It works well with the flow of the website and performs its role effortlessly.

Ribbons and tags

In the final part of this showcase, we’ll look at websites that make use of both ribbons and tags.

ClearSpan Media

Ribbons and tags go very nicely together, as shown by ClearSpan Media. Here you’ll also find fabrics with patterns, stitches and subtle color variations. The two tags up top and the ribbon down below function as a kind of circle of interest for the user.

Krichevtsova Alexandra

While Krichevtsova Alexandra’s website is rather barebones in content, the tag and ribbon add extra life to key elements. You could enjoy this website without even knowing what the person does.

Wes Bos

Most of the websites in this collection have rather large ribbons. Not so with Wes Bos. His are much smaller, a good reminder that they need not dominate the design to perform their function.

Conclusion

Given the quality of the websites in this collection, none of these designers set out to build something “trendy.” Rather, they were faced with a set of needs, and from those needs emerged an effective visual device for focusing attention, communicating critical information and highlighting important actions.

If you would like some nice CSS-based ribbons for your own website, the web-based 3-D Ribbon Generator is a handy tool for the job.

Patrick is a freelance writer, developer and designer. In particular, he loves to write about web design, train people in web development and build websites. Patrick’s passion for web design trends and patterns can be found in his books on TheWebDesignersIdeaBook.com. Follow Patrick on Twitter @designmeltdown.

Did we miss any particularly effective uses of ribbons and tags? Do you think these elements are best reserved for certain functions?

Never Ending WordPress Business Bundle – only $14!

Celebrities are some of the most popular subjects of caricatures, primarily because they’re so easy to recognize, and often become known for specific physical traits.

Anthony Geoffroy is an illustrator and graphic artist who has created some of the best celebrity caricatures you’re likely to see.

He’s done caricatures of everyone from Dr. House to Robert De Niro, and he does caricatures of both celebrities and the characters they portray.

In this post, you’ll see some of the best Geoffroy has to offer, with caricatures including Bruce Willis, Leslie Nielsen and Stephen King, among many others.

Eddie Murphy in Beverly Hills Cop

Christopher Lloyd and Michael J. Fox in Back to the Future

Bruce Lee

Robert De Niro

Michael C. Hall in Dexter

Hugh Laurie in House

Bill Murray in Ghostbusters

Kiefer Sutherland in 24

Matthew Fox in Lost

Zach Braff in Scrubs

Jean Reno

Terry O’Quinn in Lost

Bruce Willis in Die Hard

Leslie Nielsen in The Naked Gun

Mel Gibson and Danny Glover in Lethal Weapon

Nick Jonas from the Jonas Brothers

Rihanna

Snoop Dogg

Stephen King

Vincent Cassel

This post was authored exclusively for WDD by Paulo Canabarro, a enthusiastic Brazilian web designer based in Providence, RI, USA who loves to share inspiration & knowledge. To stay in touch, follow @paul0v2 on twitter.

Which one did you like the most? What other famous faces would you like to see in this list? Let us know in the comments below!

Never Ending WordPress Business Bundle – only $14!

It’s got a 3-D feel, but it’s done using only gradients. So, stick with us; we’re going to use and see some really nice easy tips for creating this little monster. The tutorial is intended for beginners.

We’ve included the Illustrator file at the bottom of this post, so you can download it to learn more from it.

If you followed this tutorial to create your own little monster, please share your results and experience with us in the comments.

Step 1

First of all, open Illustrator and make a 40 × 40 cm canvas. Now, using the Rectangle tool (the shortcut is M), create a square that fits over the canvas.

Using the Gradient tool (G), create the following radial brown gradient. You can set it exactly by opening the Gradient panel and using the colors below. Copy the RGB values to get them exact.

Place the gradient at the top of the square using the Gradient tool (G), just like the picture below. Then, create another rectangle at the bottom of the canvas using the Rectangle tool (M). Copy the same gradient using the Eyedropper tool (I), then place it at the bottom again using the Gradient tool (G).

Step 2

Using the Ellipse tool (L), draw this oval. Rotate it using the Selection tool (V), and then adjust it a bit using the pencil tool (N).

Let’s add a nice gradient to it. Go to the Gradient panel, and set the colors to what is shown below.

Adjust the range of the gradient using the Gradient tool (G). Now create another circle using the Ellipse tool (L); it will be one of the eyes.

Open the Gradient panel, and create this radial orange gradient. Use the screenshots below to match the colors.

Duplicate it using the Selection tool (V), and drop the layer to the back.

Repeat the process of making the oval, and then just copy the gradient using the Eyedropper tool (I).

Using the Ellipse tool (L), create this ellipse that looks like a fly wing; you can adjust it using the Pencil tool (N). Open the Gradient panel and create this radial gray gradient, using the screenshots below to match the colors.

Select the wing, and then open the Transparency panel and choose the blending mode called “Multiply.”

Now, duplicate the wing using the Selection tool (V) + Alt, and distribute it along the body.

Step 3

Now let’s create a mohawk. Using the Pen tool (P), draw this spiky shape and place it behind the first eye.

Using the Gradient tool (G), create this purple-pink radial gradient, open the Gradient panel, and set the color as seen below.

Again using the Pen tool (P), create triangles along the hair. And using the Eyedropper tool (I), copy the same gradient, being careful with its range.

Step 4

Let’s work on the other parts of the body now. Using the Pen tool (P), draw the shape below, which will be the neck of the creature. Add some gradient using the Gradient tool (G), and then open the Gradient panel to set the color as seen below.

Repeat the same procedure of drawing the shape with the Pen tool, but this time use the Pencil tool (N), which will make drawing the fingers a little easier. Then just copy the same gradient for the neck, body and head using the Eyedropper tool (I).

Duplicate the arm using the Selection tool (V) + Alt, and then reflect and resize it on the other side.

Repeat the process for the legs. Don’t forget: our little monster has three legs!

Step 5

Draw the rounded shape below using the Pen tool (P). Then add an orange radial gradient using the Gradient tool (G). Set the colors according to the screenshots below.

Doing the rest of the chest is really about drawing a round shape using the Pen tool (P), duplicating it with the Selection tool (V) + Alt, and then adjusting them with the Direct Selection tool (A). This will take some time.

Step 6

Using the Ellipse tool (L), draw a circle on the first eyeball. Then, using the Eyedropper tool (I), copy the radial gradient from the hair, and place it as seen below.

Copy the circle using the Selection tool (V) + Alt, and select a radial gradient, going from white to transparent, to lay over top.

Using the Ellipse tool (L), draw a little circle, and add a black radial gradient to it.

Using the Ellipse tool (L), draw a little white circle, and place it as seen below. Now, repeat the same process, but smaller this time.

Copy this pupil, and resize it on the other side.

Step 7

Shading the monster isn’t so easy. If you are a beginner, you’ll need some skill with the Pen tool (P). Basically, you have to draw the shape, add a gray gradient and then set the blending mode to “Multiply.”

For the feet, we’re going to use a smoother shadow. First, draw circles using the Ellipse tool (L), and then go to Effect → Blur → Gaussian Blur, and set the radius to 25 pixels.

The result

Download Illustrator file

Marcos Torres is a Brazilian illustrator and art director who works for a marketing agency and for Abduzeedo as a tutorial designer. You can see more of his work on his website and get in touch with him on Twitter.

If you followed this tutorial to create your own little monster, please share your results and experience with us!

Never Ending WordPress Business Bundle – only $14!

One of his stronger areas of expertise – as you can tell from the following pieces – is experimental typography.

His unique blend of (usually) clean lines and grungy textures brews a pixel-perfect typographic illustration every time that are always a pleasure to look at.

A lot of Alex’s work is produced for personal and experimental purposes, while some pieces are made into tutorials or sold as stock files.

If you like what you see, you can follow Alex on Twitter, and check out his other work on either his Behance or Flickr profiles.

This post was put together exclusively for WDD by Callum Chapman, the man behind Picmix Store and Circlebox Blog.

What’s your favorite illustrated type piece here, and why? Would you like to see more experimental type like this out in the real world, such as in advertisements?

Never Ending WordPress Business Bundle – only $14!

Illustrations vary widely from one site to the next. Some look hand-drawn (whether they are or not) while others are obviously digitally rendered.

Below are more than thirty great website designs that feature illustrations.

Most common are illustrations in headers and backgrounds, often of site mascots or characters.

But illustrations are used in other ways, too. If you have a favorite illustrated site that isn’t mentioned here, please let us know in the comments.

Sites with Digital Illustrations

These sites have illustrations that are obviously digital. Smooth lines and bright colors are hallmarks of this style, though not everything featured below conforms to these standards.

F5

The F5 website uses a whimsical digital illustration for their background. The bright colors and cartoonish characters are typical of digital illustrations. What’s not visible here is that the illustration continues down the page, revealing different layers.

Wireframe Plus

Wireframe Plus uses a monochromatic background illustration for their site. It’s subtle, but really adds some extra visual oomph and makes the site stand out even though the color scheme and typography are fairly standard.

Tom Bradshaw Design

Tom Bradshaw Design uses illustrated-style typography throughout the site, as well as a cartoon character mascot, who appears on each section of the page (it’s a one-page site).

Mediocore

Glossy digital illustrations like this one aren’t seen very often, and stand out from other sites. This one stands out even more since it’s positioned against a black background and uses the only bright colors on the page.

htmlMafia

The illustrations here are sort of a mix between digital and hand-drawn styles, though the gradients used put them more firmly in the digital category. This is a great example of how illustrations liven up a site and give a more dramatic impression.

CreativeSwitch

The robot illustrated here is actually animated on the website itself, albeit subtly. Additional illustrations are used throughout the site.

690 Design

Tying illustrations into the copy of a website is a fantastic strategy. Here, the tagline text discusses harmony, and an orchestra conductor is used for the illustration.

Kipu

Simple, vector-style illustrations make a very bold impact. Using a more muted color palette for them, as above, makes them blend more seamlessly into the rest of the site.

Siringa 1

These characters are another example of digital illustrations that have a hand-drawn feeling to them. Combined with the color scheme, these illustrations give the website a laid back, friendly feeling.

PixelBaecker

There’s a lot going on in this vector-style illustration, from the guys working in the hole underground to the bird up in the tree. Stylistically, it’s a pretty typical vector illustration, though the execution is wonderful.

Pieoneers

Using illustrations to talk about benefits or offer up other information, without turning it into an info-graphic, is a great strategy. It’s a fun and interesting way to convey information that’s more likely to engage your visitors. Plus, the combination of a pie and a flying saucer here is just outstanding!

Jacob Lee

The penguin illustrated here almost looks hand-drawn, but it’s just a little too polished and smooth. The stark white coloring (or lack thereof) really stands out against the colorful background.

Treehouse Editing

The illustrated background here changes from page to page, and has subtle animations. But it’s a beautiful piece of artwork, worthy of a second look.

Code Crunchers

The most common digital illustrations are simple characters or monsters like this one. And as a mascot, it works perfectly with the name of the site.

Forrst

Illustrated backgrounds like this one are becoming more common. The complete integration between the content and the background is what really makes this one stand out.

Coo/Coo Core

More abstract illustrations like this give a site a more modern feeling. This one is just abstract enough to do so, while still being recognizable as a tree.

Joystick Generals

The repetition of the basic character in the background of the header adds an extra layer of visual interest to what is a relatively simple illustration. The color scheme used here is simple, but when combined with the grungy background, looks fantastic.

Make Film Work

Illustrations are seen less often on grunge-style sites, probably because it runs the risk of creating visual clutter. But the simple illustration here, with its muted color scheme and subtle texture, work great in a more minimalist grunge design.

The Solid Studios

Another great example of simple digital monsters used in a design. These guys are casual and fun, and make the website feel the same.

Olive Crush

Headers are one of the most fool-proof areas to use illustrations. Through creative use of drop shadows, this header illustration almost looks 3D.

Sara Tusar

Another great example of monsters, this time in a header design. They’re subtle, echoing colors from the rest of the website, but lend a more personal touch.

Arbel-Designs

The Arbel-Designs website uses a multi-layered illustrated background, starting in space at the top of the page, and progressing deep underwater. This style of illustrated background works great on single-page sites.

Minding Monsters

These are some of the simplest vector characters in this post. They’re very cute, though, and are fully incorporated into the site’s design. In fact, they’re the whole point of the site.

Sites with Hand-Drawn Illustrations

Hand-drawn illustrations are less common in web design, but there are still some fantastic examples out there. They range from fine-art drawings to doodles, and everything in between.

Steve Schoger

Simple sketches like this one work great for any site, but especially when they replace a typical designer (or any professional) photo. They’re also a great alternative for those who are camera-shy! Letting the background texture show through to give a skin-tone is a nice touch.

Kenny Meyers

An illustration of a superhero on what is otherwise a fairly minimal site can help instill confidence in your visitors without resorting to a “corporate”-feeling site design. Echoing colors from elsewhere on the site ensure that the illustration blends in seamlessly.

Andy Ward

It only makes sense for an illustrator to include illustrations on their site. Andy Ward uses a slideshow of his illustrations in his header, but they’re incorporated in such a way that they become a part of the design itself.

Kilian Muster

A more formal, fine-art style line drawing like this one offers a nod to tradition; in this case: traditional typesetting methods. It’s simple but bold enough to really make an impact.

DNA to Darwin

Another great example of a site that uses formal line drawings to create a sense of history. The layered illustrations make it all the more interesting.

Bowtie

A more casual hand-drawn site, complete with hand-drawn monsters (or is that an alien?). The site uses a multi-layer background illustration, starting in space and ending up in the sea.

xhtmlCafe

A hand-drawn illustration combined with watercolors creates a fantastic, and informational, header on the xhtmlCafe site. The sketched elements within the painting give it a more stylized feeling than a straight watercolor would have.

Attack of the Web

What would a post on illustrated websites be without an example of comic book-style illustration? Everything from the line thicknesses to the textured coloring is reminiscent of your favorite comic or graphic novel.

Janko at Warp Speed

A simple illustration in the header here is subtle and understated but adds a huge amount of aesthetic appeal to the site’s design.

Written exclusively for WDD by Cameron Chapman.

If you have other favorite illustrated websites, please share them in the comments!

Never Ending WordPress Business Bundle – only $14!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Looks Can Be Deceiving

The Lazy Clone

The Mind Reader

Can you relate to these situations? Please share your funny stories and comments below…

Never Ending WordPress Business Bundle – only $14!

Like it or not, it seems that Google Buzz is here to stay with many blogs adding ‘buzz’ icons to their posts. Today, we’ll make it easier to add some buzz to your posts with a free and exclusive set of icons for Google Buzz.

This set includes 24 beautiful icons in raster and vector formats.

They are completely free for personal or commercial use, all we ask is that you link back to WDD if you use them.

You can see a full preview after the jump. The download button is located after the preview. Enjoy!!!

This freebie is now available through our sister site, MightyDeals.com. Click on the download button below to be redirected to download the files.

Never Ending WordPress Business Bundle – only $14!