WABANNER

WordPress Website Tutorials for Beginners

How to make in an easy way a round picture and add a frame to it.
At the end of this tutorial I have placed some round picture frames.

1. make your picture square, you can use MS paint for that.

2. add your picture via Add Media on your website.

3. Use this html code, replace the colored parts for your own data in your text editor

<a style=”display: inline;”><img style=”width: 200px; height: 200px; border-radius: 200px;” title=”molen.jpg” src=“https://workathomefuture.com/wp-content/uploads/2015/05/molen.jpg” alt=”molen.jpg” /></a>
molen.jpg

4. Go to visual and take a screenshot.

5. Go to paint open the screenshot and cut the round picture.

6. Go to Pixlr.com and make a transparent background ( see previous tutorial)

7. Add the picture in layers at Pixlr.com

8. The result:

Round picture frame Round picture frame

Round Picture Frames

found on Google Free for reusing.

Round picture frames circle-blue colored_border-48407_640 colorful_circle1 decoration_circles_png dragon Flower_flowers-153210_640 flower_purple_frame-036 golden_frame-305566_640 google_photo_frame purple_flower_frame silver-circle-matted snake

 

I hope you liked this tutorial, click here for more tutorial.

WA logo card
visit my profile page

affiliate disclosure

(Visited 858 times, 1 visits today)
  1. John Worthy says:

    Thanks Loes. Actually, it’s not the code, I get the image round alright. It’s the pixlr part that gimme troubles, how to get the border around and the grey in the background. When I drop it in paint, I get a white background. Aaargh

    • Loes says:

      You can easily change the white background in grey, using paint, John. Select the color and use the little bucket, if you can’t manage you may send me the picture and I do it for you:)

  2. John Worthy says:

    Hi Loes, I told you that I am too stupid to work with pixlr.
    Here is what I have.
    One portrait image .png 300 x 300 pix no background

    Here is what I want

    The image in a circle, with a dark grey background and a plain white, small border, like in this sample image.

    http://take.ms/HtXZ6

    How do I get the grey background in the circle?
    How do I get the darn frame around

    I was watching your pixlr video about 20 times, the one you show how to remove certain elements, but never could follow your quick movements, and your software, of course, has Dutch titles to all functions.

    Maybe you can point me to lessons of yours that clear things up for me

    John

    • Loes says:

      Hi John, as you are not that handy with codes, I am going to send you over to Lunapic to create your round picture in an easy online to use program. Upload your picture, then measure the rounding between 150 and 200, then click on download. Hope to hear from you if it worked for you, have a great creative and productive day, Loes

  3. Marie says:

    How cool! It looks so professional. t seems a bit hard to do, but not impossible – I have to try it. Thanks for sharing.
    Marie

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>