I created this text illustration of the ‘Bard’ as an ironic play on the idea of making pictures out of words. Something Shakespeare is one of the best at.

Tutorial Details:
Programme: Illustrator CS2
Difficulty: Beginner – Intermediate
Time to completion: 4-6 hours

Files that might help:
Shakespeare reference picture – istockphoto
Ink Blot Vectors – I have provided these for download in an earlier post.
Il Shake Fest Font – DaFont
Shakespeare Quotes – Available from many sources on the internet.

Step 1
Open source file in Photoshop, set to grayscale (Image > Mode > Grayscale).
The next step is to remove any unwanted details.
Use the Polygonal Lasso to draw around the desired portion of picture,don’t be too fussy about this. Crop the image down (Image > Crop) to get rid of the unwanted parts of the picture. Then boost contrast/brightness (Image > Adjustments > Brightness/Contrast) to make the tones more extreme. Alternatively or in addition you could adjust the exposure (Image > Adjustments > Exposure) as well to get the desired effect.
You may also want to erase some of the background by using the eraser tool or by drawing around it with the Polygonal Lasso.

Place the image into a new Illustrator artboard. Open the Layers Window (Window > Layers). 1a: Create a new layer (Click the arrow at the top right of the layers window > New Layer).
1b: Name the new layer appropriately.
1c: Drag it to the bottom of the layer list to make sure it is behind everything else.
1d: Select the image and using the coloured square drag it to the bottom layer.
1e: Finally, lock the image in the bottom layer (Click the second box to the left of the layer name, a padlock should appear).

Now we have our source image ready in Illustrator so we can use it as a guide and work over the top of it.

Step 2
To make the task of filling the dark patches with text easier I made some ink blot vectors, that I made available for download last week.
I use these to make a rough guide of where the densest areas need to be. I went for ink because it is suitable to the illustration style.
I use a bright colour to work over the top of the image, this time magenta.

Step 3
Font selection is very important according to the type of illustration you want, with this sort of illustration it is like choosing a brush. In this case I’ve gone for “Il Shake Fest“, downloaded from DaFont.

As this is a typographical illustration there is another important decision to make. You can just use a jumble of characters to achieve the affect we are after or we can use actual quotes that relate to the subject that might be made visible in the illustration. I like to work with the second idea as it gives an extra layer to the image.
For this illustration all of the text I have used is made from quotes taken from Shakespeare’s many plays and sonnets. (You will be able to find many online resources for this).

I collected the quotes together in a text box and changed them all to my desired font.

Step 4
4a: Select the text quotes, and outline the text (Type > Create Outlines), I find it easier to work with shapes instead of live text.
4b: Ungroup the text (select the group > Object > Ungroup)
4c: Group single words or full phrases (Select desired grouping > CMD + G).

I choose the quotes I want to use as I go along, and find this more interesting, as I can decide if ‘Hamlet’ should make up his nose, then putting ‘Othello’ in his hair. That’s because I’m a geek, and because it would be dull to process all of the text at once.

Step 5
The closest comparison I can make to this technique is like crosshatching with a pen.
First I place the text so it forms the simple shapes of the facial feature. I tend to keep the text all at the same size for the fine details of the face. Use the selection tool to position the words, rotating if needed.

To build up areas of dense tone I rotate the words and overlay them. With areas of very dense tone just copy words over and over again. (Hold Alt and drag a word to copy it easily)

Try to make the ink blots blend with the type clusters. We want the type to be prominent not the ink elements.

Step 6
An important thing to consider is how the flow of the words describes the shapes you are after. In this case the words that describe the hair need to run in the direction of the strands.

Step 7
To be honest there isn’t a lot more to it! It’s basic repetition, you could do the entire illustration like this and it would be fine, but there are a few little things you can do to bring the whole illustration to life.

What is the point in doing an illustration made out of text if you can’t see it? Once you have all of the dark detail areas done the image should be coming together quite well. Check your progress by making the image layer invisible and zooming out. This should give you a good idea of how the illustration is progressing.

With the areas of lighter tone you can use ‘impact’ text. Text that should be readable and mean something to the image. In this case I’ll be using the titles of Shakespeare’s plays.

Step 8
Another approach to ‘impact’ text is to use the text path tool. This can be used for detail or to create texture.

8a: Select the pen tool, click once to add an anchor point, then click in another place, hold the button and drag the mouse to describe a curve betwen the two points.
8b: Click again to extend the line and emphasise the curves. You should be able to trace lines within the picture like this, easily.
8c: Select the type path tool and click the first anchor point of the line to activate the line as a path for type to sit on.
8d: Type your desired text along the path.

Step 9
Using these simple illustrator techniques you should be able to describe your desired subject. I have finished my illustration with a little more use of the ink blot vectors because of the final finish I have planned for the piece.

The great thing about this technique is that the end product is dependant on the artictic ability of the person doing the illustration, the computer isn’t doing all of the work.

Step 10
To give this illustration a nice finish I wanted to create a parchment style background for it to sit on.
Now is the time to define the size of your final piece as you will have to artwork the background bigger than you require.

10a: Use the rectangle tool to draw a rectangle that more than covers your artboard, set it’s colour as a dark brown. Select the Wrinkle tool.
10b: Double-click the wrinkle tool to open it’s dialogue box. When wrinkling the horizonal edges the settings have to be 100% horizontal, 0% vertical, the opposite applies for the vertical edges.
10c: Now go ahead and wrinkle the edges until you are pleased with the effect.
10d: Now copy that rectangle and paste it infront of the original (Select the rectangle > Edit > Copy. Edit > Paste in Front).
10e: Select the top rectangle and change it’s colour to a lighter brown. Then use hte feather effect (Effect > Stylize > Feather).
10f: Use the feather dialouge box with preview chosen to view the effect until you are satisfied.

You may try placing darker blocks of brown over the top of this effect and applying the feather effect to create a little more texture in the middle of the image.

Step 11
All that is left to do now are a few finishing touches to clean the image up.
I decided I didn’t like the rough edges of the parchment effect, but I liked the subtle tones of the distressed edges. One way to solve this is to create a clipping mask.

11a: Draw a rectangle over the parchment withni the image. Make sure everything under the rectangle is grouped together, and the rectangle itself is the top object.
11b: Select both the grouped parchment artwork and the rectagle then create a clipping mask (Object > Clipping Mask > Make).

I then took the completed illustration, changed it’s colour to a very dark brown (Select one element of the magenta illustration > Same > Fill Colour. Then choose a new colour for the selection) and placed it onto the background. I added the tag line using the ink vectors as a finishing touch so the whole thing looks handwritten by Shakespeare himself!

This is a great technique to experiment with. Because the final effect is dependent on the font, the illustrations can be as varied as the thousands of fonts that are available. It is also worth thinking about experimenting with colour and mixing fonts within one image.

I’d love to see any illustrations that this tutorial might have initiated.

Every time you post a new tweet to your Twitter account it will automatically appear on your website, allowing you to make minor updates to your website on the move or post messages to your audience which are too small for a regular blog post (aka micro blogging). The process is very simple but a basic understanding of html and css is very helpful especially in controlling the look of your post.

View the example | download the demo html & screenshots

The really, really easy bit.

• First off log into your twitter account.
• Click on the “Settings” tab in the navigation at the top of the page, then, just below the “More info URL” click on “(You can also add Twitter to your site here)”.

Next page… here you will see the options for adding twitter to various apps in this case I will ignore any option that isn’t relevant

• click on “other” then click “continue”.

Next page… here you also have the option to add a flash widget to your site, we’re not interested in that on this occasion as we want to style our tweets to our liking which means using html/css

• Select “HTML widget” and “Continue”

Next page…

• Choose the number of Tweets you wish to show on your page (maximum of 20).
• Type the title you wish to use for your tweets (if applicable).
• Select all of the code in the “Get the code box” and copy it.

That bit was ridiculously easy, right? – here’s the bit you might be a little scared of if you’re not familiar with html/css.

The next thing we need to do is to paste the code we’ve just copied into our webpage. Here’s a very basic page I made earlier.

• We need to get to the code in your webpage so open your html file in notepad/dreamweaver or similar (in this example I’m using Smultron for OSX).

Most likely you would want your Tweets to appear in your websites sidebar, which is where we will place them in this tutorial.

• Paste the code we copied from twitter inside the sidebar div.

• Once pasted in the code we copied makes more sense. We have a div with the id “twitter_div”, our Title appears in a h2 tag, next we have an empty unordered list followed by a link to our Twitter page. Our “twitter_div” is then closed followed by our Javascript. You will notice at the end of our Javascript we have “count=5″ if we wish we can change this to display a different amount of Tweets (upto 20) at a later stage without having to go back into Twitter and create new code.
• You may have noticed back in our Twitter page there was a “hot tip” suggesting we copy our Javascript code to the bottom of our webpage, this will prevent the loading of our page slowing down by pulling in the Twitter posts before the rest of the page loads – so we can cut these lines of code and paste them just before our body closes (</body>).

Now lets check how that looks in a browser… (open your html in firefox/safari/opera… or if you really must internet explorer)

Woohoo, now you can see our Tweets appearing in our sidebar. They do however look a little messy… we can change this with css.

Because we already have an unordered list (<ul>…</ul>) in our page which we are happy with the look of we need to target our Tweets ul (unordered list) independently. In the code we copied from Twitter our ul (unordered list) already has a unique id “twitter_update_list” which we can refer to in our css, we’ll then refer to our list items (<li>) within that list.

Admitedly the above is still not asthetically pleasing but works well enough as an example in this case – here’s the css I have used to style our Tweets… (you can obviously style your own to suit)

ul#twitter_update_list {list-style-type:none; padding:0;}   /* this refers to our unordered list */

ul#twitter_update_list li {font-size:1.2em; line-height:1.2em; margin:0 0 10px 0; font-weight:bold;}   /* this refers to our list items within our unordered list */

ul#twitter_update_list li a {color:#666666; font-weight:normal; text-decoration:none;}   /* refers to links within our list items */

ul#twitter_update_list li a:hover {border-bottom:dotted 1px #f58428;}   /* hover effect for our links */

The only bit left to style is our “follow me on Twitter” link at the bottom of our tweets. In the code we pasted into our page this link was styled using inline styles, although it still had its own presodo selecor (id) so we can remove the inline styles and target the link in the head of our page instead (or your external stylesheet on your own site).

So in this case I have inserted the following into the css and removed the inline style from my html.

/*style the follow us on twitter link */

#twitter-link {float:right; color:#f58428; text-decoration:none; border-bottom:dotted 1px #f58428;}

Andy Kleeman is a graphic designer and web developer (aka the boy who cried fox) living in Camberley Surrey, you can see his website here.
“Thanks to Ken for including this post!”

I realised something alarming this week. The last few projects I’ve undertaken have been extremely tight deadlines, giving me less time to explore all the creative possibilities. That old saying goes: “When a customer asks for quality, speed and affordability tell them they can have any two out of the three.” In this case I found that I had skipped a usual part of my design process, sketching. Because of the stringent deadlines I had to run straight to the computer and worked up the first ideas that came to me.

In the end I was more than pleased with the results, as were the customers. I had managed to meet my briefs and satisfy the needs of my customers without making a single pencil stroke.
In the past I’ve even missed out on sketching my comic strip because of time restraints, (which takes a little bit of the enjoyment out of it for me), but it’s come out fine.

This poses an unusual question. Do I need to sketch anymore? If not, why do I feel so bad for missing out something that has always been an integral part of my creative processes?

I tweeted that this would be my blog topic yesterday and received a message back from Joey McNair (@defycreative):
“Excellent topic. I used to get berated in school about my lack of sketches. It’s a fine practice, but not mandatory.”

Not mandatory? Is this where we stand now as designers? Have real artistic skills been replaced with button pushing? I sincerely hope not.
I’m sure there are some that take the opinion that if I wanted to sit around and draw all day I should have become a penniless artist. Well, I’ve gone and showed them, I’m a penniless designer instead, not only that but I’m whinging that I want to doodle more!

Drawing is such an integral part of any artistic/design related education. In fact it is laid as the foundation of all other creative skills.
Before you paint you are told to sketch out a composition. Before you design a page layout you are taught to sketch the design grid. Even if it isn’t what would be classed as ‘classical’ sketching, mark making of any kind with all sorts of media is encouraged to help stimulate creative thinking and artistic perception.

I think you learn so many other design traits through the practice of drawing: Composition, lighting, form & shape, observation, perspective, patience, persistence… I’m sure there’s something else beginning with P as well.

With the advent of computers becoming the primary tool to complete design projects; are we beginning to overlook the skills that we all developed at the start of, not only, our careers but our lives. I’m sure I’m not alone in remembering playing with crayons as a toddler, and developing those first scribbles into better works of art as I grew up.

Design is about communication and drawing is at the root of communication, dating back to cave paintings. This is why drawing can be such a useful skill, communication.
As a designer the end goal is about communicating ideas to our target audience. However, initially our challenge is to communicate our ideas to our clients. If you can develop sketching as a skill that can be called upon in a client meeting to describe an idea that you can’t find the words to define, it not only emphasises your artistic credentials, it’s also a nice party piece.

I personally believe drawing should be a mandatory skill, I’m not talking about Da Vinci-esque works of art to express an idea, I mean simple doodles that can be used to aid an explanation.

I believe I might have a few ideas that could help any reluctant scribblers out there to build up a bit of pencil related confidence (for the guys out there, this isn’t a filthy double entendre!) This is why I’m tentatively placing this post as my first tutorial. I’m going to share a few exercises that might give a decent grounding in sketching basics.

I warn you, these will seem very simple and totally obvious, so I apologise if these exercises seem beneath you! But if you can’t learn something new, I always think it’s a good idea to sharpen up the skills you have already.

All you need to complete these exercises are a pen and a stack of paper, scrap paper would be best because we aren’t creating works of art, we’re just going to be scribbling.

Exercise 1: Straight Lines – Freehand.
Draw a line of dots along the bottom of the page, and then begin drawing a corresponding line of dots opposite them. Start by making them quite close together then space them out.

The idea is to join the two dots with one smooth straight pencil line. Don’t do it slowly and carefully, sketch quickly and naturally. It gets harder the longer the line gets.
After a few sheets you should see an improvement in how straight and smooth the line is becoming. Use a ruler to check how straight the lines are.

Exercise 2: Curved Lines – Freehand
Use the same principle as before, use dots as guides and try to hit each one as you describe the curve that the dots sit on.

Try not to lean your elbow on the table and keep your arm free to move, not just your wrist.

Exercise 3: Geometric Shapes – Freehand
Now use these same principles to make simple geometric shapes, four dots for a square, three for a triangle etc.

The biggest challenge is to draw a perfect freehand circle.

On the face of it these exercises may seem pointless and overly simple but it’s all about practice and persistence. It only takes 5-10 minutes a day to do a bit of doodling like this, but over time you will notice that making the lines and shapes gets easier, the line flows easier and your confidence builds.
You can use these simple lines and shapes to describe an idea for a logo, a sketchy grid for a magazine layout, or a little map explaining where the nearest coffee shop is, for your client.

The bottom line is, pencils and paper are a hell of a lot cheaper than computers and software. Why use a computer to sell an initial idea after you’ve put a few hours into a design, when you can spend five minutes sketching it out for a client to see if you are on the right track before investing the time?

I’d like to know how you feel about sketching and it’s place within the modern design industry.
It’d be nice to hear if this little tutorial is of any help to anyone as well.