Solved

Question regarding image.

Posted on 2009-07-03
9
157 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
Technology Partners: 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Clues some my designer 5 204
Photoshop on OSX crashes 8 85
Adobe Audition with VAC 2 117
Do I have my bleeds and trim dimensions correct? 7 62
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 …
Read about why website design really matters in today's demanding market.
This video demonstrates how to use each tool, their shortcuts, where and when to use them, and how to use the keyboard to improve workflow.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

739 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