Round icons

[ipbr21054]

Here is a page for example.
www.theremotedoctor.co.uk/accfiat.html?scrollto=selection

At the bottom of the page are some social media icons.
These look to be a distance apart and look round but within a square frame etc.
Im sometimes selecting one but the other loads.
I think if the square border gone so it's just a round icon this will help.
Can you advise steps to cut these out please.

[Sepiana]

See if this will do . . .

1. Duplicate the background layer (Ctrl-J).
2. Select the round icon. (The Quick Selection tool will do just fine.)
3. With the selection still active, do Select>Inverse (Shift-Ctrl-I).
4. Press the Delete key.
5. Hide or delete the original background layer.

Now you are left with the round icon on a transparent background.

[Major Major]

To add to Sepiana's excellent advice, the file should then be saved in png format.

[ipbr21054]

Hi,
Using that method did not select all the outside of the image and bled through etc.
The original image is 64 x 64 but css applied makes it look round on the page.
So what i somehow require is to be able to cut out a round section from my square image so i can use it in place of the 64 x 64 square.
Basically i need to swap square for round and 64 x 64 fits nice on the page for ios viewers

[ken1]

Save your button to disk and open it in PSE Editor (expert tab)

Drag the padlock on the background layer (in the layers palette) to the trash can in order to unlock it

Set up the magic wand tool with tolerance=32, contiguous unckecked

Click on background and hit delete on keyboard. ***see below

Save  via File>save for web>PNG 24, transparency checked, in a folder on desktop

Close PSE

Start from scratch with your picture

Open your PNG file from step 5, and drag it onto the picture (or copy/paste). It will come in as a separate layer in the layers palette.

Position and resize to suit with move tool. If necessary, tidy up with the eraser tool.


If the background is a solid color, then the magic wand tool should work. However, if it is a complex background, then you will need to use one of the selection tools to select the foreground-button.

Again, the point is to remove the background and save in a file format which supports transparency.

[Sepiana]

Feb 22, 2016 9:28:45 GMT ipbr21054 said:

Hi,
Using that method did not select all the outside of the image and bled through etc.
The original image is 64 x 64 but css applied makes it look round on the page.
So what i somehow require is to be able to cut out a round section from my square image so i can use it in place of the 64 x 64 square.
Basically i need to swap square for round and 64 x 64 fits nice on the page for ios viewers

It doesn't matter which method you use to make a selection -- Quick Selection tool, Magic Wand, etc., you still need to fine-tune the edges of your selection using Refine Edge (Select>Refine Edge).

Without seeing your resulting image, it is hard to figure out what you mean by "bled through, etc.".  Are you talking about a halo/fringe around your selection? If so, try these suggestions from the Help file -- Defringe a selection.

Also, instead of using the Eraser tool to clean up the edges of your selection (as recommended earlier in this thread), I would suggest you add a layer mask to your selection, use the Brush tool (Black, Overlay mode) and paint over the edges of your selection to get rid of any halo/fringe. This is a non-destructive technique and allows you to go back and do more fine-tuning of the edges if needed.

I have a question -- Did you create the icons/buttons on that website? Why not go from scratch and start over with the shape you want (a round one)? It would make things much easier.