| Sunlight Web Design Tutorial By using some Clouds, Noise, a few adjustment layers, and some ornaments, this tutorial demonstrates how to create a website with a very nice, sparkling, sepia effect. Tutorial requires Photoshop 6.0, 7.0 or above.

1 - Creating a Noise Gradient Select the Gradient Tool (possibly hidden under the Paint Bucket Tool.) Click on the visual representation of the gradient, at the top left of the screen. Change the Gradient type from Solid to Noise. Click Randomize a few times, until you get a gradient that's not too contrasting, or too mild. The colour doesn't matter.
Apply the gradient sideways across your screen. Hold Shift to keep it straight.

2 - Adding Adjustment Layers At the bottom of the Layers Palette, click the "Create new fill or adjustment layer" button. Select Hue/Saturation. Set the Saturation to 7, the Lightness to -9, and change the hue until your image is as brown as possible. (This will depend on how your Noise Gradient came out.) Click OK.
Create a new Adjustment Layer, but this time, make it a Brightness/Contrast layer. Set it to -30 Brightness, and +80 Contrast.
Using Adjustment Layers allows you to go back and change these settings later. Using these same options from the Image menu makes them irreversible.

3 - Using Clouds for extra randomness Create a new layer.
Click Filter > Render > Clouds.
To add some realistic graininess to the image, click Filter > Noise > Add Noise. Set it to 4%, Gaussian, Monochromatic.
Change this layer's mode from Normal to Overlay.
Above this layer, create another Brightness/Contrast Adjustment Layer. Set it to Brightness +43, Contrast -21.

4 - Checking that everything's okay At this point, your Layers Palette should look like this (except that your Clouds and Noise Gradient will be different.)

5 - Little pictures The "sunlight" effect creates a good background, but it needs to be livened up a bit. Using some small, colourful pictures as navigation buttons is ideal here.
Creating the rounded edges for these pictures requires the Rounded Rectangle Tool.
Hold down on the Shape Tool, to get the Rounded Rectangle Tool. At the top left of the screen, there will be three little boxes. Click on the middle one (called "Paths".) Click File > Open, and choose one of the pictures you want to use. Use the Rounded Rectangle Tool to draw a rounded rectangle on your image. It will appear as a line (called a "path".)
Select the Freeform Pen Tool (or any other Pen Tool), and right-click your path. Choose "Make Selection", to turn the path into a selected area.
Press Ctrl+C to copy the contents of the selected area, then go to your main image we've been working on, and press Ctrl+V to paste the selection in.
Repeat this process to add another picture. While you have any Selection Tool selected, you can drag the selection outline to another image, so you can re-use it.

6 - Picture frames On a new layer, use the Rounded Rectangle Tool to create a large, black area.
To indent the pictures into the background, double-click their layer, and give them a Bevel. Choose Outer Bevel, Size 3.
Create a new layer.
To make the picture frames, Ctrl+Click on a picture layer in the Layers list. This should select an outline of the picture.
Fill the area with an orangey colour (I used #DEAE17)
Click Select > Modify > Contract. Set it to 5 pixels.
Press Delete. This will just leave a thin border around the picture.
Double-click on this layer in the layers list. Give it an Inner Bevel, with the Gloss Contour set to "Ring". This gives the frame a metallic shine.
Repeat this process to create your other frames.

7 - Highlights Add some white text to your picture buttons. I've used the Wendy Medium font here. Use the same font, and type in your header. I've used the Trebuchet font for the "Welcome" and "Latest News" headers. You might want to do these on a separate image, so they're not attached to your background. You could just type these in in your web editor, but they look better when they're done in Photoshop. Double-click your header text layers, and give them a standard Drop Shadow.
Create a new layer.
Look at the edge of the frames. You'll notice some nice sparkles have been added. To create these, select the Brush Tool and set your Foreground Colour to white. From the drop-down menu at the top left, select the 55-sized sparkly-looking brush. It's about 2/3 of the way down the list. Apply it to the edges of your frames in a few places.
|
|
This is the new website of Sunlight Studios.
Have a look at some of our works in our Gallery, or view our current web design projects in the Portfolio section.
New Photoshop Tutorials site added to our Portfolio Section. For information having your website design by Sunlight, please send us an email. |
|
8 - Saving for the Web Before finishing, and optional extra step is to use the Lasso Tool to select and delete a jagged strip from the bottom of your "sunlight" and Clouds layers, then give the sunlight layer a drop Shadow. Alternatively, if you know how, you can just cut out a horizontal "sliver" (a one-pixel slice of your image) that can be set as the background of a cell or table in your web editor, to fill up the whole height of the screen. If you're not familiar with these processes, just ignore this step.
Use the Slice Tool to divide your image vertically, into two halves. Then click File > Save for Web (Jpeg, Quality 60).
In your web editor, make a table with two cells. Insert the left half of the image into the left cell, and set the right half of the image as the background of the right cell (this is done so that you can type text onto it.)
Depending on which web editor you're using, you can then use Image Maps or Hotspots to turn the little framed pictures into links.
Done! :) |