Solved

Does A Formula Exist To Transpose Shades of Grey To Shades of a Base Color?

Posted on 2009-07-03
9
378 Views
Last Modified: 2013-12-25
Hello everyone,

I am rather new to Photoshop, and I am currently running Photoshop CS3 on my machine.  I have an image of a button that is basically black and white with shades of grey.  The button image uses the shading to create a sort of three dimensional effect.  I would like to change the white background to a red background, maintaining the 3D effect of the shading.

Does anyone know if a formula exists to transpose hexidecimal rgb values for shades of grey to similar values, but for shades of a color?
0
Comment
Question by:OmniUnlimited
  • 4
  • 3
  • 2
9 Comments
 
LVL 18

Expert Comment

by:Philip_Spark
ID: 24774537
try a hue/saturation adjustment layer set to colorize
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24774574
Whoa, Philip_Spark, thank you so much for your input, but you should know that you just spoke calculus to a person still learning how to count.  OK, I see where I can set up a new adjustment layer for hue/saturation, but I do not know what to select in the dialog box that comes up.  There is nothing in the "Mode" menu that seems to indicate colorize.  How do I do what you are instructing me to do?
0
 
LVL 9

Expert Comment

by:statler01
ID: 24775694
One method: Press ctrl+U, (or click: image-->adjustments-->hue/saturation), click the "colorize" check-box, and then adjust the hue slider. You can tweak the color with saturation and lightness.

Another method (as mentioned above by Phillip): Click layer-->new adjustment layer-->hue/saturation. Click "ok". In the dialog box, click "colorize" and then drag sliders as needed.

Both of those methods will colorize the gray tones in the image.

You mentioned wanting to colorize the red background...  You could try this: click layer-->new layer. Set the foreground color to red, then use the paintcan to fill the layer red. Now, set the layer mode to "darken" (see the attached image for help).

If you don't like the color you get from that layer, you can then use the hue/saturation dialog box (see the first method above) with the red layer selected to make adjustments.
1.jpg
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 9

Expert Comment

by:statler01
ID: 24775720
In the above, I meant colorize the white background...

I thought more images might be useful, as you're new at this...
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24787150
Wow, statler01, I really, really appreciate the basic and comprehensive instructions you gave me.  Thanks to you I was able to try out all the techniques you outlined, but now it is obvious to me that I did not state clearle exactly what I want.

See, the button I want to change the background from white to red also has white and shades of grey inside of it, and this white and grey I do not want to change.  In other words, what I am trying to acheive is a white and grey button on a red background.  I tried the first techniques both you and Phillip_Spark suggested and they colorized all of the grey, which is not exactly what I wanted.  Your second technique for filling a new layer with red and darkening shows the most promise, if I could only preserve the white and grey shading inside the button.

I went ahead and attached a copy of the image I am trying to change so you will have a better idea as to what I am trying to do.

Many thanks to all for your input.
search-button.gif
0
 
LVL 9

Accepted Solution

by:
statler01 earned 500 total points
ID: 24788778
There are lots of other ways to do this, some easier... This method is (in my opinion) the easiest way to achieve the effect you want with good results. The easier methods will leave you with edge pixels. The harder methods would be faster, but more difficult for someone without much experience.

In the future, it would be better to design your buttons with transparent backgrounds, then they will work with whatever website design you have.
1.png
2.png
3.png
4.png
5.png
6.png
7.png
search-button.gif
0
 
LVL 17

Author Closing Comment

by:OmniUnlimited
ID: 31599683
Oh you are good, statler01.  Real, real good!  I envy people with talent such as yours.  Thank you so much for all your help, hard work and easy to understand instructions.  I award you the maximum points.  You truly deserve them.
0
 
LVL 18

Expert Comment

by:Philip_Spark
ID: 24789553
0
 
LVL 17

Author Comment

by:OmniUnlimited
ID: 24789770
Hey thanks, Philip_Spark!  That was very nice of you. ;)
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

776 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