Leafy Villa , slice layout photoshop

Leafy Villa



1 – The basic website layout


Click File > New, set the height to about 600px, and the width to
about 750px.
Fill your background
with black.
On the View menu, click Show > Grid, Snap, and Snap To > Grid.
Set your
foreground colour to a brown colour (I've used 57430B). Choose the
Rounded Rectangle Tool, (it shares a spot on the Toolbar with various
other shapes.) Set the Radius to 30, and make sure the Shape Layers icon
at the top left of the screen is selected. Draw a large brown box, as
shown, then set your foreground colour to white, and draw a smaller box
inside it.
In the Layers window, right-click on the layer of your white box, and
click Blending Options. Give the layer a Drop Shadow (Blend Mode:
Normal, Opacity 50%, Size 0. Leave all other options as default.) This
creates a solid-looking shadow, which fits the non-realistic colour
scheme of this website design. Also give it a Stroke (Size: 1, Opacity
50%.)


2 – Adding a website header and a menu


Add in a dark
green (I used 162B02) menu bar, the same way you added the white and
brown areas.
Go back to the View menu, and turn off Grid and Snap.
Right-click your white layer, and click Copy Layer Style. Right-click
on your new green layer, and click Paste Layer Style. Then right-click
on your green layer again, and choose Blending Options, and add a
Gradient Overlay (Mode: Overlay, Opacity 62%.)
Use the Type Tool to
type in a header. Use the Character window (Window > Character) to
change text styles. I used Palatino Linotype and Century Gothic fonts
here, in black, and the same brown as before. To create the lines, I
just typed in a line of spaces above Leafy Villa, and then gave it an
underline. In the Character window, I also increased the Tracking
(letter spacing) of the larger text to 700. (Don't increase the Tracking
of the last letter on the line, or it will extend the underline.)
Use the Type Tool to
put in white text on your green menu. I've used Palatino Linotype here
again. Shrink your text size down so that your longest line fits well
within the menu area.


3 – Creating a "pair of leaves" Photoshop brush


Click File > New, and create an image about 400px wide, by 200px
tall.
Set your foreground colour to black.
Click on the Pen Tool.
(Make sure you choose the Pen Tool, not the Freeform Pen, or anything
else. They all share a button.) With Shape Layers still selected at the
top left, click the Pen tool, to make a shape as shown. If you like, you
can just put in the middle points and end points first, and then click
on the lines to add points afterwards.


4 – Creating a "pair of leaves" Photoshop brush


Now hold Ctrl, and drag
the points that are half-way up the arm away from each other, to create
the shape shown. Press Enter when you're done.
Click Edit > Define Brush Preset, and give your new brush a name.
(In Photoshop CS4, this option may not be visible. If not, choose a the
Essentials workspace, right at the top-right of the screen







1

5 – Adding a path for a vine


Go to the Paths
window (Window > Paths, if you can't see it), and click to create a
new Path. You can go back here to find your paths if they disappear.
Use the Freeform Pen
Tool to add points, to make a path, as shown. You can select the points
or move them, by holding Ctrl while you click or drag them.
To help connect the parts of your image, make the vine slightly
overlap the header text.


6 – Stroking the path


Create a new layer.
This button is at the bottom of the Layers window.Choose the Brush Tool.
In the Brushes window (Window > Brushes, if you can't see it), change
the settings for the brush.

• Brush Tip Shape > Brush: "Hard Round 5", which
  should be the third brush in the window.
  
• Shape Dynamics > Control: Fade, 500 steps.
  (This will cause the Brush to shrink to zero size in 500 applications.)
  

Set your foreground colour to the same dark green as was used for the
green menu area (162B02).
With any Pen tool
selected, right-click on your path, and click Stroke Path. Choose
'Brush" in the window that pops up. This should give you a tapering
green vine, as shown.


7 – Adding leaves


Create a new layer.
Choose the Brush
Tool, and change its settings again.

• Brush Tip Shape > Brush: the "two leaves" brush
  you made earlier, Diameter 54px, Spacing 120%. (Change the Angle if
  your vine isn't horizontal. You want your leaves to look like they're
  coming out sideways from the vine.)
  
• Shape Dynamics > Size Jitter: 20%, Control:
  Fade, 40 steps, Minimum Diameter 15%, Angle Jitter 8%. (Increase the
  Fade steps if your vine is longer, or your leaves are getting small too
  quickly.)
  
• Color Dynamics > Hue Jitter 25%, Saturation
  Jitter 13%, Brightness Jitter 13%, Purity +70%. (These settings make the
  colour of each pair of leaves vary randomly. A higher "Purity" causes
  smaller variations to be more likely, so most of your leaves will be
  green, while only a few will be yellow or brown, rather than an even
  distribution of each.)
  

Set your foreground colour to a darkish green (I used 305314.)
Look in the Paths window to retrieve your path, if it's gone away.
With any Pen tool
selected, right-click on your path, and click Stroke Path. You should
get a nice assortment of leaves, as shown.
In the Layers window, drag your vine layer above your leaves layer.


8 – More leaves and vines


Repeat the previous steps another three times, to create more leafy
vines, all originating from the top left. Remember not to make the vine
curve too much (like round a corner), because you can't make the leaves
turn with it





2

9 – Adding a photo


Find a large photo,
and drag it into your image, with the Move Tool.
In the Layers window, drag the photo so that it's just above your
white layer.
Press Ctrl+T to transform your picture. Hold Shift, and drag a corner
in. (Holding Shift stops the image from distorting.)
Click Layer > Create Clipping Mask. A clipping mask can't extend
outside the layer below it. In this case, it means that the photo won't
go outside the white layer. (The whole photo is still there, though, so
you can still move it around.)


10 – Brushing some edges


Create a new layer.
Click on the Brush
Tool. Choose a diffuse round brush (I used Soft Round 45.) While holding
Shift (this makes the line straight), paint a dark green (or other
appropriate colour) line across your image, towards the bottom. This
area will be an area that will expand as you put text in, in your web
editor. Make sure this line is below the level of your menu and all your
vines on the left.
Set your foreground
colour to white, and paint out the left side of the image (again holding
Shift, so your line is perfectly vertical.)


11 – Slicing up the image


Click on the Slice
Tool (it shares a spot with the Crop Tool.) Use it to slice up the
image, as shown. Note the two very narrow (one pixel tall) slices. I've
put a red circle around the point where they meet. Each of these slices
will be a repeated background. You may need to zoom in (Ctrl +) to get
this right. Slices 04 and 05 won't be used.
Click File > Save for Web, and save each slice. (JPEG, quality 60
is best

Set the longer one-pixel slice as the background of this cell. Put the header (01), and menu (03) slices into this table. Right-click on the menu image, and set its word-wrapping properties, so that text wraps around it. You'll also want to make the text on the menu into hotspots / image maps, so that you can click on that part of the image, and be taken to the appropriate page.	Put your picture (02) into this cell. Set the other one-pixel slice as the background of this cell.
Put your footer (08) into this cell.

12 – Putting the slices together in a table


If you use CSS, and not tables, then you already know how to do this,
so you can skip this step. Your adventure ends here. :)
There are many different web editors around, so I can't give precise
instructions for how to put your website templates together. It should
be fairly straightforward though.
Open up your web editor, and insert a table, two rows high, and one
column wide. Set its borders and padding to 0.
You'll need to set the Vertical Alignment to Top for all the cells in
this table.
Set the background of your page to black.
Now just make multiple copies of this page, link them together
(through your hotspots / image maps), and edit each one, before
uploading to your web hosting provider.




3-3