Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I am looking for the graphic design terminology for describing themed buttons used in a web application. The way I understand it is that certain color/backgrounds are created and various sized buttons use the background to display.

I have seen them out there - but have no idea exactly how they are used or how to talk about it.

share|improve this question
Welcome to GraphicDesign.SE! I realize this is sort of tough, given the question, but can you be a little more specific or give an example? – Farray Feb 18 '12 at 17:21
sliding doors maybe? But that's being phased out in favor of sprites. – Scott Feb 18 '12 at 21:04

2 Answers

up vote 1 down vote accepted

I'm not sure what you mean by "model", but usually buttons are created as part of a UI library. As part of the process, designers choose a particular visual style for clickable components such as buttons. This includes button shape (rectangles, rounded rectangles, pill-shaped, etc.), border style, whether to make it 3D with a bevel/drop shadow/gloss/etc., whether to give it texture, what font to use, how the different button states (normal/hover/depressed/active/disabled) look, as well as the color scheme of the UI.

There are pre-made UI libraries/themes out there, and sometimes designers will modify button templates, but with something as simple as a button, you typically just create them from scratch. And even if it's a more elaborate UI theme, you still need the buttons to match the rest of the UI components, so you'd probably create them from scratch anyways.

You may be thinking of pre-made buttons that you can download the images/CSS/JS for. Some people who aren't graphic designers or aren't good with CSS find them useful. You can find many of these by googling "CSS buttons" or "CSS3 buttons". Some of them can be easily customized for different colors/backgrounds/shapes.

share|improve this answer
Thanks - I think you captured what I was looking to understand here. While I am familiar with the UI library concept - specifically using jQuery UI, I did not know if there were other ways of describing it when asking a graphic designer to create custom buttons for a project. – Mary Camacho Feb 19 '12 at 14:45
@Mary: Yep, jQuery UI's a very popular UI library. But since it's a component library, it's a lot more comprehensive: visual themes + JS/CSS code. I was mostly referring to design libraries more akin to a single jQ UI theme, e.g. many companies keep build files that are simply an InDesign/Fireworks document visually cataloging a full set of UI components and their various states. A web or UI designer can then drop these components into their layouts as needed. And updating the build file updates all the layouts which use the components. – Lèse majesté Feb 20 '12 at 15:56
up vote 2 down vote

There's a method of making a generic button image consisting of a solid color (being the specular or highlight color) with an alpha channel controlling the buttons 3d contouring.

This allows the designer to control the color of the button by its (or its containing element's) CSS background-color property. This allows easy theme changes without resaving all bitmaps with the new background color.

It also allows one bitmap to be downloaded for sites with multicolored buttons or button states.

Unfortunately I don't know what it's called.

Here's a simulation in Photoshop:

share|improve this answer
Image masking. There is also css3 called mask-image and background-clip. On another note, I think you might confuse people by showing the changing of the color inside photoshop since in this case you woulnd't actually do that. – Joonas Feb 19 '12 at 10:01
Hopefully your comment and my mention of it being a simulation will keep confusion away. – jontyc Feb 19 '12 at 10:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.