Overview
This step by step tutorial shows how to use Photoshop to insert round or elliptical images that will blend into any coloured background without bloating the page with high definition images. We all know that page load speed is important for website visitors and to Google for ranking purposes. The graphics in this tutorial are from Photoshop CC 2018. (These functions have not changed much in Photoshop over the years so the instructions should be usable in other versions.)
Circular images are useful for profile pictures and web avatars.
Step 1
(a) Start with a square image if you want to create a circle rather than an oval.
(b) Set the Foreground Color to match the background you want to blend into.
Step 2
(a) Using the elliptical marquee tool and starting at the top left corner of the image, drag until a round image is selected. (Note: the pink lines help you to avoid going out of bounds of the original image.)
(b) From the menu, choose Edit, Copy.
Step 3
(a) From the menu, choose Layer, New -> Layer to create a new transparent layer. (Ensure Color is set to ‘None’ for transparency.)
(b) Choose Edit, Paste to create the new layer
(c) Make the Background layer invisible.
Step 4
(a) Choose File, Export, Save for Web (Legacy).
(b) Set the options as below and Save.
(Setting the Matte to whatever colour you want to blend into will dither the edges to hide the colour transitions from the eye.)
Step 5
The final image inserted into a blue background as per the footer in this website.
