[ infamous macos 'gel' buttons ]
It's gotta be cool to be a designer at Apple. Set a trend, make it stick just because it's friendly, groovy and well thought out -- and make every other designer on the planets' head explode trying to emulate it.I don't know who did this one originally, either -- and I've futzed with it a bit -- but man, does this make my life easier. Gel buttons all driven via the dynamic filters.
There are a couple of notes to keep in mind here:
- You can use any color you want to for the primary button background, but you've got to make the other complimentary colors match. In this case, I've started out with #5983b2 as my starter color.
- You'll need to stay proportionate with heights. These buttons are 190px wide, 40px tall with corners rounded at 20px. [Learn to love Illustrator.]
- A mid-weight font works well here -- in this case, Stone Sans -- with a light dropshadow to make it stand. [50% #000000, global 120 light, 3/0/3.]
|
[ drop shadow ] Without giving you the standard tripe about doing what you will here -- do what you will here. The 'classic' version of this is to use a light color and spread it far, straight down, so that's more or less what I've done.
The settings as is: Normal blend, #000000, 100% opacity. The light angle is set to 90° with a distance of 5px; a spread of 11px and a size of 10px. Default contour with no noise. |
 |
| « close |
|
[ inner shadow ] This is another one of those variables; the blue I'm using here [ahem] 'compliments' the blue I used for the button's shape fill color.
The setting as is: Multiplying blend of #013770, with 100% opacity; standard global light at 120° with a distance of 6px, a choke of 15% and a size of 16px. [And remember that'll need to mirror the height; the formula I use is 1/2 the overall height, minus a 'smidge']; standard contour with no noise. |
 |
| « close |
|
[ inner glow ] Although this can be varied a bit -- paricularly if you want the button dark shadowed -- remember the standard is friendly, not friendly-gothic.
The settings I've used here: A color dodge blend of #ffffff, with 30% opacity and no noise; soft technique from center, with a choke of 22% and a size of 21 [remember that overall button size; this forumla is just a smidge over the halfway point]; a custom contour [upper left to bottom middle, with just a slight curve to it] with a range of 31% and no jitter. |
 |
| « close |
|
[ bevel & emboss ] This one's a bit variable as well. Surprised? Riiiight.
As I've got it set for this shape: An inner bevel, smooth at a depth of 81%, facing up sized at 9px and softened 1px; global light position almost directly over the top at 90° at an alititude of 73, using a standard contour. The colors I've used here are #ffffff and #328dcf, screened and multiplied at 100% respectively. The shadow color can get tricky; play with it judicously. |
 |
| « close |
