1

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???

  • 1
    What version of Windows are you trying to simulate. – Mort Dec 4 '12 at 20:07
  • 1
    Are you just asking about shadows? Or is there something more? – bassplayer7 Dec 5 '12 at 0:49
  • I am not trying to simulate Windows, I am trying to simulate Mac OS shadows – Victor Dec 5 '12 at 20:49
  • @bassplayer7 I am talking just about the shadows, I already have made the rest of the frame – Victor Dec 5 '12 at 20:50
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.

  • 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 Jun 22 '15 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.

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>

You must log in to answer this question.

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