Skip to content

Web Page Layout in Photoshop and ImageReady

Background Layer
Quick, easy step.

Create a new layer, fill it white, move it to the bottom. This will be your background layer.

Drop Shadow
Right click on the gray layer in the layer palette and select ‘Blending Options’. (It may be called curves, it depends on which of the two layers you actually right clicked on before merging.)

Select ‘Drop Shadow’. The only change I made was to change the angle to 135, but this is totally a personal preference.

Click OK, and the drop shadow is there.

Slicing it up
Next we need to create the slices that will become the individual images.

You need to create 3 slices.

  1. From the top left corner to the 4th horizontal guide over to the 4th vertical guide
  2. From the 4th horizontal guide at the left edge to the 8th horizontal guide on the 2nd vertical guide
  3. From the upper right corner to the 4th horizontal guide and over a few pixels. The width isn’t critical as this image will be repeated through CSS.

Under the File menu, select ‘Edit in ImageReady’.

Pages: 1 2 3 4 5 6 7 8 9 10

Published inProgramming

One Comment

  1. […] It happens about once a year. I get this urge to redesign one of my sites. And this one with its wavy lines just seemed due. So here is my new design. As you can probably tell I’m on a minimal design kick right now. […]

Leave a Reply

Your email address will not be published. Required fields are marked *