How do I make an octagon shape stop button

[Tim_C.]

I want to make an octagon shape control to mimic a stop sign.

Any suggesstions?

Thanks

Tim C.

[altenbach]

Use a regular button and then customize it to import your desired graphics.

[Ray.R]

See attached 😉 

don't rate the lack of artistic ... euh ..  😮 ability..

😉

[Tim_C.]

Wanted to post this for other users.

the steps i used (err that eventually used to get it right)

1.  Got the stop image

2.  Used adobe photoshop to add a background layer

3.  Deleted all the white from around the image

4.  Saved it a sPNG file

5.  Placed a bool control on the front panel and set the size to what I wanted

6.  open the control in the advance - customized utility

7.  set edit / tweezer mode

8.  Selected picture item

9.  Inserted picture from file

10.  Saved it as test

11.  Put another bool control on the front panel and opened it in the editor in wrench mode stil...

12.  Opened the original control and went to tweezer mode and copied the image

13 closed the original file

14  went to new control and right clicked it and selected import picture from clipboard as DECAL so the decal would not block the button funtion.

15.  Saved the control as the final and allowed it to replace the front panel control

hope this helps some folks out

Tim C.

[Ray.R]

Similar steps..  Yours looks nicer Tim.

Plus it gives you that push button feeling.  Nicely done!

🙂

[altenbach]

I would probably use a round flat button from the classic boolean controls, which gives you an active area very similar to the octagon. Paint the original button transparent in the control editor so only your own image shows. Add your own bevels, etc in your graphics editor.

You should also make two images, one for the TRUE case and one for the FALSE case to provide visual feedback (e.g. embossed vs engraved or red STOP vs green GO). 🙂

[tst]

Customizing using vector based images.

[Tim_C.]

What I believe are some good results, posted here for others to use.

If you want good results with different size controls use adobe the open the *.psd files and change the image size then get rid of the yellow background and save it as a PNG file.

Used adobe layer style inner shadow and Bevel / Emboss / Pillow emboss to get the effect

Best Regards

Tim C.

[smercurio_fc]

See here for a pretty good video tutorial on customizing buttons.

[Tim_C.]

There is another version posted, 

Also was thinking the first version would look nicer if the depressed picture was moved down and to the right 1 pixel to mimic being pressed.

Best Regards

Tim C.