Adobe Photoshop button design

Hi

You have 2 options:

Either take the grey one save it as a different image and use the menu item Image|Adjustments =>Hue/Saturation and select Colorize and pick the red from the other image (colour picker) and adjust the sliders until you are happy.

Or you take the red one select the menu item Image|Image Size, deselect 'Constrain Proportions' and type in the size you need.

I prefer the first as you don't run the risk of distortion the shape.

hth
capt.

Sorry Make "the right color" into "the right shade of grey" -a

thanks for the input folks...

am trying it but its not working right for me .....

please can you reduce the gray image size to 148x29 pixels and attach it for me here ...

your help would greatly be appreciated..

thank you so much ...

You will need to convert your files back to RGB then do the changes as you cannot do the on Indexed images.

Whilst we can make the change for you it is not something that EE particularly likes, especially as the explanation will allow you to do it yourself. Which in the long run is a good thing ;o)

Let us know if you are still stuck.

capt.

captainreiss:

i am trying it but still no luck ... did not manage to get it straight yet though...
tab1.gif

The most accurate way to do this without also slightly deforming the curves on the top sides is:

Open the gray (bigger) image and...

- Image > Mode > RGB (you are very limited in your editing options in INDEXED COLOR format, that is .gif).
- Go to area select Marquee and on the tool options bar you will see a selector that is defaulted to normal, select "Fixed size" and fill in 3 pixels wide and 30 in height, click on the middle of the image.
- With the vertical area selected, hit DEL key on your keyboard, you will then obtain an area with just background color of the specified size.
- Now put the marquee selection tool back in normal mode and select everything on the right side of the cleared area.
- Select the Move tool and drag and drop the selected area 3 pixels to the left so that it comes to be in contact with the other side.
- With the marquee tool again select the whole button (now 3 pixels shorter) and make sure you leave a one pixel tall line on the bottom unselected (to make it a selection of 29 pixels instead of 30).
- Now go to Image > Crop
- Now save it as a gif again... (CTRL+ALT+SHIFT+S = save for web)
That's it!
What you must understand is that any resizing method would have deformed (if only slightly because of the small amount of resizing required) the curves. So you needed to manually cut out the exceeding pixels and preserve the edges intact.

If you need any further help let me know.

Have a nice day!

Hi Newbie

Ok, I am not sure what the issue may be but I have just converted your attachment above to the red tab below using the steps in my first post with the exception of the color picker so:

Hue/Saturation and select Colorize  and adjust the sliders

Hue: 0
Sat:100
Light: -45

Try it yourself.

hth
capt.
red-tab1.gif

Hello Folks

Thanks for your advise again..

I hope you may understand what I am trying to say If you could please go to the following URL

https://www.giftrepublic.com/index.aspx

Please see the Paper Animation Kit tab in the top menu

The site comes up with a certificate error claiming it belongs to a co.uk site...

I have looked at the site but I don't know what you mean. Did you design this or are you trying to copy the design.

I am sure I am missing the obvious...
capt.

Although one thing I noticed is that they simply stretched the tab (see Image size comment) as the corners are slanted compared to the smaller tabs.

Hi captainreiss:

Yes, this is our website and I am trying to update the tab for Paper Animation Kits , If you could please click on it you will see the selected tab changes to a red image which has correct size however the default gray is bit messed up ....

i wanted to make the gray image button look exactly the size of the red so that it comes up OK.... as you can clearly see its not at the moment...

although i have kept the height and the width of the tab same in the html markup but i think its because the default image size being slightly greater ...?

please advise
thanks

Hi

I see, there are a few differences between your buttons though. The reason the grey one is slightly lower, is that the gif itself has awhite line between image and top edge of the gif. So changing the  size alone will not make the tab appear the same as the line is within the image.

Now if you had the same corner radius on both images, you would fix this by changing the canvas size. Image|Canvas size and select Pixels from the measurements, untick the relative box and select the centre bottom square from the 'Anchor' grid. Then type in 29 for the height, and click OK on the clipping warning.

Now the tab should fit but the corners are still slightly different. However it may be good enough as the grey does not stand out that much.

So if you want this perfect you open the red tab and change the colour to grey using Image|Adjustment => Curves. First find out the RGB values of each:

red tab:
R 238
G 49
B 36

grey tab
R 222
G 219
B 219

Then you use the Curves option on each channel, So select Red from the channel drop down, click anywhere on the graph line and type in Input 238 => Output 222. Repeat this for Green & Blue as per the values above. This will create an exact copy of the red tab as a grey tab.

Save as Top-Tab-wide.gif and you're done.

hth
capt.

Hi,

Thank you so much for your detailed description...

I have managed a bit but not completely right though...

I have kind of spent too much of time on this, its because our designer is on his holidays.

Please can you make one for me ?

Would greatly appreciated...

Thanks
Sam

hi captainreiss

thank you so much for your help !

this has worked quite right !!

cheers
sam