Click to learn how to rotate images dynamically with the ASP.NET Image Control
Home
Step by Step ASP.NET Design Solutions
Home
The Ultimate Website Design Guide Using ASP.NET and Adobe Photoshop

Search Engine Submission

 

They Said It Best

Computers in the future may have only 1,000 vacuum tubes and perhapsonly weigh 1 1/2 tons
Popular Mechanics, 1949

 

Adobe Photoshop Template Design Step 2

This tutorial continues where Step 1. Adobe Photoshop Template Basics finished. We 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.

Once the template is ready then we'll export the file from Photoshop into HTML with auto generated image slices which we'll upload to our website.

Step 2. Adobe Photoshop Template Layers

In Step 1. Adobe Photoshop Template Basics we created our basic Photoshop CS3 .psd file called page.psd which you can download here. It will be the foundation for our website.

Next we add our graphic for the upper right side of the page. This graphic will be used for the ASP.NET Image Control to rotate pictures as the page is loaded. The picture we're starting with today is a favorite of ours from Anna Ruby Falls just outside of Helen, GA.

With the new layer for the picture of Anna Ruby Falls we're going to add a Drop Shadow, Outer Glow, and Stroke similar to the picture of the Idaho skyline. Below are the settings for the Drop Shadow

Here are the settings for the Outer Glow

Here are the settings for the Stroke

Navigation Layer

We're going to add another layer to tie the 2 graphic layers together more cohesively. This will be a rectangular layer that could be used for navigational hyperlinks. On our site we use for adding more search engine keywords to optimze our keyword density for SEO. It starts out black in our picture for illustration purposes only. We're going to use the Color Overlay property to change it to White and then use the Inner Shadow property to give it some nice shading.

Here are the settings for the Drop Shadow

Here are the settings for the Inner Shadow

Here are the settings for the Color Overlay

Website Template Taking Shape

Now with our masthead graphic elements in place the template we'll be using for the graphic foundation of our website is complete.

You can download our updated Adobe Photoshop Template here.

Next Lesson

In Step 3. Template Slices we'll use the Adobe Photoshop slicing tool to slice up our "picture" and export the individual image files and HTML for the base page of our site. This base page will be used in the ASP.NET Master Page for the site.

 

Copyright © 2009 dotnetdesignguide.com  Webmaster   Sponsored by www.portable-computer-keyboard.com