Solved

Question regarding image.

Posted on 2009-07-03
9
156 Views
Last Modified: 2012-05-07
I have a vertical line that creates a bar menu.

I would like the same blue I have in my image of the menu bar however I would like it to be shaded
like the red button in http://gvdating.com/search_results.php but using the blue color I have in the image.

#header-menu-bar
{
   font-weight: bold;
   font-size  : 1.0em;
   font-weight  :bold;
   font-family   : Arial, Serif;
   width : 100%;
   height: 23px;
   text-align: center;
   background: #65ACD7 url(../../Images/Header/bar.gif);
   color: white;
   padding-top: 10px;
   table-layout  :fixed;
}
This is the tutorial I got it from:

http://www.tutcity.com/view/aqua-blue-menu.10580.html
font.png
bar.gif
0
Comment
Question by:Chriscup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 12

Expert Comment

by:kevin_u
ID: 24775140
In the tutorial, step 6 is where you choose the blue color.
To change the color of the gradiant, click (or maybe double click) on the little pointer on the bottom left of the graidant.   Change it to your shade of red.

Also, in step 8, instead of making the rectangle black, make it a shade of the color you want.

You should be able to create any bar you like.
0
 

Author Comment

by:Chriscup
ID: 24775662
I tried but no luck?:-(
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24775831
so when following their tutorial, during step 6, you are unable to click on the gradiant color picker?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:kevin_u
ID: 24775873
The attached image illistrates what to click during step 6 of the tutorial:

6.jpg
0
 

Author Comment

by:Chriscup
ID: 24777768
Still I cannot obtain it.
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24777835
I'm not sure what to tell you.  Perhaps someone else would be able to help.  You should consider clicking Request Attention to get it back to the top of the list.
0
 
LVL 9

Accepted Solution

by:
statler01 earned 500 total points
ID: 24778893
There's more than one way to skin a cat...

The gradient on the buttons that you referenced is pretty simple, it's not as complicated as the neon style gradient you've been working on.

Here's a simple method to match the gradient style of those buttons:

Start a new image, with whatever pixel dimensions you desire. Fill the background layer (or layer 1) with the blue color that you like. (Image 1)

Create a new layer and fill it with black. (Image 2)

Use the rectangular marquee to select most of the center part of the black layer (Image 3), then cut it out. (Image 4)

Apply a gaussian blur to the black layer. Use whatever blur amount looks best for your desired effect. (Image 5)

If desired, try reducing the opacity of the black layer just a bit to soften the edges. (Image 6)


1.png
2.png
3.png
4.png
5.png
6.png
finish.gif
0
 

Author Comment

by:Chriscup
ID: 24781717
Hmm, this look s good, but it does not have the right color. Ah man,
I am going nuts.
0
 
LVL 9

Expert Comment

by:statler01
ID: 24781777
You can do it yourself with whatever color you want. That was just an example...

In step one of the above, fill the background with whatever color you like.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Photoshop CS5 actions file name 3 149
HTML signature creation for Outlook and Mac mail 6 393
PhotoSHop text banner 2 81
Are these External USB Portable Drives reliable? 3 53
HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this tutorial viewers will learn how to create a postcard text effect in Photoshop and get an introduction to Layer masks Use magic wand to select the "inner" part of the letters: Create a new layer and fill the selected area with black: Go back …
In this tutorial viewers will learn how to correct colors in Photoshop using the Levels adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Levels: Select "OK" on the …

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question