PS I Love You: ASOS-inspired Drop Shadows

I was flipping through Asos Magazine’s September Issue and, once again, their labels caught my eye. I first noticed them last year and had good intentions to make a short and quick Photoshop exercise showing how to make them. The thing I LOVE most about ASOS’ UI is the way they use simple monochromatic geometric shapes with stark drop shadows as design elements. I’m not talking about their online store which has become more and more like a busy and crowded bazaar. What I’m talking about are their magazine layouts, which got me thinking it would be fun to finally do that 2-bit color tutorial. If you’ve seen the black and white graphics created on the original Mac Plus, you know you can do some really fun things with only two colors and simple shapes!

P.S.
This is not a sponsored post. I don’t have sponsors on Pugly Pixel — this is just for fun, guys! Anyway, check out this tutorial to see how you can accomplish this shadow effect with CSS.

Step 1: Open image

1. Open your image in Photoshop
2. If necessary, increase the canvas size
3. Tip: Increase the canvas relative to the current size! :)

Step 2: Add a Stroke

1. Add a layer style
2. Select stroke
3. Note: Choose 100% opacity

Step 3: Add a Drop Shadow

1. Add a layer style
2. Select Drop Shadow
3. Important: Select NORMAL Blend Mode, Select BLACK, Opacity: 100%, Size: 0