How to Create your Screen Comps for Project 3B

Working on screen comps in-class this Thursday. Come prepared with a screen comp that is at least 25% designed.

Your screen comps will be based off your sketches and wire-frames. Your screen comp defines exactly how your web site will look. You will design your screen comp in Photoshop. Photoshop will allow you to design in the web’s native units (pixels), color mode (rgb/hexadecimal) and image type (raster as opposed to vector).

Steps to start your Photoshop file:

  1. Create a new Photoshop file
  2. Set width to : 1024 pixels (height can be any value over 768 pixels)
  3. Resolution: 72
  4. Color Mode: rbg
  5. Create a 12 column grid with 20px margins
  6. start designing your web page(s)

To create a 12 column grid with 20px margins, download guideguide, a Photoshop plugin.  And follow the instructions on how to install the plugin.

How to install and use Guide Guide.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s