What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Variable width layer for web use?


F

FredGarvin

New Member
Messages
3
Likes
0
Hi. I'm taking my very first shot at site building using Photoshop CS3, and finding it quite easy and useful in getting the exact look I want. There's just one remaining task....getting the background layer (just a plain solid color) to have a variable width for anyone using a screen res wider than 1024. Currently, if I look at the page on a larger screen, the color stops at 1024 and the space to the right is just plain white. I want that color layer to fill the browser window, no matter how wide.

Do I need to somehow convert that layer to "CSS" (which I know nothing about) to get that variable width? Is CS3 capable of getting this result?

[Before you reply...I realize that Photoshop is not the best tool for web design, but please don't suggest that I purchase new software or learn html. I am just building one site for my own personal use, and that's it. I'm not yearning for a career in web design, and once this site is done, I'll likely never do it again. Besides, this site is about 95% finished, and it looks beautiful...just the way I was hoping it would turn out. Once this last little detail is solved...case closed.]

Many thanks!

Fred
 
Piece of cake Fred.

What you've ended up doing is slicing/saving your Ps document's background colour as part of the images that make up your site's look. Generally that's not done, but it's an easy fix.

Not that it matters much to you now, but the option in Ps's '"Save For Web" options window to "save a copy of the background colour/layer" might or might not help you, depending on what you're trying to achieve.

None-the-less... your solution now is a simple one. Put this code within the <body> tag in all of your html pages (it's near the top of the code): bgcolor="#put your color number here". For example: bgcolor="#4e6b2a".

To get this specific hex number, simply use the Eye Dropper tool and click on the background colour in your Photoshop web page document. This will assign your foreground colour to the toolbar. Click on that colour in the toolbar and at the bottom middle-right of the colour editor window that opens you'll see the hex code for that colour. (See the sample image attached) Copy&Paste that hex code to your html page's BODY tag the way i explained.

Just open your html document with Note Pad (or the Mac equivalent). The <BODY> tag is easy to find.

Hope this helps. :D
 

Attachments

  • hexcode.jpg
    hexcode.jpg
    24.7 KB · Views: 0

Back
Top