1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Photoshop help - Fading background

Discussion in 'Photoshop' started by dcristo, Jan 19, 2007.

  1. #1
    Is this easily accomplished in Photoshop, instead of having a flat color background I want to have the color fade from left to right or down to up... stuff like that.
     
    dcristo, Jan 19, 2007 IP
  2. pyles

    pyles Peon

    Messages:
    284
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use Gradients and fade to black/white/transparent *then save as a transparent gif or png*.

    Sorry I haven't any time to go into detail, hope this gets you atleast started.
     
    pyles, Jan 19, 2007 IP
  3. Logicaly

    Logicaly Peon

    Messages:
    75
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    To elaborate a bit what pyles just said. Open up the document you want the fading background on. Go to your background layer, which is usually the bottom most layer.

    With that layer selected, select your gradient tool (its in the same spot as the paint bucket, just right click on it I believe it is and it will bring a little option menu up), create or select the gradient you want to use.

    Once you have done that...start either from top to bottom of the document, or from bottom to top of the document, and drag the mouse button down, so that it stretches the entire length of your document.

    Once thats done, let go of the mouse button and there you go, fading background.

    In order to save it as a transparent gif, you need to export to web, to save as a png, just do a save as.
     
    Logicaly, Jan 19, 2007 IP
  4. Bween

    Bween Peon

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    or,
    Browsers have generally poor support of transparent capable images, so just do the gradient from color X to the background color of your current page.

    This also includes some CSS coding. Do you know how to do this part or. . . ?

    pretty easy, strip out the quotes:
    in your css document:
    html, body {
    background: #"hex code of Background color" url("location of your background image") repeat-x;
    }
     
    Bween, Jan 24, 2007 IP
  5. Advent Weapon

    Advent Weapon Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    what does it matter if you save it as a png or gif, its not like your trying to make it transparent are you? if thats the case, your going to have to use the gradients upon a layer mask to do this, otherwise if u just do regular color fadings, it wouldnt matter, its going to fill in a solid color, but if u plan on having fades transparent, youll need to add a layer mask, then fade it.
     
    Advent Weapon, Jan 24, 2007 IP
  6. Advent Weapon

    Advent Weapon Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    well the question is.. "is this for the web or just a design"? otherwise you are correct, but PNG will be able to make it transparent fade finely except for gif
     
    Advent Weapon, Jan 26, 2007 IP
  7. Bween

    Bween Peon

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Your completely right, I have a tenancy to think everything is web related or intended.
     
    Bween, Jan 30, 2007 IP
  8. ramakrishna p

    ramakrishna p Well-Known Member

    Messages:
    1,786
    Likes Received:
    361
    Best Answers:
    0
    Trophy Points:
    190
    #8
    Applying Gradients In Photoshop Using Blending Options

    The following tutorial may help to apply Gradients and edit the Gradient Colors at any time. Before applying gradients to original image, practice this on single layer. Always apply Gradients by using Blending Options. The Gradients colors applied to layers through Blending Options can be edited any time.

    (1) Open new document with width and height set to 600 and 100 pixels.
    (2) Create a layer and name it Gradient.
    (3) Fill the gradient layer with any color.
    (4) Double click on Gradient layer to open Layer Style Dialogue box.
    (5) Check Gradient Overlay option in the Layer Style window (Last but three options)
    (6) The Gradient Layer color will convert to black and gray gradients. (Check preview option in the Layer Style dialogue box if it is not checked to preview the changes you make)
    (7) In the Center of the window under Gradient overlay options, click inside Gradient color bar to open Gradient Editor.
    (8) The Gradient Editor initially appears with right and left color stoppers. You can add more color stoppers by clicking below the color bar. To remove color stoppers just hold the color stopper and drag away. Play around with other options in the Gradient Editor by adding and removing colors gradients to left and right stoppers. Also here you can apply Photoshop preset Gradients.
    (9) To increase and decrease opacity of the left and right colors, click on Top color stoppers and vary with opacity percentage editor under Stop option below the gradient editor..
    (10) When done click okay.
    (11) Set the following option to the requirement in the Layer Style window.
    (i) Opacity
    (ii) Style
    (iii) Angle
    (iv) Scale
    (12) When done click okay. This same layer style can be applied to other layers with simple two clicks. To do this right click on the layer, select “Copy Layer Style” option from drop down option menu and paste the layer style on other layer.:)
     
    ramakrishna p, Jan 30, 2007 IP
  9. jay0000

    jay0000 Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    it is simple, just layer copy and background color change and type to 1,2,3,4,5,6,7,8,9 any word.
     
    jay0000, Feb 11, 2012 IP