Monday, August 25, 2008
Build Your Own Web Gallery
A step-by-step guide with screenshots for building your first website
My page design in Photoshop. Notice that I set up guides for even margins and photo alignment.
The first thing we need is a rough draft of how the site will look. Sketch with software (or even on paper) an idea for the design. Consider the basic structure: how big the photos will be, how many per page, how they will be arranged and so forth. Don't forget to include navigation buttons-they're the principal way visitors interact with your site.
I use Photoshop for my sketching. An advantage of using Photoshop (or any graphics program that lets you create "slices") is that you can pretty much finalize your design in Photoshop and then slice up the page into the little image pieces that you'll later reassemble like a puzzle in the HTML code.
For our purposes here, though, we won't use slices. Instead, we'll create each graphic element as its own file so that you can follow along no matter what application you're using to create the graphics.
For this project, I started my sketch with a canvas of 900 x 600 pixels. In general, the width of your page is more important than the height, as pages can be easily scrolled up and down, but not as easily scrolled left and right in a web browser. 900 wide is a safe width for most screen resolutions.
Once you've got a rough draft of the design, you're ready to start building.
Page 2 of 19