Click to learn how to rotate images dynamically with the ASP.NET Image Control

Step by Step ASP.NET Design Solutions

The Ultimate Website Design Guide Using ASP.NET and Adobe Photoshop

Website Design Guide

Code-behind

Sending Email

ASP.NET Image Control

Rotating Images

ASP.NET User Control

Famous Quotes

Search Engine Submission

They Said It Best

Computers make it easier to do a lot of things, but most of the things they make it easier to do don't need to be done.
Andy Rooney

Adobe Photoshop Template Step 1

If you look at any website with killer graphics you can bet they are using an Adobe Photoshop template. This tutorial will show you how to start from the ground up building your own Adobe Photoshop template and then turn it into a dynamic data driven ASP.NET application. This tutorial uses Adobe Photoshop CS3 but it will work just as easily with Photopshop CS2.

We're going to start with the base template and then add graphic elements using layers to create the final look of our site. Once the template is ready then we'll export the file into HTML and image slices which we'll upload to our website.

And then the fun begins. After creating the basic graphic layout will will modify the html so the pages stretch properly without any gaps and then we'll stick in our ASP.NET programming. We'll be building this very website you are browsing now.

Step 1. Adobe Photoshop Template Basics
Step 2. Adobe Photoshop Template Layers
Step 3. Create Template Slices
Step 4. Create ASP.NET Masterpage

Step 1. Adobe Photoshop Template

In Step 1 we've got a basic Photoshop CS3 file called step1.psd which you can download. It will be the foundation for our website. At this point we only have 2 layers. One is the background and one is a white box with rounded corners.

Adding a Drop Shadow

Double click the layer properties and add a Drop Shadow using the properties shown in the picture below

Adding an Inner Shadow

On the same layer click the Inner Shadow element and add the properties shown in the picture below

Layer Shadows

Our template is starting to look better now with some 3D shadowing but were're not finished.

New Layer

Now we're going to add a new layer that will be used as the body for our page text. Simply right click on the white layer and duplicate it.

Next resize the duplicated layer like in the picture below. We'll keep the Drop Shadow property on this new layer but uncheck the Inside Shadow property.

Here is the completed template page.psd.

Masthead Layers

Now we import a new graphic layer as part of our masthead elements. We're using our favorite vista from the Lewis and Clark Trail in Clearwater National Forest.

Adding a Outer Glow

Double click the layer properties and click Outer Glow using the properties shown in the picture below

Adding a Stroke

On the same layer click the Stroke element and add the properties shown in the picture below

Template Taking Shape

At this point we have 4 layers. As you can see the graphic template is taking shape.

Next Lesson

In Step 2. Additional Photoshop Layers we'll continue adding graphic elements for the masthead at the top of our website page.