Photoshop to Dreamweaver

Discussion in 'HTML & Website Design' started by Roosta, Feb 14, 2008.

  1. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #21
    Just to get a rough idea, does this sound like a reasonable approach of how you can go about the process?

    Photoshop for image design > slicing in imageready, then using XHTML and CSS to bring everything together?

    Note: not relying on code created by software.
     
    pipes, Feb 21, 2008 IP
  2. D_C

    D_C Well-Known Member

    Messages:
    1,107
    Likes Received:
    21
    Best Answers:
    1
    Trophy Points:
    160
    #22
    File -> Save for web

    Open it in dreamweaver...
     
    D_C, Feb 21, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Pipes:

    When you properly learn HTML and CSS, you'll find that slices are (usually, it depends on the site layout) huge and unnecessary.

    I did recently take a site someone was working on on another forum and he had a gazillion little images... and I took his images and ended up making three big "slices" which was a decent solution for the way he had that site designed. But normally, you don't.

    The reason usually is that the idea of a slice is that it holds a lot of different parts of the site within it. So, it's usually quite large. For instance, to take an image of a header you've made in Photoshop and stick it at the top of a webpage is 95% of the time the biggest filesize for what your end result is, plus any text in the image is "locked" in there-- people don't always see images on web pages, and you want there to still be text for them.

    Hmmm, I'll show you this: there was a guy on another forum who had this big PSD (and ZERO content, which is difficult to design for... I think this was going to have band information on it or something, and I still have no clue where that info would go) and wanted it in slices. I tried my hand at building it in ordinary HTML and CSS. http://stommepoes.nl/Ruztik (original images from the guy are ruztik.gif and ruztik.png)

    I had to take his PSD and cut out little pieces with the Gimp (like, the speakers for instance and the cityscape and the plane...) but if this were made of slices, you'd have a lot of "image" holding single colours like the blue sky. Css can make the same blue sky with a much smaller total filesize. Borders (unless extra decorational) colours, and fonts should be as CSS'd as possible.

    So, yes you will use the individual images in your PSD for your website (if you kept stuff in seperate layers, this makes things much easier!) but you see what you can get away with the CSS doing before adding images. Not everyone has ADSL : )
     
    Stomme poes, Feb 22, 2008 IP
    pipes likes this.
  4. pipes

    pipes Prominent Member

    Messages:
    12,766
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #24
    Thanks for explaining Stomme, very useful post.
     
    pipes, Feb 22, 2008 IP
  5. Aaron111

    Aaron111 Well-Known Member

    Messages:
    4,301
    Likes Received:
    29
    Best Answers:
    0
    Trophy Points:
    185
    #25
    great read
     
    Aaron111, Feb 22, 2008 IP
  6. DjChugg

    DjChugg Active Member

    Messages:
    362
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    85
    #26
    The best way is using html and css, i think, sometimes html can take a while learning
    good luckk
     
    DjChugg, Feb 22, 2008 IP
  7. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #27
    Just a note on the original issue. Photoshop is a pixel-based photomanipulation program. Html is a programming language.

    That might be like me saying: I'm having issues transferring my song I deisgned in FruityLoops into photoshop. Apples to oranges.
     
    innovati, Feb 22, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #28
    Hit the nail on the head (except HTML isn't a programming language, just a lowly markup language)... using Photoshop to write HTML is the straight road to sh*t code... why they even added that as a feature, I'm not sure.
     
    Stomme poes, Feb 24, 2008 IP
  9. innovati

    innovati Peon

    Messages:
    948
    Likes Received:
    63
    Best Answers:
    1
    Trophy Points:
    0
    #29
    Photoshop used to come with a companion program called ImageReady that was inteneded for making animated GIF's of your photoshop documents, for slicing images into image tables and adding rollover functionality in JS.

    ImageReady is now built into photoshop.
     
    innovati, Feb 24, 2008 IP