.psd to html

by 7 replies
8
Hello,

I am trying my hand at creating some graphics. I have a complete minisite template in photoshop.

How do I slice up the template so that I can export the header, the footer and the background images?

Thanks, I appreciate any assistance.

-Allan
#website design #html #psd
  • Summary: You can use some of familiar tools:

    1. Image Ready can cut stuff automatically and generate nasty HTML with the tables and cells.

    2. Macromedia Fireworks works well with Dreamweaver. You can open a PSD in Fireworks, slice it and then export to Dreamweaver.

    3. You can use Photoshop. Just slice all the different parts and create layers in Dreamweaver or some other WYSIWYG web design tool.

    The problem is that you will end up with so much stuff that you need to clean up and such a hard table layout to work with. At the end of day you will spend more time fixing things, than you would spend slicing the PSD manually. There is also need to respect the W3C Web Standards.


    Cheers,
    ~Albert
  • As a web developer, I avoid using any sort of software that automatically slices images and creates html content from PSD files. As SDStudio said, these programs frequently generate very nasty html that is not standards compliant. It's also typically not very SEO friendly, and it's a completely mess if you want to go in and change something afterwards.

    Slicing it by hand is typically the best bet, if you want to split it into images. My way might be a bit simplistic, but I typically use the crop tool, crop what I want (if it's the banner, or background, etc) then select file->save for web and devices.
    I save the different images, and then I'll write up a quick HTML/CSS template.

    It's a little bit tricky to learn at first, but it's definitely not rocket science. I often can convert a PSD to clean HTML in only an hour or two.
  • jump that template to image ready
    it will give you the html code of that image
    • [1] reply
    • Hey Allan,
      There are some really good tutorials out there that explain the entire process.

      If you only need those images, you can simply use the "slice" tool to select the area you need. It's similar to the crop tool, but it doesn't remove other elements of the design. The slice tool will essentially extract the area you choose and save it as a separate image.

      Here is a descriptive walk-through of the process:
      Slicing a website design
  • Here's how I normally do this process:

    I design the graphic template more or less in the same structure as I code the elements, meaning I create different groups for different elements, in example the header will have its own group, as well as the menu bar, side bar, main content area, footer etc.
    All these groups will contain various layers of design, all properly named to make it easier to keep track of what is where and so on.

    Once I'm satisfied, I copy all these groups, and then flatten each of them. This way, I still have the original groups and all of their layers intact, and can then use the new flatten layers as my graphics for the website. An easy way to isolate each layer is to have it selected in the layer palette, and then clicking on the layer thumbnail while holding down Ctrl (command on Mac). This will select the entire layer. Ctrl+c will copy its content, after which I will open a new document. Photoshop will automatically size this new empty file to the size of the layer I just copied, and all I have to do is to save that new file for web as either jpeg or png. The image is now ready to be coded into the project.

    Some might call this cumbersome, but it's fairly easy to get a hang of, and the little extra work to have everything properly organized and categorized will save you a lot of headaches later on.
  • I agree with lostarts, that video is best for beginners when converting your psd files to live HTML, afterwards you can explore it yourself and do some experiments,and later on,you can prove to your self that this is easy.
  • Banned
    [DELETED]
  • slicing just require experience and practice. My concern is to learn short keys of photo shop rather than slicing. you can get 1 px graphic and repeat it on the required area. at start try only with plain image and do not use texture images for slicing. these require some more experience

Next Topics on Trending Feed