View Full Version : Advanced Slicing Suggestions!!!

01-27-2007, 03:21 AM

Here is a link to my portfolio mockup. I have never did an object oriented design like this so I need some suggestions on how to slice this... Any ideas? No table suggestions please.


01-27-2007, 04:27 AM
I need some suggestions on how to slice this... Any ideas? No table suggestions please.

With Photoshop CS2 and probably previous version also you can make your slices and switch after to Image Ready. To get div instead of table, click on File + Output Setting + Slices + Select Generate CSS. This will create divs with position absolute so you will have a good start. I think you will need around 20 slices because you will need slice for your logo, the top links navigation, 5 slices for the main links navigation(design, music...), 2 texts containers and the bottom right links navigation, etc...

I really like the design, good luck!

01-27-2007, 04:06 PM
Thanks for the suggestion!! And the comment. I'll post an HTML version of this today. Thanks again!!


01-28-2007, 09:54 PM
With Photoshop CS2 and probably previous version also you can make your slices and switch after to Image Ready.

Please don't do that. That's a very graphic designer or amateur kind of approach (I'm not implying that graphic designers are amateurs! Just either one has the tendency to go this way.).
ImageReady will just cut your image and paste the slices together like a puzzle... and then? I've seen a lot of people coming here and asking why their layout is breaking when they insert more content. The reason is because they went the "convienient" way and used ImageReady.

First of all: before you slice your layout think of how you would structure your website if there was no style and people should still undertand the meaning of the site.

As to your design: This, again, is a typical graphic designer's wesite design. I'm not saying it's bad. Far from it! It's really nice but it's also very static. You designed it for exactly 800 x 600 pixels. What's happening with the gray background if I have 1600x1200px? Do you wanna create an image of this size? The file size would be an impertinence! Also, what are you gonna do if you/your client (for whoever you do this) wanna put text there and it's more than the boxes can handle? You'll never know what someone might do. And you shouldn't limit the person to something. As a good website designer you create designs/layouts that looks nice in any resolution and can handle any amount of content without limiting the client and/or breaking the layout if something happens that you didn't design for. Get some inspiration on how to create flexible designs/layouts and about repeating graphics on http://csszengarden.com

Then, what if the content will always fit in the boxes (because you or your client agreed on that) and the visitor resizes the text or whatever? You can't prevent that and you can't foresee it - and your layout will break if it's that static.

Of course you can have the small text boxes get a scrollbar if it's more content but I'm sure this is not what you had in mind and you would think it doesn't fit into the design.

Now, after all that critique something constructive: If you are actually going with the layout as it is now then my suggestion for slicing it would be the following:

Hm, well, now that I think of it... if it's really gonna be like that and not supposed to change any size then you could have the entire image and just the link buttons would be their own graphics (PNG with alpha transparency - workaraound needed for IE). You would position a div above each box graphics which will contain the texts.

Don't get me wrong, I'm not disrespecting you or your work. It's very nice and I wish my graphic design skills would be that good. This was just some honest critique meant to enlighten you and give you some realistic insight. Websites barely look as their respective PSD design after you've published them. You should be preprared for any case.
Good luck. :)