What's new
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!

Help with making a 2 image website background in Photoshop.


wheelstb

Active Member
Messages
34
Likes
0
Let me set by saying I am extremely new to Dreamweaver and Photoshop. I volunteered to attempt to make a website for a local organization. I'm running up against my deadline so, I'm trying to get this figured out as quickly as possible. I would appreciate any help.

I want to create a background for the webpage. I want to have a vertical image occupying a few hundred pixels on both the left and right sides of the screen stretching from the top to the bottom.

Between the image on the left and right sides I would like to have a fading gradient in the middle. I think I have properly created my vertical image and my fading gradient.

How do I put the two together correctly?Thank you very much for any help. I really appreciate it.
 

dworx

Active Member
Messages
36
Likes
3
can you explain your problem more precisely. I guess if you make a single image having the vertical images and gradient and use it as background image in html that should work. Let me know if this solves your problem.
 

wheelstb

Active Member
Messages
34
Likes
0
Thanks for the reply I really appreciate it

I've tried to explain my idea to several people and I am doing an awful job of making my vision clear. The best way I can explain is to think about drapes and a window. I would like the vertical image to be on both the left and the right side drapping down the page. Then I went to have a another image in the middle.

I think your methodology might actually work but now that I think about it I just don't think my idea will look that good, nor would I have the skills to correct the situation if what you've explained in your post doesn't really match what I have in mind.

I'm kind of running up against my deadline so, with my skills and my vision being rather far apart I may have to go with something else. Can anyone recommend a good way to make a unique look professional looking background using Dreamweaver and Photoshop.
 

wheelstb

Active Member
Messages
34
Likes
0
Thanks for the help I was able to accomplish the background I was looking for by putting layers on top of the gradient.
 

wheelstb

Active Member
Messages
34
Likes
0
Thanks for following up.


Now I have another round of questions. I noticed that the background I created does not come close to filling the screen part of that could be because I have a 24 inch wide screen monitor.

What should I keep in mind so that I create a background that fills the screen well in most browsers and at most resolutions? It seems like it would be a question of what canvas size to use. If so what size should I be using?

Thanks in advance I appreciate the help.
 

NishaS

Banned
Messages
12
Likes
0
weelstb,
try this...
step 1. slice 1 or 2 pixel vertical line image from the background you have made in Photoshop.save it as jpg/png/gif in your folder where your website images are.

step 2. using css element selector apply it as background image in body tag with repeat-x attribute.

for testing use firebug addon in firefox.
 

Top