" />

GDT 150 Design for the Internet: Fall 2001

Class Notes 9.20.2001

Working in Photoshop

Raster, pixel based graphics

Setting up document

Resolution: 72ppi
Canvas size: 600px by 600px or 750px by 600px
RGB color

Text

Graphical text: generally anti-aliased (crisp or smooth)
Use any font that you like

To simulate html text: use text tool as paragraph, so you can resize width easily. Choose an appropriate font:

Serif: Georgia, Palatino, Times
Sans Serif: Verdana, Arial, Helevetica, Geneva

Set anti-aliasing to none, tracking to 15 or so, fractional widths off

Use lorem ipsum:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Color

If you want to use websafe colors, load Visibone palette into swatches palette, check Websafe in color picker

Tool settings

Rectangular Marquee tool, line tool, shape tool (if shape is square) should have anti-aliased unchecked.That way you don't get anti-aliased edges (unless you want that)

General Design Considerations

Keep it flat

Flat color compresses better than gradient/ changing colors

Try not to use:

Drop shadows
Bevel / Emboss
Gradient tool
Glows
Anti-aliased shape edges
etc.

Design Flexibly

Allow for vertical expansion if you have html text on the page

Remember that users can over-ride much of what you do as a visual designer--just accept it

Remember Navigation

Interface / Navigation is something that absolutely must be considered from the very beginning -- big difference from print (interactivity)

Navigation typically is placed along the left, or along the top of the page. It's also fairly common to be at the right. (Remember, there are no rules -- if you can put it in the middle of the page, and it works, that's fine)

Getting file ready to post online

We're going to post a purely graphical version of our first page on our class homepage. To do this we need to save the photoshop file in a format that can be read by a browser: gif or jpeg.

File > Save for Web
Choose gif, 256 colors
Save to your public_html directory

Make a link to the graphic ( links can point to graphics, too, not just html files: <a href="assignment2.gif">Assignment 2</a>