Manager's Lunch – Page 1 of 3
This tutorial shows you how to use Photoshop to make a website layout that features several letters, a sandwich on a plate, and a smouldering cigar.
Overview
This is what the finished product should look like.
In the next step, we'll begin the tutorial.
1 – A felt surface
At the time of writing this tutorial, it's currently necessary to design for screen widths of 1024 pixels and above. This will change over time, so you may wish to change your choice of image width. I've used a width of 900 pixels here, and a height of 500 pixels.
Create a new image, by clicking File > New. Put in 900 as a height, and 500 as a width, and press OK.
Choose a darkish green colour, and fill the image. (I used #355400 here.) You can use the Paint Bucket to do this, or just press Alt+Backspace.
Click Filter > Noise. Set the Amount to 2%, choose Gaussian and Monochromatic, and then press OK.
2 – Envelopes
Choose the Rectangle Tool. (It may be hidden under other Shape Tools.) Pick a tan colour. (I used #F2E2A1 here.) Make sure Shape Layers is selected (at top left of screen). Draw an appropriately-sized envelope.
Right-click this layer in the Layers window, and click Blending Options. Select the following:
- Drop Shadow
- Outer Glow (Blend Mode: Normal. Opacity: 12%. Colour: black. Spread: 0%. Size: 3px.) This just puts a small extra shadow on the left side of the envelope, so that the envelopes don't blend into each other.
- Gradient Overlay (Opacity: 17%.)
- Pattern Overlay (Blend Mode: Overlay. Opacity: 16%. Pattern: Mountains. If you can't find this pattern, click the little arrow. It's in the Rock Textures group.)
- (Leave all other settings on the default setting.)
Use the Type Tool, to write a label on your envelope. (These envelopes will be the buttons that people click on, to navigate your website. I used colour #252729 here.) I used the Chopin Script font. To use this font, copy it into your Windows/Fonts folder.
Create a new Layer Set, and drag your rectangle and text layers into it.
Right-click the layer set, and click Duplicate Group. Do this twice.
For each of your layer sets, press Ctrl+T to transform it. Grab the corner, and rotate it a bit. Drag the envelope to an appropriate place. Press Enter when you're done.
3 – A tray to rest a cigar on
Choose the Rounded Rectangle Tool. Set the Radius to 15px. Pick a light blue colour. (I used #68C3DA here.) Draw an appropriately-sized tray. Then press Ctrl+T to rotate it, and move it to a logical place.
Right-click this layer in the Layers window, and click Blending Options. Select the following:
- Drop Shadow (Distance: 11px.)
- Bevel and Emboss (Style: Inner Bevel. Soften: 8px.)
- Gradient Overlay (Opacity: 38%. The gradient should be a black-to-white coloured gradient.)
- Stroke (Size: 5px. Fill Type: Gradient.)
