A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: Do you use Photoshop to create webpage comps?

  1. #1
    Filmmaker J-Luv's Avatar
    Join Date
    Jan 2002
    Location
    With her.
    Posts
    1,499

    Do you use Photoshop to create webpage comps?

    i use fireworks right now to do my layouts in and then to slice. is it possible to do this in photoshop and is it easier?
    Never take life too seriously. Nobody makes it out alive anyways. Film Portfolio


  2. #2
    He has risen! lefteyewilly's Avatar
    Join Date
    Mar 2001
    Posts
    2,597
    i use photoshop exclusively. It's definitly possible to do it. I don't know what fireworks has and i've never used it, so i don't know if i its easier than photoshop.

  3. #3
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    Always. Layout the site, then use guides to create the sections, then slice that bad boy to slices.

    [ Hello ] | [ gerbick ] | [ Ω ]

  4. #4
    Filmmaker J-Luv's Avatar
    Join Date
    Jan 2002
    Location
    With her.
    Posts
    1,499
    is there anything i can read on how to slice in photoshop? i have to take a test for potential new job and they said i have to use photoshop and warned me not to slice the layout comp "the old school way".....i asked what he meant and he said dont just cut up the webpages in slices and export individual pieces of the image....he said to use photoshop and do it the "right way"

    now i'm nervous because apparently i have been doing it the 'old school way'.....so what is the 'right way' can anyone elaborate?? help a fellow webdesigner get a better paying job

    thanx in advance
    Never take life too seriously. Nobody makes it out alive anyways. Film Portfolio


  5. #5
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    With no details... hell I might be doing it the "old school" method. Not like this person did you a favor by being that ambiguous.

    [ Hello ] | [ gerbick ] | [ Ω ]

  6. #6
    Filmmaker J-Luv's Avatar
    Join Date
    Jan 2002
    Location
    With her.
    Posts
    1,499
    so how do "you" do it in photoshop?
    Never take life too seriously. Nobody makes it out alive anyways. Film Portfolio


  7. #7
    HUH? pea3698's Avatar
    Join Date
    Mar 2001
    Location
    Greenville SC
    Posts
    1,771
    I build the site in photoshop. Then place the guides for slices. Then I hit the button to take it over to imageready. This button is at the bottom of the tools pallet. If you know photoshop, imageready will be a sinch to catch on to. Once in there you can all sorts of things. Just look at it and you'll see pretty much how it works. It is hard to say how to do it because of the different directions you can go in. But it automates alot of the slice naming, slicing, and saving. It is truly a great tool.
    ------------------

    Sometimes we are the windshield. . . But, most of the time, we are just the bug. (c;
    My cycling themed designs Pats Design Portfolio

  8. #8
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    I don't do what he just said... even though that's - in my opinion - the correct way to do it. I dislike ImageReady enough to where I don't even open it unless I truly need to. I tend to create selections where I'm snapping to the guides, then Image > Crop, and then save Image for Web... step back once, and then redo it for the other slices. It's a bit "clumsy" my manner, and I end up saving each and every slice as well as the total comp; but it fits my workflow a bit better that way. I just "feel" better doing it that way... same for the coding of the site. I'd rather do it by hand and be a bit more "lean" than the ImageReady produced stuff - but it does handle nested tables better/faster than I tend to code though. Same for rollovers.

    Oh, and odd thing? I take my slices through Fireworks sometimes to make sure I can crunch the absolute best color palette - again, all to avoid ImageReady. I should look into it, my hate for ImageReady is actually based on before they bundled it with Photoshop... so that's... Photoshop 5.x era perhaps?

    I'm a creature of habit. Listen to Paks (erm, Pea)... his method is the "correct" manner using the tools in the CS suite, imho.

    [ Hello ] | [ gerbick ] | [ Ω ]

  9. #9
    Senior Member
    Join Date
    Oct 2003
    Posts
    901
    amazing.. the 'old way' is extremely time consuming for me because i have to optimize each pieces at each save. if ur new to photoshop then better use imageready.

  10. #10
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    I'm a control freak. Total control over each piece is my goal...

    [ Hello ] | [ gerbick ] | [ Ω ]

  11. #11
    Senior Member
    Join Date
    Oct 2003
    Posts
    901
    Gb, it know its ur preference but image ready also allow to optimize each slices so u still have total control on each one anyway. ...so what have u got against image ready?

  12. #12
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    It's just a few things... like for instance, if you add something to the fifth frame of an animation, and you move it... just a pixel, your animation will jerk. To go back, and move it back, then it affects the rest of the frames. Sorta like a tug-of-war sometimes on something that should be minor.

    I also remember setting up CLUTs/index palettes with print or specific Pantone Colors and making it "stay" was a problem. And finally... small things like selections - can't use the CTRL+A and the quick arrow up then down to select items on a transparent layer. And masks... they're different from PS just a little bit from what I remembered.

    Like I said... I might not be the right person now though to ask... like I said. Haven't really honestly been in ImageReady for more than 5 minutes since it came out.

    [ Hello ] | [ gerbick ] | [ Ω ]

  13. #13
    HUH? pea3698's Avatar
    Join Date
    Mar 2001
    Location
    Greenville SC
    Posts
    1,771
    Honestly I have always tried to do any coding I can myself. If I can't do it, I go out and find it. Then I study it. So I pretty much don't use imageready for anything but slicing and dicing... I will aggree with G about taking it to fireworks to crunch it a bit more. I always found it seemed to optimise a bit better. But I still trust photoshop and imageready plenty..
    ------------------

    Sometimes we are the windshield. . . But, most of the time, we are just the bug. (c;
    My cycling themed designs Pats Design Portfolio

  14. #14
    poet and narcisist argonauta's Avatar
    Join Date
    Nov 2001
    Location
    Under the bed
    Posts
    2,080
    amazing. I use photoshop exclusivelly. Do the layout (usually someone else does) then, copy some elements to a new psd (like bullets, buttons, stuff that is small and needs a transparent bg), so i slice that, also slice the original psd.

    Then, save, open dreamweaver and code everything from scratch. I guess that's too oldschool, but i just don't like automated code. I code everything by hand.
    my blog: blog.innocuo
    Sponsored by your mom.

  15. #15
    Filmmaker J-Luv's Avatar
    Join Date
    Jan 2002
    Location
    With her.
    Posts
    1,499
    but what else is there left to code if the webpage looks exactly like the photoshop comp? besides adding in additional features like forms, etc?
    Never take life too seriously. Nobody makes it out alive anyways. Film Portfolio


  16. #16
    Filmmaker J-Luv's Avatar
    Join Date
    Jan 2002
    Location
    With her.
    Posts
    1,499

    okay what about this?

    say you were provided this webpage as a photoshop image: http://www.kbhome.com/ and you were supposed to slice it up and convert it to a webpage.

    how would you get the tables to be saved as background images so you can type html text in it like its setup at the bottom of the page?

    if you type too much text in there wont the table mess up/be locked to a specific size or will it adjust with how much text you put in the table?
    Never take life too seriously. Nobody makes it out alive anyways. Film Portfolio


  17. #17
    Senior Member
    Join Date
    Oct 2003
    Posts
    901
    normally i just do all the slicing in photoshop/imageready and open them in Dream.
    then add whatever i like from there.

  18. #18
    -i11.5Ki113D- jerryCLEMENT's Avatar
    Join Date
    Jan 2004
    Location
    Los Angeles, CA
    Posts
    248
    I always use Photoshop for my layouts. Although i never use the slice tool, i have just gotten used to doing it by hand. I create the layout, and simply cut the background image out, make a new image and paste and save for the web. You can check out the most recent on i did here http://www.jantexdigital.com . Every image except for the actual products i created in PS before taking it to HTML. Just set them up as background images and lay everything above it.

  19. #19
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,978
    Hi there Jerry... mind trimming that footer down to Flashkit standards?

    300 pixels wide by 40 pixels high. Thanks in advance. And thanks for sharing your technique too...

    [ Hello ] | [ gerbick ] | [ Ω ]

  20. #20
    Member
    Join Date
    Apr 2005
    Location
    Akron, Ohio
    Posts
    64
    My understanding of the original question is that he doesn't want you to crop, resize and optimize manually. Here's how I do it. Place your guides in Photoshop, and click over to ImageReady. Go to slices/create slices from guides. Then, you can shift-click on the slices you've created to connect the ones that you don't want sliced. Then, go to slice/combine slices. Open up the optimize window, and that's where you can optimize each slice individually. That's where you tell it what compression you want, what colors you want transparent, and what file type to save as. Open the slice window, and that's where you give each slice a file name. Go to file/save optimized as... and then save it as html and images. Then delete the HTML, because it's garbage. Build your page as you normally would in dreamweaver.

    That's how I do it. If you can come up with an easier way, I'm all ears.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center