• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
ThreeCell Digital Advertising Agency

ThreeCell Digital Advertising Agency

ThreeCell Digital Advertising Agency

  • CLIENT LOGIN
  • THREECELL BLOG
  • NEWS
  • CompanyWho We Are
    • About
    • Our Process
    • ThreeCell Awards and Testimonials
    • Vision & Mission Statement
  • ServicesWhat We Do
    • Web Design
    • Print Design
    • Social Media
    • SEO Services
  • PortfolioWhat We’ve Done
    • Web Portfolio
    • Print Portfolio
    • Social Media Portfolio
  • ContactHow To Reach Us
You are here: Home / Design Tips / Using Gradients to Enhance Your Layout

Using Gradients to Enhance Your Layout

July 26, 2012 by Threecell Leave a Comment

One very useful technique in giving your web layout an extra “edge” is using gradients. Photoshop comes with many default gradients, most of which use two completely different colors such as black to white. Because of this, there are some folks who mistakenly believe that a gradient has to involve two completely different colors. Turns out that some of the best gradient effects come from using two very similar colors, say a green and a slightly lighter green. By creating gradients that transition similar colors, you can create the illusion of lighting effects and are more likely to grab a user’s attention. In the example below, we have a green background with some text on it. In the second image, we have the same text only on a gradient background.Using Gradients in Web Layouts

While the difference may not seem that obvious, the second image looks more dramatic because it appears as if there is a lighting source. It’s all an illusion created with just the right colors. When it comes to backgrounds, I’ll almost always use these types of gradients rather than solid colors. It’s a way of adding an extra kick even if it’s not readily obvious to the viewer.

In the web design field, the same subtle gradient technique is used regularly for buttons, corners, logos, and virtually every other design element. Below is a more noticeable example of a logo using flat colors and the same logo using gradients. You’ll notice that one appears far more 3-Dimensional than the other.Gradient Logo Example

Of course, I’m not suggesting that you go anti-solid color and opt for gradients in everything. I’ve had my share of layouts that didn’t get past the cutting room floor because it was too gradient-happy :). There will be many times when solid colors are just what the doctor ordered especially when going for a highly corporate look. But just remember that when creating layouts, don’t hesitate to explore your options and have fun with it. So the next time you consider doing a standard fill, consider hitting the “G” shortcut and see what happens.

Filed Under: Design Tips

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Latest News

  • ThreeCell launches Online Presence for Japanese, Sushi, and Thai Cuisine Restaurant
  • ThreeCell Launches Coffee Directory and Magazine – Best Quality Coffee
  • ThreeCell launches new medical association website – American College of Radiation Oncology
  • Montana’s MarketPlace launches new statewide online marketplace
  • How to Make Quick and Realistic Photoshop Drop Shadows

Site Search

Archives

  • April 2020
  • September 2016
  • June 2016
  • December 2015
  • August 2015
  • July 2015
  • June 2015
  • November 2014
  • September 2014
  • August 2014
  • May 2014
  • April 2014
  • March 2014
  • January 2014
  • December 2013
  • February 2013
  • January 2013
  • November 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • February 2012

Footer

Latest News

Suki Cafe - Best Japanese, Sushi, and Thai Restaurant in Helena

ThreeCell launches Online Presence for Japanese, Sushi, and Thai Cuisine Restaurant

Best Quality Coffee

ThreeCell Launches Coffee Directory and Magazine – Best Quality Coffee

American College of Radiation Oncology - Medical Association Website

ThreeCell launches new medical association website – American College of Radiation Oncology

5268G Nicholson Lane
Suite 172
Kensington, MD 20895

E: info@threecell.com
P: (301) 312-8610

Copyright © 2023 · ThreeCell