HTML Layout & Slicing – NEW GUY QUESTION

CD
Posted By
Chris_Dengler
Aug 20, 2004
Views
415
Replies
11
Status
Closed
I’m going insane.. This is for Photoshop CS with Image Ready. I have a page I’ve designed, and now I’d like to save it as a web page. HOWEVER, saving it off as HTML saves the page to the exact size. What I WANT to happen is to have it extend all the way to the right. Do I do this with slices? If so, how to tell the page to extend to the width of the browser?

I’m sure I’m being stupid, but I cannot find this at ALL!?!? Can ANYONE help me?

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

GH
Grass_Hopper
Aug 20, 2004
Chris,

When you slice an image, it works with pixel width and height units. You have taken an image of specific dimensions, sliced it up and put it in an HTML table with the same pixel dimensions. Stretching it to go to a percentage of the width of the screen will alter your specific pixel dimensions of the image and ruin it! You can’t have it both ways! You have to choose between either pixel widths or percentages. Well, almost … 😉

How about this: make your primary image, say 800 pixels wide. Slice it up the way you want. Have IR create the HTML page. THEN, put the IR created table inside a "container" table that has a background the same color as your sliced image background. Center the content in the container table and make the width="100%".

That would give you your specific sliced image, the way you originally intended it, centered in the page, as well as a background color to fill up the rest of the monitor on higher resolutions.

Just a thought…

grasshopper
CD
Chris_Dengler
Aug 20, 2004
I totally understand the theory behind the stretching and thank you for explaining. I also understand that in order for the slice to stretch to the width it must be a background for a TD cell. I’m wondering how to do this within IR or PS? Is there a way to tell the application(s) to specify this cell as a background rather than the image?
CD
Chris_Dengler
Aug 20, 2004
Also, I believe that I might find that it is the "Slice Type" and that I’d want to set it to TABLE instead of "IMAGE" or "NO IMAGE" within PS, but "TABLE" is grayed out? Am I on the right track?
GH
Grass_Hopper
Aug 20, 2004
Sorry if I was redundant with regards to your HTML knowledge, hope I didn’t offend.

IR does basic slicing and HTML rendering. If you want it to look different from the way that IR does it, you will have to go in and manually change the HTML file. I don’t believe there is any way to specifically tell IR to make an image a cell background image. The other potential problem with this is if you make a table too large and the cell stretches with it: the background image in the cell will tile.

BTW, you may know this already, so please forgive if it’s a repeat to you. When you slice the image, if you don’t do it in exactly even rows and columns (most folks don’t!), IR will insert spacers to keep everything lined up. If you change the width of TD cells, you will likely mess up the alignments of the images/spacers set up by IR.

I do all my slicing in ImageReady, not PS. That might be why you are not seeing "table" as an option. PS doesn’t make html tables, that’s IR’s job.
CD
Chris_Dengler
Aug 20, 2004
I can’t believe that it can’t be done? Are you serious? You can’t specify that a slice render it as a background image rather than an image? WOW. I had no idea…?

Ok, next question… if I have a layer that has text, how can I tell it that that particular layer of text is for HTML text?
GH
Grass_Hopper
Aug 20, 2004
Chris,
for the record, I am no IR expert! I just fumble along and am sharing what little I know 😉

If it were me doing this, I wouldn’t add text that you want rendered as text in a sliced image!

What you *can* do is make all your slices, name the text areas with some "image" name like "navtext" and allow the slices to be made (if you don’t name the slices, IR will name them for you). You will then have to go into the html, replace the "image" slice in the table with your actual text.

Now, that said, if you want your text to be graphical in nature, you can use color overlays in IR to create colorful rollovers on the text. The text will render the way you want and you will have "hover" color as well. An example of this, if you are interested can be found here <http://www.greenjumpyone.com/golf>. The tabs at the top are images with IR created hovers. The text on the left is actual text with the hover rendered via CSS.

ImageReady isn’t a full featured html editor, it’s only one tool in the arsenal.
CD
Chris_Dengler
Aug 20, 2004
Thanks so much for your input… it is greatly appreciated. What I’m doing is loading the trial for GoLive to see if it can facilitate my needs. Thank you again.
CD
Chris_Dengler
Aug 20, 2004
One last question: This seems silly as well… let’s say I’m working on a .psd file… and now I have another image I want to bring in (could be a .png, another .psd,.. whatever). HOW do I get this image into my .PSD that I’m working on?
GH
Grass_Hopper
Aug 20, 2004
open the psd file, open the "other" file, tile the windows, click in the layer palette for the "other file" and drag into the psd file. Simple as that 🙂

Bear in mind, if the resolution of the images are different, when put in the same psd file, one might be significantly larger or smaller than the other.

and you are most welcome 🙂
CD
Chris_Dengler
Aug 20, 2004
ok, but what if they are both .psd files? While trying to move the .psd file, I can only move one piece at a time? Not the whole thing? Sorry for the stupidity.
MM
Margaret_McDowell
Aug 20, 2004
Link your layers. Click on the inner block of the layers and you’ll see a little chain thing.

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections