10 Tips for creating a good template to HTML5

In this article we will talk about how to create a neat patterns on HTML5, combining good design practices and new tags HTML5.

Will examine the general recommendations relevant when creating any templates.

1. The first step – it is always a site planning in advance, with the development of all elements of its design on paper. In the long run it will save you a lot of time. When everything is ready on paper, we can already draw something on a flip chart to make possible adjustments.

2. When you are done with the purpose of the site and its overall concept, you should look around and see if there is already some templates or software that can make your life easier and speed up the design process. Do not reinvent the wheel.


Here are a couple examples of templates when working with Adobe Dreamweaver CS6. In this pattern, I chose the option “Fluid Grid” (floating net). In this case, the document type is automatically set in HTML5.


In this example, I decided to create HTML-template with 3 columns. Again note – the default document type exhibited HTML5.


Note that the templates are also present detailed comments, which facilitates their use. If you create a template for the iPhone, iPod Touch and iPad, We recommend that you look to the editor TopStyle 5.

3. When you are working on the design, do not neglect the code hints, if their use is envisaged in the program in which you are working.

When working with tags always watch carefully to cover the paired tags and avoid duplication of angle brackets. These things can often lead to incorrect display template.

4. The importance of commenting should not cause any problems, but we will go even further.

If you want to after you anyone could deal with your complex design, the words can often be enough, so use screenshots with captions to explain the features of your code.

In recent years, the complexity of software has increased markedly, and the program simply “bursting at the seams” on the heap of different functions.

As a result, we are faced with a situation where the interface is so complex and multi-level, that it is very difficult to find the desired item. Eyes get tired and miss some detail becomes simple.

When you create screenshots and use different ways to highlight important points, this problem is largely loses its relevance for those working after you. Alternatively, you can use for this purpose the program Snag IT.

Another step that you can use if necessary – is the creation of video and voice instructions. A huge advantage in this case is that a person can re-listen to the audio or watch the video as long as catch your thought and explanation.

5. When you are working with images, make sure that you specify values ​​for the attributes width and height, and the size of the image is indeed correspond to these values.

This is important for several reasons. If the specified height and width of the image corresponds to reality, you will not run into problems when scaling images. If these values ​​are no longer valid, it will lead to scaling.

While resizing will not exceed about 20%, the difference will be slightly noticeable, but the big difference you will get noticeable distortion: increasing pixel , loss of sharpness and color depth.

In the reverse situation – when these values ​​are lower than real – the picture will be compressed, reduced, which is not so critical. However, there are some problems.

If the image size is larger than necessary for display, then there is a waste of resources, since images take up more space and take longer to load.

As an example, you can insert images in a similar way:

<Img src = “img / landscape.jpg” width = “400” height = “300” />

6. Use alt tag for images. It will play a positive role in terms of SEO (search engine optimization) because Search engines also take into account the text of which is in this attribute.

Below you can see the same code, this time with the added tag alt:

<Img src = “img / landscape.jpg” width = “400” height = “300” alt = “Beautiful landscape” />

Write the alt something quite meaningful, because this text is also displayed on the screen when the display is turned off images.

7. When working with video, it is important to give the user control the playback process, so be sure to use the player with the control panel for a man to put the video on pause, rewind it, change the volume, etc. All this increases the usability and interactivity of your site.

8. When you create a reference think about search engine optimization.

Using a link with the text “click here” completely uninformative and useless in terms of SEO. A much better approach is to use important keywords as anchor text, for example:

<a href=”http://www.templatesurge.com/materials/121″ target=”_blank”> Counter visits to the site with their hands on PHP and MySQL </a>

Often used as an additional target attribute with the value “_blank” to link opens in a new tab or a new browser window.

Such a campaign is faithful and when choosing a domain name for your site. If possible, use the domain names that contain the main keywords that can most aptly describe the focus of your site.

9. If possible, try to reduce the number of tags div.

Instead, use the new HTML5 features for generating page layout, including such tags as: header, footer, nav, article, and others. In most cases, it will make your code more readable and intuitive.

10. And a final tip – use the valid code and check the appearance of your design in different browsers. It often makes sense to do this is not the end of the work, and at each significant step.

In this case you do not find yourself in a situation where it is not clear why something is not displayed as you expect, and will be easier to identify and correct any errors display.

At this the review is completed. Remember the important, fundamental things and create good templates.

Good luck!

Useful Tips about Template

Useful Tips:

→ You can change the headers and footers in a template of your choice. Field must not be less than 5 mm.

→ Use standard fonts such as, Arial, Book Antiqua, Century Gothic, Comic Sans MS, Courier New, Franklin Gothic Medium, Georgia, Impact, Lucida Console, Lucida Sans Unicode, Microsoft Sans Serif, Palatino Linotype, Sylfaen, Tahoma, Times New Roman, Verdana, Webdings, Wingdings.

→ If you want to divide the chapter or verse to place each on a separate page, instead of pressing the “Enter” / “Enter” use “Insert / Page Break” (“Insert / Page Break”). Try also that the text did not come close to the bottom margin of the template.

→ Make sure that the image does not extend beyond the field of the template.

→ Number of pages should not exceed: the hardcover – 800 pp .; with paperback – 560 p.

→ If you have something does not work or when converting to PDF text varies, send a Word file to us via email and we will help you prepare a printed image.

Clean Business Website Header


Welcome to the tutorial. I’ll be showing you how to make a simple but very stylish website header design.

(Click for larger image)


First start by making a new document for the header, I used a document size of 800 x 222 pixels.
With the Rectangular Marquee Tool make a selection at the top of the document sized 800 x 80 pixels, create a new layer then fill the selection with black.




Right-click the bar layer and go into the Blending Options, use the following settings:

Inner Shadow

Gradient Overlay

Your bar should now look like this:

Now add in the website name and sub text.

Apply the following layer styles to your text:
Drop Shadow
Gradient Overlay


Layer Styles Applied


Create a new layer. Now with the Rectangular Marquee Tool, again create a selection about 120 x 80 pixels somewhere on the right. Fill this selection with white (#ffffff)
Now erase away the bottom of the button either with the eraser tool or use a layer mask.

Now lower the opacity to about 60-80%.

Duplicate the button twice and move them along so they’re 10 pixels apart each way. Now add in your text!

The font I used above is called Tahoma, and the color is #bea47a. That’s pretty much it for the header bar.


Create a selection underneath the header bar (with 1 pixel space inbetween), my selection was 800 x 140 pixels, with 1 pixel space between the bottom of the document and the header bar.

Fill the selection with a gradient of #12b0fd to #0594df.

Open this stock photo up in Photoshop then drag it into your header document. Resize it then crop it to the blue rectangle’s area.
With a large, soft brush, erase away the right side of the stock image.



Lastly, change the layer mode for this layer to Soft Light.
Layer Mode Change


Create a new layer then make a selection inside of the blue header the width of all of the buttons combined.

Fill this selection with a gradient of #65aa32 to #4b8132.
Change the layer mode for this gradient layer to Overlay.
Now lastly for this section, add in some dummy text in the middle of the box you just made.
Feel free to add other little things, but that’s all I’ll be adding.

If you need the PSD for a part of the tutorial you didn’t understand, you can easily download it from here.



Professional Advertisement Banner

Hi and welcome to TemplateSurge.
In this Photoshop tutorial I’ll show you how to make a very stylish and professional 468×60 advertisement banner.


Ok, first start by making a new document, use a size of 468×60 pixels. That’s the size of the ad banner we’ll be making.
Fill the background layer with a #a5cbff to #01142f gradient.


Now you need to make the background a little more interesting. Download this abstract image from StockVault.net, put it above the background layer, change the layer mode to Screen and lastly lower the opacity to about 30-40%.
Your background should look similar to this now:


Duplicate the render layer then apply Filter > Blur > Gaussian Blur with an amount of about 2.0.
Also move the render around slightly, you can leave the layer mode and opacity alone if you want.
Blurred Render Layer


Create another new layer, and by now you should be naming your layers, because if you want to change things later on it might take you a while to find the layer you’re looking for. After you made your new layer, use the elliptical marquee tool to make a selection covering the right side of the document as shown below:


Fill this selection with a nice, bright gradient. The colors I used for my gradient were #fe9101 and #f62202.


Looks quite nice thus far, but nothing too special, is it?
Right-click the layer you just made and go into the Blending Options, apply the following layer styles:

Outer Glow
Inner Glow
Bevel and Emboss

Be sure to use the settings that i’ve shown in red, and you should have a result like this:


I also lowered the Fill Opacity for that layer to 95%, it doesn’t make much of a different, but you know, nice touches!


Create a new layer then make the selection around the orange section by holding ctrl and clicking the layer’s thumbnail.
After creating the selection, draw a black and white gradient inside.


After drawing your gradient, move the selection about 4 pixels to the right and press delete.


Lastly, all you need to do is change the layer mode for that layer to Overlay or Soft Light.


Now you can start adding in text. Since this advertisement banner is based on my Photoshop Tutorial website, I wrote in “PhotoshopStar” in large text, and beneath it I wrote “Free Photoshop Tutorials.”


In the above image I used the font “Helvetica Neue,” but I think that’s a font that costs a lot of money, so you might need to use another font.
After writing out your text, apply the following layer styles to the text layer(s):

Drop Shadow
Gradient Overlay

Your text should now look like this:

Now you’ll want to add some descriptive stuff into the right section of the advertisement banner, since this ad banner is for a Photoshop Tutorial sites, I added in some tutorial thumbnails.

Since it looks a bit bare, I also added this Stroke.
And that, is pretty much it for this tutorial!
Normally, you’d have the URL to the website, but in this case I wasn’t able to fit it in, and I don’t feel it was necessary either, as people will click the banner.
Thanks for reading this tutorial, we hope it was easy to complete, and we hope you enjoyed it.


For learning purposes only, you can download the PSD file from this tutorial from here.
If you liked our tutorial please digg!

Suns Logo

Part 1: The Purple Body

To start our suns logo we will have to find a desired image that we would like to vectorize. I have chosen to go with the image below. Please right click this image and copy it.

Suns logo

Now let’s open up Adobe Illustrator. Once you are in Illustrator open a new file. Let’s make our work space 500×500 so we will have enough room to trace our image.

Work space size

Once you have your 500×500 work space, go to Edit:Paste. This should place the Suns logo right in the middle of your work space. It might have zoomed in a bit too far however. To get it to one hundred percent you can go to View:Actual Size. If you are on a pc you can simply use the shortcut by holding down control and 1 at the same time.

Now that we are ready we first have to determine what the base shape is going to be. While looking at it you can see the purple base of the phoenix is the color on bottom. We will start by tracing this image.

Start by selecting the pen tool on your tools menu. If your tools menu is not displayed you can go to Window:Tools.

Pen tool

Now that we have the pen tool selected let’s get rid of both the front and background color. Do this by clicking the none icon on the tools menu.


Once this is done switch the colors by using the arrow next to the colors.


Once you switch the two collors click the none button again. Your colors should now look like this.


The last step we need to setup before tracing is setting up a new layer. Simply do this by clicking the new layer button on your layers menu. If your layers menu is not open you can go to Window:Layers.

New layer

I like to work at 200% when tracing. To zoom in go to View:Zoom In twice. Let’s start by clicking on the corner next to the grey box.

Purple step 1

For the next step we are going to click to the point up and to the left. When you click this point you have to hold the mouse down and drag up until your pen line matches the swoop of the wing.

Purple step 2

To start the next step you now have to click on the dot in the middle again. If you do not click on this dot Illustrator will assume you want to add to your curve, which you do not. By clicking this middle line it will save your curve and not add on to it. You will still have a line going threw your dot, but only to the bottom of this.

Purple step 3

Now we are going to click just before the circle and believe it or not this is a small arc, so you will have to once again hold the mouse button down and make a bit of a curve. If you are not zoomed in this will be almost impossible to see or make correctly.

Purple step 4

We once again will have to click the middle dot and then we can proceed. Now click the middle of the curve and drag the mouse until the curve matches up. Make sure to hold down shift so your line follows the curve exactly and will match up with the second curve to complete the circle.

Purple step 5

Once again we are going to have to click on the middle dot to start a new curve. Now click on the straight away and line up the second half of the curve. Make sure you hold down the shift key again.

Purple step 6

Once again click the middle dot and then make the next curve by clicking on the top point of the wing. You don’t need to hold shift for this. Shift is only used when you are completing things like circles that cannot be made in one curve.

Purple step 7

Now that you have got the hang of tracing the body try and finish the outside trace. Stop when you get to the phoenix’s last wing on the right.

Purple step 8

You should now have something like the image below.

Purple step 9

Now to complete this purple outline we just have to get around the bottom of the basketball. We aren’t going to trace around the edges because other colors overlap the purple in those areas and it wouldn’t look good if some purple was showing threw. So let’s met our next point to the edge of the basketball.

Purple step 10

Now click the bottom point of the basketball and make a curve using the shift button.

Purple step 11

Start by clicking on the middle point. After you do that click on the left most edge of the ball and fill in the rest of the curve without using the shift button.

Purple step 12

Once again click the middle dot and then connect it to your first point.

Purple step 13

Now click the eyedropper tool.

Eyedropper tool

Now click the dark purple anywhere on the phoenix. You should see your drawing fill with a dark purple.

Purple step 14

Now click the selection tool.

Selection tool

Use the selection tool and click anywhere around your logo in the white space. You should now have something like the image below.

Finished purple area

Now we are going to hide this by simply clicking the toggle visibility eye next to our purple layer. You will notice the eye vanishes as does the purple layer.

Toggle visibility

You should now be staring at the original Suns Logo. Next we are going to focus on the grey curves up near the phoenix’s head.
Part 2: The Grey Curves

Let’s start once again by creating a new layer. Make sure you are on “Layer 3”. Also, make sure you select “None” for both the foreground and background colors again. Select the pen tool and trace the first grey curve all the way to the left. Your image should look something like the image below.

Grey step 1

Once again use the eyedropper tool and select a grey color. Once it is filled in click the selection tool again and click somewhere in the white space. Trace and fill in the remaining curves. Once this is done hide the picture layer and unhide the purple layer. You should have an image that looks something like the one below.

Finished grey area

Next we are going to look at the bright orange area, the flames.
Step 3: Bright Orange Flames

Let’s start by hiding all of the layers except for the picture. Once again we need to select “None” for colors and have the pen tool ready. Let’s make another layer. Make sure you are using “Layer 3”. Let’s start at the edge of the flames in the bottom left.

Bright orange step 1

Once again use the pen tool to trace the outside of the flames and stop at the end of the flames on the right.

Bright orange step 2

Your image should now look like the one below.

Bright orange step 3

Once this is done connect the end points and use the eyedropper to fill in the color. Also use the selection tool to get rid of the trace lines. Your image should now look similar to this.

Finished bright orange area

Now unhidden all of the layers except for the image. You can see we are making some good progress.

Current progress

Now we are going to move on to the top purple edges of the basketball.
Step 4: Purple Edges

Start by hiding all of the layers except for the image. Also select “None” for both foreground and background colors as well as have the pen tool selected. Make a new layer and make sure you are using “Layer 5”.

Trace all of the purple basketball edges and fill them in with a color besides grey, purple, or orange. I usually use bright colors like red so it stands out like the image below. Make sure to extend your edges into the grey area otherwise when we do the grey they might not meet. Also, make sure to not go past the grey area into the purple.

Purple edges step 1

Now hide all the layers except for your flame layer and your newest layer so your image looks like the one below.

Purple edges step 2

Start by clicking on your left red item with the selection tool. Go to Object:Path:Divide Objects Below. Your image should look similar the image below.

Purple edges step 3

Now click the selection tool and click where the old red image used to be. You should have it highlighted now like the image below.

Purple edges step 4

Now press delete. You will notice that part of the orange has been deleted. This will show the purple background we did earlier. Do this with the rest of the red images until you get this.

Purple edges step 5

Now hide all of the layers besides the image.
Step 5: Dark Orange Basketball

Our latest layer has become empty so we will use “Layer 5” again. Select “None” for foreground and background colors, and by selecting the pen tool. Trace the dark orange lines on top. You might have to use the divide objects below to get things to match up nice. Your image should look close the one below.

Finished purple edges

Now we are going to cover the grey box.
Step 6: Grey Box

Once again create a new layer, hide all but the image, select the pen tool, and set colors to “None”. Trace the grey box with your pen tool as well as the lines below the box. Make sure not to overlap the basketball, because that layer is beneath this one. Make sure to use the same grey from before. Unhide all of the images except for the picture. Your image should look similair to the one below.

Grey box step 1

Once again create a new layer and hide the previous. Trace the purple box that is inside of the grey box and fill it in. Unhide all of the layers besides the picture and you should get this.

Purple box step 1

Now create the text using three separate layers. You should have an image similar to below.

Finished purple box

Now we are going to move on to finishing the basketball.
Step 7: Basketball Bottom

Using two separate layers you should be able to trace and finish the rest of the design to get this.

Finished Suns logo

Now highlight everything with the selection tool. Once highlighted right click and click group. This will make your whole image one. You can then delete all of the other layers including the image and rename your layer to “Suns Logo”.

Creating a Stylish Image Repeat CSS Navigation

This is a guide to creating a simple, SE friendly CSS navigation including an example navigation for you to download and use. This method requires two very small images.

Designing The Backgrounds

Step One – You must create a navigation in photoshop or in your chosen image creating software. Do this by creating a new canvas 700 pixels wide and 30 pixels tall. Now create a nw layer and apply a soft green gradient. You can then if you wish add a gloss layer by selecting the top half on the gradient with the marquee tool and selecting new layer then fill with white. You then go to layer blending options and select overlay and lower the opacity until it looks nice.

Step Two – Now since you have your main background you can highlight one section of the base background and create a rollover background. An easy way to create a nice highlight effect is to simply create a new layer above the base and gloss layer. Highlight using the marquee tool a section of the navigation and fill with white. Do the same as you did to get the gloss effect and you will get a section of highlighted colour. You show have something which looks like below:

I have added text inside the hover are just to show what it should look like.

Step Three – If you are using photoshop you can now simply slice a 1px wide and full height section of the base gradient and save as navbg.gif and then the same size for the highlighted background (without any text) and save as navbgover.gif. These are the two images you will be using to create the navigation. We can now go on to the css section of the tutorial. Save the two images into an images folder which is contained within the folder you will have your css and html files.

Coding The CSS Navigation

To code this navigation is rather simple as the text which will be on the navigations is in the form of standard text rather than displayed within an image. First we need to create the css for this navigation. In order to do this and save on coding on the webpage we use a list. Put the following in your css for this navigation.

.navbg {

#navcontainer ul
padding-top: 0px;
list-style-type: none;
text-align: center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
height: 24px;

#navcontainer ul li { display: inline; }

#navcontainer ul li a
text-decoration: none;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
width: 100%;
height: 30px;

#navcontainer ul li a:hover
background:url(images/navbgover.gif) repeat-x;
width: 100%;

If you wish to fully understand what you have just copied try playing around with different attributes in the above coding and not the result it has on the outcome on the navigation. (Only do this at the end when you have the HTML written as well).

The XHTML coding is now very short and does not require much coding. Simply put this into your website coding where you want the navigation to display.

<div class=”navbg”>
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”Link.html” id=”current”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>
<li><a href=”Link.html”>Link</a></li>

If you wish to add more links simple add <li><a href=”Link.html”>Link</a></li> on to the XHTML coding before the </ul>.


Here is a working example of the finished navigation.