40 Must Have Cheat Sheets for effective Web Designers

June 18, 2013 · 49 comments

by Lars

As a follwoup on the article 40+ Essential Front End Web Developer Cheat Sheets it is now time to deliver a similar package to Web Designers. Creating Web Designs isn’t easy at all as it is first of all a creative process. To get the creative process started it may be a good idea to seek inspiration by looking closely at the designs used on websites that belong to the segment your design will target (ex. e-commerce shop, corporate website, personal blog etc.). Once a designer have all the inpiration and all the ideas lined up to start the actual design process he or she needs to master a set og software products (ex. Adobe Photoshop) and best practice patterns for designing web user interfaces. This article will cover the elements you need to get work done more effectively as a web developer (ex. working in photoshop, Illustrator etc.) Please make sure that you post a comment if you know an important resource that have not been included in the article. I hope you will find this article useful, lets get started!


ElegantThemes
ThemeForest

Advertisement

Color Codes

RGB Hex Colour Chart

The RGB Hex colour chart is a very large (183kB) PNG file, and is sized to fit on a standard A4 piece of paper. It shows the 216 so-called “web safe” or “non-dithering” colours (there are actually only 22 web safe colours, but those are revolting).

CHEAT_SHEETS

Color Reference Guide

CHEAT_SHEETS

Web Safe Color Chart

CHEAT_SHEETS

HTML Colors Cheat Sheet

This cheat sheet contains a chart of 1050 colors grouped by hue and varied into 25 different saturations and brightnesses for each. Each color has the HTML color code reprsented as a Hex triplet (e.g. #808080). Also, it contains a chart of the 216 Web-safe colors and each is represented as a single-digit Hex triplet (e.g. #999).
CHEAT_SHEETS

RGB Values for Macbeth Color Checker

CHEAT_SHEETS

Another html versions of Macbeth

Dreamweaver

DreamWeaver CS4 Keyboard Shortcuts (PC)

CHEAT_SHEETS

Illustrator

Adobe Illustrator CS4 Shortcuts (MacPC)

CHEAT_SHEETS

Working with older verisons – these may be useful then.

  • Adobe Illustrator CS3 Shortcuts (MacPC)
  • Adobe Illustrator CS2 Shortcuts (MacPC)

Indesign

Adobe InDesign CS4 Keyboard Shortcuts (MacPC)

css-cheat-sheet

  • Adobe InDesign CS3 Shortcuts (MacPC)
  • Adobe InDesign CS2 Shortcuts (MacPC)

Photoshop

Photoshop CS3 Keyboard Shortcut

css-cheat-sheet

Photoshop CS4 Shortcut Cheatsheets

css-cheat-sheet

Brush Tool cheatsheetush Tool cheat sheet for Photoshop

css-cheat-sheet

Adobe Photoshop Quick Reference Guide

css-cheat-sheet

Black & White Cheatsheet For Photoshop

css-cheat-sheet

Photoshop Quick reference card

css-cheat-sheet

Photoshop Lasso Tool Cheat Sheet

css-cheat-sheet

Photoshop Toolbox Reference

css-cheat-sheet

Keys for using the Layers palette

css-cheat-sheet

Working with older verisons – these may be useful then.

Flash

Flash CS4 Keyboard Shortcuts(PC and Mac)

css-cheat-sheet

Working with older verisons – these may be useful then.

  • Flash CS3 Quick Reference (PCMac)
  • Flash MX Quick Reference (PCMac)

ActionScript 3.0 Top Level Cheat Sheet

css-cheat-sheet

http://creativetechs.com/tipsblog/photoshop-cs4-shortcut-cheatsheets/

{ 15 comments… read them below or add one }

Amos September 15, 2011 at 11:08 am

I like this web site as well as have saved as a favorite it. I‘ll turn to learn in additional information on my trip

Reply

text spy May 29, 2011 at 1:25 pm

This is an awesome list. I am a beginner and it had helped me out a lot to understand what i was looking at. Will certainly share it. Thanks!

Reply

cheap custom jerseys May 19, 2011 at 9:05 am

40 Must Have Cheat Sheets for effective Web Designers

Reply

IT Rush May 9, 2011 at 3:55 pm

Interesting, love these must haves even though I’m not a web designed cause it will really help a lot. Thanks

Reply

niche reaper May 2, 2011 at 3:23 pm

I have greatly benefitted from the information you have provided.

Reply

Ashley@smallbusinessideas March 23, 2011 at 5:59 pm

I’ve only recently begun designing and I find these cheats extremely helpful. Especially for a newbie. Thanks for this resource.

Reply

Benjamin Edwards September 30, 2010 at 8:51 am

i use adobe illustrator a lot and i really love its great freatures`-.

Reply

Hayden Bennett August 11, 2010 at 7:59 am

Adobe Illustrator has more features than its competitors *

Reply

Karen July 16, 2009 at 10:26 am

Hi,

I work for a web hosting site, which gives detailed information about different services and packages about hosting.

I came across your website : tripwiremagazine.com. And I find it very relevant to my client’s site.

I would like to have your co-operation, which I believe will help us to increase the productivity of both our sites.

If you are interested do get back to me. Awaiting for your positive reply.

Regards,
Karen

Reply

Fuad Ahasan Chowdhury June 29, 2009 at 9:55 am

This is really a must have.. thanks a lot for sharing this one. :)

Reply

tripwiremag June 29, 2009 at 12:09 pm

@Fuad, thanks for the feedback. It is really great that you can use it.

Reply

webmasterdubai June 28, 2009 at 8:07 am

really nice and informative post and cheat sheets. i really love it.

Reply

Dainis Graveris June 28, 2009 at 7:58 am

beautiful work, must have list for every designer, who’s serious about his profession!

Reply

Alisa Rogers June 26, 2009 at 12:56 pm

Great blog! Keep up the great and fabulous work!

Reply

tripwiremag June 26, 2009 at 1:31 pm

@Alisa: Thanks for the positive feedback it’s very appriciated.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 34 trackbacks }

Previous post:

Next post:


Web Analytics