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.

New to GoSquared?

For those of you new to GoSquared – we help people improve their websites. GoSquared real-time web analytics enables you to understand what’s happening on your site right now. We run this blog, on design, technology and marketing to share our thoughts and content with wonderful people like you in the hope that you’ll also try GoSquared.

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 users may put it.

Download the full set

Get them all in one PDF (216KB)

The Individual Sheets

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

Get the PDF (128KB)

Get the PDF (116KB)

Last but not least, one more sheet.

Get the PDF (112KB)

We hope you find them useful.

You might also like our free vector and pixel-perfect icons.

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.

Everyone seemed to like our original set of vector icons, so we thought you might like some more. 165 more to be precise. In 5 colours. So, I suppose that actually makes 825 icons. As always, they’re free for you to use as you wish. Oh, and this time, as you asked nicely, we are giving away an svg as well. Hope you like ‘em!

New to GoSquared?

For those of you new to GoSquared – we help people improve their websites. GoSquared real-time web analytics enables you to understand what’s happening on your site right now. We run this blog, on design, technology and marketing to share our thoughts and content with wonderful people like you in the hope that you’ll also try GoSquared.

165 Blue Vector Icons

Download the ZIP file

Download the jpg, svg, and ai as a zip.

Preview and download the Adobe Illustrator file

Get the Adobe Illustrator CS2 File (1.9MB)

Get the jpeg here. (396KB)

165 Green Vector Icons

Download the ZIP file

Download the jpg, svg, and ai as a zip.

Preview and download the Adobe Illustrator file

Get the Adobe Illustrator CS2 File (2.4MB)

Get the jpeg here. (424KB)

165 Red Vector Icons

Download the ZIP file

Download the jpg, svg, and ai as a zip.

Preview and download the Adobe Illustrator file

Get the Adobe Illustrator CS2 File (1.9MB)

Get the jpeg here. (468KB)

165 White Vector Icons

Download the ZIP file

Download the jpg, svg, and ai as a zip.

Preview and download the Adobe Illustrator file

Get the Adobe Illustrator CS2 File (1.9MB)

Get the jpeg here. (268KB)

165 Dark Vector Icons

Download the ZIP file

Download the jpg, svg, and ai as a zip.

Preview and download the Adobe Illustrator file

Get the Adobe Illustrator CS2 File (1.9MB)

Get the jpeg here. (256KB)

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

Pay whatever you want

We put considerable effort into the resources we make. We’re asking anyone who actually gets some use out of these icons and buttons to pay for them, and for the time we spent creating them. We won’t set the price point, so pay whatever you like. Hate them? Don’t pay anything!

Using these icons commercially

If you want to use these icons and buttons commercially (on your company’s website, in client work, in any scenario where you’ll be profiting from the work they’re in) then we kindly request that you donate at least $40 to justify the time and effort we’ve put in to creating them. It wasn’t a small job, and your money goes directly back in to creating more quality design resources.

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)

Can’t be bothered with making buttons? Want some new ones to add to your collection? Need a little inspiration? We’ve put together a little set of 77 buttons that we hope will lend you a hand in your times of button making breakdown. There all here to download in Adobe Illustrator format, just like our icon set. Alternatively, if you’re not a fan of Illustrator, you can get a JPEG or an SVG, just follow the link. We hope you like them!

Get the Adobe Illustrator CS2 File (1.9MB)

Don’t have Illustrator?

Get the jpeg here. (264KB)

Here’s the SVG version (425KB).

New to GoSquared?

For those of you new to GoSquared – we help people improve their websites. GoSquared real-time web analytics enables you to understand what’s happening on your site right now. We run this blog, on design, technology and marketing to share our thoughts and content with wonderful people like you in the hope that you’ll also try GoSquared.

Pay whatever you want

We put considerable effort into the resources we make. We’re asking anyone who actually gets some use out of these icons and buttons to pay for them, and for the time we spent creating them. We won’t set the price point, so pay whatever you like. Hate them? Don’t pay anything!

Using these icons commercially

If you want to use these icons and buttons commercially (on your company’s website, in client work, in any scenario where you’ll be profiting from the work they’re in) then we kindly request that you donate at least $40 to justify the time and effort we’ve put in to creating them. It wasn’t a small job, and your money goes directly back in to creating more quality design resources.

Here you go, the icon set by GoSquared. 165 hand drawn icons that you can use for whatever you like. Most probably your website. We have worked pretty hard to get these done, so we hope you like them.

New to GoSquared?

For those of you new to GoSquared – we help people improve their websites. GoSquared real-time web analytics enables you to understand what’s happening on your site right now. We run this blog, on design, technology and marketing to share our thoughts and content with wonderful people like you in the hope that you’ll also try GoSquared.

Get the Adobe Illustrator CS2 File (1.9MB)

Don’t have Illustrator?
Get the SVG here. (471KB)
Get the jpeg here. (256KB)

Oh, and here’s a little preview:

Now available in 5 Colours!

Pay whatever you want

We put considerable effort into the resources we make. We’re asking anyone who actually gets some use out of these icons and buttons to pay for them, and for the time we spent creating them. We won’t set the price point, so pay whatever you like. Hate them? Don’t pay anything!

Using these icons commercially

If you want to use these icons and buttons commercially (on your company’s website, in client work, in any scenario where you’ll be profiting from the work they’re in) then we kindly request that you donate at least $40 to justify the time and effort we’ve put in to creating them. It wasn’t a small job, and your money goes directly back in to creating more quality design resources.