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.)
4 – A smouldering cigar
Create a new layer.
Use the Elliptical Marquee Tool to select a long oval shape. (Either vertical or horizontal.) The middle part of this selection will become the shape of your cigar.
Select the Brush Tool. In the Brushes window (press F5 or Window > Brushes if you can't see it), set the following options:
Brush Tip Shape (Choose one of the long, slanted brushes, with a size of about 20.)
Shape Dynamics (Angle Jitter: 100%. This will make each dab of the brush be at a completely random angle.)
Choose a brown colour, and start painting inside the selected area, except for at the ends. Continue doing this, but change your colour to a slightly different brown each time. You can use [ and ] to easily change the brush size. Once the area is full of solid colour, you can add some more colour variation, by setting the opacity of your brush (top centre of screen) to 50%.
Don't worry about making the cigar look cylindrical yet. Create a new layer. Move it above your cigar layer. Right-click it, and click Create Clipping Mask. This will make it share the Blending Options of the cigar layer. Using a variety of darker browns, paint in a half-burnt area, just before the burning end of the cigar. Create a new layer. Move it above the previous layer, and make it a clipping mask too. With a variety of reds and very bright oranges, paint in some burning embers at the end of the cigar.
5 – Finishing the cigar
Set some Blending Options for your cigar.
Drop Shadow
Gradient Overlay (Blend Mode: Overlay. Opacity: 64%. Reverse: Ticked. Style: Reflected. Choose an angle that's appropriate for the orientation of your cigar. It should look bright along the top, and dark at the edges.)
For each of these layers you've painted (and whenever you paint anything), you can easily change its overall colour, by using the Hue/Saturation window. Press Ctrl+U to bring it up, and play around with it.
Create a new Layer Set, and drag all these cigar parts into it. Right-click it, and click Merge Group. (You might also want to click Duplicate Group first, to make a backup copy of your cigar parts.)
Press Ctrl+T, and move your cigar into place.
Create a new layer.
Brush in some smoke, using the following Brush options. (I used colour #808080 here.)
Brush Tip Shape
(A diffuse brush, about size 35. Spacing: 100%.)
Shape Dynamics
(Size Jitter: 50%. Roundness Jitter: 50%.)
Color Dynamics
(Brightness Jitter: 50%.)
6 – A nice white plate
Set your foreground colour to white. Using the Ellipse Tool, hold shift, and draw a large circle.
Set some Blending Options for your circle:
Drop Shadow (Distance: 15px.)
Inner Glow (Blend Mode: Normal. Opacity: 100%. Colour: White. Choke: 0px. Size: 81px.)
Gradient Overlay (Opacity: 35%. Style: Radial.)
Stroke (Size: 5px. Fill Type: Gradient. Gradient: Change the colours to grey (I used #B6B6B6), and white.)
Set your foreground colour to a light grey. (I used #D6D6D6 here.) Using the Ellipse Tool, hold shift, and draw a smaller circle, inside the large one.
Set some Blending Options for this smaller circle:
Outer Glow (Blend Mode: Normal. Opacity: 100%. Colour: Very light grey (I used #E9E9E9 here). Size: 16px.)
7 – Baking some bread
Set your foreground colour to white. Use the Pen Tool, to draw a simple triangle shape, for the top slice of bread. Again, make sure Shape Layers (at the top left of the screen) is selected.
Set some Blending Options for your bread:Gradient Overlay (Opacity: 8%.)
Pattern Overlay (Opacity 10%. Pattern: Dirt. It's in Rock Patterns.) Sometimes texture choices don't make any sense. No one has to know it's a dirt sandwich though. :)
Create a new layer.
Use the Lasso Tool to draw a crust-shaped area. This might take a few attempts. The area should be thicker on the left hand side, and thinner on the right. You can always use Shift+Click, to add to your selection, and Alt+Click to subtract from it.
Choose a light tan colour (I used #E3C996 here), and fill the area, by pressing Alt+Backspace, or by using the Paint Bucket Tool.
Move this layer above the white bread layer, and apply some Blending Options:Drop Shadow (Distance: 2px. Size: 4px.)
Gradient Overlay (Blend Mode: Color Burn. Opacity 77%. Angle: 61°.)
Pattern Overlay (Opacity 10%. Pattern: Dirt.)
8 – Make yourself a sandwich
Create a new Layer Set. Put the sandwich parts into it. Right-click the layer set, and duplicate it.
Use the Move Tool to move the layer set of the second slice of bread downwards.
Change the Drop Shadow of the lower crust. It's very close to the plate, so its shadow will be less severe.Drop Shadow (Distance: 0px. Size: 5px.)
To create two different fillings for your sandwich, do the following process twice:
Choose an appropriate colour, and press Alt+Backspace, to fill the selection. (I used colours #D2FBA5 for the lettuce, and #A3556A for the meat.)
Add some blending options to your filling:Drop Shadow (Distance: 2px. Size: 4px.)
Gradient Overlay (Blend Mode: Overlay. Opacity 31%.)
Pattern Overlay (Mode: Difference. Opacity 35%. Pattern: Rust Flakes. It's in Texture Fill.)To finish off, I added a quick layer of lighting.
Choose the Gradient Tool, and set it to Radial Gradient (at the top of the screen.) With colours white and black, apply the gradient down the image.
9 – Getting the image into your web page editor
Click File > Save for Web & Devices. Choose JPEG, quality 60.
If you don't know how to put this image into a web page, I'd recommend setting the page background to black, putting a centred table on the page, and putting this image inside the table.Use the Rectangular Marquee Tool to select a long, narrow strip from the bottom of your image. Click Image > Crop, and then File > Save for the Web and Devices, again.
Set this new image as the background of your table, and then just start typing in the table, underneath the main image
discuss this topic to forum
