[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

PSD File to HTML


I have downloaded a web template as a zip file which contained a .psd file (entire graphic for page) and a html file with images (.jpg files) from the .psd file.

I am using Photoshop 8 cs and trying to change the .psd file and saving it again to html/jpg, but without any luck.

Every time the entire page is saved a a graphic (.jpg) and the images are not "cut" and saved as .jpg files. I have not used photoshop before.

Can anyone assist me?

3 Solutions
I may recommend pushing the file into ImageReady and doing an export as html from there. You can do that by choosing File -> Save Optimized As -> then change the type to html and images. That is what can be done to create the new html file from the psd.
barnarpAuthor Commented:

I tried it, but still only the one entire image (.jpg) is saved.
So you were able to get it into ImageReady, right? The next step you will need to do ( I forgot to mention) is to slice up the image into pieces. That way, when you export it to html, you can delete unwanted spacer images as well as replace text images with actual text.

Once you have the file in ImageReady, choose the by hitting the letter "K" on your keyboard. Then just drag from corner to corner of each area you want to slice.

Next choose file ->save optimized as and then make sure the save as type is changed to "html and images" and choose your spot to save it to.

If you still can't get 'er done...let me know. we can brainstrom further from there.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

That is supposed to say "...choose the slice tool by hitting..."

Yeah, you have to slice the supplied psd up and save as optimized. I recently helped someone else with a similar prob here at EE, check out: http://www.experts-exchange.com/Web/Graphics/Photoshop/Q_21375466.html

I'm surprised the psd template you downloaded did not contain the original slices, as u said u also got the html and images. Try this, open the original unedited psd template and press ctrl+h(or menu View->Extras), to view the slice layout that should have been saved with the template. If there are none, follow my instructions in the previous question to do it yourself.
What you need to do is Import the file into ImageReady....Then Slice the image using the slice tool,What that does is cuts the image into pieces, Then when you export as html, It will use each image that you cut as its own image instead of one big image, and it will put them into html tables.
barnarpAuthor Commented:
Thanks, will try the suggestions

Best way is here...try this..

1. Choose your PSD file...and open it in photoshop...
2. Now drag the guide lines and place the lines according to your image to be cut....[ Now your PSD files will view with guidelines over it...right]
3. Ok. Now choose slice tool from the toolbar...
4. Slice the images according to your guidelines that you have marked... [ Now you can see the PSD files will view with guidelines along with the sliced images with number as identity...right]
5. Now goto file and Choose Save for web...
6. You can see the dialog box of Save for Web...
7. In the right side you can choose in which format you want the images to be stored...(gif or jpeg...),quality..etc.. and press  the save button...
8. Now you can view the save optimized as dialog box....
9. Now choose your destination where the HTML file is to be stored...for example choose your destination as your desktop...and choose the file type as HTML and Images....and give the filename....and press save button...
10. Now your file is saved in your desktop folder..

11. Goto desktop...you can view the html file...and a images folder where your sliced images are stored...
12. By doubleclick the HTML file you can view the file in your default browser....

YES..Your PSD file is now saved as HTML file...


Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now