Set up Fluid

First, go grab yourself a copy of Fluid for OS X completely free. Learn more about Fluid. Fluid lets you create “site specific browsers”, essentially a browsers that are dedicated to individual sites that you can run as if they’re a native app on Mac OS X. Once you’ve downloaded Fluid, start it up, and you’ll see a window asking you for a URL and icon.

Read the rest of this entry →

A few months ago, AWS introduced an extremely useful little feature to their consistently developing EC2 platform: Instance Tagging. Before tags, it was relatively tricky to define a clear instance nomenclature, forcing you to implement a vague approach using security groups if you wanted something close to the same functionality. Since there is also a full API surrounding tags, they can be put to work in many useful ways.

Naming instances

Besides attaching up to ten custom nuggets of arbitrary data to instances, tags can be extremely handy when it comes to naming your EC2 instances, and more importantly, using these names to differentiate between instances and their roles. For example, you have three instances. One holds your master database and website, the second is a slave database in replication, and the third is a staging/test server. You’ll want to make pretty damn sure that when you’re SSH’d into all three of your instances, the commands you send are received by the intended recipient server.
Read the rest of this entry →

“I’m already using Google Analytics” is what most people seem to say when asked if they’d like to try a new analytics solution for their site.

Google Analytics is great if you’re looking at trends, and seeing how your site has been doing in the past. It’s a fantastically advanced tool that does almost anything you could want a reporting tool to do. But it’s never up to date – it’s never instant. Google Analytics is great at finding out why things happened. Sometimes you need to know what’s happening right now.

GoSquared LiveStats is about deciding how to make changes now, how to improve your site to maximise the effects of what is currently happening, rather than what’s happened.

When you tweet about your latest blog post – you likely want to see the immediate response. Wouldn’t it be cool if you could see exactly who was on you site before and after you post on Twitter? Wouldn’t it be great to see if the people who saw your tweet actually stayed around on your site?

Read the rest of this entry →

We’ve shown you how to make pie with Adobe’s vector drawing application, but how about those times when you need to give someone a cake?

Let’s start with a new document (obviously) – choose web if that’s what you’re planning to use the final image to your site as this will ensure all measurements are in pixels and colours are set in RGB. The canvas size doesn’t matter too much either, but 800×600 makes sense in this scenario.

To start the basic shape, use the Ellipse Tool (L) to draw a stretched circle with vaguely the same dimensions as those in the image. Make a couple of copies of this, and drag them off the canvas for now. Make another copy by Alt dragging the circle directly below by about 150 pixels. Also hold down Shift while dragging to keep the duplicate copy of the shape aligned to the original.

Read the rest of this entry →

Having used MediaTemple‘s hosting options for quite some time, we’ve built up a fair amount of experience working with their (dv) servers. Every now and again you may find it necessary to extend the core functionality of the pre-compiled PHP supplied with the (dv) server using PECL extensions to give your apps that little bit more of a cutting edge.

There is a quick and easy way to insall the PECL modules on your (dv) server: pecl install [extension]. However, if for whatever reason this does not work for you, this guide documents a manual installation method.

Read the rest of this entry →

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.

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.

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

Get the Adobe Illustrator CS2 File [1.1MB]

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.

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.

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 →

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.

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:

Graphic Design Forum (one of the oldest and largest forums on graphic design)
Smashing Magazine Forums
Layers Magazine
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 →

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!

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.

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.

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.

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.

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

Get the Adobe Illustrator CS2 File [1.7MB]

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.

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.

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.

The Color Database

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

Daily Color Scheme

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

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.

Color Blender

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

*Color or Colour, depending on where you live.