How to Create a Honeycomb Pattern for Your Blog


I live in Texas currently (though I have plans to go back to Guatemala soon). East Texas is hot but we’ve had some weird rainy weather the last week which has kept me inside. Today is the first day the sun has come out in a week and I am sick. Though I would rather be outside taking photos, being sick has allowed me to lay around on the couch, listen to A Little Princess (such a beautiful story), and work on finishing up this lovely honeycomb pattern.

The honeycomb pattern has been trending for a while and I think it’s fun! Here is a short tutorial on how to make your own!

 Create Your own Honeycomb Pattern

You will need:

  • Photoshop
  • 11-12 Photos (depending on how many honeycomb shapes you make)

In addition to photoshop and photos, you will need a bit of patience. It takes a little time to put it all together but it’s worth it!

Open a new document in Photoshop, I made mine 1000px by 500px, but feel free to be creative, you can even do a vertical design if you want.  I also chose a white background.

Create a Honeycomb Pattern in Photoshop

After you open the new document go to the shapes tool and if the polygon shape is not selected right click and hold the click for a second to see the other shapes you can choose.

Create a Honeycomb Pattern in Photoshop

Before dragging your shape onto the document, make sure at the top of the screen you’ve chosen your shape to have 6 sides.  Drag a shape onto the document and make sure to add a fill to it.  Then hover over the shape and hold down the option key to duplicate the shape. In the layers column highlight the two shapes then go back to your document and option click again and drag out two new shapes.

Create a Honeycomb Pattern in Photoshop

In order to create more hexagons you can highlight all four polygon layers in the layer column and hold the option key over the shapes in the document again and drag new shapes.  This makes it easy to duplicate the shapes and keep all the shapes inline to create a pattern.

Create a Honeycomb Pattern in Photoshop

After you have the number of shapes you like, you will want to name the shapes so you know which shape you will be working with when adding photos. If you don’t do this it can get kind of messy and frustrating figuring out which photo goes on which shape.

Create a Honeycomb Pattern in Photoshop

As you notice in the example above photoshop has give names to the Polygons but there is no way to tell which hexagon is which.  So for example I will Command Click on the first polygon and it will be highlighted in the right layers column as you can see in the above example.  So I normally start from the left and go down each row till I am finished naming them by number.  Below is a photo of how I order them (even though I do not actually put a number on each hexagon in my document, I only name them by number in the layers column).

Create a Honeycomb Pattern in Photoshop

Double click the text to create a new name.  Even though this polygon is the second polygon on the layers column, it’s the first polygon on the document and I want to name it Polygon 1 and then move it down.  Then I will Command Click on the second polygon on my document and find highlighted layer in the layers column.  I will name it polygon 2 and move it down right above the polygon 1.

Here is what the layers look like when I am done:

Create a Honeycomb Pattern in Photoshop

Now you are ready to add photos!  In order to add a photo go to File and choose Place Embedded.  Resize your photos so the part of the photo you want to show is the size for the Honeycomb.  (To keep the photo’s form hold shift when you resize.)

Next make sure the photo you want is positioned over the shape you want it to snap to.  In order to do that click on the photo in the layers panel and drag it to where the photo’s layer sits on top of the correct shape’s layer.

Create a Honeycomb Pattern in Photoshop

The highlight the photo and the polygon’s layer that you want to combine.  After both are highlighted hover your mouse on the line between the two layers and hold down the option key.  When your mouse changes shape click so that the two layers will combine.

Create a Honeycomb Pattern in Photoshop

Screen Shot 2016-08-23 at 6.27.41 PM

Continue to do this with all the photos.  Add some text and admire your work!  You are done!

Create a Honeycomb Pattern in Photoshop

I hope you are inspired to create your own beautiful design!

If you need lovely images I’ve got you covered!  Every month I choose a few of my loveliest photos to send to my subscribers, just as a thank you.   Most of my photos will be of flowers, coffee, and technology (those are my favorites if you can’t tell).  I do not spam your email, who has time for that?

If you would like to use one of my honeycomb patterns for your blog you can find them here.

I hope you have a wonderful day!

Till the next time!signature


7 thoughts on “How to Create a Honeycomb Pattern for Your Blog

  1. Rhonda,
    Love your site & the tutorial.
    Just downloaded the photo bundle from creative market and that’s how I ended up here 🙂
    Thanks for all your hard-work that you have shared with us.

    Can you please add a section to this tutorial – teaching us how to get the pictures to look similar – what I mean is for this to look great I think the brightness level of all pictures need to be similar, or perhaps one could use a filter ! I am not sure – so can you help ?

    Thank You

    1. Awe! Thank you so much! I am glad you enjoyed the tutorial. I can definitely add a tutorial to show how to do that! Great idea!

  2. Great tutorial, thank you very much. (& just a note in case anyone else makes the same mistake.. I was confused as why my image wasn’t showing once I combined the layers – you need to make sure you have a fill on the shape 🙂

    1. You’re Welcome Becky! I’ll add that to the tutorial that’s super helpful! Thank you for pointing that out. 🙂

Leave a Reply

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