Image EditingLesson 210Free preview

Circle Crop

This lesson is part of Web Developer Tools · All levels

Summary

Circle crop cuts images following a circular shape, usually for profile photos or avatars. The outer part of the circle is discarded or made transparent, so the result requires an alpha channel format if the angle is to be truly transparent. The square source and the centered subject produce the most neat circles.

Key points

The crop circle is most neat if the source image is square
The area outside the circle can be displaced or made transparent
PNG or WebP is required for transparent angles
Subject should be in the middle so as not to be cut
Border rings can be added outside the circle to reinforce the avatar

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.