Converting Mockups to HMTL/CSS

Discussion in 'HTML & Website Design' started by buckmajor, May 19, 2009.

  1. #1
    Hi there

    I have been doing Website design in Photoshop for some time now and just thought I'll give fireworks a try since its been a long time using it. So I did up my Mockup design in fireworks which is not very heavy detailed. This was the reason why I wanted to use fireworks. So I'm breaking out of my comfort zone more like it ;).

    But after doing some research, it seems that a lot designers are using photoshop for almost everything e.g. plain layout or complex designs.

    What I want to know is, would it be easier to do the whole mockup in photoshop or just the graphics and use fireworks for layout? I know it comes down to personal choice but I strongly believe in improving a strategic way of doing mockups and slicing. So I'm pretty much looking for ways of cutting down time as much as can.

    I have my design layout in fireworks so I will have to find out what works for me and what doesn't through my own experience but until then, I would like to have as much facts as I can to use photoshop for the long run.

    My Facts;
    > One disadvantage for photohshop, there is no measuring tool to measure the width, length, X, Y e.g. to draw a box at 300px x 200px. One other way that could work for me in photoshop is to create the mockup at the size of your site and keep creating new document with the exact pixel sizes for all boxes or frames..
    > Fireworks does have this tool but it would be even better if photoshop had this too. Even though one uses pixels for print/web and FW for vectors.

    Many thanks in advance
    CHEERS :)
     
    buckmajor, May 19, 2009 IP
  2. vitnuce

    vitnuce Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I haven't use Fireworks yet,

    Suggest you using Dreamweaver, the perfect tool for beginner, and yes, for prof too :)
     
    vitnuce, May 19, 2009 IP
  3. blurredfringe

    blurredfringe Member

    Messages:
    77
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #3
    I can see no problem doing the whole layout in photoshop. much more with slicing it for html conversion. But i use fireworks too mostly for quick editing of images specially png's :)
     
    blurredfringe, May 19, 2009 IP
  4. Cameljourney

    Cameljourney Prominent Member

    Messages:
    1,731
    Likes Received:
    107
    Best Answers:
    0
    Trophy Points:
    325
    #4
    You can use measuring tools/ruler in photoshop, and i prefer to create whole mockups in photoshop then hand- coded it to XHTML/CSS.
     
    Cameljourney, May 19, 2009 IP
  5. jinnah

    jinnah Active Member

    Messages:
    198
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #5
    I am new to html and CSS. I am pretty wasy with photoshop and converting to html with CSS. But some of frndz sugget me not to do that. They tell it willl increase the site weight without necessity.
     
    jinnah, May 19, 2009 IP
  6. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Hi Camel, I've been using photoshop CS4 and older version for years and the problem with the ruler in photoshop, you can't edit and give it an exact dimension unless I've missed something in the new CS4? You will have to zoom in to 3200% just to line it up and to me its is using a bit of time. Not only that, it doesn't go further then 3200% just in case if I need to go 0.1, 0.2, 0.5 of a pixel.

    If there is a CS5, I hope they can add a measuring tool as FW where you edit the ruler and have full control of measurements.

    I know I might sound fussy but when it comes rectifying time, I am willing to take any avenue of doing this.

    I love using photoshop but if its for website layout then I will only use it if I am dealing with a very complex design...others might have a different opinion but yeah what do you think?
     
    buckmajor, May 20, 2009 IP
  7. Cameljourney

    Cameljourney Prominent Member

    Messages:
    1,731
    Likes Received:
    107
    Best Answers:
    0
    Trophy Points:
    325
    #7

    I only have CS2, and for measuring purpose like e.g. resizing element to exact pixel i use the info windows(F8) to help me out :)

    [​IMG]
     
    Cameljourney, May 21, 2009 IP
  8. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #8
    Thanks but you still have to drag it around and not only that, its not a precise alignment. Although the numbers seems accurate on the info panel when dragging a guideline but it still needs aligning once you zoom in at 3200% and this is an extra couple of seconds to do. I didn't care about precise measurements in the past when I designed websites but I have recently ;).

    However, in FW I can simply double click a guideline and type in the accurate number and it drops there in an instant even when I zoom in at 6400%, its the only feature I like (I think :D)

    This is so funny but it seems that, what I have asking for is a guideline tool in FW to be in photoshop which I believe will minimize my 'Guideline layout' time.
     
    buckmajor, May 21, 2009 IP