Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Save to My Library
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Converting Psd to HTML

Converting Psd to HTML

Ratings: (0)|Views: 616|Likes:
Published by adeel
designing and developing web from scratch
designing and developing web from scratch

More info:

Published by: adeel on Jan 04, 2010
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as DOCX, PDF, TXT or read online from Scribd
See more
See less





If you a web designer and working a lot on Photoshop then you would certainly like to learn “The know how” tocode PSD into a CSS/Xhtml/html. In other words we are talking about splitting you webpage images into smaller  pictures keeping their proportions intact. To say it even more ethically, your are converting images into JPEG, GIF,PNG etc, (which is easy) but learning the way of coding a PSD in CSS/html/Xhtml is something different.The question we are going to answer with detailed explanation in this article is “Do you know how you can converta PSD file into a valid CSS along with HTML/XHTML document?” It’s not that hard to convert the PSD file but itwill really matter how well you code it to get more performance from your webpage. For example, if your webpagehas more pictures it would take more time to load, but using the CSS code with either Xhtml/html format you cantweak it to load faster. Reading through a known book would help a lot learning in-depth concepts of Photoshop andweb development using Photoshop. So let’s take a look at theinstructions below which can help you understand and perform the coding.Open Photoshop application before we proceed any further. Now from the Main Menu, click on the
File Menu
onthe top of the window and select the
option from list. This will allow you to pick an existing PSD file on your local computer. Once you have selected a PSD file, you should go back into File Menu and select the
Edit inImageReady
option from the list. This will open the PSD document in ImageReady. To proceed further, you canselect the
tool from the
Tools palette
which is located vertically either in right or left side of the Photoshopapplication. This tool will help us define the way you would like to divide your PSD documents, in other words,how to slice your document. For example, you can pick and slice the document to get the header, menu pictures etc properly.Once the slicing is placed on the images in your PSD document you will find those areas starting to hide under 
numerated lines and squares. This is the indication of a slice. Slices can be identified very easily as been placedappropriately into proportionate images. Never try to slice an image twice as this will only increase overhead. Youare now left to define the output parameters through which you will get these slices converted into pictures alongwith the code that you need the most.We will now be defining the output parameters: Therefore, to start this process, let’s open the File Menu once againand select the
Output Settings
, followed by
CSS Export
link. You will now see an
output settings
dialog box onyour screen. Output setting will help you define the format in which you would like to get your sliced documentalong with the Xhtml/html code. Now, select the
option from the
drop down list because you havesliced custom areas from the document and not made one big slice to cover entire document. Also select the
Generate CSS
radio options with default settings. This option is going to generate a code that is most important youfor. Click OK to apply the changes. Now, remember, so far, you have only created and validated your settings and not created the file which can bemodified to suite your webpage requirements.How to get the PSD code? In order, to get the file in CSS/Xhtml/html format, open the File Menu and select theoption
Save optimized
from the list. You are now done and that’s all you are required to do. Rest everything isgoing to be handled by the ImageReady application itself.You will find ImageReady creating an
folder and storing all the sliced images along with an HTML filewhich has the source CSS code in it. You can specify the folder where you want ImageReady to store the files alongwith the code file. If you would like to copy/edit this source code then go to your browser like Internet Explorer andselect the
option from the
menu. You can also choose to open it in any other popular browsers likeMozilla Firefox, Opera, etc and can view the source code. Since the browsers are only going to open the code in plain notepad format, you might find it difficult to understand. So what to do now?Here is an alternate solution: The Photoshop code will be clearly visible and you can also choose to edit the HTMLfile in either FrontPage or Dreamweaver or any other HTML editor to understand/copy/edit the code moreappropriately. At this point you are done with your exporting CSS file along with the HTML code. Modify themaccording to your requirement and tweak to get best performance from the webpage.Similarly, you can make fabulous website designs using this feature. The added advantage over here is facility toexport the sliced images into any popular web based picture format using the ImageReady along with the either CSSor Xhtml or html as the code base.

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->