There are so many stylish cool shaped brushes available over the internet. These brushes render us new ways to make colorful and wonderful designs.

I will show you how to include new brushes in to photoshop.

Steps:

1. Extract the zip archive which you downloaded to a folder.
2. Open adobe photoshop and select the brush tool.
3. At the top toolbar, you may see a button with downward arrow.

4. Click that downward, then click the arrow point towards right at the popup box and select “Load brushes…”

5.Now browse to the location where you saved your brushes, select your brush and load.
6.That’s it.

Nofollow tags are useful in various aspects. This tag helps in preventing robots from crawling of pages or links.

Blocking the spiders from crawl of contents can be accompanied by the use Robots exclusion method. For preventing the crawl of partner advertisement links, ‘nofollow’ tag can be used. Google who always recommends webmasters to put nofollow for paid links.

An example of this tag is given below

For text link

<a href=”#” rel="nofollow" title=”ads”>OtherSite</a>

For image link

<a href=”#” rel="nofollow" ><img src=”#” title=”ads”></a>

This mail cover icon will be very useful in your web design projects.
This can be used as image link to contact form, subscription form, etc.

Steps:

Start with a new layer, name it as “BG” and draw a gradient rectangle with grey colors. This could be used as background for the icon.

Background

Create a new layer over BG and name it as “Rectangle”. Take the rectangle shape and draw a rectangle. Apply some gradient for the shape with dark and light grey colors. Rotate the gradient to 57 degree.

Gradient-rotation

Draw a triangle shape over the rectangle and adjust its width to match the width of the rectangle. Make the triangle shape’s stroke color as “#c0c0c0”.
Using the selection tool, select both the rectangle and triangle shapes by holding the shift key.

Vector modification

By holding the shift key, click the right bottom node of the selection and drag the selection upwards. Drag the selection towards left by clicking the top right corner node as well as top left corner. So the result will look like below.

mail cover

Make a duplicate layer from layer “Rectangle”. This can be done by right clicking over the layer and select “Duplicate”. Change the color of the shapes to #666666.
Now by selecting shapes at the duplicate layer, reduce the height to half and rotate the selection slightly to get a position like below.

Shadow

Convert the duplicate layer to raster, go to Adjust => Blur => Gaussian Blur and give radius of 6.
Create a new layer and name it as “reflection”. Draw a rectangle below and give the same gradient colors which were given for rectangle at layer “Rectangle”. By selecting the shape, click any of the nodes and drag the selection upwards or downwards.
So the result you will get is a nice email icon with 3d reflection.

3d email icon

Table is a useful feature to organize contents in a web page. Table can be dividing in to number of rows and columns to form cells. It is possible to insert any number of tables inside a table.

Steps:

Open a new html document using dreamweaver. Select the tab named insert => table => insert table. Fill up the values at the pop up window as per your requirements. Enter the number of rows and columns that you want. If you want a solid border to the table, then give some thickness value (minimum thickness should be 1px).

Add rows and columns:
You can add any number of rows and columns to the existing tables. To add a row, place the cursor at where you want the row, go to insert => Table Objects => Insert Row above or below and enter the number of rows you want.
Repeat the same procedure with insert => Table Objects => Insert Column to the Right or to the Left for inserting columns.

Delete rows and columns:
Unwanted rows or columns can be deleted from the table. Place the cursor at the Row or Column which has to delete and press shortcut key Ctrl + Shift + M to delete a row or Ctrl + Shift +- to delete a column.

Add a table inside another table:
Place the cursor inside a table to which you want to insert additional tables, then press Ctrl + Alt + T and follow the same procedure for creating a single table.

Table width:
It is possible to give the table width in two ways. One is by giving the table width as a percentage and another by giving the width as a fixed value.
For example, if you give the width as 100%, then the table width would adjust to fit with the monitor width. Instead by giving a fixed value, the table width would be limited to that fixed value irrespective of the monitor size.

A webpage without images will not look good. Pages with more images can attract large number readers than pages without images.
The element img will be used to insert an image in to a webpage. This img element should be defined differently for HTML and XHTML.
Actually, empty elements like <img> may not necessarily to close with an end tag in HTML. Wherein XTHML markup, every elements must be closed with an end tag.

Sample image tag for HTML:

<img src="images/screenshot.jpg" width="300" height="225" alt="alt text">

Sample image tag for XHTML:

<img src="images/screenshot.jpg" width="300" height="225" alt="alt text" />

Suppose, if you want to assign a link to the image, the code should look like
For HTML

<a href="#"><img src="images/screenshot.jpg" alt="alt text" width="300" height="225" border="0"></a>

For XHTML

<a href="#"><img src="images/screenshot.jpg" alt=" alt text " width="300" height="225" border="0" /></a>

Basically, there are two methods to list the links horizontally. One is by using the Float method and another is by display as inline method.
Here is a sample html code which would be used to show the navigation list items.

<ul class="hoznavi">
<li><a href="Link1">Title one</a></li>
<li><a href="Link2">Title two</a></li>
<li><a href="Link3">Title three</a></li>
</ul>

I will show you how to list these list items horizontally with rollover effect by using above mentioned methods.

Float method:
By using float: left property, the list items will floated left and stacked up to form in a horizontal row. If you want to display the links as a block with a background image, then you can make use of “display: block” in addition to float. By using the “display: block”, it is possible to to set the height and width to the link elements.
Below is a simple css styles for this method.
CSS:

ul.hoznavi{list-style: none; padding: 0; margin: 0;}
ul.hoznavi li{float: left; margin-right: 10px;}
ul.hoznavi li a{color: #666; text-decoration: none; font-weight: bold; display:block; width: 75px; text-align: center; background-color: #ccc; }
ul.hoznavi li a:hover { color: #fff; background-color: #666; }

Display as Inline:

This method uses the display: inline property to form the list items in a horizontal row.
CSS:

ul.hoznavi{list-style: none; padding: 0; margin: 0;}
ul.hoznavi li{display: inline;}
ul.hoznavi li a{color: #666; text-decoration: none; text-align: center; font-weight: bold; padding: 0 10px 0 10px; background-color: #ccc;}
ul.hoznavi li a:hover { color: #fff; background-color: #666; }

Creating a web page with CSS layout is always very useful which became very popular. It is the w3c standard for defining the layout of a (X)HTML document. In this tutorial, I am going to tell you how to make a two column fixed layout document. As a basic layout, I will explain with a xhtml 1.0 Translational document type.
I guess, you may be aware of html tags. If not, first refer this topic HTML tags. Because knowledge about html tags is a must and necessary to learn before starting to design a webpage.
Open a new html document(1.0 translational) using dreamweaver or whatever web design software you have.

Code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<!–Include meta informations–>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Tutorials Tag</title>
<!–Code to insert an external style sheet –>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<!–The content area –>
<body>
<div id=”container”>
<div id=”header”>Sample page with basic css layout</div>
<div class=”navigation”>
<a href=”index.html”>Homepage</a><br />
<a href=”subpage1.html”>subpage1</a><br />
<a href=”subpage2.html”>subpage2</a><br />
</div>
<div class=”maincontent”>This is the main body content.<br />All your main contents should go here.</div>
<div class=”footer”>All Rights Reserved</div>
</div>
</body>
</html>

This page has been divided as four sections, namely header, navigation, main content and footer section. I have divided the sections using div tags and these tags can be controlled via external style sheet. And I have included a main div tag “container” which wraps all other div tags to form a proper layout.
Now write a style sheet to make control over the above divs. Below is a simple css code for beginners.

Code:

a, a:visited{ color: #0099CC; text-decoration: none; }
a:hover { color: #666666; }
body { background: #f2f2f2; color: #333; font-size: 11px; font-family: Verdana, Arial, Sans-Serif; margin: 0 auto; }
#container {width: 800px; margin: 0 auto; border: thin solid #ccc; background-color: #fff;}
#header {width: 800px; height: 100px; padding-top: 28px; background-color: #999900; font-size: 16px; text-align: center; color: #fff; font-weight: bold;}
.navigation {width: 180px; float: left; padding: 10px;}
.maincontent {width: 580px; float: left; padding: 10px;}
.footer { clear: both; width:800px; height: 50px; text-align: center; background-color: #ccc; line-height: 50px;}

Paste the above codes and save the file as style.css
Refer this topic to learn how to make a style sheet.

Style defines the appearance or presentation of a web page for example it can contains what font should be used for a particular paragraph in a page. Today, CSS styles became very popular by its power of layout control.

Benefits of CSS style Sheet:

• Reduced time consumption: CSS have the ability to control the whole number of pages of a website.
• Simple and more flexible: CSS has its own syntax and is so easy to learn its commands.

There are many more benefits are there by using CSS and I have defined only a few things.

Preparation of a Cascaded Style Sheet:

The style can define by two ways. One is Internal Style sheet. It will be defined within a web page and should be written for every single page of website.
Another method is External Style Sheet. It is a separate document with a file extension “.css”. It is a simple text file which can be written by using notepad. External style sheets are more advantageous than embedded sheets.

An example of how to make a external style sheet-

Open your windows notepad. Write your list of styles in the sheet and save it as “style.css”.
You can give any name for your style sheet but don’t forget to give the file extension as “.css”.
Now, we have to attach the sheet to the page(s)of the website.
Open the html page(s) which has to be controlled. Paste the following code at the header section of the page(s). i.e. the code should be placed anywhere between <head> and </head>.

Code:

<link rel="stylesheet" href="style.css" type="text/css">

To learn how to make a simple web page with CSS, please refer make a simple website using CSS style sheet

In this tutorial, am going to tell you about four basic tags, which is necessary to make an html document. HTML stands for Hyper Text Markup Language, which is actually a text file with extensions (.html) or (.htm).
The four basic html tags are

1.    Document type (<html>)
2.    Header (<head>)
3.    Title (<title>)
4.    Body (<body>)

Document type tag (<html>):

The html tag only tells the browser about what type of document it is. The normal format of this tag is <html>…</html>.
Here <html> tells the starting of the document and </html> tells the end of the document.

Header tag (<head>):

The head tag contains all information about the document or page. These are information are to tell search engines such as title, descriptions, keywords, etc.
The normal format of this tag is <head>…</head>.

Title tag (<title>):

The title tag contains the title of the html document. Always title will come inside header tag only.
The normal format is < title >…</ title >

Body (<body>):

The body tag contains the main content of the html document. In other words, only the body contains the document matters, which is visible when a page is loaded. All information written inside <body> and </body> will only be visible at the browser.

Here is an example of how a proper html document should be look like

<html>
<head>
<title>This is a sample document by tutorials tag</title>
…
</head>
<body>
Main content …
</body>
</html>

Make a cool iris color change using paint shop pro 9. This is a simple tutorial especially for beginners.

Open the image that you want to edit in paint shop. Duplicate the image by right clicking and then select ‘Duplicate’.
Select the “freehand selection” tool from the tools toolbar.
Set the selection type as “edge seeker”, mode – Add, feather – 1 and smooth – 10.
Now slowly make a selection around the iris border like shown on the image below. When you have done, right click or double click over the image to form a closed path of selection.

iris-selection

Then click “Adjust” tab, go to Hue and Saturation and select “Colorize”. Select a color that you want to change the iris color to and press ok.
Then right click over the image to remove the selection

iris color change