Photoshop to HTML

LW
Posted By
Lisa_Washington
Feb 5, 2004
Views
237
Replies
6
Status
Closed
Is there a way to make the table created through Photoshop expandable in HTML? For example the resolution of the person screen is 1024 X 768. Instead of seeing white space around it, the table expands. I have tried using the 99% width in Dreamweaver, but the image falls apart. The cells expand but not the image.
Related Tags
html

How to Master Sharpening in Photoshop

Give your photos a professional finish with sharpening in Photoshop. Learn to enhance details, create contrast, and prepare your images for print, web, and social media.

L
LenHewitt
Feb 5, 2004
Lisa,

Image files are not MEANT to expand/contract. If you look at any HTML source code, where there is an image it with have something like the following code in it:

<img src="/images/1234.jpg" height="106" width="231" alt="">

Now the 106 and 231 refer to the pixel-count in the image – it is 231 pixels wide by 106 pixels high.

If you wanted display that image at any other size you would have to alter that width and height in the HTML code, but doing so, and making the dimensions any bigger than the actual pixel-count on the image file will result in really terrible looking images, and will also increase the page display times.

In Other Words, DON’T DO THAT!
L
larry
Feb 5, 2004
It won’t increase the page load time because it’s still the same image being called for from the server. The image tag (height and width) lets the browser knows how much space to leave for the image while loading the rest of the page and if the tag is incorrect the picture will look distorted.

Larry Berman
LW
Lisa_Washington
Feb 5, 2004
Thanks guys. LOL. Len, I PROMISE, I won’t do it. I just wanted to make sure that there wasn’t a way before I tell my customer I can’t.
RH
r_harvey
Feb 5, 2004
Leave the size of the image alone, and place it in a width="100%" table with the same background color as the image. The image will stay the same, but the background will change to match the browser window width.
DP
Daryl_Pritchard
Feb 5, 2004
Lisa,

As Len says, you’re going to get a messy image and thus you probably shouldn’t do this. However, what you describe can be done if you’re willing to accept the consequences. Here’s an image I just sliced up to demonstrate the result: <http://jazzdiver.com/photoshop/f16sliced>

The image summarizes the steps, but to repeat them here, you’d define the table properties with 100% height and width, the image slice properties also at 100% height and width (don’t use pixel dimensions), and remove any height/width properties for the individual cells. That way, the cell size is governed by the image slice size.

Hope that helps…but don’t blame me for an unappealing image! 😉

Daryl

P.S. – Hmmm…maybe r_harvey nailed what it is you’re actually wanting to do, simply expanding the background color while keeping the image at its original dimensions. If so, their approach will take care of it!
DM
Don_McCahill
Feb 5, 2004
This is a fairly simple thing to do. The graphics do not stretch, but you can make the table that holds them that will cause elements to stretch and thus always fill the screen.

Your main problem is using the wrong tool. Photoshop is not a web page creation program. It is only useful for making prototypes of web pages, and for making elements of web pages. When you want to do anything other than making the simplest of web pages, as in this case, you need a tool with more power, like Dreamweaver or GoLive (or plain HTML coding skills).

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections