Monday, October 28, 2013

How to make smooth circles in Photoshop without jagged edges

I tried numerous times to make a smooth circle, but I kept ending up with jagged edges in Photoshop. I knew I had been missing something and that's what kept spoiling my design. I then realized - hey, unlike Illustrator, Photoshop isn't a Vector tool. It is a Raster tool. But there must be something I could do to get a perfect smooth circle. And this did the trick:

For circular shapes:

  • Select the Ellipse Tool
  • On the top panel, change the mode from Shape to Pixels. 
  • Tick the Anti-alias checkbox.
  • Now draw your shape!

For circular selections:

  • Select the Elliptical Marquee Tool
  • Tick the Anti-alias checkbox.
  • Now go ahead and make that selection!
While making selection from a path:
  • Make sure that the 'Anti-Aliased' checkbox is ticked.
For a better understanding of the Anti-Alias feature, see the comparison image below (Click to enlarge):

Thursday, October 3, 2013

One sided Box-Shadow in CSS

The biggest problem that I used to encounter with respect to shadows while coding in CSS after designing in photoshop is that I add shadows towards one side in PS and I found it hard to replicate the same in CSS. There's a very simple solution to that.

There's a fourth property for box-shadow, which is the shadow spread property. I didn't know that something like this existed for quite a long time. An example for its usage is as below:

    -webkit-box-shadow: 10px 0px 5px -2px #888 ;

Set the fourth property negative, as required till you achieve the required one sided effect.

Note: The above example sets a 10px box shadow towards the right and sets the vertical box shadow to 0.