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

This is one of the better and more thorough tutorials out there on web design. It’s an excellent tutorial taking you through the steps of creating a website, first using Photoshop to design the site then to Dreamweaver for step by step instructions on HTML/CSS to put it all together. Complete with header, menu and content areas. If your new to web design or just looking for some fresh idea’s, this is a great tutorial for you read. Check it out www.carlosaleman.com/tutorial.html

Dreamweaver is a sophisticated web design program that is simply the best tool available (in my opinion) then anything else out there.  If your new to Dreamweaver there is much to learn - CSS tools, Ajax components for building dynamic user interfaces, and integration with other Adobe software. But have we have to start with the basics.  Here are 3 really good tutorials to give you a good foundation and get you going on the right path.

Tutorial one - setup and define your site

This is a two part video by Stefan Mischook at Killersites.com and shows you how to setup and define a new website in Dreamweaver. (hint: if you already know how to create your folders that will contain your website on your hard drive skip to part 2 of the tutorial).

Setting up your website Part 1 runtime: 5:19

Setting up your website Part 2 runtime: 7:23

Read the rest of this entry »

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 »

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 »

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 »