resizing images in PS to use as background image in DW

VP
Posted By
victoria_p_froud
Jul 15, 2008
Views
530
Replies
8
Status
Closed
Hi there, I am building a site in DW and creating my images in PS CS. I just don’t know what size to resize my images in PS so that they sit nicely in the browser window as a background image with no scroll bars. I have tried every which way but they end up too big or too small. I am using Mac OS X.5. Would very much like some help as I can’t move on.
Thanks Vicky

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

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

KN
Ken_Nielsen
Jul 15, 2008
Are you CS2 or CS3?

You’ve got to consider what monitor resolution you want to target. Pages could be generated after a scripts detect the resolution the user is set at and then send a generated page to fit that computer, but that is overkill for what you are doing I’m sure.

You don’t say if you are trying to make a background pattern or just use on image to fit the screen. If you are using one image to fit the screen, set it at something reasonable that will work in most cases, say 900 x 600 pixels at 72 pixels per inch resolution.

Do you want the page to be the right size so users won’t have to scroll, or do you want no scroll bars to show? Decide what you want and tell us. You can also use ‘no scroll’ and I’m not sure if that is a part of (X)HTML or not, but for sure you can do it with javascript.

Do you want images on top of images? Either you need to use absolute positioning and z-index to put images on top of images, or do the entire display as a graphic. How you do this depends on what you want to see on your screen. Don’t get in over your head, as it sounds like you are trying to do. You might be a print designer trying to do a site layout without considering the nature of HTML. Lay out a plan on paper and map out placement and size of your images. Do everything in pixels for size, width and depth, and everything kept at 72 pixels per inch resolution.

That is the basics. Do your page, the best you can, post it somewhere so we can look at it and kibbits further to help you move on.

Ken
B
Buko
Jul 15, 2008
You need to use pixels as your unit of measure when working on web stuff.

how many pixels wide to you want the background to be.
VF
victoria_froud
Jul 16, 2008
Hi Ken and Buko, thanks for reply. I have built sites before by filling in background with colour and layering graphics on top, no problem. This time I wanted a simple site with a drawing of myself at the front door. At bottom left is a pile of bricks which will act as links, either rollover or hot spot. Very simple. I just can’t size the graphic in P Shop to sit nicely in the browser window. Have tried every combination 900×600 900×500 900×400. I need it to be at least 900 wide but when I reduce the height it distorts the image. I always work at 72ppi for web but I need those bricks sitting on the bottom of the page to be in view without the use of scroll bars. If you have any suggestions I would be most grateful.
Thanks Vicky.
KN
Ken_Nielsen
Jul 16, 2008
Are you re-sizing your image in Photoshop or in Dreamweaver? You do not want to do it in Dreamweaver.

It would be sooooo much easier to help you if you posted, even if it’s trash at this point, a link to the page you are working on. Then we can really see what is going on.
AS
Ann_Shelbourne
Jul 17, 2008
I need it to be at least 900 wide but when I reduce the height it distorts the image.

It does that unless you keep "Constrain Proportions" checked when you re-size an image.

What I think that you need to do (if I am understanding you correctly) is to re-design your image so that the bricks are further up in the image; and so that you can then CROP the finished image to your required 900 x 400 pixels (if that’s the size that you want) and all of your elements will still be in the frame.
VF
victoria_froud
Jul 17, 2008
Hi Ken, thanks for reply. If I could post it to you I would but to be honest I don’t know How. Am new to forums and even have problems finding my way around. If you can tell me how I will. I think my problems have been using the wrong document size from the begining. Normally I will just use A4 size and re-size images from there. Never gave it much thought before and even now not sure. My only answer I think is to go back to my layers and re-size background layers from there and re-size images to go on top. Can’t think of any other way around it.
Thanks Vicky.
VF
victoria_froud
Jul 17, 2008
Hi Ann, thanks for reply. Have just been telling Ken I think the only solution is to go back to the layers and re-size the background and then images to fit. Have never given too much thought to document size before but then have never used an image as a background image before. Can find nothing much in the manuals which talks about document sizes but now will give it much more thought. Raising the bricks up just wouldn’t work as they need to be on the ground. Will try and find out how to post the page so you can see.
Thanks Vicky.
KN
Ken_Nielsen
Jul 17, 2008
Stay away from ‘layers’ which are actually AP divs which you should steer clear of.

It sounds like you would benefit highly by taking a introductory class in, 1.) (X)HTML and CSS, and then, 2.) DW at your local community college. Just a 6-8 week non-credit class for each would not cost too much and you would be covering all the basics to make your working with DW a success.

Other than that, there are books, classroom in a book is one, ‘Hands On Training’ by Garrick Chow is another, but things are moving fast, making much of what you find in these books based on deprecated or fading techniques. For the ‘behind the scenes’ in what DW is really doing, you need Elisabeth Castro’s HTML, XHTML & CSS sixth edition. You need to keep pace with how to set up your pages initially using floated divs and CSS as this is the area that is moving ahead the fastest right now.

Check into your local classes and have fun.

Ken

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections