#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    35
    Rep Power
    2

    Question How to make high quality web page backgrounds


    Hey guys,
    I am wondering how I can make a background that will come out in a high resolution(good looking).
    Much like this one:
    http://www.simcity.com/en_US

    I have tried to find many tutorials without luck.
    If you could please tell me how you do it,
    If you know a tutorial that actually shows me what i want to do,
    And what program you use to do it(Photoshop, etc.)

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Posts
    48
    Rep Power
    2
    Well, the main thing is that you have to start with a high resolution photo in order for it to be high resolution/sharp in the end.

    Also, you'll notice that their photo/illustration is only for the top of their web page. If you scroll down it fades to blue. What they are doing is using a non-repeating background image that fades to blue, and also using a blue background color for their body element.

    Simcity has set it up in a sort of ... interesting way, but there are a few ways to achieve this.

    1. First, create your background image in Photoshop. Make sure it fades to the color you want. You can do this by creating a top layer, using the marquee tool with a 250px feather, and filling it with your desired color.

    2. Set up your HTML/CSS so that it will display it correctly. An easy way that I can think of is to set the style for your body to match something like this:

    Code:
    /* Replace #FF00FF with your desired background color */
    background: #FF00FF url('path/to/image.png') center top no-repeat;
    Hope that helps!
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2012
    Posts
    39
    Rep Power
    2
    To create high quality background you must need huge knowledge on Photoshop If you practice seriously must you can make attractive graphic are that you can use anywhere.
    For tutorial you can visit lynda.com. But you need to pay to watch there tutorials
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    35
    Rep Power
    2
    Thanks, both of you.
    now I know where to get started...
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0
    Thanks now I know on how to do high quality web page backgrounds thanks!
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0
    Thank you
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2005
    Posts
    142
    Rep Power
    0
    just out of interest, why hasn't that trash above got a Spam icon, as that's all the post is?
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    35
    Rep Power
    2
    Originally Posted by KillerWolf
    just out of interest, why hasn't that trash above got a Spam icon, as that's all the post is?
    I also that wtf....
    If i wanted to buy something I would google it. But then again if I buy something I wont ever learn how to do it myself. ??? I dont get it. maybe it is spam; or maybe he is just making a suggestion...

IMN logo majestic logo threadwatch logo seochat tools logo