Last night I was having the issue on the CSS of a site I am working on. Its a lesson plan system for an organization. You can view the problem here at this address as I posted it on experts exchange; my all time trusted technology forum. It didn’t work this time. Still no response by now. Anyhow I solved it with the help of Ali; who became a friend of mine at HOTSOL. I call it Shit Soul by the way.At least I learnt a lot of new lessons there and made great friends. Its just about the CEO guy and the guy who is so called director of the company. The rest of guys are good and they are have ethics too. he great guys I found there were Haide, Ali and Mk off course.

Check my latest quote “A wordpress theme a day doesn’t keeps a geek away! “, yeah off course to serve my fellow wordpress community and my loving wordpress blogging engine. All the wordpress geeks a very well aware of the fact that how cool wordpress theming can be, I would rather boast there is no better theming engine for blogs out there. Anyone with normal PHP understanding can easily customize a theme for their blog or even get a pre-done template and convert it into wordpress theme with few easy steps.

If you a web designer and working a lot on Photoshop then you would certainly like to learn “The know how” to code 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 convert a PSD file into a valid CSS along with HTML/XHTML document?” It’s not that hard to convert the PSD file but it will really matter how well you code it to get more performance from your webpage. For example, if your webpage has more pictures it would take more time to load, but using the CSS code with either Xhtml/html format you can tweak it to load faster. Reading through a known book would help a lot learning in-depth concepts of Photoshop and web development using Photoshop. So let’s take a look at the instructions 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 on the top of the window and select the Open 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 in ImageReady option from the list. This will open the PSD document in ImageReady. To proceed further, you can select the Slice tool from the Tools palette which is located vertically either in right or left side of the Photoshop application. 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 Blue numerated lines and squares. This is the indication of a slice. Slices can be identified very easily as been placed appropriately into proportionate images. Never try to slice an image twice as this will only increase overhead. You are now left to define the output parameters through which you will get these slices converted into pictures along with 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 again and select the Output Settings, followed by CSS Export link. You will now see an output settings dialog box on your screen. Output setting will help you define the format in which you would like to get your sliced document along with the Xhtml/html code. Now, select the custom option from the preset drop down list because you have sliced 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 you for. 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 be modified 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 the option Save optimized from the list. You are now done and that’s all you are required to do. Rest everything is going to be handled by the ImageReady application itself.

You will find ImageReady creating an Images folder and storing all the sliced images along with an HTML file which has the source CSS code in it. You can specify the folder where you want ImageReady to store the files along with the code file. If you would like to copy/edit this source code then go to your browser like Internet Explorer and select the Source option from the View menu. You can also choose to open it in any other popular browsers like Mozilla 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 HTML file in either FrontPage or Dreamweaver or any other HTML editor to understand/copy/edit the code more appropriately. At this point you are done with your exporting CSS file along with the HTML code. Modify them according 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 to export the sliced images into any popular web based picture format using the ImageReady along with the either CSS or Xhtml or html as the code base.

Using most famous image editors you will be able to add sharpness and contract to your image the way you like. Importing the images into an HTML page is easy can be done without any problem using ImageReady.

Conclusion

So, if you download some freeware and come across PSD file and html code, you now know how to handle the image as well as the code. Simply open the html in any editor application and modify the code and open the image in ImageReady and use the Save Optimized As feature to get appropriate slices out of the picture. The advantage in a powerful html editor like FrontPage and Dreamweaver is their ability to show you meaning and useless code in different colors making your web designing experience a real simple one.

This article is the property of http://www.Elegant-Templates.com

As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document.

Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ? If you want to know how do it everything is explained step by step with proper screen captures just in case

(There’s plenty of books about CSS but few are really good, i would recommend you this one :

Yep you’re not dreaming this is possible, read on !

1-open your file with photoshop

2-Edit the document with Image ready

3-Slice your document using the “Slice” tool, this will allow you to define all the different parts of your web page (for example, the header, the menu etc.)

4-Now your document should contain blue numeroted squares and lines

5-Now you need to specify in image ready the ouput parameters.

6-Now you choose the CSS export (inside the File->Outputsettings menu)

7-Now you have defined your output options you just have to click on OK. (this will validate your settings but won’t create the file yet).
8-This is the last step, you need to save the result, using “Save optimized” (inside the File menu).

And now the work is finished,imageready has just created an “images” folder containing all the sliced images and an html file which is containing in the source code the css code.

If you wanna see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.

-Extract of the css code generated by photoshop/imageready:

Everything is ok now you have your css and XHTML file. Of course you might need to edit it by hand to modify and or tweak some part of it.

I hope that thanks to this tutorial you’ll spend less time doing css and that you’ll have more time to focus on the the creative aspects of your work.

As you can read further down inside the comments section this method has some limitations. In order to become an expert in CSS coding i would recommend you these great books: