Jewel

Archive for March, 2010|Monthly archive page

Coding a Band Website Created in Photoshop

In Web Portfolio on March 8, 2010 at 10:26 am

Band Website Series:

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Working ProofClick to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

Setting up the files

Read the rest of this entry »

Design a Band Website Layout in Photoshop

In Web Portfolio on March 8, 2010 at 10:20 am

Create the Photoshop document

1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.

Create the Photoshop document

2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Create the Photoshop document

Working on the rough background

3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. To do this, set your Foreground color to #C4C2AF in the Tools Panel. Then, with the Background layer selected in the Layers Panel, choose Select > All and then Edit > Fill, which will open up the Fill dialog box. Make sure that the value under Use option is set Foreground Color, and then press OK.

Read the rest of this entry »