Simple Professional Layout

This tut will able you to build proffessional looking layout start off by creating a new document around the size of 800 x 600. Rename your background layer to “bg”. Set your Foreground Color to FFFFFF, and set your Background Color to E5E5E5.

Clean Header with Smooth Buttons

Create a clean header complete with large gradient/glassy buttons.Make a new document. I used 778x221. I used #F4F4F4 as the background color.

Dark Layout

In this tutorial we will learn how to make a nice, simple, cool, dark layout. So begin by opening your photoshop and creating a new document with settings like mines...

Analysis of a Professional Design

At fist it was my intention to show you how to use the icons efficiently in a website design. However, I soon found out that this wouldn't be of any use to most people so I broadened the topic. This tutorial took about a week to make, so enjoy!

Habbo Style Layout

This tutorial shale each you to make the "Habbo Style" layout with iFrames.This tutorial requires Adobe Photoshop (CS recommended as this is the only version that it's tested on) . A piece of paper, or the program Notepad is required, along with Microsoft Frontpage (only tested on Frontpage) or Macromedia Dreamweaver (not tested on Dreamweaver) . You should use MS Paint or another graphic program to draw "Blue Prints" for the positioning of the box(es).

Web Layout

An exhaustive look at designing and coding a layout from the ground-up.

Navigation Bar

Creating a Basic NavBar. Using the NavBar Designer. Creating a NavBar Programmatically. Using Attribute Mappings. Adding Removing and Changing Items. Handling Server side Events Problems or Technical questions Contact: Webmaster Fireworks Splice HTML NavBar offers compact navigation for sites short on real estate. A small menu bar nestles over an NavBar offers compact navigation for sites short on real estate.

Pixel Menu

Here is a cool pixel menu for your website. Open a new 150px x 160px document and fill the background layer with white. Create a new layer, and with the "Rectangle Tool", holding the Shift key down, draw a little perfect square.

Clean Business Header

Clean and elegant business header suitable for any professional site.Start out with a new 770px wide x 160px tall image. Next create a new layer titled Black Gradient. Select the Gradient Tool, make sure Linear Gradient is selected, then double-click on the current gradient to bring up the Gradient Editor.

Clean Business Header

Learn how to create a full header that can be used for a business site to even a small blog site.

Slicing Tutorial

Here, we will take our Glossy Layout, and slice it with auto expanding content boxes using dreamweaver!Start off by opening your finished layout up in photoshop, that we made from the Glossy Layout tutorial. Make sure you previously saved it as a .gif image, so you wont get confused.

Creating a WebHosting Layout

Learn how to create a webhosting layout from scratch! In this part, you will be focused mostly on the design of the header of the layout.This tutorial is very extensive and consists of many techniques and photoshop skills. Therefore it is definately not suitable for Beginner or Novice photoshop users, but I will try my best to explain each step in detail. I have split this tutorial into 3 parts, each creating a part of the whole layout itself. Also all the techniques which are used to create thi

A Glossy Layout

Create a sleek and sexy web layout with gradients and glossy buttons.Start wit ha new document, ours was 800 x 600 pixels, with a background of 202020.

Business Header and Navigation

Create a full blown business web page header complete with a navigation. You will also learn a lot of use of the Rectangular Marque Tool and Line Tool in this tutorial.

Website Box Design

Design a quick and basic box for use in a website layout.Create a new document in Adobe Photoshop with the dimension 400x400 pixels and white background. Draw a rectangle with a very light grey color.

Smooth Navigation

Smooth navigation to use for business/corporate designs. Learn how to create this navigation from scratch.

Slicing a Layout

Just made a template? Or just got finished with our Web hosting Layout tutorial? Here I will show you how to slice your layout so that it loads faster, and overall is a lot easier to use a template when sliced.

Web Hosting Layout

This tutorial will cover 3 parts. The main tutorial, which is making the template itself. The second part, which is slicing the template and saving it, and the Third part which will be showing how to take the saved template, and put it into Dreamweaver. I'm going to be making a Web Hosing Template, so lets begin, as we have quite a lot to cover in the next 3 tutorials.

Slice a Template

This is a tutorial on how to creat a website template through photoshop. Now first you are gong to creat a new document, and design a template the way you would like it to be. This is a quick example template i made to explain this tutorial on.

Kids Website Layout

In this tutorial we’ll guide through the necessary steps for creating a kids website layout with Adobe Photoshop. Save the next pictures on your computer, if you don’t have others to complete this tutorial.