SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading-image Gradiant?

    http://www.dartmouth.org/classes/79/

    I've seen alot of images on the web like this before but im wondering how i can redesign an image similar to it.Do you see the left nav bar how it starts to be green and then goes to a clear white?Is this just a gradiant or what?Ive also seen images where there are like black in the beggining and it fades out at the end.Can someone point me to a good tutorial on this subject?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Enthusiast hartofalyon's Avatar
    Join Date
    Aug 2008
    Location
    NYC
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    isn't it just a simple gradient? in photoshop, layer style > gradient overlay or the gradient tool.

  3. #3
    SitePoint Member John&Mac's Avatar
    Join Date
    Nov 2008
    Location
    Cardiff
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get yourself the Web Developer toolbar addon for Firefox, which will greatly help you see how web pages are broken down. Using this, select "images/view image imformation" to get ***/classes/79/images/menu_top.jpg and ***/classes/79/images/menu_bottom.jpg all becomes obvious. Yes, using gradients in Photoshop will do it. I also recommend the Scrapbook addon too, which saves a self-contained copy of a page to your drive, which you can then open as if your own, say with Dreamweaver for example. As for tutorials, pass. *** is your initial website URL, because as a newbie here I can't use a URL in this post yet.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's just a gradient fill Blake.

    Not sure if you use PS or FWs, but here's a simple example.. both boxes are the same height, just depends on how far up or down you take the gradient...


    You should be able to download it (right click - save as, should work) and have a play around with it.

    Nadia

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    You can also make a simple gradient block online:

    http://tools.dynamicdrive.com/gradient/

    but you don't have the control over the gradient shading, etc that you do in PS.

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Nadia for your Example. Hmm, it just looked weird to me.I figured it was a gradiant.I was trying to find a example to show you what i meant.I couldnt find one though.Alot of people have graphics like this.How can i take a 4 px line height x width and have them black at both ends and make it almost disappear in the middle of the graphic?Do you know what i mean?I use photoshop CS3 also.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure without seeing an example, but it still sounds like a gradient fill... but instead of the gradient going verticallly, it goes horizontally, with black colour at both ends and possibly white in the middle...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •