Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 200
Free Web Template Design Tutorial - Free Web Templates @ Template Hunter

Free Web Template Design Tutorial


Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122

| Main | Template Blog | Webmaster Resources | Video Tutorials |


Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Template Offers
7,500 + Templates
osCommerce Templates
Template Membership
100's of Templates
Dreamweaver Templates

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Free Web Templates

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 21

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 23

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 25

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 27

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 29

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 31

Strict Standards: Non-static method remositoryUtilities::remos_get_module_parm() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 33

Strict Standards: Non-static method remositoryUtilities::remos_module_CSS() should not be called statically in /home/temphunt/public_html/modules/mod_remositorycat.php on line 61
CategoryeCommerce Templates(2)
CategoryFree Business Templates(4)
CategoryFree Portal Templates(1)

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Main Menu
Free Templates Home
Blog Templates
Dreamweaver Templates
Flash Templates
Logo Templates
Mambo Templates
Swish Templates
Buy Web Templates
View All Templates
Video Tutorials
Webmaster Articles
Write for Us
Advertise
Download Our Toolbar
Contact Us
Search
Link to Us
Webmaster Resources
Webmaster Feeds

Free Templates Home arrow Webmaster Articles arrow Web Design arrow Free Web Template Design Tutorial

Template Blog



Strict Standards: Non-static method mosMainFrame::sessionCookieName() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 34

Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/components/com_content/content.php on line 36

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method HTML_content::show() should not be called statically in /home/temphunt/public_html/includes/Cache/Lite/Function.php on line 114

Strict Standards: Non-static method HTML_content::_Itemid() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 444

Strict Standards: Non-static method HTML_content::_linkInfo() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 447

Strict Standards: Non-static method HTML_content::Title() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 462

Strict Standards: Non-static method HTML_content::PdfIcon() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 465

Strict Standards: Non-static method mosHTML::PrintIcon() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 468

Strict Standards: Non-static method mosAdminMenus::ImageCheck() should not be called statically in /home/temphunt/public_html/includes/joomla.php on line 2245

Strict Standards: Non-static method HTML_content::EmailIcon() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 471

Strict Standards: Non-static method mosAdminMenus::ImageCheck() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 713
Free Web Template Design Tutorial
Strict Standards: Non-static method HTML_content::EditIcon() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 615
Print E-mail

Strict Standards: Non-static method HTML_content::Section_Category() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 503

Strict Standards: Non-static method HTML_content::Section() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 738

Strict Standards: Non-static method HTML_content::Category() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 741

Strict Standards: Non-static method HTML_content::Author() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 506

Strict Standards: Non-static method HTML_content::CreateDate() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 509

Strict Standards: Non-static method HTML_content::URL() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 512

Strict Standards: Non-static method HTML_content::ModifiedDate() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 528

Strict Standards: Non-static method HTML_content::ReadMore() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 531
Written by Administrator   

Strict Standards: Non-static method HTML_content::TOC() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 518

Learn the techniques to design your own web template

Designing a web template takes some initial planning. You need to think about the type of site you are designing. Will it be a business site, information portal, or eCommerce site? This will dictate the layout of the template. Next you will need to consider your target audience. This will help you decide the color scheme. Color theory is very important to web template design. If you are creating a template for a fantasy football site, you do not want to make it pink and purple with little hearts everywhere. You will want to make it with muted colors and square edges, so it will appeal to a predominantly male audience. Soft edges and lots of color (mostly pastel) works better for a female audience.

In this tutorial we will be designing a portal Template Blog. The layout I chose is a 4 column layout that will allow for various navigation elements along with space for advertising.


Click for larger view
Click any thumb in this tutorial to see a larger view
To download this Template Downloads" and choose Portal Templates

This template will stretch for all monitor resolutions and shrink down to fit a 800x600 resolution (for those that are still in the dark ages). The first step is opening Photoshop.

Designing a Template in Photoshop

You will need a basic understanding of how to use Photoshop, as this is a tutorial on designing web templates, not a Photoshop Tutorial. So where do we start? After I have determined the type of site I will be creating I almost alway start with a new image with a transparent background that is 780 pixels wide by 520 pixels tall.

Click for larger

The next step is to create your Layer Sets. I like to use Layer Sets to help organize my layers as some designs can contain 30 or 40 layers. On the top goto "Layer" select "New", and a flyout box will appear, choose "Layer Set".

Click for larger

I like to create a layer set for each area of the site.

Click for larger

It is helpful to break down the design into different areas. By having different layer sets for the different areas of the template, it will make it a lot easier to find a particular layer later on.

Setting Up Your Guides

Now that we have our Layer Sets in place it is time to set up your guides to help you layout the template. These guides will be used later to slice up your Photoshop template in ImageReady later on. Using the move tool move tool, drag your guides from the ruler area to where you want them. Here are the guides I used for this tutorial.

Click for larger

I know it does not look like much now. I will show you how to make it a work or art. The first part we will create is the header. This will have your logo, our network links and some basic navigation. It will also have space for a 468x60 banner for advertising.

Creating the Template Header

The portal template we are designing has a techy look to fit the portal theme. It will use gray with red accents. Here is a look at the header so far, as well as the layer that make it up.

Click for larger Click for larger

After the template design is complete the gradient area on the right will contain our 468x60 banner. I started by creating the shape at the top of the header that will have our network links in it. Then I created the shape at the bottom of the header where our bread crumbs will be. To create the shape of the gradient I made a selection of the whole header area, then holding the Ctrl key and the Alt key, I clicked the layer for the top shape and the breadcrumb shape. This will subtract those areas from the selection to leave the rest of the area for the gradient. Keep in mind that each piece we make has its own layer. After applying the gradient to the selection, I left the selection, added a new later that was filled with a pattern. The pattern is a 9x9 pixel transparent square with a 1x1 pixel white dot. By using a pattern I can fill an area with what ever I choose. Then I got rid of the selection (Ctrl D) and added a layer mask to the dots. This is necessary to so that we can make the right end of the header tile to stretch with different screen resolutions. To do this I choose the Add a Mask button on the bottom of the Layer Pallette . To create the layer mask you will need the gradient button it will automatically change to the default black and white colors, and drag the gradient tool from the far right edge to the right of the logo. This layer mask will gradually fade the dots from the right side, so we can later create a background image that will tile.

Now our header is complete. It is time to create the 4 columns.

Creating the Columns of the Template

Creating the columns is easy. I made a selection that was 120 pixel wide and filled it with a light gray color (#E6E6E6). Next in the right column I want it to be white, and I needed something to seperate it from the content area. I decided a dotted verticle line would do the trick. I made a 1 pixel wide selection that was as tall as my previous gray background for the left column. Next I filled it with a pattern that is 1 pixel wide by 10 pixels tall. The bottom pixel of that area is colored red. This will give us a verticle line of red dots that are spaced by 9 pixels. I duplicated that layer and dragged the duplicated layer to the left column Layer Set. This way we have some symmetry. Here is how it looks.

Click for larger Click for larger

Creating the Template Footer

I wanted the footer of our template to match the header, yet it can't be an exact duplicate. That would just show no originallity. I made a selection of the whole footer and filled it with the same gradient used on the header. While the selction was still there I added a new layer and filled it with the white dots pattern we used earlier. Next I created a shape like the breadcrumb area by using the polygon lasso tool . After I made the section I clicked on the gradient layer and hit the delete key. Since our background is white we end up with a nice white area for text links later on. Now it is time to create the red accent shape for the footer. Again using the polygon lasso tool I created the shape and filled it with red. Here is what the template looks like now.

Click for larger

Now it is time to slice up our Photoshop image using ImageReady to create our HTML template.

Slicing Your Template Using ImageReady

The way a person slices a template really depends on how they build their HTML templates.I have found it is better to embed tables inside of other table cells instead of using rowspan or colspan. Some browsers are not able to display that code properly.

The first step is to import your image into ImageReady using the Jump to ImageReady button . Once in ImageReady you have your guides in place, Choose the "Slices" button at the top, and select "Create slices from guides".

Now you have all your slices created for you.

Click for larger

The image you see above has all the slices joined to create the different elements of the template. This is done, so that it will fit our HTML layout. Now that the slices are grouped I also named them so that I would know which image I need when I am designing the HTML layout. Using the larger version of the image above you can get an idea of how this site will be created in HTML. You will see that the top row has 3 slices. The left slice will be a background image for that cell. This way we can place a few text links in that area. Slice2 is a triangle spacer, and Slice3 is not used. The reason it is not used is that it is easier to make the background color of that cell match the gray of the image. This way you have the color without needed an image background (this will lessen the overall download time).

The next row of slices has 3 slices. Slice4 is where your logo is. Slice5 is the background for the 468x60 banner, and Slice6 is going to be a background image we will use to tile in a cell. This way the design is consistant for all screen resolutions. The row below the logo contains 2 slices, Slice7 and 8. Slice7 will be used as a spacer. Again Slice8 will not be used. We will simply use the same color as the background of that cell.

Now to create the 4 columns we will actually be using a table with 7 columns. Starting from the left, the first column will be our navigation area. All you have to do is use the gray color of a background of that cell. Next to that is the verticle line of red dots. Place the image vert-red-dots.gif as the background of that cell. Inside that cell use the spacer.gif image. This will allow the template to grow in height and still have the design we want. The next 3 columns will make up the split content area. The middle of these 3 columns do the same thing you did for the second column using the vert-red-dots.gif as a background. The other 2 columns of the content area will be set to 50% width. This way they will stretch evenly for larger screen resolutions. Next you will need to create another vertical seperator using the vert-red-dots.gif image as you did before. Lastly the right column is simply set to 160 pixels. This column will be used to place advertisments on.

Creating the Footer

The footer is made up similarly to the header. Slice14 is the small version of your logo. I like to do this to reenforce the branding of a company. Slice15 will be used over the open cell for more text links. Slice16 is going to be used as a background image so that it too can tile for larger screen resolutions.

The Extras

Now we have a working HTML template. There a few more details that make this template pop. First we are using a linked Cascading Style Sheet to control the formatting of the text, the links and it also controls the background image for the site. Using a style for this we can make it tile only on the x-axis. This is how we create the background. the bg.jpg image is only 9 pixels wide, so by tilling on only the x-axis it will cover the entire background no matter how large your screen resolution. To create the navigation in the left column another image was created for the seperator (menu-spacer.gif). This is used in a cell below each text link to create the lines you see.

Well this concludes our Free Web Template Tutorial. Feel free to leave your comments or questions in the comment box below. Some of the items involved with this tutorial were condensed. You should have a working knowledge of Photoshop to create some of the techniques used to create this Template Downloads area.

 
Strict Standards: Non-static method HTML_content::Navigation() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 542

Strict Standards: Non-static method mosHTML::CloseButton() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 545

Strict Standards: Non-static method mosHTML::BackButton() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 548

Related Items


Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Tools
Bookmark Website
Bookmark Page
Make homepage
Print Page

Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Most Recent


Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Popular

Advertisement


Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Webmaster Tip

Strict Standards: Non-static method HTML_content::show() should not be called statically in /home/temphunt/public_html/modules/mod_newsflash.php on line 35

Strict Standards: Non-static method HTML_content::_Itemid() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 444

Strict Standards: Non-static method HTML_content::_linkInfo() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 447

Strict Standards: Non-static method HTML_content::Section_Category() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 503

Strict Standards: Non-static method HTML_content::Section() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 738

Strict Standards: Non-static method HTML_content::Category() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 741

Strict Standards: Non-static method HTML_content::Author() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 506

Strict Standards: Non-static method HTML_content::CreateDate() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 509

Strict Standards: Non-static method HTML_content::URL() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 512

Strict Standards: Non-static method HTML_content::ModifiedDate() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 528

Strict Standards: Non-static method HTML_content::ReadMore() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 531

Strict Standards: Non-static method HTML_content::TOC() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 518
Use a linked CSS (cascading style sheet) for formating to make site wide changes easy.
 
Strict Standards: Non-static method HTML_content::Navigation() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 542

Strict Standards: Non-static method mosHTML::CloseButton() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 545

Strict Standards: Non-static method mosHTML::BackButton() should not be called statically in /home/temphunt/public_html/components/com_content/content.html.php on line 548
Advertise on Template Hunter

Strict Standards: Non-static method mosCache::getCache() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 133

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Login Form





Lost Password?

Strict Standards: Non-static method modules_html::module2() should not be called statically in /home/temphunt/public_html/includes/frontend.php on line 166

Strict Standards: Non-static method modules_html::modoutput_table() should not be called statically in /home/temphunt/public_html/includes/frontend.html.php on line 122
Who's Online
We have 1 guest online

Template Tuning
© 2002-2015 Template Hunter