blackdiamond buttons

[cisco007]

well i sort of wanted the whole imageset if you could, but guess, those two would do for now!

[Sniper_E]

Still looking into this.
Franck has come closer than I have been able to so far with matching those buttons.
I'm still playing with them...
Do you need this button for Steve's Showcase?

[cisco007]

i will download them, but they are not for Steve, they are for my use! keep them coming either one of you i will use them all!

[Steve]

Them is cheap! they are not for me ...
Good work tho

[Sniper_E]

OK, I gotta tell you... Franck is deadly with his PhotoShop skills.
He really came close to those buttons. A lot closer than I did. He may need to give us both lessons.

These are the buttons created:

blackdiamond_buttons.gif

The bottom left is the original buttons, the top left is Franck's button and mine is to the right.
You can see the details of the original button is very defined. Franck came real close to that.
I'll show you how you can create the same button the way I did it.

Creating these Buttons
Click File, New, Width 96px, Height 50px, Transparent (Width depends on what size button you need.)
(Open that window up and expand the transparent image view. Give yourself something larger to work with.)
Select: Rounded Rectangle Tool (U)
At the top: Radius 2px, Color white (color want really matter)
Click on Geometry options arrow, Fixed size, W: 94px, H: 23px, Snap to Pixels
Then click in your image area and the shape and size will be created, Place in top right corner and let go.
Then click in image area again and place in bottom right corner.
(Now your two button will be created)
Select the Move Tool (V), grab the top layer and move it one pixel left and one pixel down.
Grab the bottom layer and move it one pixel left and one pixel up.
(Now your two buttons will be placed 1px from the sides and 2 px away from each other for the borders.)

blank_buttons.gif

Adding Gradient Color and Border to your Buttons
(Use Franck's .psd image and match his settings. No need to re-invent the wheel.)
Choose the top layer and click Layer, Layer Style, Gradient Overlay
After setting that click Stroke, then Inner Glow and match those settings.

Now you will have your buttons created and ready for text and images.

blackdiamond_button.gif

From there you just add in your text and images for each button and save it.
You only need one .psd file and you change the text and images in it for each button.

After creating each button, take it to Image Ready
Under Optimize settings choose Selective for Color reduction algorithm
Then click File, Save Optimized As (You know where to save it and what name to give it.)

After that image is saved as a .gif file,
take it back to PhotoShop and change the text and images for another button.
You could just use Franck's .psd file to create all of your images,
but if you need a smaller or wider button you can create one like above.

Franck, please throw in if you see something that needs to be corrected.

[cisco007]

the only thing I ever wish is that there was somekind of program that could tell you what font is used in a gif button, that would be great!

[Ooopsie]

Some of them if you open them in a text editor or a hex editor, you can find the font type in there.

[Sniper_E]

Yea, and getting the symbols in a button is a challenge.
The Astrix is simple but where do they get the Up and Down Arrows for those buttons?
Do they come out of one of the Wingdings font? I normally copy them out of another button.

[Steve]

clone brush!! and fonts are a night mare to reproduce.

[Ooopsie]

Yea, and getting the symbols in a button is a challenge.
Do they come out of one of the Wingdings font? I normally copy them out of another button.

Some of the symbols come from Ascii codes. Using the CTRL-ALT keys and the number pad.. eg ¢£. Google ASCII code chart and it'll give you the keys to press to get that fun stuff.

[Sniper_E]

I have searched for them. Show me where those arrow buttons are at in the ASCII codes. Look at all of the buttons used and show me where all of those images in them come from. Excluding the astrix images, that one is a giving.

How are you doing on those buttons Cisco? You got creating those down pat or do you need a little more help with some of them?

[ Post made via Android]

[edit]-- Thu Aug 25, 2011 5:45 pm --[/edit]

Did you ever find where to get those "arrow up at an angle" images that they use in the buttons? Or do we keep copying them from their buttons? I guess I could try to create those from scratch, but knowing where to get them from would be nice. I have searched for them many of times, but maybe one more search would work. You know what they say, eightieth time is a charm.

[Ooopsie]

If you are looking for an ASCII code chart they are available on the net. If you can't find it, I'll upload mine.