iPhoto like NSButton

Question

How can I create a iPhoto like button like in the picture

enter image description here

I've tried out several things using round textured buttons or setting the button's image as template. But none of these approaches really works.

Thanks so far for your answers.

EDIT: The image of the button should just be a simple pdf. The gradient and the white shadow should be drawn automatically.

score 1 · Answer 1 · answered Feb 13 '12 at 21:38

1

As Justin mentioned you should create an NSButton with type Momentary Change. You should then indicate that it is a template image by including the suffix Template in the filename, e.g. EditTemplate.png.

I know you said you tried setting the image as template, but I found that this wasn't always effective if I wasn't using the Momentary Change button type.

answered Feb 13 '12 at 21:38

Maurice Kelly

1,462
12
15

When I set the image as template, I don't get that white shadow when the button bezel style isn't round textured. When I try it with a round textured button, I can't change the frame of the button. Can you see my dilemma? – burki Feb 14 '12 at 07:29
What white shadow is it to which you refer - I don't see any white shadow in your screenshot, or when I use iPhoto? Maybe you should update your question with a screenshot of what you get when you try various options, and what the white shadow is that you are trying to achieve. Also, why do you wish to change the frame of the button - the style you are trying to achieve does not seem to have a visible frame. – Maurice Kelly Feb 14 '12 at 09:26
The final image consists of the original image (with a gradient), a dark inner shadow and a white drop shadow. I've noticed that iPhoto doesn't use the built in template drawing, so there's customized drawing. – burki Feb 15 '12 at 06:34

score 0 · Answer 2 · answered Feb 13 '12 at 15:36

You could subclass NSButtonCell. And implement these functions:

- (void)drawImage:(NSImage*)image 
        withFrame:(NSRect)frame 
           inView:(NSView*)controlView
{
     // Draw the image of the pen. 
}

- (NSRect)drawTitle:(NSAttributedString*)title 
          withFrame:(NSRect)frame 
             inView:(NSView*)controlView
{
     // Draw the text.
}

- (void)drawBezelWithFrame:(NSRect)frame 
                    inView:(NSView *)controlView
{
}

To setup the subclass just edit the "Custom Class" field of the Button Cell in Interface Builder from "NSButtonCell" to "YourSubClass"

Justin Boo · Answer 3 · 2012-02-13T19:00:04.833

0

I think the simplest solution is to create button with type: Momentary Change and add on it image with transparent background with .png type of file and when button is ON You can change to other picture with background.

For example to set/change image:

[_yourButton setImage:_image];

If I have understood correctly what You want to do.

edited Feb 13 '12 at 19:00

answered Feb 13 '12 at 18:47

Justin Boo

10,132
8
50
71

iPhoto like NSButton

3 Answers3