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.

Simply fill in the fields with the following details. In the URL field, fill in “www.gosquared.com” (including www) if you want to ensure you can access Trends and related pages like the sign in screen. You can download a custom icon (the GoSquared logo), otherwise, Fluid will use the GoSquared site favicon. It’s up to you.

I chose to call my app GoSquared Trends, but you can call it whatever you feel like. Go crazy. Create the app, and choose to launch it. The first thing you see will be the main GoSquared website page. Sign in, and navigate to the Trends page you want to have in your menubar.

Put it in the menubar

Now, go to the main app menu, and select “convert to menuextra SSB”.

The app will relaunch in your menubar. You will be prompted to log in once more, and then you’re done! You can choose to log in each time, or check the “keep me signed in” box to stay signed in when you quit the app.

If everything went well you should have GoSquared Trends for your site in your menubar for your obsessive stat checking pleasure.

Don’t have GoSquared yet? Sign up for a 30 day free trial now, to get both LiveStats and Trends for just $9.99 per month.

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.

In the EC2 management console, you can define a tag key for an instance which is then mapped to a value. There is a default tag key called “Name”. In the value for that “Name” key, you can type in the name you want to assign to that instance. For our servers in this example we can call the master server master-0, the slave server slave-0, and the staging server staging-0. I like this naming system because on the left of the hyphen you can define the type or classification of that server representing the role it performs, and the number following the hyphen can be incremented for each server of the same type, therefore acting as a unique ID for each server.

Conveniently, you can define which of these tags become a column in the table listing all of your instances. If you have a large number of instances, having this custom column for tags present can make it far quicker to find the instance you’re looking for at a glance, rather than trying to derive the right one from all of the other parameters displayed.

Doing some magic with .bashrc

I am a big fan of customising the bash prompt so that it displays only useful contextual information I need to know when I send commands. One of the problems I came across whilst working simultaneously on multiple instances is making sure I am sending commands to the correct one. Sure, most bash prompts include the server’s hostname in the prompt, but beware – there are flaws with this. For example, if you reboot an EBS-backed instance, the hostname it shows is not necessarily the one it is operating from. I needed something more definitive than that.

Here’s some example code you can place in your .bashrc file to display the instance ID and server name in the command prompt:

INSTANCEID=`curl -s http://169.254.169.254/latest/meta-data/instance-id`
SERVER_IDENTIFIER=$INSTANCEID
SERVER_TAG=0
if [ -f /var/opt/server-tag ]; then
SERVER_TAG=`cat /var/opt/server-tag`
SERVER_IDENTIFIER="$SERVER_TAG:$SERVER_IDENTIFIER"
fi
if [ "$color_prompt" = yes ]; then
PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@${SERVER_IDENTIFIER}\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ '
else
PS1='${debian_chroot:+($debian_chroot)}\u@${SERVER_IDENTIFIER}:\w\$ '
fi
unset color_prompt force_color_prompt

The great thing about this bashrc code is that if you have a file saved at /var/opt/server-tag which contains the server’s tagged name, the prompt will look something like this:

That prompt clearly defines that I am working as user Ubuntu on a server called Node#1 with instance ID of i-b92990d5, so I don’t need to think twice about that.

Using tags as hostnames

Now that we have named our instances using tags, we can turn them into hostnames so we can address them directly in our scripts, avoiding the need for expensive lookups against Amazon’s API to find server internal IPs. I’ve written a simple script to add entries to the /etc/hosts file for each of your instances that have a tag called “Name”. The value in this “Name” tag will become that server’s hostname, which then forwards to its internal IP address. While we’re at it, we also create the aforementioned /var/opt/server-tag file so our .bashrc script can display the server name in the command prompt. Note this script requires the AWS SDK for PHP and because we’re modifying the /etc/hosts file, you need to run it as root.

< ?php
// Install the AWS PHP SDK from http://docs.amazonwebservices.com/AWSSDKforPHP/latest/ and follow the setup instructions on that page.
require_once "aws-php-sdk/sdk.class.php";
 
define('SERVER_TAG', '/var/opt/server-tag');
 
try{
	// Parse hosts file into an array
	$hosts_file = file_get_contents('/etc/hosts');
	$hosts_lines = explode(PHP_EOL, $hosts_file);
	foreach($hosts_lines as $hlkey => $hline){
		if(empty($hline)) continue;
		$host_lines[$hlkey] = preg_split('/\s/', $hline);
	}
	$hosts_updated = false;
	$this_instance_id = file_get_contents('http://169.254.169.254/latest/meta-data/instance-id');
	// Check server tag directory
	$server_tag_dir = dirname(SERVER_TAG);
	if(!file_exists($server_tag_dir)) mkdir($server_tag_dir, 0777, true);
	// Get the server tag
	$server_tag = file_get_contents(SERVER_TAG);
 
	$EC2 = new AmazonEC2();
	$result = $EC2->describe_instances();
	if(!$result->isOK()) throw new Exception("ec2->describe_instances failed");
	// Each "reservationSet" is essentially an instance or compute "reservation"
	foreach($result->body->reservationSet->item as $rset){
		$iset = $rset->instancesSet->item;
		if($iset->instanceState->code != 16) continue; // Instance is not in "running" state, so ignore
		if(isset($iset->tagSet)){
			// Server is tagged. We should note it down in the /etc/hosts file
			$tset = $iset->tagSet->item;
			$server_identifier = false;
			if(is_array($tset) && count($tset) > 1){
				foreach($tset as $tag){
					if($tag->key == 'Name') $server_identifier = (string)$tag->value;
				}
			}
			else{
				if($tset->key == 'Name') $server_identifier = (string)$tset->value;
			}
			if($server_identifier){
				// This server is tagged with an identifier. Make sure we've got it recorded in the server-tag file if this is our server
				if((string)$iset->instanceId == $this_instance_id && $server_tag != $server_identifier) file_put_contents (SERVER_TAG, $server_identifier);
				// Now me ensure the correct host entry is written or up to date
				$nice_si = str_replace('#', '-', $server_identifier); // Replace # with - to avoid conflicts
				$hosts_match = false;
				foreach($host_lines as $hlkey => $hline){
					if(strstr($hline[0], '#')) continue; // Skip comment lines
					while($hostname = next($hline)){ // Loop through the hostnames to see if this server exists in the host file
						if($hostname == $nice_si){ // Found a hostname match, so check the mapped IP address
							$hosts_match = true;
							$ip_addr = (string)$iset->privateIpAddress;
							if($hline[0] != $ip_addr){
								// Private IP address has changed. Update it after a quick sanity check on IP address
								if(!empty($ip_addr) && strlen($ip_addr) >= 7) $hline[0] = $ip_addr;
								$host_lines[$hlkey] = $hline;
								$hosts_updated = true;
							}
						}
					}
				}
				if(!$hosts_match){
					// This server does not exist in the hosts list. Add it.
					$ip_addr = (string)$iset->privateIpAddress;
					if(!empty($ip_addr) && strlen($ip_addr) >= 7){
						$host_lines[] = array($ip_addr, $nice_si);
						$hosts_updated = true;
					}
				}
			}
		}
	}
	if($hosts_updated){
		foreach($host_lines as $hlkey => $hline){
			$host_lines[$hlkey] = implode(" ", $hline);
		}
		if(file_put_contents('/etc/hosts', implode("\n", $host_lines))){
			echo "/etc/hosts has been updated successfully\n";
		}
		else echo "Could not update /etc/hosts file\n";
	}
	else echo "No changes to make\n";
}
catch(Exception $e){
	die($e->getMessage());
}
 
?>

After running this script, we will have entries in our /etc/hosts file for all of our tagged servers, and because these are now defined as operating system hostnames, you can use these hostnames for connections between your servers (for example, if you were connecting to mysql from slave-0 to master-0 you could define the hostname for the connection as master-0:3306 and the connection will be made via Amazon’s internal DNS network. If you set this script to a regular cron job, you can ensure that the hostnames are kept updated and new ones are added as you tag new instances.

“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?

Observe flow of new & returning visitors.

Ever wish you could watch your visitors as they browse around your site? Keeping an eye on them as things happen makes support responses much easier when you can see exactly what they’ve been doing.

A user visiting a website browses through the siteʼs pages, rather than staying on a single page or tab. As a user looks at your website they “flow” around the site. Knowledge about flow of your website is an incredibly important tool for a content provider to have. If you know which links are being followed the most, and which get the least attention then you can very easily serve users the pages you want them to see. Knowing where on your site users are lets you know where to put your high-profile information.

A website is like a city, and it must be treated as such. In order to be profitable you must stay streamlined. If there are areas of your site that have extremely low traffic get rid of them. Make sure the flow of your site sends users to the areas that you want them to be. If you know where users are at this moment, then you can find out where theyʼre going and where theyʼve been. Use that information to figure out how to map your site out.

What works? What doesn’t?

Real-time analytics can be incredibly powerful for planning your siteʼs flow. Watch your users move through your site and keep track of where they go. Pages that attract more users have more potential to be profitable in the end.

Know which pages donʼt attract or bore users. If a user has been on a page for an abnormally short time then perhaps they are not finding what they’re looking for fast enough. Visitors that never show more than a green light on any page are probably leaving pages too quickly to absorb most of the info on each page. These pages are cruft and might distract users from the rest of your site. Often times these pages are an unnecessary step in between a user and their goal. For every user that goes through them, one just leaves your site. Same for pages that have users for an abnormally long amount of time, although often if a visitor keeps a post open for a long time they may have left the tab open while making a coffee or eating some toast – they may return to use the info at a later point.

Real-time analytics can give you some incredibly detailed and powerful data. If you know what to look for. If you use that data successfully you can improve the flow of your site that will benefit not only you as a content provider, but your users as they will be able to navigate your site with increased ease.

Interact with your users.

LiveStats doesnʼt just give you data, it gives you an in with your users. Donʼt let that potential go to waste. Get in touch with your visitors. Because LiveStats shows you where and when (what time zone) your users visit your page from you can change your site to reflect your users. If you have a lot of Canadians visiting at certain times of the day, start offering deals for Canadian users at those times. Target your advertising as well. Interaction is just as important as the content on your site. If you want to reach your visitors you must act.

Create a rapport with your visitors and users, even if it isnʼt actual communication. Make it known that you see where they are and what they want. When you choose to improve the site, people will be more likely to come back.

Respond to Traffic spikes.

Knowing where your users are coming from is great during a traffic spike. If you just got linked from TechCrunch you may want to update your article to appeal more to technically minded visitors. Donʼt wait until the spike has passed, do it immediately. Spikes are a blessing and a curse. If your site is experiencing increased traffic you will want to know exactly where these users are coming from and where they are ending up. Use this info to make your site ready for the traffic.

When instant gratification is everything, you canʼt ignore your users. Make sure that you are paying attention to the data you are getting from your analytics and that you are using it to change your site for the better. The results will be astonishing if you can harness the power of real-time analytics to improve the interaction visitors have with your site, and you have with your visitors.

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.

Using the Direct Selection Tool (A) select the top point of each ellipse and delete it by hitting backspace.

Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse. Now join these two points by going to Object > Path > Join (Command J). Now do the same for the points on the left of each ellipse. This will create a single shape from our two deformed ellipses.

To get this fairly random looking shape looking vaguely cylindrical we need to fill it with a gradient. Go the Gradient Palette (Command F9) and make 3 colour points. Make the points at the two ends of the gradient spectrum the same light brown colour. Make the third point slightly darker brown positioned at about 85%.

Now for something that many people don’t use enough in Illustrator – Photoshop Effects. Make a duplicate of the main cylindrical shape we just made and go to Effect > Texture > Grain… This will bring up the Photoshop Effect Palette that will be pretty familiar to anyone who’s ever dabbled in Photoshop. These textures aren’t vectorised, though, so use them with wisely otherwise you could quickly defeat the whole point of using Illustrator in the first place.

Once you’ve clicked OK on the Photoshop Effects Palette, you’ll see your new textured cake shape. Change its Opacity to about 65% by going to the Transparency Palette (Shift + Command + F10). Now just align the textured shape over the previous non textured shape of the same size.

So we’ve created the main part of the cake, and I guess you can take that out the oven for now and leave it to cool. Now for the icing. This part is pretty similar to before where we had the the 2 ellipses. Create another 2 ellipses of the same size as before (this is where making a few copies comes in handy) and keep them aligned, but ensure they’re closer together than the ellipses we used for the main part of the cake. This time, delete the bottom point on the top ellipse, and delete the top point on the lower ellipse using the Direct Selection Tool (A). Now Join (Command J) the points and make it into a shape like below.

Fill the shape we just created with a 3 colour linear gradient. Place each colour in the same positions as before – 2 of the same colour points (I’ve used just white here) at each end, and then a very slightly darker colour at 85%. I used a slight purple just to spice things up a bit. Make your icing any colour you like.

Position the layer of icing on top of the main cake base by ensuring it’s above everything else. Send the icing to the front by pressing Command + Shift + ].

Now take another one of those ellipses that you dragged off the canvas earlier. Fill this ellipse with white and Feather (Effect > Stylise > Feather) it with a Feather Radius of 15px. Ensure this circle is above everything (including the icing layer we just brought to the front) and align it to the horizontal centre, and vertical top of the main icing layer. The Alignment Palette can be accessed by hitting Shift F7.

Now select the icing layer that we formed with our two ellipses earlier. Use the Add Another Anchor Point Tool (+) to add a bunch of new points on the bottom edge of the icing shape. These don’t have to be accurately spaced out or anything – they’re supposed to give the effect of dripping icing once we’ve moved them about in the next step.

Using the Direct Solution Tool (A), select each of the points you just created, one at a time. Move every other point down a few pixels, and move a few random points up a few pixels. With a little experimentation, you should get a fairly natural effect similar to that in the image below.

To make the icing look like it’s slightly raised above the cake it’s dripping from, add a subtle drop shadow to the icing shape. Select the icing shape and go to Effects > Stylise > Drop Shadow. On the Drop Shadow Pane, set the Mode to Normal, Opacity to 45%, X-Offset to 0, Y-Offset to 1px, and Blur to 0px. Ensure the colour is black or very dark brown.

We’ve got a fairly tasty looking cake, baked and iced, now for a shiny silver base to sit it on. Using the same method as earlier, create two larger ellipses and delete their top points. Join (Command + J) the two ellipses to make one very short cylindrical shape just like a wider, shorter version of the cake base shape. Fill this shape with a linear gradient of 4 colours to give a chrome like appearance keeping these colours in greyscale. Give this cylindrical shape a drop shadow (Effect > Stylise > Drop Shadow…) Set the drop shadow Mode to Normal, Opacity to 65%, X-Offset to 0px, Y-Offset to 1px, Blur to 3px, and ensure the colour is black.

Create another ellipse of the same size as the ones used to create the shape we just made, and fill it with a dark grey. I used a colour of 50% black.

Drag another one of the ellipses onto the canvas that you dragged off earlier – keeping it the same size as the main cake shape. Fill this circle with a very dark grey (darker than the last one we created) – I used 80% black. Feather this ellipse with a Feather Radius of 15px.

Align each of these 3 shapes to the horizontal centre and Group (Command + G) them. Send them to the back with Command + Shift + [ and ensure they are horizontally centred with the main cake shape too. Now you have a cake, baked, iced, and on a shiny plate!

Now for the candles. It's time to draw a few more ellipses - this time we need to make a really tall, thin version of the basic cake shape that we made before. Use the same method - draw two small ellipses directly above one another and then delete the top points and Join (Command + J) the two shapes. Fill this shape with a 3 colour linear gradient with the 2 end point colours the same, and a darker shade of the same colour at around 85% along. Your candles can be any colour, but I decided to go for a bright pinky red.

Make a copy of an ellipse of the same size as the ones you just used to create the basic candle shape. Fill it with a similar, preferably slightly darker colour as that of the main candle shape. Align this to the top of the candle shape so it forms the top of the candle.

Make another copy of that same ellipse, but scale it down to about a third of the original size. Fill this ellipse with a dark colour, I just used black. Feather this ellipse with a Feather Radius of 2px. Align this to the centre of the ellipse sitting on top of the candle.

Make yet another copy of the ellipse and proportionally stretch it so that it's slightly larger than the candle width. My ellipse was around 50px wide and 14px high. Fill this ellipse with black and Feather it with a Feather Radius of 12px.

That's the main candle made, now to light it. To make the flame, draw another ellipse, but this time stretch it vertically so it's taller than it is wide. Using the Convert Anchor Point Tool (Shift + C) click on the top point of the ellipse you just made. This will cause that point to become a vertex rather than a smooth curve. You should now have a nice flame shape. Fill it with bright yellow.

To make the flame more realistic, make a copy of the shape and proportionally scale it so that it's slightly smaller. Align it to the bottom centre of the first flame shape. Fill this with a slightly darker shade of yellow. Repeat this same step a few times, making the shape smaller and filling it with a slightly darker colour. The centre of a flame, if you look closely, is actually made up of a spectrum of blue. Fill the smallest couple of flame shapes with blue. Ensure all of these shapes are horizontally aligned to the centre and vertically aligned to the bottom of one another. It would probably make life a little easier to Group (Command + G) the flame shapes together so that you can easily align them slightly above the centre of the candle shape.

Now make a few copies of the whole candle shape (again, easier if you Group all the candle elements together here) and position them on the top of your cake however you wish.

Now just dim the lights, and you're ready to sing happy birthday. Here's the outcome. Yum.

Get the Adobe Illustrator CS2 File [705KB]

Don’t have Adobe Illustrator? Download the SVG.

Don’t forget to save some cake for me when you’re done. Thanks for reading!

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.

A preliminary word of warning & disclaimer
We have only tested the following guide on (dv) 3.5 servers, and cannot in any way guarantee that this method will provide a stable and/or functional installation of your chosen PECL module(s) on your server, version 3.5 or otherwise. If your (dv) server is not version 3.5, this guide may not work due to possible path and environment differences. Therefore, any attempt to follow this guide is undertaken at entirely at your own risk and we cannot be held responsible for any resultant problems.

Phew, now I got that off my chest, let’s get started.

Paths needed
PHP extension (modules) directory: /usr/lib/php/modules
php.ini file: /etc/php.ini
PHP extension .ini files (to facilitate autoload of extensions): /etc/php.d/

For this to work, you’ll need to have root access to your server, and you’ll most probably need developer tools installed as well. To obtain these, log in to your MediaTemple (ac) panel and enable them both there.

Note: Replace [extension] with actual extension name

Open up your terminal using a remote SSH client (if you don’t have one, install an SSH client like PUTTY) and log into your server as root.

Download the extension from PECL to somewhere on the server (e.g. /tmp/download/):
cd /tmp/download/
wget http://pecl.php.net/get/[extension].tgz

N.B. For this bit, [extension] must be replaced by your extension name including any version numbers of the version you downloaded e.g. memcache-2.2.5

Extract the compressed package and change directory to the extracted source folder
tar -xvf [extension].tgz
cd [extension]

From this point onwards, [extension] now represents the actual name of the extension, for example, memcache instead of memcache-2.2.5

Prepare the build environment for the extension and make the binaries
phpize && ./configure --enable-[extension] && make

You may see lots of code/writing flicking up in your terminal. This is normal.
If all that goes good, run:
make install

This should install the shared extension into /usr/lib/php/extensions. If this works properly, the [extension].so extension file will be automatically placed in the PHP extensions directory (/usr/lib/php/extensions)

Navigate to folder containing the .ini files for extensions:
cd /etc/php.d/

Create a new file called [extension].ini
vi [extension].ini

Press i and write/paste the following inside, replacing [extension] with the extension name:
; Enable [extension] extension
extension=[extension].so

Press ESC then type :wq and press enter to save and exit the file.

Restart apache so PHP can load the new extension when it starts up:
/etc/init.d/httpd restart

That’s it! The new module is now installed and should be working properly. If you want to verify this, create a test.php file somewhere on your site, place

< ?php phpinfo(); ?>

inside and access it with your browser. Information for the new extension will appear in the list of extensions if everything has installed correctly.

We hope this helps you out. We would greatly appreciate it if anyone can test this on (dv) servers older or newer than (dv) 3.5 and let us know the result.

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

GoSquared does not endorse piracy. Please ensure that you use the mentioned functions of Safari as they were intended, and abide by any laws that apply to you.

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.

Getting into good habits is one of the best pieces of advice for any designer. But how?

11] Stay on top of the latest happenings.

Don’t let yourself fall behind the times of design and technology: they’re both fast moving industries. On the other hand, don’t go following the latest fads just because everyone else is. Keep up to date by visiting sites such as Smashing Magazine and DesignIsKinky. However, our personal favourite for up-to-date design is this absolutely mind blowingly awesome site called Liquidicity

12] Keep to web standards.

It always looks like you mean business when your site is 100% standards compliant. However, some browsers (cough *IE* cough) still don’t always like to play ball. If it works and looks the same in all browsers then you have done your job, no matter how compliant you are. If there is one tool you’re going to get to dramatically improve your web design standards it would have to be the Web Developer Toolbar for Firefox.

13] Make a library.

In most programs, you end up reusing something that you once made a while ago. It always helps to keep a well organised library of all your reusable files. This especially applies when you’re working with Flash, where you can keep track of loops, buttons, timers, code snippets, and symbols. This centralised library can also help keep you’re work consistent.

14] Save. Save. Save. Save again.

Are you getting the message? No matter how decent your computer is, don’t leave yourself in a position where you could lose all of your days work in one flick of a switch. Sometimes it helps to have had a dodgy computer in the past, as I now save every time I leave the window I’m working in. Sometimes my Mac just won’t play ball, and the only option is a reboot. Don’t let a reboot ruin your day.

15] Collaborate.

We never let things go before we’re completely happy about the final version. Working together means you can share your ideas as mentioned before, but also give critique to one another before finalising the design. These friendly, supportive criticisms can save you from harsher comments later on from your boss or client. Working together is also a whole lot more fun.

16] Do it right first time.

It’s not always easy, but ensuring you have tested your site across browsers thoroughly before putting it out in the open will ensure your customers and clients are a lot more happy. This sort of service is what a lot of clients will look out for when choosing someone to design (or redesign) their site.

17] Save your repeated actions

In a lot of applications you can end up doing the same tasks over and over again. For example in Photoshop you can save repeated procedures as “actions”. If you happen to be a Mac user and have OS X Tiger, you can use Automator to run repetitive aspects of your work flow for you. To be honest, I have never really got on with “Auto”, but I know a lot of people find it really helpful.

18] Your assets’ greatest asset.

Keeping track of your assets can be a challenge, but it’s important you keep them how YOU want. Everyone has a different way of working. For example, when working on a site, I keep all of my full res and vector images in an entirely separate folder to the site, and when it comes to getting final composites ready for the web, I export at a compressed size to the respective folder of the site. One of the reasons why I like Illustrator so much is because there’s no need to worry about starting off at a large resolution, due to the vector based design. This is important in Photoshop, where it’s always best to start off big, and scale down when you need to.

19] Simplify.

Striving for simplicity may not seem too tricky at first, but when you have a wealth of ideas, it’s important not to complicate and distort your original message. If you are using a lot of complex visual elements, try to keep the colours simple, and vice versa. This way, your colours and design won’t compete with each other.

20] Experience is everything.

The longer you have worked in design, the more experienced you become. Spending more time focusing on the applications you use can really speed up your production, making you more efficient and more knowledgeable of their feature sets.

Don’t be a bad workman and blame your tools. Ensure you know your applications like the back of your hand.

21] Naming Files.

Often overlooked, but naming your files in an organised and consistent way really helps you see how things have progressed, and what file belongs where. Never EVER attach “final” to a filename, because you will always go back to it and change it. Eventually you’ll have a folder full of twenty newer versions of that “final” revision. I have got into the habit of naming my work and putting “01″, “02″ etc after it so I can see how many revisions I have made easily, and recall an older one to compare quickly.

22] Gradients in Flash.

The default green to black gradient in Flash is evil. Don’t use it. Ever.

23] Another layer of Photoshop Cake.

Always try to use as many layers as possible when working in Photoshop, avoiding merging them together. The worst thing possible is doing an amazing composition and thinking “actually, I think I’ll change that” and realising you merged those 2 layers. What’s worse is if you have gone past its history state, meaning even if you undo the last 50 changes you have made, there will still be nothing you can do!

24] Use a pen and paper.

In this day and age, it’s getting less and less common to use a pen and paper (I hope you remember what they look like). Try sketching a few images out and scanning them in. Bring them into Photoshop and play around for a bit. This can really help you build a more organic and original feel to your work.

25] Play with Colour. Like no other.

After creating your image in Illustrator, or whichever application you use, try modifying the colours slightly by pulling it into Photoshop. This can really help you to unify the final colour of the composition.

26] Buy a new computer.

Call that a tip?! Well, it’s often forgotten, but the apps on the shelves today are getting faster and faster. To be honest, if your computer is more than 5 years old it’s time to consider an upgrade. Obviously your requirements are going to be unique: 3D animation is a whole lot more demanding than print design, but never the less, the faster your computer, the faster you can work. Many designers prefer Macs (I do), but PCs can run all of the applications that Adobe provide, and a few more. The PC vs. Mac argument is entirely up to you.

27] More RAM.

Just bought a new computer? Time to buy more RAM. Can’t afford a new computer right now? Buy more RAM. All the small jobs, like working on a couple of images, writing on your site, and playing back previews in Flash build up to devour any RAM you have. It’s as simple as this. Buy more RAM and you’ll be able to work faster.

28] Get more plug ins.

No matter which application you use, there’s almost always more plug ins available. Getting new filters and effects for Photoshop can greatly help you improve and speed up your work. Adobe’s own site is great for Photoshop plug ins.

29] Gradients in Photoshop.

To avoid the horrid “banding” that occurs when printing gradients in Photoshop, add a little noise to the layer. Obviously the amount of noise varied depending on canvas size and resolution.

30] Learn more.

Buy a few books, and visit a few of the websites that have been created to teach you how to use the software you own. For example, when I was learning Flash, the first thing I did was go out and buy a book. Sams Publishing run a great series of books claiming to teach you [app name or programming language] in 24 hours.

A good designer checks his work. A great designer double checks it.

31] Ask your friend.

Get a friend or someone nearby to give their thoughts on your work. Even if they’re not a designer, it always helps to get another perspective on your work.

32] Do some Acrobatics.

If you have to send a piece of work for printing (gasp), check, double check, and triple check everything in Adobe Acrobat Professional. Things you should look for are overprints, spot colours, trapping, and knock-outs. Doing this simple step thoroughly will save a ton of time, and money.

33] Add texture.

To give pieces a more organic feel, consider adding hand made gestures, and bringing a texture to your work. Don’t over do the organic additions, though, ultimately you should know when the work is complete.

34] Bring a little shade in.

Adding a few shadows, and darker areas can really enhance your work. These little touches can really create a flow in your work, especially if using vectors, as they bring a little smoothness to an otherwise sharp composition.

35] Take a Break. Then Stare Until your eyes hurt.

Once you are nearing completion of a project, try taking a break, going outside, and looking at other things- anything, for a few minutes. Then come back, and stare at the project again, for ages, looking for anything that could be changed for the better. Specifically look for colours that could be made stronger or weakened in images. In sites, look for the simple things that you would assume are correct, like links. There’s almost always at least one link where you have forgotten to put “http://” beforehand.

36] Stop. STOP!

Knowing when enough is enough is an essential skill. As time goes on you will get better at knowing when a piece is at its peak. Not every cake needs a cherry on top.

37] Print finishes.

Once your work leaves the computer, it doesn’t have to stop having any creative input. There’s a whole universe of ways you can dramatically enhance your work in print that are just impossible when it’s on screen. For example, you could try using metallic inks, foil blocking, embossing, and die-cutting. These effects can even be used together to create a really unique and inventive composition.

38] Prepare yourself.

When working with motion projects and animation you need to be prepared. Compressing clips early on in a project will eventually grow into a noticeably poor quality shot. Don’t compress anything until the final cut, and even then, keep a full, high quality version somewhere safe. Just in case.

39] Proof read.

They always said so at school: check your work before handing it in. Always ensure you re read work, and then pass it over to someone else and then someone else again. Get as many people to read your work as possible, ensure it all makes sense, and you’ll be fine.

40] Return to the brief.

Once you feel you’ve finished, give the project back to the team. Ensure everyone likes (maybe that’s a strong word, shall we say “doesn’t hate”) it. This is where you need to evaluate whether or not it meets the original brief, and if you have kept closely to your original idea.

Don’t dwell on your mistakes. Learn from them, and move on. (Heard that before?)

41] Never ever rely on the spell checker.

I really can’t emphasize this enough. Ensuring your text has no mistakes will not guarantee you more work, but letting work go out with mistakes will guarantee you being unpopular with your clients.

42] Work with clients, not against them.

Your clients may seem to be the ones holding you back, but they’re the ones that you need to listen to. Think of them as the ones who will lead you to the starting post and get you off in the right direction.

43] Re re read.

Again, it’s all about checking. Especially when writing emails, for example, don’t fill in the address bar until last. Not only does this avoid accidental sending of an unfinished email, but it also forces you to write it in full, and to think twice before sending it. Re read your own emails at least twice. You can’t just “undo” a sent email. If only…

44] Stick to the brief like honey sticks to toast.

A lot of companies try very hard, in fact too hard to win a pitch, and come across to potential clients as desperate. Just ensure you do what it says in the brief, and no more. This way you will save time and money.

45] Specifics.

Just ensure you are specific about what you are offering. If a client asks for something you are going to find difficult, make it clear that they will either have to give you more time, more money, or just leave it. Simple as that.

46] Do what you do best.

Don’t try to win clients who are going to demand more from you than you can offer. If you’re an amazing web designer, don’t go trying to dabble in professional 3D animation because it just won’t work. Stick to one thing, and show everyone else how awesome you are at it.

47] Keep a back up of everything.

Too often, I have lost files due to a disk error, or over written a folder by accident. These sorts of incidents are even more common with web design, when several members of a team have access to upload any files they want to the server. However, when running a site, you can also avoid loosing online files by ensuring everyone makes a copy of all the files on the server on a regular basis. You can even get scripts that will run a daily backup for you. For back up on your local machine, there’s already a plethora of options, but in OS X Leopard, the next version of the Mac OS, there will be a new back up utility called Time Machine, which will ensure everything is constantly backed up to an external hard disc. It can’t come soon enough.

48] Never assume anything.

Never *ass**u**me*: it will make an *ass* out of *u* and *me*. Too many times, people make assumptions and then kick themselves when it’s too late. For example, sending something off for printing, assuming the colours are all correct without a pre-print mock-up.

49] Justify yourself.

If you want to make a statement, or do something a little differently, many clients will say outright “No.” Try giving them a persuasive and valid reason for the decision, however, and they may feel more inclined to let you go with it.

50] Don’t over sell yourself.

Be up front and clear about what you are able to do. The last thing you want to do is make the client think you’re the best thing since sliced bread, and let them down at every stage of the project. Treat clients as they deserve. That’s all I’ll say.

Man I need a coffee.

You might also like: CSS Help Sheet, Colour, 165 Vector Icons (for free)

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.