Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

mikepro44

macrumors member
Original poster
May 18, 2008
86
0
Made up a tentative layout, still needs lots of work..

Wondering if anyone has tips on slicing it in photoshop, basically I want to make the page dynamic so it expands with content...

whitenoisecopy.jpg
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
I agree, so this is just some personal insight into the OP's request.

Folks here know I am a proponent of a liquid layout, mostly in headers and footers and only when sensible. I often slice using Adobe PS, and here is what I've learned, hope it helps the OP:

Let's say I've created a header that has a logo on the left, words in the middle and a couple of merged images on the right, with a uniform gradient top to bottom as the background all the way across mostly visible around the edges of the other images and highly visible under the words of course.

When designing the image I make sure I have some space between, say, the end of the words and the start of the merged images on the right. This is to imply 20 pixels across and whatever height, just showing the gradient, so if I "stretched it out" it would not matter. This area will be my "dynamic" slice. The logo will be another slice, and the merged graphics on the right the third and final slice.

In Adobe, you use the Slice tool to create the slices, right click on any slice (or use the slice select tool and click) and set the "dynamic" slice type to be "No Image". Name it something like "slice_dynamic" so you can easily identify it when exporting slices to HTML.

To export, File -> Save for Web -> Save

Change "settings" to "Other" in the save dialog
In the dialog that pops up select "Custom" settings in the top pulldown
Select "Slices" in the next pulldown
For "Sliced Output" be sure to select "Generate CSS" Referenced by "ID"

This generates XHMTL with CSS styles, no need to worry with pixel shims or spacer images when you save using HTML. But if you do, edit the HTML cell holding the dynamic image slice to use the image as a background and set width and/or height to 100% only for that cell. In the CSS version, edit the associated ID using background-image: url('whatever.gif'); without any width or height settings and the most appropriate styles, such as "background-repeat: repeat-x" or whatever works for you.

Not all versions of Adobe are the same, but you get the idea. Consult your Adobe help index for further assistance using your version.

-jim
 

mikepro44

macrumors member
Original poster
May 18, 2008
86
0
k so

Weblayoooutcopy.jpg



I made a new layout, any tips on slicing it up, i think the code is easy enough..

just have no idea how to slice it for html :confused:
 

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
It default slices to HTML, I just don't recommend it as the first choice. But I did supply help if you opt to do that.

I've nothing to add beyond that and it applies to any layout you could conjure up. Angelwatt also supplied very helpful links as well for a generic tutorial. Have fun and start slicing!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.