2

I would like to create some Mac OS X 10.7 Windows "simulations" in Photoshop.

I would like to learn about the window's shadow parameters, like size, spread and distance.

Could anybody help me with this???

Improve this question
4
  • 1
    What version of Windows are you trying to simulate.
    – Mort
    Commented Dec 4, 2012 at 20:07
  • 1
    Are you just asking about shadows? Or is there something more?
    – bassplayer7
    Commented Dec 5, 2012 at 0:49
  • I am not trying to simulate Windows, I am trying to simulate Mac OS shadows
    – Victor
    Commented Dec 5, 2012 at 20:49
  • @bassplayer7 I am talking just about the shadows, I already have made the rest of the frame
    – Victor
    Commented Dec 5, 2012 at 20:50

4 Answers 4

Reset to default
3

For Mac OS X standard windows use drop shadow with folowing parameters: black #000000 color with opacity 60%, angle 90º, distance 25px, size 50px, spread 0px.

Improve this answer
1
  • 2
    As of the latest OS X release I believe 50% opacity, 22px distance, and 45px size more closely approximate the drop shadow. For retina displays, 45px distance and 90px size.
    – Christopher Swasey
    Commented Jun 22, 2015 at 14:00
3

Actually it's more of a combination of two drop shadows. These settings work well for me in direct comparison to the original shadow:

  • Dropshadow 1:
    • Opacity: 47%
    • Angle: 90°
    • Distance: 26px
    • Spread: 0px
    • Size: 43px
  • Dropshadow 2:
    • Opacity: 44%
    • Angle: 90°
    • Distance: 0px
    • Spread: 0px
    • Size: 3px

The second drop shadow is for the fine darker line you notice around every window, especially when examining OS X window chrome on white background.

Improve this answer
2 
.box { 
    width: 200px;
    height: 100px;
    margin: auto;
    padding: 20px;
    border-radius: 5px; 
    background-color: #e4e4e4; border: 1px solid #adadad;
    -webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}

<div class="box">
 Lorem ipsum
</div>
Improve this answer
1

As of March 2020, the official Apple UI Design Resources for macOS tells us this:

  • 1px inside white 15% opacity border
  • 0.5px outside black 65% opacity border
  • 18px top offset 50 blur black 52% opacity shadow

Example: https://jsfiddle.net/Revolter/sg352ozv/

(Insert > Apple macOS UI > Windows > Window with Titlebar > Dark Aqua)

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .