Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    28
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Help with making a 2 image website background in Photoshop.

    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.

  2. #2
    Member
    Join Date
    Sep 2012
    Posts
    36
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    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.

  3. #3
    Junior Member
    Join Date
    Dec 2012
    Posts
    28
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    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.

  4. #4
    Junior Member
    Join Date
    Dec 2012
    Posts
    28
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    Thanks for the help I was able to accomplish the background I was looking for by putting layers on top of the gradient.

  5. #5
    Member
    Join Date
    Sep 2012
    Posts
    36
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    good to know that your problem is solved.

  6. #6
    Junior Member
    Join Date
    Dec 2012
    Posts
    28
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    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.

  7. #7
    Junior Member NishaS's Avatar
    Join Date
    Dec 2012
    Location
    Jaipur, Rajasthan.
    Posts
    12
    Post Thanks / Like
    Mentioned
    0 Post(s)

    Re: Help with making a 2 image website background in Photoshop.

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About Photoshop Gurus
Photoshop Gurus (PSG) is a friendly community of designers and artists who enjoy all things related to Photoshop. PSG can consider itself one of the oldest Photoshop sites and has recently had it's 10th anniversary. We've come a long way and have every intention to continue supporting the Photoshop community. Photoshop can be an overwhelming program for beginners and that's how we try to help. We have a friendly forum, tutorials and all resources to help you understand this wonderful program. Feel free to look around and if you have any questions, don't hesitate to ask. Happy browsing!