Useful Cheat Sheets for Web Designers
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
Downloads: PDF (Windows), PDF (Mac)
Keys for using the Layers palette (HTML)
Photoshop Toolbox Reference (HTML)
Photoshop Lasso Tool Cheatsheet
Download: PDF
Photoshop Brush Tool Cheatsheet
Download: PDF
Color
RGB Hex Colour Chart
Color Reference Guide (PDF)
Web Designer Color Reference Hexagon Mouse Pad
Download: GIF
Web Safe Color Chart (HTML)
Hexidecimal Color Chart (HTML)
The Browser Safe Colors (HTML)
Typography
VisiBone Font Card
Download: GIF
Common fonts to all versions of Windows & Mac equivalents (HTML)
Mixing Typefaces (PDF)
Units/Dimension
Approximate Conversion from Points to Pixels (HTML)
Megapixels Chart
Download: GIF
CSS/CSS Frameworks
Blueprint CSS Cheat Sheet
Download: PDF
YUI Library: CSS Reset, Base, Fonts, and Grids (PDF)
CSS Shorthand Cheat Sheet (PDF)
Apple’s CSS Cheat Sheet Widget (Mac Dashboard Widget)
HTML/XHTML
HTML & XHTML Tag Quick Reference (PDF)
HTML/XHTML Character Entities
XHTML Character Entity Reference (HTML)
Dreamweaver
Dreamweaver Quick Reference Guide (PDF)
Dreamweaver CS3 for Mac Quick Reference Card (PDF)
Illustrator
Adobe Illustrator CS2 Keyboard Shortcuts – MAC
Download: PDF
Browsers
Will the browser apply the rule(s)? (HTML)
W3C DOM Compatibility Tables (HTML)
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.
erichansa
September 8th, 2008
great job
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.
F. Yang
September 8th, 2008
Excellent!!
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!
Anthony Ettinger
September 8th, 2008
great collection.
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
good list thnks
September 9th, 2008
mcse courses
Web Design Forum
September 9th, 2008
Very useful – good to share, as I have done on my site.
Thanks!
sachania
September 9th, 2008
Great List…. Thx
http://www.hiddenpixels.com
J.C. Alexandres
September 10th, 2008
Excellent links, thank you!
bru...
September 10th, 2008
Thanks men!
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.
Designer
October 11th, 2008
very cool…
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~
attlas
November 11th, 2008
thanks
oto kiralama
November 27th, 2008
thanks..
ilaç isimleri
December 25th, 2008
thanks
John
January 16th, 2009
Awesome!
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
Ahmet Tekin
September 23rd, 2010
Apple`s CSS cheat sheet link does not work…
Update it with this: http://www.apple.com/downloads/dashboard/developer/csscheatsheet_begoodnotbad.html
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