Do you use Photoshop to create webpage comps?

[J-Luv]

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?

[lefteyewilly]

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.

[gerbick]

Always. Layout the site, then use guides to create the sections, then slice that bad boy to slices.

[J-Luv]

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

[gerbick]

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.

[J-Luv]

so how do "you" do it in photoshop?

[pea3698]

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.

[gerbick]

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.

[Jujumon]

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.

[gerbick]

I'm a control freak. Total control over each piece is my goal...

[Jujumon]

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?

[gerbick]

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.

[pea3698]

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..

[argonauta]

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.

[J-Luv]

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?

[J-Luv]

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?

[Jujumon]

normally i just do all the slicing in photoshop/imageready and open them in Dream.
then add whatever i like from there.

[jerryCLEMENT]

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.

[gerbick]

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...

[crunge82]

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.