Useful Cheat Sheets for Web Designers

Sep 7 2008 by Jacob Gube | 103 Comments

Cheat sheets (also known as reference cards, reference sheets, etc.) not only helps you remember things quickly, but can also serve as wall decoration for your workspace.

In this post, you’ll find 28 excellent, useful cheat sheets in various file formats for Photoshop, Dreamweaver, colors, typography, and other web-design related topics all in one page with pictures of each cheat sheet.

If you’re looking for front-end web developer cheat sheets (more CSS, HTML, and JavaScript) check out Cheat Sheets for Front-end Web Developers.


Photoshop CS3 Keyboard Shortcuts Cheat Sheet

Photoshop CS3 Keyboard Shortcuts Cheat Sheet - screen shot.Downloads: PDF (Windows), PDF (Mac)

Keys for using the Layers palette (HTML)

Keys for using the Layers palette - screen shot.

Photoshop Toolbox Reference (HTML)

Photoshop Toolbox Reference - screen shot

Photoshop Lasso Tool Cheatsheet

Photoshop Lasso Tool Cheatsheet - screen shot.Download: PDF

Photoshop Brush Tool Cheatsheet

Photoshop Brush Tool Cheatsheet - screen shot.Download: PDF


RGB Hex Colour Chart

RGB Hex Colour Chart - Screen shot.Downloads: PDF, PNG

Color Reference Guide (PDF)

Color Reference Guide - screen shot.

Web Designer Color Reference Hexagon  Mouse Pad

Web Designer Color Reference Hexagon Mouse Pad - screen shot.Download: GIF

Web Safe Color Chart (HTML)

Web Safe Color Chart - screen shot.

Hexidecimal Color Chart (HTML)

Hexidecimal Color Chart - screen shot.

The Browser Safe Colors (HTML)

The Browser Safe Colors - screen shot.


VisiBone Font Card

VisiBone Font Card - screen shot.Download: GIF

Common fonts to all versions of Windows & Mac equivalents (HTML)

Common fonts to all versions of Windows & Mac equivalents - screen shot.

Mixing Typefaces (PDF)

Free Fonts Cheat Sheet - screen shot.


Approximate Conversion from Points to Pixels (HTML)

Approximate Conversion from Points to Pixels - screen shot.

Megapixels Chart

Megapixels Chart - screen shot.Download: GIF

CSS/CSS Frameworks

Blueprint CSS Cheat Sheet

Blueprint CSS Cheat Sheet - screen shot.Download: PDF

YUI Library: CSS Reset, Base, Fonts, and Grids (PDF)

YUI Library: CSS Reset, Base, Fonts, and Grids - screen shot.

CSS Shorthand Cheat Sheet (PDF)

CSS Shorthand Cheat Sheet - screen shot.

Apple’s CSS Cheat Sheet Widget (Mac Dashboard Widget)

Apple's CSS Cheat Sheet Widget - screen shot.


HTML & XHTML Tag Quick Reference (PDF)

HTML & XHTML Tag Quick Reference - screen shot.

HTML/XHTML Character Entities

HTML/XHTML Character Entities - screen shot.

XHTML Character Entity Reference (HTML)

XHTML Character Entity Reference - screen shot.


Dreamweaver Quick Reference Guide (PDF)

Dreamweaver Quick Reference Guide - screen shot.

Dreamweaver CS3 for Mac Quick Reference Card (PDF)

Dreamweaver CS3 for Mac Quick Reference Card - screen shot.


Adobe Illustrator CS2 Keyboard Shortcuts – MAC

Adobe Illustrator CS2 Keyboard Shortcuts – MAC - screen shot.Download: PDF


Will the browser apply the rule(s)? (HTML)

Will the browser apply the rule(s)? - screen shot.

W3C DOM Compatibility Tables (HTML)

W3C DOM Compatibility Tables - screen shot.

(Possibly) Related Posts


Carrie Drazin

September 7th, 2008

What a great list!! Thank you!
I tried to download the CSS Shorthand cheat sheet . . . it wouldn’t download?
The Photoshop Brushes cheat sheet didn’t either?
I wonder why?
I was able to download the Mixing Typefaces cheat sheet successfully :-)

Carrie Drazin

September 7th, 2008

Forget what I said. . . I downloaded them successfully in Safari.


September 7th, 2008

great collection! I will print out some.


September 7th, 2008

Wow! Great presentation of such an amazing collection. Thank you! I’ve already downloaded the Photoshop CS3 shortcuts.


September 7th, 2008

Wow, this is a great resource! The ‘Mixing Typefaces’ table is one that I’ve never come across before that is very helpful.

Jason Bartholme

September 7th, 2008

Once again, great cheat sheet list. I like the Dreamweaver CS3 ones, I hadn’t seem those before. They are going to come in handy for the obscure functions.


September 7th, 2008

Awesome cheatsheet. It is so nice, Thanks!

Calvin Gilbert

September 7th, 2008

Great cheat sheets, I haven’t seen many of these yet. Dugg!


September 8th, 2008

This is like porn for web designers… thanks!


September 8th, 2008

Great resource!,thanks.

Rajaie AlKorani

September 8th, 2008

I’m always looking for great cheats like this, they help me save time by not letting me hover over every single Photoshop tool to find out its shortcut :lol:


September 8th, 2008

Thanks man, these cheatsheets will save some time :)


September 8th, 2008

Cool, this might save me some time :)

Jacob Gube

September 8th, 2008

Carrie Drazin: That’s strange, I tried it in Firefox 3, IE7, and Safari 3 – they all worked for me.

Corgi: I’ve never thought of cheat sheets as “porn for web designers” – that’s going into my quote book. :)

To everyone: I’m very glad that many of you found this collection useful – I’m a cheat sheet addict myself – I love posting them around my workspace to surround me with my work.


September 8th, 2008

I particularly like the cheat sheet on those mathematical symbos, i.e. XHTML Character Entities. These are extremely useful when creating equations and mathematical formulations.

Chuck Norris Jokes

September 8th, 2008

Wow! These are great cheat sheets! If I could just remember 10% of the Photoshop shortcuts, I’d be in great shape. Thanks for the links.

Scott Moore

September 8th, 2008

This will be a wonderful tool for any new designers in the field; a good refresher as well!


September 8th, 2008

Amazing collection you have here, thank you for share it. I already download many of them, thanks again.

Htoo Tay Zar

September 8th, 2008

Amazing Collection for web designers!! The best cheat sheets list on web. bookmarked!! Thanks


September 8th, 2008

Great collection. Several of those are totally new to me. Several will come in handy for clients too. Thanks again for rounding them up!


September 8th, 2008

Thanks once again for these sheets. Printer is having a tuff day :-)


September 8th, 2008

Who in the world is still using web-safe colors? Move on people, nothing to see here.


September 8th, 2008

Amazing list!


September 8th, 2008

This is a useful list. Designers may also find this color scheme generator to be of use.


September 8th, 2008

Jeez, talk about the mega cheat sheet list, a very handy little page this.

I’ll be back several times, thanks.

GIVISION | Jiri Mocicka

September 8th, 2008

That’s great collection
Well done!


September 8th, 2008

Fantastic! What an excellent guide, I will surely use. Thanks very much ;-)


September 8th, 2008

wow, great cheatsheet, very useful for me.


September 8th, 2008

Great! I’ll certainly bookmark + Digg this!


jason parker

September 8th, 2008

very good info
jason parker


September 8th, 2008

Am I missing something? All of this is quite outdated and irrelevant, w/ the exception of the application specific cheatsheets.

For those interested in the standards based cheatsheets, check out


September 8th, 2008

I was just thinking about creating a list this morning, too. Thanks!


September 8th, 2008

Definitely an excellent resource. Thank you!


September 8th, 2008

Hurray for cheat sheets! Kudos for new and interesting time savers.


September 8th, 2008

What about Lynda’s famous color list.


September 8th, 2008

Why are “web safe” colors still considered relevant? Aren’t all browsers capable of displaying any color by now?


September 9th, 2008

It’s been said many times before but I’ll say it again….great list, very useful.


September 9th, 2008

fantastic list of resources – thanks for your effort in its compilation :)


September 9th, 2008

WOW! Thanks for sharing! I know that the color tables, css and Dreamweaver stuff will come in handy. Thanks alot

Web Design Forum

September 9th, 2008

Very useful – good to share, as I have done on my site.

J.C. Alexandres

September 10th, 2008

Excellent links, thank you!

Ryan Bayne

September 10th, 2008

I think this collection is good and should grow!

As for web safe colours they wont die until 0% of the worlds population are using the latest devices including mobile.

They are still teaching it at University along with all the latest technology!

Ryan Bayne

September 10th, 2008

Meant to say 100%

The key for number ten on my keyboard is missing :)


September 10th, 2008

thanks!, what more can i say? :)


September 11th, 2008

nice work!

this’d be cool in a book laminated against coffee stains, great stuff!

Dani McDaniel

September 11th, 2008

OMG!! This is a fantastic list!! Thank you so much for posting!!


September 12th, 2008

Thanks for passing on this link. You can never have too many resources.

Spanish SEO

September 13th, 2008

WOW!!!! This is fantastic! Thanks a lot for the hard work you put on this article. Bookmarked!

Blue Buffalo

September 13th, 2008

This list of cheat sheets is awesome!!


September 13th, 2008

I have memorized all this already thanks anyways.


September 13th, 2008

wow, this is great. This will come in very handy, beats opening a book and trying to find a specific technique. Thanks!

Sam With Traffic Is King

September 17th, 2008

These are really cool cheat sheets. It would be cool to print these up and laminate. Keep them on my desk when I’m working. Thanks for sharing.

Robert Giordano

September 17th, 2008

Thanks for including my Megapixels Chart. =)


September 17th, 2008

Thank you for useful collection! :)


September 17th, 2008

Thanks, great work! Bookmarked!

Blue Rhino

September 17th, 2008

On the typeface compatibility chart, why does Bembo not mix well with Bembo? Is it such a schizophrenic font that it doesn’t even get along with itself?


September 18th, 2008

Thank you! That’s what I’ve been looking.


September 20th, 2008

Very useful post! Thanks!

Honour Chick

September 21st, 2008

wow thanks… this helps alot :)


September 22nd, 2008

this is huge tools collection .. great efforts !


September 25th, 2008

thank you this is very useful.


September 27th, 2008

This is so helpful! I’m especially grateful for the top one (Photoshop keyboard shortcuts), as it may help to stave off carpal tunnel syndrome!


October 2nd, 2008

Sweet! Found something useful to cover my wall in..


October 3rd, 2008

This is exactly what I was looking for brilliant resource, thanks


October 5th, 2008

Great post, I own a web design company in Long Island and this article is very useful.

Gestaltung Ravensburg

October 14th, 2008

Great list of cheat sheets! Thanks.


October 15th, 2008

It’s a great collection. it is very useful for me.


Domains at Retail

October 20th, 2008

Wow great resource. I really liked the CSS Shorthand Cheat Sheet. Will take a look at the one for front end developers.


October 31st, 2008

Nice collection.Thank you very much.


November 4th, 2008


Adrian Eden

January 19th, 2009

Awesome is right !


May 2nd, 2009

This is a great sheet to put on your desk :)


June 15th, 2009

“Great” is the word I must say now, thanks guy for collecting these stuff.

Jaspal Singh

June 16th, 2009

Thanks for sharing the cheatsheets


June 17th, 2009

Thanks man! Great resource.


July 17th, 2009

Really good. A lot to remember!

Goran Web

August 31st, 2009

I have struggled to find great colour charts. Your list is awesome, thanks.

Michael Neve

September 7th, 2009

Coolnes – I’m trying to figure out a place to store all these. Are you going to leave them posted up?


January 25th, 2010

Thanks.really its helpful for me.


March 21st, 2010

Nice work. I like the CSS cheatsheet. That will com in handy


March 22nd, 2010

very useful compilation, great having them all in the once place.


March 28th, 2010

thx this was very usefull


April 3rd, 2010

Great stuff guys! I really don’t know how much time it takes for your guys to compile such a list of excellent resources but it takes a lot of time for me to digest it all! Keep up the good work! Thank you!

Allan Quinto

June 10th, 2010

What a useful article. Thanks for sharing all of these.

Levi VZ

June 29th, 2010

Found a great collection of cheatsheets yesterday, hope this can help some people:


July 19th, 2010

Oh my god, I’m in heaven :-) Thank you! Great List!


September 1st, 2010

I think there are more now… CS5


September 27th, 2010

Nice and thaxs for share this AIO cheat sheet, very helpfull ^^


December 18th, 2010

Great job. Now in bookmarks…

Dewan Demmer

May 11th, 2011

Thanks this is really helpful and much appreciated.


October 26th, 2011

This for this helpful list!

FYI— he link to the website for the “Photoshop Lasso Tool Cheatsheet” (the title link) is broken. The working link is ( The “Download PDF” link works fine

Leave a Comment

Subscribe to the comments on this article.