2torial Blog|photoshop tutorials, website design tutorials and graphic design articles and tutorials

Here is an easy way to make a nice CSS menu for your website that will also keep the current page highlighted in the menu. First we need a background for the menu and a mouse-over background or highlight which will also act as the current page highlight. If you want to use your own colors or pattern you can replace the link in the CSS with your own. Here are the two background images I made with Photoshop. The size of these particular images are width:15px height:40px.

Up state Down state

Click here to see the final.

Read the rest of this entry »

By: Brian McGregor

I wonder if you knew that visitors to your website form an instant opinion? And they form it about you and your offer. This instant opinion is created subconsciously. It happens automatically within the visitors mind. It happens automatically. Your site visitors can’t help themselves. It matters not a jot how clever the text is on your page. You can have paid an expensive professional to produce your copy for you. The visitor need not read a single word, and yet they will form their instant opinion.

The quality of the images on your web page won’t make any difference. Their quality doesn’t affect in this instant opinion. You might think if you make an unrepeatable offer, that your visitor is bound to be swayed by that! I’m sorry, the instant opinion clicks in, and your brilliant offer lies unseen. This is because the instant opinion is made when your web page is displayed to your visitor. You may have guessed there is something subliminal at work here. In a way, that is right. Immediate opinions are formed by visitors to every single website. You may have already worked out that the answer is colors. When your web page appears to your visitor, the colors you’ve used go to work on the subconscious of your visitors.

Read the rest of this entry »

On an earlier tutorial I wrote about how to create and send an email form using html and a basic php script. Today I’ll take it up a level and re-write that script using the if, else conditional and empty() function to include form validation.

Using an if, else conditional: if (condition) {do something} else { do this} , we can make certain fields of our form required that they be filled out. Let’s start by making a basic form with first name, last name, email and comments as our text inputs. Copy the following code into a text document then save and name it form.html:

Read the rest of this entry »

Using a displacement map in Photoshop can create some really cool effects. Today, we’ll use a displacement map to make some text appear as if it is painted onto wood. There are many different surfaces you can use for this. Brick works well also. With a quick Google search you can find many different textures and surfaces to use. If you prefer to use the wood background that I’m using, I’ve made it available here.

Let’s start by importing our wood image into Photoshop. Double click on the background layer in the layers palette and turn the background into a layer and name it wood.

Read the rest of this entry »

A popular layout among web designers is the 3 column layout. It allows a lot of flexibility for content layout. It is often used to add additional links for categories on the left and lining up sponsors down the right hand column. In this web site design tutorial we’ll use absolute positioning to set up a basic 3 column website with a header for the logo. This example will use the above format and place links in the left column, body of content in the middle and sponsors or additional content for the right sidebar column.

Heres a screenshot of what we’ll be building: Final

Read the rest of this entry »

In this Photoshop tutorial I’ll create a Vista style navigation bar for use in your website. We’re going to use a two tone gradient to simulate the shiny gloss effect so download this useful set of Web 2.0 Gradients and place the file in your photoshop/presets/Gradients folder and then start up Photoshop.

In Photoshop create a new file with a dimension of 800×300 and just make the background white for now.

Create a new layer in the layer palette and name this layer menu background. With the new layer selected, take the Rectangular Marquee tool and create a box along the bottom and the length of the document at about 40px high. Now either use the paint bucket to fill it black or go to edit – fill and fill the selection with black.

Read the rest of this entry »

Sometimes it’s a nice touch to include an e-mail feedback form on your contact page or elsewhere on your web site. Let’s create an e-mail form using html and a simple php script to send it along. The first thing to do is create the form using html. We’ll call it feedback.html. The form will have an action of send.php, which we’ll create later. Below is the html code for our form:

<html>
<head>
<title>E-mail Form</title>
</head>
<body>
<form action=”send.php” method=”POST”>
<p>Name:<br /> <input type=”text” size=”20″ name=”name” /></p>
<p>E-Mail Address:<br /> <input type=”text” size=”20″ name-”email” /></p>
<p>Message:<br />
<textarea name=”message” cols=”30″ rows=”5″></textarea></p>
<p><input type=”submit” value=”send” /></p>
</form>
</body>
</html>

Read the rest of this entry »