Converting PSD to HTML part 2

[tech3]

Hi, I m back with the second version of the tutorial I posted yesterday. If you have missed it, here is the link for it.

Converting PSD to HTML

Now, in this tutorial, we would be dealing with the slicing and initial PSD handling in detail because it is the most important part for the design of the final web page. After that, we would be discussing the XHTML programming, and how this conversion can be implemented in XHTML.

HANDLING THE PSD

The PSD was initially loaded into Photoshop as shown below.



Now, we are supposed to first slice the PSD and then store these slices individually into a folder, which would then be handled by our XHTML code.

For Slicing, after selecting the Slice tool as shown in the previous tutorial, we decide the areas which would be sliced from the PSD. A slice is basically a division of Source into functional parts. In this case, we can slice out the Home, Contact Us etc icons because they would be used as links in our web-page as shown below.



For making these individual slices, cut them using the slice tool by clicking and dragging around the area which you would like to cut. Now, right click and select Edit Slice Options and give it a name. For example, the Home icon has been cut below, and been given a name using the above procedure.



Now comes another important step, that of saving these individual slices into a folder. For that, we use the option of File> Save for Web or Devices. On clicking this option, a dialog box, as shown in last tutorial, appears. Select images(.gif) format, and settings to be XHTML ( the default being HTML 4.01), and all user slices. Browse to a location in your PC, and save the file. This would produce all the individual slices as images which can be used in our HTML/XHTML code.

XHTML

The basic code, which would be used in rendering this sliced PSD, and inserting images is shown below. The below code inserts the Home image into the web page.



The CSS code



I hope its clear now, and you can move forward to slicing and dicing your PSD to functional interfaces now. Cheers!

By iGuides' Tutorial Writer: Jitesh Banga

Source: iGuides.org Webmasters Talk

[smub]

it doesn't seem clear to me because i can't scroll your css codes and if i was to be a beginner i wouldn't know what you did with the rest of the css file, so i would be lost.

perhaps posting a text file would be nice.

[iGuides]

That's nice effort, effective guide for beginners.

[ndrewstrauss]

Hi, I m back with the second version of the tutorial I posted yesterday. If you have missed it, here is the link for it.

Converting PSD to HTML

Now, in this tutorial, we would be dealing with the slicing and initial PSD handling in detail because it is the most important part for the design of the final web page. After that, we would be discussing the XHTML programming, and how this conversion can be implemented in XHTML.

HANDLING THE PSD

The PSD was initially loaded into Photoshop as shown below.



Now, we are supposed to first slice the PSD and then store these slices individually into a folder, which would then be handled by our XHTML code.

For Slicing, after selecting the Slice tool as shown in the previous tutorial, we decide the areas which would be sliced from the PSD. A slice is basically a division of Source into functional parts. In this case, we can slice out the Home, Contact Us etc icons because they would be used as links in our web-page as shown below.



For making these individual slices, cut them using the slice tool by clicking and dragging around the area which you would like to cut. Now, right click and select Edit Slice Options and give it a name. For example, the Home icon has been cut below, and been given a name using the above procedure.



Now comes another important step, that of saving these individual slices into a folder. For that, we use the option of File> Save for Web or Devices. On clicking this option, a dialog box, as shown in last tutorial, appears. Select images(.gif) format, and settings to be XHTML ( the default being HTML 4.01), and all user slices. Browse to a location in your PC, and save the file. This would produce all the individual slices as images which can be used in our HTML/XHTML code.

XHTML

The basic code, which would be used in rendering this sliced PSD, and inserting images is shown below. The below code inserts the Home image into the web page.



The CSS code



I hope its clear now, and you can move forward to slicing and dicing your PSD to functional interfaces now. Cheers!

By iGuides' Tutorial Writer: Jitesh Banga

Source: iGuides.org Webmasters Talk

Thanks, dude for nice post.

[psdtohtmlcss]

Thanks for this awesome information.

[psdtohtml]

Hi, I m back with the second version of the tutorial I posted yesterday. If you have missed it, here is the link for it.

Converting PSD to HTML

Now, in this tutorial, we would be dealing with the slicing and initial PSD handling in detail because it is the most important part for the design of the final web page. After that, we would be discussing the XHTML programming, and how this conversion can be implemented in XHTML.

HANDLING THE PSD

The PSD was initially loaded into Photoshop as shown below.



Now, we are supposed to first slice the PSD and then store these slices individually into a folder, which would then be handled by our XHTML code.

For Slicing, after selecting the Slice tool as shown in the previous tutorial, we decide the areas which would be sliced from the PSD. A slice is basically a division of Source into functional parts. In this case, we can slice out the Home, Contact Us etc icons because they would be used as links in our web-page as shown below.



For making these individual slices, cut them using the slice tool by clicking and dragging around the area which you would like to cut. Now, right click and select Edit Slice Options and give it a name. For example, the Home icon has been cut below, and been given a name using the above procedure.



Now comes another important step, that of saving these individual slices into a folder. For that, we use the option of File> Save for Web or Devices. On clicking this option, a dialog box, as shown in last tutorial, appears. Select images(.gif) format, and settings to be XHTML ( the default being HTML 4.01), and all user slices. Browse to a location in your PC, and save the file. This would produce all the individual slices as images which can be used in our HTML/XHTML code.

XHTML

The basic code, which would be used in rendering this sliced PSD, and inserting images is shown below. The below code inserts the Home image into the web page.



The CSS code



I hope its clear now, and you can move forward to slicing and dicing your PSD to functional interfaces now. Cheers!

By iGuides' Tutorial Writer: Jitesh Banga

Source: iGuides.org Webmasters Talk

A highly professional approach is to design to web in an artistic way by providing raw coding like PSD to HTML or PSD to XHTML conversion services that is acceptable for well being W3C (World Wide Web Consortium) validation.

[harry001]

i am learning html.


--------------
Apartment for rent Bangkok

[mich52437]

thanks for sharing this information...this is what i'm looking for..importing psd to html..i tried this once..and it work for me..for my first design..but when i create my second design and it's getting harder for me to import the images the one i slice..i'm a beginner..maybe you could help me...thanks

[robertharris021]

thanks for intercourse this aggregation...this is what i'm hunting for..importation psd to html..i reliable this erst..and it succeed for me..for my early plan..but when i create my indorsement arrangement and it's exploit harder for me to implication the images the one i share..i'm a conceiver..maybe you could meliorate me...thanks

[Miketyson]

Thanks for the great information.. I like it.. and got the most important information from here.

[zekes]

This will be a great tips for me since I am reading tutorials on how to use Photoshop. Thanks for sharing it here.

[agnelrollins194]

Thanks for the outstanding data.. I similar it.. and acquired the most crucial data from here.

[antonygonsalves152]

It does not appear clear to me since i cannot scroll your CSS codes and if i was to be a founding father i wouldn't know what you did with the rest of the CSS file, so i would be bewildered.

[justinbrooks062]

It does not appear clear to me because i cannot curl your css codes and if i was to be a founder i would not know what you did with the breathe of the css file, so i would be lost.