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

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

Color

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.

Typography

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.

Units/Dimension

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

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

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.

Illustrator

Adobe Illustrator CS2 Keyboard Shortcuts – MAC

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

Browsers

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

103 Comments

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.

kevin

September 7th, 2008

great collection! I will print out some.

CP

September 7th, 2008

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

MikeWhoBikes

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.

Ervin

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!

Corgi

September 8th, 2008

This is like porn for web designers… thanks!

widaca

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:

Fabryz

September 8th, 2008

Thanks man, these cheatsheets will save some time :)

Janko

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.

Keith

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!

Dan

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

Joe

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!

Ramoonus

September 8th, 2008

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

me

September 8th, 2008

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

Fubiz

September 8th, 2008

Amazing list!

Glenn

September 8th, 2008

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

http://wellstyled.com/tools/colorscheme2/index-en.html

Twenty20

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!

Patricia

September 8th, 2008

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

Matt

September 8th, 2008

wow, great cheatsheet, very useful for me.

Arjen

September 8th, 2008

Great! I’ll certainly bookmark + Digg this!

Thanks

jason parker

September 8th, 2008

very good info
cheers
jason parker

Cory

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 http://www.ilovejackdaniels.com

business

September 8th, 2008

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

Jazzy

September 8th, 2008

Definitely an excellent resource. Thank you!

Lynn

September 8th, 2008

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

hippity

September 8th, 2008

What about Lynda’s famous color list.
http://www.lynda.com/hex.asp

Kory

September 8th, 2008

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

800HighTech

September 9th, 2008

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

Shane

September 9th, 2008

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

WPJunkie

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.
Thanks!

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 :)

IhateDesign

September 10th, 2008

thanks!, what more can i say? :)

john

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!!

Barton

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!!

I'M THE BEST

September 13th, 2008

I have memorized all this already thanks anyways.

directory

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. =)

Ney

September 17th, 2008

Thank you for useful collection! :)

Stan

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?

Plagi

September 18th, 2008

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

Paul

September 20th, 2008

Very useful post! Thanks!

Honour Chick

September 21st, 2008

wow thanks… this helps alot :)

veeroo18

September 22nd, 2008

this is huge tools collection .. great efforts !

Anthony

September 25th, 2008

thank you this is very useful.

UTogger

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!

Ian

October 2nd, 2008

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

THE|ODIN

October 3rd, 2008

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

Anthony

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.

Amit

October 15th, 2008

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

Thanks

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.

Rajasekaran

October 31st, 2008

Nice collection.Thank you very much.

QR

November 4th, 2008

Amazing~

Adrian Eden

January 19th, 2009

Awesome is right !

Marvin

May 2nd, 2009

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

Phaoloo

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

Joe

June 17th, 2009

Thanks man! Great resource.

Jay

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?

Banishree

January 25th, 2010

Thanks.really its helpful for me.

Brian

March 21st, 2010

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

ken

March 22nd, 2010

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

Simon

March 28th, 2010

thx this was very usefull

Nageldesign

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: http://spyrestudios.com/mega-collection-of-cheatsheets-for-designer-developers/

Astrid

July 19th, 2010

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

Max SG VPS

September 1st, 2010

I think there are more now… CS5

Numous

September 27th, 2010

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

Mars787

December 18th, 2010

Great job. Now in bookmarks…

Dewan Demmer

May 11th, 2011

Thanks this is really helpful and much appreciated.

Flowerlily1

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 (http://creativetechs.com/tipsblog/photoshop-lasso-tool-cheatsheet/) The “Download PDF” link works fine

Leave a Comment

Subscribe to the comments on this article.