My Instagram Puzzle – The good story, the bad ass how-to and the definitely not ugly
THE STORY
Not too long ago – round about last summer – I hit a real slump with Instagram. All those algorithm changes and rumours about shadowbans plus a huge dip in my posts’ engagement had me at a low point. Or actually a high point; a high point of frustration!
But I didn’t want to give into the temptation of just giving up, I wanted to find a way to have fun with Instagram again and to create a feed that adds value to my audience by brightening up their day one little tile at the time.
And I knew I wanted it to be a cohesive look that tells visitors something about me and my designs. I wanted my feed to really evoke the emotions JuniperOats is all about: Designs that bring a smile to your day and remind you that paradise is not just a place but a state of your mind. Designs that make you feel alive, mindful and in touch with your inner romantic.
So I set out on a mission to find other accounts I found inspiring and upon oozing over @twigyposts‘ feed and how uniquely she arranged her gorgeous photographs, I knew what I wanted: A feed in which each post is meaningful on its own but also part of a bigger picture. Part of my entire brand’s story; represented through my feed.
Now, ever since I did, I have been getting many many requests from followers and fans, about how I create my feed. And when the amazing peeps at the Preview App asked me if I am open to share my secret I said: You know what I should write a blog post about it.
So without further ado, here are the steps I take and the tools I use to create my feed:
THE HOW-TO
Step One
I create a blank grid of 3×13 squares using Adobe Illustrator. You could also use Photoshop but I like that, by using Illustrator’s art-boards, I can easily export each individual tile later, once I am done designing the feed.
A. Open your illustrator and hit File > New and set it to pixels and a width of 1200 by 1200 in height, RGB and medium DPI of 150.
B. Once created you will now duplicate the artboard over and over again using Illustrators snap-to-intersect function
-
- TIP 1: once you selected the artboard tool via SHIFT+O you can drag those artboards around anywhere you want as long as they have a blue dotted outline around them
- TIP 2: if you hold down ALT whilst dragging an artboard you will actually create and then move a copy of that artboard
- TIP 3: the latest Illustrator version from Adobe CC has alignment helpers in the form of little pink lines that will tell ensure the artboards are lined up perfectly
- TIP 4: Holding down SHIFT while selecting any artboards will enable to select multiple artboards
Step Two
I chose my color palette and start layering from the background up. Meaning just like a good old collage back in our school days, I add basic shapes first and then work my way to the foreground with more and more photos.
Note: I use some photos as backgrounds (usually more neutral tones like whites and greys) while other photos will become my “hero” images, the ones that will make up the main focus of a post.
Step Three
Now that the basic outline is taking shape I start layering in those “hero” images and picture by picture create the overall content flow. For that I already keep my favorite fonts that I chose for my designs as well as my logo next to the artboards – ready to use.
I LOVE LOVE typography so I like to incorporate it into my feed not only to make verbal statements but also as a way to further style my page – to create that “vibe” I am all about.
Note: When it comes to my content I follow the 80/20 rule, which means 80% of my content is lifestyle & storytelling while 20% focusses on my actual products and designs.
This is the most labour intensive step and can sometimes take me a couple days, as I go back and forth until it all just feels right. I also pay a lot of attention to how each individual tile will turn out. You will end up with some “filler” posts and that’s ok, it allows the overall feed to breathe but more or less I try that each little square has something visually pleasing or a small story to tell.
Step Four
Once I am happy with how everything looks (including image resolutions) I export the artboards as individual JPGs using the File > Export > Save for Web (Legacy)… function.
Note: I like to use the shortcut for my mac, which is OPTION+SHIFT+COMMAND+S
△ BLOG UPDATE△
After getting many many questions regarding how one could do this using Photoshop I decided to launch a gorgeous little collection of Photoshop templates which are already prepped to be sliced perfectly with the press of ONE button. Sounds perfect? Head over to the shop and take a peak.
Step Five
Once I saved all the posts as JPGs I then airdrop them to my iPhone, (Ha, can you tell yet I am a total apple geek?! Even all my drawings for the shop are created in my iPad Pro.) I then upload them into my beloved Preview App from where I can schedule them and make sure they always come out exactly in the order I had intended.
It also allows me to see it all in context of Instagram’s life size: the phone. And if you then find some or your elements (type, patterns, images, etc.) end up way too small, you can always go back and edit your source file. But if everything looks good, you are now ready to rock the Instagram world – one gorgeous puzzle piece at a time!
THE SO NOT UGLY BUT AWESOME IMAGE RESOURCES
The so not ugly but awesome image resources
01 – Moyo Studio // Simply my number one go-to photo resource. Molly & Mark are just such a creative powerhouse and not ONE of their images looks like stock. In my eyes, they reinvented the industry and will add a unique voice to your Instagram.
02 – My Social Curator // Jasmine Star’s subscription shop offers captions + images curated for your feed, monthly.
03 – Kate Max Stock // Kate Max offers a pay-per-photo shop as well as monthly free photos if you sign up for her mailing list.
04 – Twigyposts // Omg, Jana’s Styled Stock Photos are not only affordable Stock Photos but they are warm, inviting & unique and I am simply her biggest fan! She has a membership option as well as a pay-per-photo one-stop shop.
05 – Stocksy // At Stocksy, you get stock photography + cinematography, made with love. Stocksy is home to a highly curated collection of royalty-free stock photography and video footage that is beautiful, distinctive, and highly usable.
06 – Death To Stock // Every month Death to Stock taps our team of photographers around the world to produce “photopacks” — these packs are carefully crafted stories accompanied with 12+ photos from the perspective of the artist. Get two packs a month with their membership.
07 – Unsplash // Unsplash offers FREE photos for you to download that have been gifted by a generous community of photographers.
08 – Kaboom Pics // Another FREE stock photography resource that provides beautiful photos for your feed.
“WANT TO SKIP THE HASSLE OF THE FIRST STEP?”
Download my FREE grid template and jump right into the fun design part.
PS: My name is Judith and this is my little slice of the internet. I hope you’ll enjoy hanging out with me from time to time while I ramble on about design, art and of course, lots of romantic minimalism.
Christy Habecker4 years ago
What an incredibly generous tutorial. Your instagram feed is my favorite, and I have encouraged others to follow you! I have never used Illustrator (only Photoshop), but this might encourage me to take the leap. And thanks for all your resources. I knew of a few, but certainly not all. Have you ever tried Morguefiles? They are a good one also.
It looks like in your example you lay out 39 tiles at a time. Since your colors and feed are so consistent, I have never been able to distinguish where any tiles end, but guess they must start over at some point in time. And while I can tell it is a lot more work up-front, it would certainly be easier to do the layout for a month (or more) in advance.
This would also be a great way to design a print photo layout!
juniperoats4 years ago
Oh hello Christy!
Thank yo so much – it’s always such an honor to see how much people enjoy the JuniperOats feed. I truly started the puzzle because I wanted to have more fun with Instagram again and it’s just wonderful that in return, it gives joy and inspiration to my followers. Thank you for sharing the Morguefiles, I will give them a browse.
I like your idea to use it as a print photo layout. I have been wondering what one could do with it on Pinterest or an email newsletter… but that’s still just a thought at this point.
So happy you enjoyed the tutorial and can’t wait to see what you might create next!
xoxo
Judith
Jess4 years ago
I LOvE YoU
Vanessa Quijano4 years ago
I want to give this a try! I just downloaded the template. This might soothe the struggle. 😉 This format might just represent my brand better with everything that it offers. Not sure where to start or how to go about it, any thoughts for a headstart? @vqstudio
juniperoats4 years ago
Hi Vanessa,
first of all I just wanted to say: I love, love your logo and I can totally see your branding work with this kind of Instagram layout. I am not gonna lie, it is time consuming but it is also a lot of fun! I found that the best starting point was making a moodboard and for that the very first step is collecting images, color swatches and fonts like it’s going out of style.
Once you defined your “voice” and only keep the images that represent that, its really just like playing a puzzle game – as long as all those images work together and help tell a cohesive story, you cant really go wrong.
Can’t wait to see what you will create! Keep me posted once you start posting your new feed!
xoxo
Judith
Tsu4 years ago
Do you think there is a way to do this without needing Illustrator? I love the look of it and the ability to really plan ahead and see the integration of brand images, but i’m just starting out on my new business and finances are tight. Thanks for the inspiration!
juniperoats4 years ago
Hello Tsu, oh I hear ya!
I really wish I had a tip on a free (or budget friendly) design tool to create your Instagram puzzle on but as of right now there is none, that allows you to layout the grid the way Illustrator does using these easy-to-export artboards. You may be able to tweak a template on Canva.com (which is free) to the point of later splitting it up? But when I tried it, I quickly gave up as I got too frustrated. But there might be a little bit of hope: in case you are a student or have a student in the family, Adobe does offer some really great rates for their CC subscription under a student ID. Also, if at any point I learn about a new, budget-friendly design solution, I will make sure to send it your way!
xoxo,
Judith
Moe Bueno4 years ago
Hi Ms! There seems to be a problem as I couldn’t type in my email when I wanted to get the template. anyway, this was a really, really generous step you made. Love yah! 🙂
juniperoats4 years ago
Dear Moe, yeah it seems today the little Mailchimp monkey has gone home. I’ve gone ahead and sent you the link to the download directly to your inbox. Have a wonderful time creating! xoxo Judith
Faye M4 years ago
Hi, Thank you for the template. I’m a real illustrator novice and need to extend the template beyond the squares on the template. I’ve tried to copy and paste but that doesn’t seem to work. What’s the best way to do this? Many thanks!
juniperoats4 years ago
Hi Faye, so happy to hear you are using it! Illustrator can be a little bit tricky with this, so am glad you asked. I just made a mini video tutorial for you to see how I start a new round of Instagram posts here. Hope this helps! Also, if you rather use Photoshop going forward, I just launched some first PSD templates as well: browse templates. xoxo Judith
Cassie Stauffer4 years ago
What an absolutely BEAUTIFUL feed you have. Thank you for the tutorial and template. So inspiring!
juniperoats4 years ago
Oh, thank you so much!!! xoxo 🙂
Tracy K4 years ago
Let me start by saying AH-MA-ZING!
Thanks so much!
But, I’m having a hard time exporting. I’m only able to export a small part of each artboard. Any suggestions?
juniperoats4 years ago
Hi Tracy, would you be willing to email me a screen shot of how you export it? It might be a setting and you might also be on an older AI version? Connect with me via judith@juniperoats.com
Damaris Kubota4 years ago
I’m so happy to make my feed with your help!
U r so gentle, generous and kind!!
u deserve all the best to you!
Thank you so much!
juniperoats4 years ago
Awww, thank you so very much Damaris! Can’t wait to see what you will create. Tag me in one of your posts. I would love the cheer you on! xoxo Judith
LESLEY4 years ago
Love this post! I feel so inspired! I do have one question; when you post, do you post three images at a time (the three images on the same row), like a few minutes apart? I ask because if you post one image, won’t that shuffle the whole puzzle making it look “unconnected” until you post the next one and then the final third one from that row?
Thanks, Les
juniperoats4 years ago
Hi Lesley,
Great question! I just post at my own pace. Usually I post once a day and then I often take a break on weekends. The magic of the puzzle feed is that it still looks just as good even when I haven’t completed a row yet. But then I guess that does depend a little bit on the layout you might choose. I got some pre-made templates available that certainly take that into consideration. If you want to take a peek at them: https://juniperoats.com/instagram-templates/
They are all created for Photoshop but can be converted to be used in Illustrator too.
xoxo,
Judith
Chris Pontiroli4 years ago
Thank you!!!!
Karen4 years ago
Wow thank you for this. I know Illustrator more then Photoshop and figured there must be a way to do it in Illustrator. I spent all afternoon making 27 artboards so I could three accounts at once having enough for a week. Question I’m using CS6. Is there way to select more then one artboard at a time when saving for the web? I’m doing it individually now. I’d love to select 9 at a time for each account and save them all as save for web. Is that possible? I tried selecting artboard on the left and then tried selecting shift but nothing happens. I tried select all but that’s just selecting everything on each artboard.
juniperoats4 years ago
Hi Karen,
I am so excited you found this tutorial helpful! The reason I like to do this in Illustrator is, that it’s easy to drag boards around without messing up the design, ergo its easy to have a seamless continuation. However the ONE downside and something photoshop is way better at… is exporting multiple files. Or so I though… until you made me research this a bit. And guess what I found? There is a way to export them all in one go just like photoshop. I made a short video on it, make sure to check it out.
So thank you so much for this question, you just made my life easier as well!! YAY! 🙂
xoxo
Judith
Karen4 years ago
Judith,
Thank you for the helpful video. This is amazing. Now I just want to keep playing and making new boards. Your feed looks amazing.
juniperoats4 years ago
Haha, yessss! 🙂 xoxo
Bobbie4 years ago
I am a total newbie to Instagram, so I started looking into “how to” options and I am so glad I stumbled across your page! It is gorgeous! A work of art! Just a few quick questions for you: when you post using Preview, do you always post bottom up and right pictures to left (so that the puzzle shows up correctly on Instagram) — not sure if that totally made sense or not. And do you create all the info/pictures ahead of time or are you tweaking things as you go based on events, etc. that are happening (and if you do tweak it, how do you do that?)
juniperoats4 years ago
Hi Bobbie, thank you so much! 🙂
Yes, I start at the bottom right corner and work my way up to the left upper one. I do create everything in advance (usually set one long afternoon aside) but I do sometimes go back in and make a change if something has come up that I want to post about instead.
Best,
Judith
Deborah4 years ago
This tutorial is the best thing I have found! Works perfect for a beginner (That’s me!)
THANK YOU!!!!!!!! Love your feed.
Greetings from Venezuela 🙂
juniperoats4 years ago
Hi Deb,
Awwww, thank you so so much! So stoked to hear that!! 🙂
xoxo,
Judith
N Bandaranayake4 years ago
This is SO great – thank you! I was contemplating hiring a creative agency to get a more professional look to our account but came across this and took a stab at a grid puzzle. Relaunching Insta account now with a really great aesthetic! @barressentialuxretreats if you’d like to take a look.
Thanks loads!
juniperoats4 years ago
Oh that is wonderful. Maybe you would love to save even more time and check out one of my pre-made Photoshop templates? https://juniperoats.com/instagram-templates/
xoxo,
Judith
Armando Cabrera4 years ago
Hello Juniper, I’m from Colombia, your work its awesome!! I have 1 question, how do you combine photos and videos in the same puzzle grid?
McQuaid4 years ago
I’m so happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
foldeknive4 years ago
Hellо I am so glad I found your webpage, I realy found you by error, whіle I was looking on Bіng for something еlse, Anyhow I am here now and would just lіke to say kudos for a remarkable post and a all around entertaining blog (I also love the theme/design). I don’t have time to read through it all at the minute but Ι have book-markеd it aand also added your RSS feeds, so ѡhen I have time I will be back to read a lot more, Please do keep up the fantɑstic work.
Roger4 years ago
Hi there! Thank you so much for sharing this. How long does the link typically take to appear? I signed up so I could grab the Illustrator file but haven’t received anything yet.
Thank you again for your awesome work. Been following your work on CreativeMarket and it’s always so great 🙂
dansk schweizerkniv4 years ago
Can I ϳust say what a relief to uncover somebody who actually understands whаt theу’re tɑlkong about on the web.
You actually realize hoߋѡ tо bring a ρroblem to light and make it іmportant.
More and more ρeople should read this and understand this side οf the story.
I was sᥙrprised that you аre not more poρular because yyou mߋst
certainly possess the gift.
Verna4 years ago
Very nice write-up. I definitely love this website.
Thanks!
Zetu4 years ago
Wonderful web site. Plenty of helpful info here. I am sending it to a few buddies ans additionally sharing in delicious. And obviously, thank you on your effort!
Ivan Budd4 years ago
WONDERFUL Post.thanks for share..extra wait .. …
ergfir nolikz4 years ago
Hey there, You have done an incredible job. I’ll certainly digg it and personally recommend to my friends. I am confident they’ll be benefited from this web site.
juniperoats4 years ago
Hello Ergfir,
Thank you so much for the feedback. I am super delighted to hear that you liked the tutorial and will recommend it to your friends. Always hope to inspire and keep transforming Instagram to a happier place for everyone. 🙂
xoxo,
Judith
Riddleschool53 years ago
That is very fascinating, You are a very skilled blogger.
I’ve joined your rss feed and look ahead to searching for more of
your fantastic post. Additionally, I have shared your site
in my social networks
zvodret iluret3 years ago
Hey there! Would you mind if I share your blog with my myspace group? There’s a lot of people that I think would really appreciate your content. Please let me know. Thanks
juniperoats3 years ago
Hi Zvodret, I would be absolutely delighted! xoxo, Judith
Bara Perglova3 years ago
Hi Judith”,
thank you very much for sharing this, it’s awesome! I checked your instagram account and noticed that for some tiles you use video? Or is it gif or something? Could you please give me a tip how to create these? We are working on some rebranding of our shop and I would like to take care of new visual on Instagram as well but I stuggle a bit with this. I would like to do something like you did on post from for example 5th June, but I do now know which tool to use. Thank you very much in advance for all advices! <3 Bara, @hnst.ly
juniperoats3 years ago
Hi Bara,
thank you so much! I do use Photoshop for such animations (or any video integration). After I’ve exported the individual squares, I open the ones I want to animate in Photoshop. In there I arrange/match-up the layers to the original arrangement (same images & layout as I put in before in my Illustrator file). Now this is the starting point for the animation. The animation itself is then done via Photoshop’s timeline animation function.
Hope this helps!
xoxo,
Judith
Bara3 years ago
Great! Thank you Judith, I’ll definitely try this way!
Thanks so much for help
<3 Bara
Georgia3 years ago
Thank you for sharing your info. I truly appreciate your
efforts and I am waiting for your next write ups thank you once again.
Jeanelle3 years ago
I just stumbled upon your blog when I am researching some effective ways on how to boost our instagram feed. This is very informative article you have. A very big thanks to your efforts. How generous you are to even share this.
Xoxo
Janeen3 years ago
Woah! I’m really enjoying the template/theme of this website.
It’s simple, yet effective. A lot of times it’s very difficult to get that “perfect balance” between superb usability
and visual appearance. I must say you have done a excellent job with
this. Also, the blog loads extremely fast for me on Chrome.
Excellent Blog!
anna3 years ago
Hi Judith, I just found out this blog and I instantly love this blog unlike usual. Thank you for your generous sharing. You have inspired me so much to start my own beautiful instagram feeds. I really can’t thank you enough because I was kind of desperate to start with not enough knowledge or inspiration, but you made it easier for me.
Please keep sharing this inspiration.
Lena3 years ago
Wow, incredible blog layout! How long have you been blogging for?
you make blogging look easy. The overall look of your web site is excellent, let alone the content!
Stephen3 years ago
Thanks for finally talking about >How to create a unique Instagram feed | JUNIPEROATS <Liked it!
Dani3 years ago
Hey there, You’ve done an incredible job. I certainly digg it and have personally suggested this to my friends.
Ramona3 years ago
Keep on writing, great job!
Jacqui Kipfer3 years ago
Oh I cannot thank you enough for this! I just completed – well, almost completed – my first set of posts using this method and your template. You’re a GENIUS. Thank you, thank you, thankyou!
juniperoats3 years ago
Hi Jacqui, my absolute pleasure! Thank you so much!! :*
Davita3 years ago
Judith thank you for sharing this post! Quick question… How do you insert video into the puzzle instead of a photo using Photoshop? Or would I have to use a different program?
juniperoats3 years ago
Hi Davita, you are spot on. I use Photoshop’s timeline animation for adding video. I do that after I created the puzzle and then single out the posts I want to turn into a video, then start animating them in PS. 🙂
Lisa Burnell2 years ago
Hi! I’m wondering the same thing. I’ve just purchased one of your templates and am wondering how I can include video clips into the template. Is this possible? I don’t want to animate still images, I want to import video clips? Thank you! 🙂
juniperoats2 years ago
Hi Lisa
that is indeed possible and since I have had many many requests about that, I created a little mini-course that teaches you exactly how to add video into your puzzle. You can get it here: https://juniperoats.com/product/mini-course-how-to-add-video-to-your-puzzle-feed/
xoxo,
Judith 🙂
Shaun3 years ago
whoah this weblog is magnificent i like reading your articles.
Keep up the great work! A lot of people are searching for a new way of using Instagram and this is just fabulous.
Farzin3 years ago
oh, I’m falling in love with you and your work by everytime looking at them!
Thanks a lot for the tutorial.
juniperoats3 years ago
Awww thank you so much Farzin. xoxo, Judith
Micheline3 years ago
Do you mind if I quote a few of your articles as long as
I provide credit and sources back to your website?
My blog site is in the very same area of interest as yours and my visitors would definitely benefit
from some of the information you present here.
Please let me know if this alright with you. Thank you!
Vincenzo Michelucci3 years ago
Amazing. I have only a questions, how can I export single jpeg toghether? If I try like in your guide (File > Export > Save for Web (Legacy)) AI save one square per time. :/ (Sorry for my bad english)
Mimi Franco3 years ago
Hi! I love this aesthetic! I’m so excited to implement it. Your tutorial was perfect. Would you mind telling me which font you have for your “download now” button on this page? Thanks so much <3
Sandy Firmansyah2 years ago
Hi Juni, thanks for sharing this awesome grid. This layout sped up my work.