Create for Web
Web design effects
Follow along with the steps the author took to create a navigation bar for the "Slime Factory" website. This shows how to mix metallic textures with gelatinous substances.
Getting Started!
Follow along with the steps I took to create the website for the "Slime Factory". This website mixes metallic textures with gelatinous substances.
The owners of the Slime Factory wanted a website theme that would match their company name, so they enlisted me to design it for them. The purpose of this tutorial is to show you some of the effects I used to make their navigation bar.
This tutorial goes through the steps I took in Photoshop to make that website. It requires Photoshop 6.0, 7.0 or above to be able to replicate every aspect exactly as shown.
In Photoshop, create a new image (779 pixels wide), and draw a small line with the Freeform Pen Tool. (Make sure you have the "Paths" option at the top left of the screen selected.) Ctrl+Click the line to select it. The line should have a small block at each end. Hold Ctrl and drag the blocks (points) apart, to extend the line. Add new points by clicking on the line (don't press Ctrl.) If you select a point (Ctrl+Click on it), you'll notice it has two "arms". By dragging the arms around (while holding Ctrl), you can change the curve of the line.
Try to make something similar to what I've made in the diagram above (feel free to vary it as you see fit). It's okay to go off the canvas at the left and at the top (press the "Maximise" button at the top right of the window so you can see outside the canvas.) However, it is very important that the two ends of the line are very close together, as they'll connect up in the next step to form an enclosed area.
Remember - always hold Ctrl when moving a point or an arm.
Adding Clouds and other Effects
With the Freeform Pen Tool still selected, right-click the line, and choose "Make Selection".
Choose a light green as your foreground colour, and a dark green as your background colour. Click Filter > Render > Clouds, and your area will fill with splotchy green.
In the Layers list, double-click on this layer, and the Blending Options screen will appear. Set the following options: (Leave all settings as default unless specified.)
- Drop Shadow
- Bevel and Emboss (Style: Inner Bevel. Technique: Chisel Hard. Size: 2. Angle 131°, 39°. Global Light: Off. Gloss Contour: Ring ? Double, Anti-aliased: Off.)
- Gradient Overlay (Blend Mode: Color Burn. Opacity 29%. Gradient Black - White - Black - White. [Click on the little gradient bar and put in extra tabs to do this.])
- Stroke (Size: 3. Colour: #D8D8D8 [light grey].)
Spotlights
On the Toolbox, hold down on the Selection Tool icon, until a few other Selection Tools appear. Choose the Elliptical Selection Tool. (Shift+M will also work, if you're using Photoshop 7.0). With this tool, draw an upright elliptical selection.
Change your foreground colour to white, and select the Gradient Tool. Click on the visual representation of the gradient at the top left of your screen. (If you're not using Photoshop 6.0 or Photoshop 7.0, you'll need to click on the Options Palette, and click Edit.) Choose "Foreground to Transparent".
Apply the gradient inside your selected area, from top to bottom. Press Ctrl+D to deselect. Click Filter > Gaussian Blur, and set it to about 5.0.
Change the layer's Mode from Normal to "Overlay".
With the Move Tool, move the layer over the top of your green area. It should now look something like the spotlight at the centre-top of Diagram 3, above. With the Move Tool still selected, hold Alt, and move the spotlight somewhere else. This should copy it. After you've made a few copies, press Ctrl+T for each one, to rotate it a bit.
Creating something vaguely resembling an egg yolk
With the Freeform Pen, select an area as shown. After the pain of Step 1, creating a shape like this should be no problem. :) Right-click the line, and click "Make Selection".
Create a new layer.
Choose an orangey-yellow colour, and fill the area, using the Paint Bucket Tool.
Adding some Effects to the yellow area
In the layers list, double-click your yellow layer. Set the following settings: (Leave all settings as default unless specified.)
- Outer Glow (Colour: Black.)
- Inner Glow (Colour: Black. Opacity: 54%. Size: 13px.)
- Bevel and Emboss (Style: Outer Bevel. Size: 5. Soften: 1. Gloss Contour: Ring ? Double, Anti-aliased: On.)
- Contour
- Satin (Mode: Multiply. Opacity: 14%. Angle: 19°. Distance: 21px. Size: 32px. Contour: click on the little box, and change it so it looks like this.)
- Stroke (Size: 3. Colour: #D8D8D8 [light grey]. Position: Inside.)
A glossy coat
In the layers list, Ctrl+Click on the layer of your yellow area. This selects it.
Create a new layer.
Fill the area with a white, top-to-bottom "Foreground to Transparent" Gradient, like you did before.
Change this layer's Mode from Normal to Overlay.
Press Ctrl+T to Transform the area. drag the sides and bottom in a bit, as shown on the diagram.
In the Layers list, right-click this layer, and Duplicate it.
Change the Mode of the new layer from Normal to "Lighten".
Press Ctrl+T to Transform it, and bring in the sides and bottom again.
Menu text and a header
In whatever font you choose (I've used Flying Dutchman here), type in your header text in a very dark grey. In the Layers list, move it below your Lighten and Overlay layers. This makes it look like it's in with the yellowy substance.
In the layers list, double-click the text layer, and give it a Bevel (Style: Inner Bevel. Technique: Chisel Hard. Size: 29. Gloss Contour: Ring. Anti-aliased: On.)
Right-click on the layer and click "Copy Layer Style".
In an orangey-yellow colour, type in your menu text.
Right-click on the layer and click "Paste Layer Style".
Getting your design into a web page editor
If you're using Photoshop 6.0 or Photoshop 7.0, use the Slice Tool to draw boxes on your image. These boxes will each be saved as a separate image when you Save for Web. I'd recommend drawing one big box for your header, and one big box for your menu. There will be a big box of white space, but that doesn't matter.
Also, make sure you save two thin slices (I call them "slivers") at the right and bottom. These should be one pixel thick (I've exaggerated them here for clarity.)
Slivers are simply images that repeat indefinitely to fill up the whole width/height of the screen, regardless of the size of the screen.
Click File > Save For Web. Choose Jpeg, Quality 60.
In your web editor, Create two tables, one above the other. Set the top table to 100% width, sets its background to be the appropriate "sliver" image, and put your header image in that table.
Divide the lower table into two columns. The left column should be as wide as your menu image. Put your menu image in it, and set its background to be your sliver image. Depending on your web editor, you can use Hotspots or an Image Map to make parts of the menu into links.
The right cell should be around 500 pixels in width. If your cells aren't behaving, make sure the table's width is equal to the width of both cells added together.
That's it!
Oh, and there's no *real* Slime Factory. Well... there might be, but I don't really want to know. :)
