Perfect Way to move your template from photoshop to asp.net project

How to work with Photoshop .psd file and ASP.Net Controls

1- When you choose a template design you should know that you choose the master page with default page

2- Try to draw all your idea in paper and drown where you will place the images and the controls and the size of them

3- After that open the .psd file and let’s begin work

4- First thing is keep out all images and buttons like login button and put them in other psd file ( I’ll tell you later the advantage of this step)

The main tool that we will use is : Slice Tool and slice select tool

1- Then , in the basic design the site will divided into 3 ,4 or 5 part

a. 3 part like : ( header , body , footer)

b. 4 part like : ( header , left side , body , footer)

c. 5 part like : ( header , left side , body , right side , footer)

2- Select your slice tool and create the slice for the header and each part

3- But the tricks are here …

4- To keep your design clear and clear and easy to deal with it with your asp.net controls

Don’t let the Photoshop create slice for you and to avoid that

See the different between the two images :

The left picture above (the slice number 17 is horizontally) and at the right picture is vertically and not clear

1- Another an important trick is :

Don’t create a lot of slice in one place.

Ex:

Login panel : don’t slice it to 7 part for :

User name lable	User name text box
Password lable	Password text box
lable for new user	Lable for forget password	Login button

Nooooooooo

It will be easy for you to create it as one big slice then from the html code add the table over the image back ground and put your controls to control the height and the width of each control

1- Create big slice for the content page cause we will make it as a back ground and each page inherits from the master page will have the same background.

2- For the website button keep only the desgn of the button and remove the text and add the text from your html code . that’s important in my opinion because if you got an order to change the type of the font in and time and you don’t have the .psd file , then this solution will be helpful

3- After that choose Save for web … from file menu or press Alt+shift+ctrl+S from your keyboard

1- Choose Edit Output Settings

Make sure that you choose the Referenced By Class

That what I prefer cause may in my code want to set ID for Each div part and it may create conflict in ids but in Class everything will be ok

The Group part of Default slice number is : the name of the images that will be generated for each image in slice picture

try to play with it and make save with more than one choice and you will see the different

- And you can also put name from your mind and you will see that the Example label is small Example of naming the picture

Here we finish the part of the Photoshop

I will discuss later the part of dealing with exported html and images with your asp.net code project and all tricks for small shoot.

Thanks