Archive for Tutorials

Make indented text with this super easy method

Bevel post main image

A popular graphical style at the moment is to make your text look indented. I spent months and months trying to work out how to do this after seeing it perhaps for the first time in iTunes. I always looked for a filter or a tool to "emboss" or "bevel" the text, but these never looked quite as nice, and often made the text hard to read.

One day, it hit me: it's SO SIMPLE! And the method I came up with didn't involve filters, plug-ins, or any other jazz like that.

All you need to do to create the effect of indented text is to duplicate the line of text, with the duplicate behind, and slightly below the original.

Bevelled dark text in Illutsrator

Then, make the duplicated text slightly lighter than the original text. This will work perfectly when you have dark text, just like in the title of this post.

Bevelled light text in Iluustrator

Also, not many people realise you can use this method with light coloured text aswell. However, instead of moving the duplicated line of text below the original, you move it above, and make it darker than the original text. This will look just as good and give the same effect.

This method can be used in almost any application, but I made these with Adobe Illustrator. It's great to know that something that looks so good can be done so easily.

Hope this helps ;-)

Ai Get the Adobe Illustrator CS2 File [1.1MB]

Comments (8) arrow

Reference for EVERY Character Key on a Mac

Ever wanted to type the copyright icon, or do an accent over an A without having to resort to some character palette? We have, and it takes time and is an effort. So we put together a series of help sheets that reference all of the characters that aren't listed on your keyboard, along with their shortcut keys to make your life easier.

Click on a preview image to view a full jpg.

Note: The "Alt" key on these sheets is the same as the "Option" key as some Mac users may put it. Why people were getting so upset about this I just don't know. Its not rocket science.

PDF Get them all in one PDF [216kb]

Glyphs set 1

PDF Get the PDF [128kb]

There were so many, that to make the reference usable and readable we had to divide them into 3 sheets.

Glyphs set 2

PDF Get the PDF [116kb]

Last but not least, one more sheet.

Glyphs set 3

PDF Get the PDF [112kb]

We hope you find them useful.

Comments (96) arrow

Download ANY file from ANY site using Safari.

Safari’s hidden secret

Listen up Mac users. You may already know this, but I didn't until the other day, and it really comes in handy. Safari has a little tool called the Activity Window, which can be accessed by going to going to "Window > Activity" (shortcut: alt + apple + a). In here you can see every file that the website you are viewing is calling upon. The brilliant thing is that by double clicking any one of these files, it will download straight to your desktop.

Where is the activity window

Considering you would most likely want to download a file containing video or audio, look in the column on the right to see its size. By process of elimination you will see that the biggest file will be the one you want.

The activity window

So if you happened to be on YouTube, you could download any video you wanted. Similarly, if you were on MySpace, and had no respect for copyright law, you could download anything you wanted.

This, if you didn't know it already, could save a lot of people a lot of time (and money).

You might also like 165 Vector Icons, 50 Ways to Become a Better Designer, 77 Vector Buttons

Read the rest of this entry »

Comments (80) arrow

50 Ways to Become a Better Designer

50 Ways to Become a Better Designer

Being a successful creative has a lot to do with the way you work. Sure, you can't teach good design, but it never hurts to learn a few new tricks, or simply make the most of your talents. So without further adieu, here's 50 ways to be more successful as a designer. Take 'em or leave 'em.

Ideas

Don't get stuck before you've started: get some good ideas.

1] Metaphors.

Great ideas can stem from using themes and metaphors. Basing a site design around the idea of a school, for example, can open up a whole avenue of ideas. A great design works because the theme houses and conveys the content seamlessly.

2] Don't take all day to brainstorm.

It always helps to throw ideas around with a colleague or friend (as long as he knows what he's doing). Try to have a couple of short sessions of brainstorming rather than one massive one as ideas can quickly go cold.

3] Get off that computer!

Sometimes it's best to just have a break. Leaving the computer can seem like going on holiday in rush hour, but it usually helps if you just take a 10 minute break and get some fresh air. If you can't do that, try listening to some music, or taking your jumper off.

4] Join a forum.

A lot of creatives work from home, but that doesn't mean they can't talk to anyone. There are a lot of really helpful and talented people out there willing to have a chat about design, you just need to find them. Here are some of my favorite forums:

Pixel 101 (Probably my favourite)
Illustrator Techniques
Designate Online
DevLounge (OK, it's not a forum, but it's a really decent site)

5] Think brand.

Try going to a few courses on branding, as brand thinking is vital to developing the way you think. Keep your ideas squeaky simple, and 9 times out 0f 10 they will work. Thinking in terms of branding means you can develop key words to stem your ideas from. Complexity just doesn't work.

6] Use a sketchbook.

I almost always start with ideas that I have scribbled down in my trusty sketchbook. Whenever I get an idea I just make sure I get it down on paper. This always helps as whenever you're stuck at a later date, you don't have to go out and buy another book, just refer to your own! Don't just keep it to ideas though, put URLs, book titles, words, and all the sketches down that you can. It will develop into your creative mind, on paper.

7] Get your specs straight.

Always ensure you know the media you're going to be using at the start of working on a project. Knowing that there's going to be photography involved means you may need to think about locating a shoot. 3D may mean getting some help to make it look that little bit better. Taking it to print in the last minute is also not advised: things never go to plan! Ensure you know the scale of production you're going to be dealing with, and research the printing processes you're going to use.

8] Draw a map.

I find it helps to visualise the brief. Highlight key words and phrases, and jot them down in your trusty sketchbook. Then see how these ideas could link up by drawing lines between them and branching out from those core ideas. Pretty soon you'll have enough on the page to sketch out some decent ideas.

9] Rough it out.

Once you have THE idea, and it's on paper, try putting it together at low res on the computer. This way you can see what you might need to rethink or improve to get the job done well. At this stage you don't need to worry about perfect dimensions or colours, just see how it goes.

10] Take a shower.

No, not because your odor is putting your colleagues off, but because (apparently) running water increases brain productivity. Try not bring the brief in with you, but spending time in a place that you feel really comfortable in can greatly help those ideas flow. Read the rest of this entry »

Comments (144) arrow

Pie Charts in Illustrator

Illustrator likes Pie

Pie Charts are the epitome of boring. Ughh. Figures again. To top off the boringness, it usually means joining Excel in a joyful number crunching, board room pleasing game.

It doesn't have to be as painful for us designers though. Our friend Illustrator can be a saviour when it comes to putting together a few pies for those presentations. Just follow a few simple steps, and you'll view pie charts in a whole new light!

Breakdown of time spent on web development

That's my completed pie chart, showing the breakdown of time we seem to end up spending on web development. Here's how to make it.

The Pie Chart Tool

First of all, let's open Illustrator and make a new document [always helps!]. Click on the pie chart tool in the tools palette, as shown above. By default, the column graph tool will be shown, so click and hold the icon down to show all of the graph tools, and select the pie chart tool.

Now draw a rectangle to show how large you want your pie chart to be. Alternatively, you can just click anywhere on the canvas and enter the dimensions you would like by hand. As soon as you have entered the dimensions you will be greeted by the data entry palette shown above. Now enter the figures you want to show in a row. If you would like a legend, enter your titles in the first row. Once you've put in all the information you want, hit the tick button and close the data entry palette.

Apply Some Colour

By default, Illustrator colours pie charts in grey scale. I suppose this is handy if you need to make photocopies for all of the other office slaves who might need to read it, but it's usually a good idea to bring some colour to your presentations whenever you can. By clicking on the Direct Selection tool from the tool palette (short cut: control or alt A), you can select each slice of the pie individually, and change it's colour by choosing from the colour palette.

Now that you've coloured your pie chart, you're pretty much done. However, if you want to really impress your colleagues, we can take it to the 3rd dimension.

Taking it to the 3rd dimension

To get yourself some 3d pie, just select your pie chart, and go to Effect > 3D > Extrude & Bevel... This will bring up the 3d palette as shown above. Choose Isometric Top from the drop down menu. You can move the cube around to get the angle you want, or manually enter the digits (Excel users will feel at home on that front). I found that the best balance between readability and looks went like this:

From top to bottom in the angle boxes: 45, 35, -30 degrees.

Extrude to about 20 or 30pt.

Keep surface as Plastic Shading.

It also helps and saves time if you check the Preview option, so you can see what the finished pie chart will look like without having to close and reopen the 3d Extrude & Bevel window hundreds of times. Once you have found the ideal angle and look, hit OK.

Apply Drop Shadow

To finish it off, and give your colleagues that even bigger desire to copy your presentation and design skills, add a subtle drop shadow. Shown here, the shadow has an X-offset of 0 and a Y-offset of 2. The shadow has a blur of 3.

Ta da! You're done. And because you have applied all of these effects without doing any expanding or flattening, you can still edit your data. Have a go yourself, you know you want to.

Oh, and I've included an Illustrator file just for you to play around with ;-)

Ai
Get the Adobe Illustrator CS2 File [1.7MB]

Comments (25) arrow

Love Colour? Love These.

Colour Lovers

Colour*. One of those difficult subjects - especially if you're in design. Web pages, posters, magazines. You need to be good at choosing and using colours if you want to work in design. As you know. So we've put together our selection of the best sites on the web that are devoted to colour. We hope this will shine a little light on the subject for you.

COLOURlovers

One of our favourite sites on colour, with a growing number of users [or "lovers"] which can only bring more expertise to a community passionate about the topic. Users can submit and rate colour palettes, making it easier to choose a colour scheme that works. Advanced options like the trends in the use of colours in magazines and web sites, and a brilliant search means the site is gaining a strong reputation with professionals.

COLOURlovers

4096 Color Wheel

A very helpful little colour wheel that is amazingly easy to use: just hover over the whell, and 3 of the nearest colours to your cursor will be displayed, along with their hex codes and similar colours. Brilliant.

4096 Color Wheel

Color Scheme Generator

This tool is based on a colour wheel, which generates monochromatic, contrast, triad, tetrad, and analogic color schemes. Basically it is really good at helping to pick colour schemes that work together.

Color Scheme Generator

The Color Database

A very handy and strong colour picking tool that has stood the test of time with plenty of designers.

The Color Database

Daily Color Scheme

A handy new colour palette for every day of the week. Usually inspired by a respectable designer.

Daily Color Scheme

Kuler

This is from the big guys: Adobe. If they have a site for colour, it must be important. In fact, it is one of the best sites there is. Entirely made in Flash, the interface is absolutely fantastic. Try it. You won't be disappointed.

Kuler

Color Blender

A cool little tool that matches real life colours to their digital equivalents, and generates a palette of complimentary colours.

Color Blender

*Color or Colour, depending on where you live.

Comments (6) arrow

HTML Help Sheet. Panic Over.

The second in our Help Sheet series, you liked cheating with CSS, hopefully you'll love cheating with HTML! To get going with HTML, just get the PDF below.

Here's a preview:
HTML Preview

PDF Get the PDF [112kb]

See also: CSS Help Sheet

Comments (25) arrow

CSS Help Sheet. Panic Over.

If you're a pro web designer, a wannabe pro web designer or just someone who likes cheet sheets, then you'll love our new CSS help sheet. Downloads below.

Here's a preview:

CSS Sheet PreviewPDF Get the PDF [168kb]

See also: HTML Help Sheet

Comments (37) arrow