Menu

Useful Cheat Sheets for Web Designers

Advertisement

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

This was published on Sep 7, 2008

103 Comments

Carrie Drazin Sep 07 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 Sep 07 2008

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

kevin Sep 07 2008

great collection! I will print out some.

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

MikeWhoBikes Sep 07 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 Sep 07 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 Sep 07 2008

Awesome cheatsheet. It is so nice, Thanks!

Calvin Gilbert Sep 07 2008

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

Corgi Sep 08 2008

This is like porn for web designers… thanks!

widaca Sep 08 2008

Great resource!,thanks.

Rajaie AlKorani Sep 08 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 Sep 08 2008

Thanks man, these cheatsheets will save some time :)

Janko Sep 08 2008

Cool, this might save me some time :)

Jacob Gube Sep 08 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 Sep 08 2008

great job

Keith Sep 08 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 Sep 08 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 Sep 08 2008

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

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

Htoo Tay Zar Sep 08 2008

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

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 Sep 08 2008

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

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

Fubiz Sep 08 2008

Amazing list!

Glenn Sep 08 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 Sep 08 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 Sep 08 2008

That’s great collection
Well done!

Patricia Sep 08 2008

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

wow, great cheatsheet, very useful for me.

F. Yang Sep 08 2008

Excellent!!

Arjen Sep 08 2008

Great! I’ll certainly bookmark + Digg this!

Thanks

jason parker Sep 08 2008

very good info
cheers
jason parker

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 Sep 08 2008

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

Jazzy Sep 08 2008

Definitely an excellent resource. Thank you!

Anthony Ettinger Sep 08 2008

great collection.

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

hippity Sep 08 2008

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

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

800HighTech Sep 09 2008

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

Shane Sep 09 2008

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

WPJunkie Sep 09 2008

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

good list thnks Sep 09 2008

mcse courses

Web Design Forum Sep 09 2008

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

sachania Sep 09 2008

Great List…. Thx

http://www.hiddenpixels.com

J.C. Alexandres Sep 10 2008

Excellent links, thank you!

bru... Sep 10 2008

Thanks men!

Ryan Bayne Sep 10 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 Sep 10 2008

Meant to say 100%

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

IhateDesign Sep 10 2008

thanks!, what more can i say? :)

nice work!

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

Dani McDaniel Sep 11 2008

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

Barton Sep 12 2008

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

Spanish SEO Sep 13 2008

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

Blue Buffalo Sep 13 2008

This list of cheat sheets is awesome!!

I'M THE BEST Sep 13 2008

I have memorized all this already thanks anyways.

directory Sep 13 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 Sep 17 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 Sep 17 2008

Thanks for including my Megapixels Chart. =)

Thank you for useful collection! :)

Thanks, great work! Bookmarked!

Blue Rhino Sep 17 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 Sep 18 2008

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

Very useful post! Thanks!

Honour Chick Sep 21 2008

wow thanks… this helps alot :)

veeroo18 Sep 22 2008

this is huge tools collection .. great efforts !

Anthony Sep 25 2008

thank you this is very useful.

UTogger Sep 27 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!

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

THE|ODIN Oct 03 2008

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

Anthony Oct 05 2008

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

Designer Oct 11 2008

very cool…

Gestaltung Ravensburg Oct 14 2008

Great list of cheat sheets! Thanks.

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

Thanks

Domains at Retail Oct 20 2008

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

Rajasekaran Oct 31 2008

Nice collection.Thank you very much.

Amazing~

attlas Nov 11 2008

thanks

oto kiralama Nov 27 2008

thanks..

ilaç isimleri Dec 25 2008

thanks

Awesome!

Adrian Eden Jan 19 2009

Awesome is right !

Marvin May 02 2009

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

Phaoloo Jun 15 2009

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

Jaspal Singh Jun 16 2009

Thanks for sharing the cheatsheets

Thanks man! Great resource.

Really good. A lot to remember!

Goran Web Aug 31 2009

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

Michael Neve Sep 07 2009

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

Banishree Jan 25 2010

Thanks.really its helpful for me.

Brian Mar 21 2010

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

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

Simon Mar 28 2010

thx this was very usefull

Nageldesign Apr 03 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 Jun 10 2010

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

Levi VZ Jun 29 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 Jul 19 2010

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

Max SG VPS Sep 01 2010

I think there are more now… CS5

Ahmet Tekin Sep 23 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 Sep 27 2010

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

Mars787 Dec 18 2010

Great job. Now in bookmarks…

Dewan Demmer May 11 2011

Thanks this is really helpful and much appreciated.

Flowerlily1 Oct 26 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

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners