Skip to main content ↓
useful cheat sheets

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.  These cheat sheets are used even by the best web designers!

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.

Summary

There’s a number of cheat sheets you can use for different areas of web design.

 These are just little things, but they can save your agency a ton of time, which will save the client a ton of money.  Clients look for things such as the efficiency of an agencies procedures when they are choosing a web design company.  Even big institutions such as colleges, or fortune 500 companies are looking for ways to save on web design, so using these cheat sheets can help drive down the time of a project and the price for the client.

(Possibly) Related Posts

Make estimating web design costs easy

Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!

Try Our Free Web Design Cost Calculator
Project Quote Calculator
TO TOP