Dreamache's Random Design Tip #1

Status
Not open for further replies.

dreamache

New member
Jun 26, 2006
4,393
130
0
(I'll start posting these frequently every few days maybe.)

Design your site before you htmlize it

This is a big obvious for many people - but there are still people, especially those starting out, who try to design *while* html'ing. Meaning, they aren't really using an app like adobe photoshop to design the entire site/layout before they html, rather they piece together the layout with an editor like dreamweaver... That's a big "NO".

  • Use an app like photoshop, start a new document and based on the resolution you want your site to fit (lately I've been designing for 1024x768), and make the width no larger than around 990px to account for the vertical scrollbar width.. make the height whatever you want.
  • Use the paint bucket to fill in a new layer with any color and set the opacity to very low.. then hide the layer, and edit the canvas size to a much larger width (ideally a width that expands 100% across your maximized photoshop window, without it causing horizontal scrolls or shrinking the image to less than 100%.
Why do those things? because now, you can visualize what your design will look like expanded in a maximized browser - but you can keep within the maximum width by unhiding that layer to make sure the actual content fits within it. Or you can use guides though I've never messed with them (I ghettofy things sometimes)

Design *EVERYTHING* as it should appear in the browser, the absolute final product. To simulate real HTML text, make sure you specify "none" for the anti-aliasing method.

Once you're done, then it's simply a matter of determining what elements need to be actual images, and what can be done with html. Determine what can be used as BG's instead of selecting giant areas unnecessarily.

And there you have it, a random tip that I hope most of everyone else knows. I'll put more thought into a lesser known tip next time. :)


Discuss !
 


Status
Not open for further replies.