Step 1
For this template, I used the document size: 1024px by 768 px as that is the defacto resolution right now.
Step 2
This is the folder structure I like to use when creating my web templates.Header, Body, and Footer sub-categorized by he individual elements within.
Step 3
I like to use a text-based logo for this template, so grab your favorite font and create your logo.For this one i used two different font sizes to emphasize the second word in the business title.
Step 4
Ensure that you have created the logo elements under the logo folder.If hey aren't there, ctrl-click them and drag them there.
Step 5
I added a scissors graphic to emphasize the theme of the template with a brush set I mentioned in the 'Resources' section above
Step 6
Using the horizontal line marquee tool, I drew a red stroke to serve as the header border.To create the gaps in the border, I used the rectangular marquee tool too delete random sections
Step 7
Using a smaller size of the logo font, I added the menu items in grey above the header border element
Step 8
To create the search box, I used the rectangular shape tool to draw the search area
Step 9
I used the parameters below in the blending options to give the box a color overlay of white
Step 10
I gave it an inner shadow using the parameters below
Step 11
Lastly, using black, I added a stroke to the outside for visiblity
Step 12
See the example of the end result below. Next I used a thinner version of the logo font to create the "Search Button".Using the same font throughout this website template ensures continuity of style in my opinion (especially important in minimalist styles)
Step 13
Using the one of the stock images mentioned above in the 'Resources' section, I added what will be the main body image
Step 14
Next, I created a layer mask, by clicking the layer mask button at the bottom of the layers panel
Step 15
Ensuring the layer mask is selected, grab the gradient tool (black and white), and draw a gradient to soften the left edge of the main body image as shown below
Step 16
To the left of the main body image, using the rectangular marquee tool, select an area to be the main site body and text area.Ensure that you have created a layer for this area first
Step 17
Using the 'Fill' function, fill the area with white
Step 18
On that layer, using 'Blending Options', create a gradient overlay using the parameters shown below
Step 19
Outside the blending options window, move the gradient to the upper right to achieve the effect shown
Step 20
In the layer style window, reduce the opacity to decrease the strength of the effect
Step 21
With the main content area still selected, create a 1px width stroke with the color parameters noted below
Step 22
Ensure that under 'Location' you have 'Center' selected to ensure that the stroke covers the outside border of the content pane you have created
Step 23
See below for the finished main content area effects
Step 24
I added another stock image mentioned in the 'Resources' section above to the main content pane area
Step 25
Holding ctrl and left clicking the image's layer will select the layer's contents.Click Select>Modify>Expand to bring up the expand selection menu and enter '3? as the value to expand the current selection by 3px
Step 26
Create a new layer with the selection intact and create a 1px red stroke to outline the image
Step 27
See rendered effect below
Step 28
Using the logo font, create a title and paragraph text for filler
Step 29
I repeated the steps above to achieve the effect below
Step 30
Similar the the header border, I created one for the footer area without the sections deleted from it to differentiate it from the header border
Step 31
Lastly I added my branding to the bottom right-hand corner
Final Product
