Today Katrina of Pugly Pixel is going to share six content style tips for bloggers: In 10 Blog Layout Tips, we shared ten ideas you can use to optimize your blog's overall layout. In this article, we're going to share six tips for presenting the images in your blog posts. Although our point of reference will be smaller (a single post versus the entire blog page), many of the concepts in 10 Blog Layout Tips can be applied to your blog posts. Considering that a blog post occupies at least half of the screen, each post deserves the same meticulous care that you give to your overall blog design. Vertical alignment, white space, and typography are still considerations when designing and arranging your post layouts. After all, it's your posts that are key in getting your message across to your readers.
1. A MEMORABLE & ENGAGING COVER IMAGE First impressions matter. When I come to a blog and the first thing I see is a Wow! picture, I immediately want to read more. Your first image should be your very best image, and it deserves extra care with cropping, contrast, and color. The image above is just that kind of striking image — Elsie's stripes contrast with the colorful background, and both Elsie and Jeremy are making great eye contact. It's the kind of picture that draws you in to read more.
Quick tip: Look for pictures with eye contact. And if there are no people in the photos, look for contrasting colors, geometric shapes, lines, or patterns — use a picture that will give your reader a small sparkle of surprise.
2. PHOTO CAPTIONS:
When I scan through a magazine or newspaper, my eyes are immediately drawn to the images. The next thing I look for, quite automatically, are the captions. If I'm on bus or a train, I don't usually read, at least not right then and there. I usually just stick to looking at the images and reading the captions. It's just the way I "speed read" and I do the same for blogs, especially if I'm on the go and reading on my iPhone. So, my second tip for you is this: unless your post is intended to be a reflective and quiet post, add captions to your images. If your photos are related to the text, your captions can become a summary for your post. And, if your photos are unrelated to the post or to each other (as in a links loved post or an Instagram summary post), your captions can tell a short story quickly.
Quick tip: There are many ways you can add captions to your photos. For starters, you can use a conventional caption, a line of text directly beneath the photo in a font slightly smaller than your post text. Or, you can use an image-editing application like Photoshop Elements to place captions directly on your photos. If you have access to a graphics tablet, you might want to try adding captions in your very own handwriting. This can be very charming, as you can see in Elsie and Emma's post on how to
add handwriting to your images.
3. COLLAGES:
If you have a group of images, organize them into a collage. For example, if you have a "My Weekly Faves" post with many images, or a post with a strong visual theme, you can use a collage to organize multiple images into a single coherent image. Collages add visual interest and they also have a practical side effect: they save bandwidth! As you may recall from Tip #9 in Blog Layout Tips, "a fast loading page is always a good thing." By using a collage, all of the images that you would feature separately in your post will be efficiently consolidated into a single image, speeding loading time. But more importantly, collages can add lots of visual interest to your images.
Quick Tip: Collages can be laid out in many ways. You can use rectangular grids, circular patterns, or you can lay them out as free-style magazine-inspired layouts. When the items in your collage are arranged free-style, enumerate them so that your readers can easily identify the items in your collage with numbered links in your caption.
4. PHOTO LAYOUT TEMPLATES:
If you have a regular blog feature, weekly or monthly, or you are putting up a special series of posts, use a photo layout template. For example, you might have a monthly interview series that could benefit from a signature look. A customized photo layout will differentiate your weekly and monthly features from your regular posts. When you use a consistent style for these special blog posts, you are telling your readers, "this is a special article — read it!"
Quick Tip: You can use an image-editor to rotate your photos and images and arrange and layer them in various ways. Some good image editors for this job are Photoshop CS or Photoshop Elements, which both offer 30-day trial downloads. So, when you create a nice layout, save it as a
layered PSD file for future use (don't flatten it!).
5. CLIP ART:
I love the simplicity of an unadorned photo, but sometimes we want to help a photo stand out. We could accomplish this by using Photo Layouts as in Tip #4, but for many pictures there is a simple solution: clip art. You can achieve a cute effect by simply using a vintage shipping tag as a blog label, or you can add a few sprinkles of sequins and confetti clip art here and there. Clip art can be fun and it can add a lot of charm to your blog posts. By the way, clip art sometimes gets a bad rap when people think of those bit-mapped images from the 90's, but modern clip art can be really cool, so don't listen to the clip art haters.
Quick Tip: The secret of clip art is to use it sparingly. Clip art is supposed to enhance a photo, not overwhelm it. My favorite places for free, high quality clip art are
The Graphics Fairy and
Fuzzimo. But, there's an even better free clip art resource: your own photos! You can use your image-editing program to extract objects from your own pictures.
6. FONTS:
I love fonts. I'll admit that browsing through font sites for hours and hours is one of my guilty pleasures. At one time I used (and abused) all sorts of fun fonts in my blog post layouts. For me it was the more fonts the merrier! But recently, I've decided to limit my fonts to a select few. Why did I do this? Well, using an abundance of fonts on each page made my blog look messy in the same way that too many colors can look messy (Tip #7 from 10 Blog Layout Tips). So, I chose a couple of super readable text fonts for the posts, and to keep things fun, I picked a few choice decorative fonts to use in my Photo Layouts. Elsie and Emma have some choice fonts, as well — can you guess what they are?
Quick Tip: There are lots of free fonts out there for you to indulge in. Some of my favorite font resources are
Font Squirrel,
Dafont, and even
MyFonts, which has a broad collection of freebies. The best way to learn about fonts is to test them on your photos to see if they work with the rest of your page, and with each other. Choose a simple font for your watermark and then go wild with the others. A good guideline is to limit your fonts to three (besides the banner and headline fonts in your blog).
We hope you guys enjoyed these quick tips! –
Katrina
125 Comments
Really helpful tips! Bookmarking this for reference. 🙂
Thanks!
Aizzing
http://www.icingandwrite.com
Clip art is always so fun! It’s one of my favorite things to use.
Great post! Thank you for sharing these wonderful tips. I like the idea of having a consistent layout and font for a regular blog feature 🙂 xxo
This is so helpful. I am in the process of doing this right now on my website. Thank for the tips PP & ABM! XO
I love you katrina!!!
Great tips. I like the idea of photo captions, I will have to try using those more often.
Thanks for your advice! Highly appreciated.
Nice… loved this! Thanks for sharing.
-ashley
Great tips for all bloggers whatever your style. Thanks for sharing!
I love Pugly Pixel and it’s so nice to have Katrina write a feature here! So many helpful tips and resources!
Thanks for these great tips- so helpful, especially to those of us new to blogging x
Kim~ whatpeggysaid.com
Absolutely amazing post and writing
Xx
Very helpful. Love both this blog and Pugly Pixel. I’ll be bookmarking this one.
– tianna 🙂
great tips, thanks for sharing!
great question, what is the font you’re using for your post titles Elsie & Emma??
Alinor, it’s Gotham.
🙂
Thank you for sharing these great tips!
Merrily Merrily,
Nini
http://ninilopette.blogspot.com/
I love this post! After almost a year of blogging, I still need tips like these ones! I love the fact that you explained every tip in detail and gave examples. It’s very helpful! 🙂 Now, I need to start using these wonderful tips to make my blog posts even more interesting! 🙂
xoxo
Ida
http://asplashofida.blogspot.com
Wonderful tips! Thanks so much for sharing 🙂
xx Emily
http://outintosparks.blogspot.ca
great helpful tips ! thank you so much for sharing !
XX Luba
Well Living Blog
http://very-well-living.blogspot.com
good stuff here.
xo.
http://dropsofjupiterBLOG.com
This is really interesting. Thanks for sharing your tips!!!
really helpful blog post thanks! never thought of the clip art thing
This is a great post. Can you give us more information on how to make a collage with your photos? Thanks
I enjoyed this very much! Thank you for sharing! While I can only apply about 3 of these tips at a time, I’m glad I have this resource to go back to!
Katrina! What a wonderful post… so many good tips, thank you so much!
http://rivercitysammon.com
These are such brilliant tips! And beautiful photos to go with them.
I was wondering if you’d consider doing a post on free photo editing software, as Photoshop is just so expensive, and Picnik recently closed.
http://www.styleisalwaysfashionable.blogspot.com
totally agree with the tips! i’ve been experimenting with collages! fun!
I love this post. A Beautiful Mess is my favorite site 🙂 I can spend hours reading your posts, explore new things and use tips. The best thing from all this is that the tips are really original and helped my blog grow further. Thank you Emma, Elsie and the rest of the writers for sharing your knowledge. Don’t know what to do without A Beautiful Mess
xoxo Veronique
http://www.veer-blog.blogspot.com
I love taking photos and this is a great post for me. Hope to be putting some of these into practice soon.
Love reading these posts on blog how tos and your everyday working styles. Super interesting!
x Elena
http://www.randomlyhappytoday.blogspot.com
Very helpful tips! I am just inching into the blogging world so this info is awesome!
http://Www.oncewhispered.com
I know this might be a silly question but my computer recently crashed that had nice photo editing software on it and now I am using a hand me down laptop with no nice extras when it comes to photos. Are there any free downloads/online editing programs I could use to create collages, add text, and do some basic but interesting editing!
Help Me!
-Danielle
This is so amazing! You guys help me so much! Name That Dress and win $50 with CopperEtiquette
What wonderful tips! I have so much to learn. Bless You!
yes, i am book marking as well. it’s funny how you see these things done by other bloggers but forget to try it yourself. for me it has to be a conscious reminder.
in love with the sequin clip art but where did those ones come from? fuzzimo?
thanks!
brilliant! thank you xx
SuPER HELPFUL!!!!
Thank you so much!
thanks for the share.
also loved elsie’s post on “THOUGHTS ON PUBLIC VS. PRIVATE” — i have been thinking about that more than usual these past weeks….
Love love love this post. So helpful! Thanks ladies! I will for sure check all these recommended sites out and love all the tips!
Erica xx
http://www.ericabelliocreations.blogspot.com
Along with the Beautiful Mess e-course I am working with these are great tips to incorporate. Thank you! I got lost on both clip-art sites you mentioned, there was sooooo much gorgeous stuff on there. For instance, I have been looking for the perfect Polaroid images to use and I finally found them. I will reread this post in the future. No wait, I will print it out and put it in my binder! (I wonder how hubbie will feel if I tacked those prints in the bathroom for an everyday reminder… Hmmmm…).
such a helpful post, so lovely of you that you share all these tips and tricks with us! Really appreciate it!
http://bravebrunette.blogspot.com
Great post and so useful! I will admit I am guilty of the over use of fonts. There are just so many nice ones out there! I love Katrina’s blog am so glad she gets featured here, I am looking forward to her next post 🙂
Becky K.
http://pixiwishesforeheadkisses.wordpress.com/
So helpful, thank you! Consider these tips pinned 🙂
Thanks so much for a super helpful post! It’s so great to know the behind-the-scenes of creating beautiful images and layouts.
I’d love to know your thoughts on Photoshop vs. Photoshop Elements. I know that Photoshop has tons of options and tools. But I’m a total novice. I just want to be able to create pretty collages for my blog — without getting too confused. 🙂 Which would you suggest? Thank you!
Thank you so much for these great tips. I am looking to update my blog and improve my photos.
I appreciate all your great tips and tutorials.
Awesome tips, I gotta start using these ideas more often!
nice tips.. 🙂
http://lovesimplegreen.blogspot.com
Great post! I found a couple of great resources for bloggers as far as stock images and editing.
http://photopin.com/ for free stock images. Just copy the photo credit form onto your site to give proper credit to the photographer.
And http://www.picmonkey.com/ is a fantastic photo editor for people who are not quite ready for Photoshop. Like me. 🙂 SUPER easy to use and lots of great fonts, effects and clip art.
SUCH a great post! Thanks Katrina! It’s so easy to get think sometimes that people don’t notice all the little extras put into a blog…but you are right, that’s what makes people stay and look around. Great post! Thanks for the tips and reminders!
Katrina’s the genuine article, i’m an avid fan of hers and love the recent collaborations between all you girls!! it’s the best to see faved bloggers doing their thing like rockstars but even better is when they give back to the blogging community. Elsie, Emma & Katrina all do that and it’s appreciated to no end.
i’ve learned so much through Katrina’s space over the years and count my lucky stars she’s around! cheers all – xo
I am just starting a blog and it is nice to have some good tips to make it better!
Very helpful, thanks!
http://www.aroundthegirl.net
So helpful- I love the idea of writing on your photos!
Thank you for sharing!
thanks so much for the practical tips! i am always looking for ways to improve and you have provided some valuable insight. i’m getting on it…
Great tips!! Check out my blog: http://thechicstreetblog.blogspot.com/
I needed to learn this and you saved my life!
thank you, thank you, thank you!!!
Emma I really love your staight hair here!!
<3 Elisa
GREAT tips! Needed this. YOU always have the BEST pics!
XOXO
-Daisy Nguyen from PS BANANAS fashion blog:
http://psbananas.com
BLOGLOVIN
FACEBOOK
love it!
Peace and Love
Hinna xoxo
http://www.hinnafarooq.com/
Thanks for sharing! This was awesome 🙂
xoxo Sarah
theantiquepearl.blogspot.com
I have Pugly Pixel layout on my blog and I love it!! Thanks for these great tips Katrina!!
Wow – love all of this! Great tips:)
Love,
Stephanie May*
http://www.maydae.com
This is such a great post, thank you. Super useful 🙂 How do you create photo collages? Are there any free websites that will do this?
awesome! i’m so glad you guys enjoyed these tips! 😀
Very interesting tips and especially gorgeous photos!!! 🙂 xx
Thank you for such a GREAT TIP! this is extremely helpful 🙂
xoxo,
Irina
http://socialbliss.com
You guys always amazing posts and tutorials! Thanks for this one, it’s really great and helpful.
By the way, click here to visit my blog and participate in my giveaway – you can get a bracelet from Gogo Philip’s newest collection!
thanks again for a great post, and for everything, I am learning more from you than you know and I think I am growing my blog and my brand quite well as a result, so thanks mate.
Amazing tips – as always! 🙂
xxx Greta
http://gretasdrawer.com
Great, very helpful! Thanks a lot. 🙂
Greetings from Germany,
Yvonne
This is such a great post. I will definitely use these tips on my blog. xx
howtowindowshop.blogspot.com
Beautiful. I like vintage ;)discount cigarettes
Gosh this post (well, this blog in general, but especially this post) makes the urge to buy a fancy camera so much stronger! MY favorite part about reading blogs are the photos.
My blog is more text based, because I think I’m a relatively good/funny writer, but I’d love for my photos to be at the same level for a more well-rounded experience.
Great advice!
http://www.radmagiclove.com
Thank you so much for this post! I am defiantly going to have to bookmark this post in particular. I mean I have this blog on my blogroll but this post in particular is just so useful!
Great tips!!
http://www.creativityandchocolate.blogspot.com
Love all the advice you give us
http://www.mykitschworld.blogspot.com
Agree to everything here. I think pictures are SO important for most blogs (not saying that everyone has to be a professional photographer though). Putting your best image first is great also if visitors are coming in from Bloglovin’, for example. Next to the headline, that image is the first thing we see and it should really draw attention to the post.
I love when you share tips and advices like this!
I love the idea of using photo templates to enhance weekly features! I will definitely be implementing these tips into my own blog, thanks!
Kelly
http://pixelbaby.net
fun post and tips! love this blog! it is truly inspiring and reminds me of how my sister and i are always trying to come up with new ideas and crafty projects!
quick question, what do you recommend as far as using fonts in a product you want to sell (invites, greeting cards, etc.)? how would we know what we can use without getting into any trouble and respecting the font creator?
thanks so much!
xoxo nina
@katherine: hi, you would need an image-editing application like photoshop cs or elements to create collages. there are free applications like sumopaint which work well enough.
hi kate! sumopaint.com << free 🙂
hi margarita, if you’re just getting started, use sumopaint. once you outgrow that free application, consider moving up to PS Elements. You can accomplish all of your blogging tasks with PSE.
hi amber, thanks for the picmonkey suggestion!
hi claire, i’ve used sumopaint and it works pretty good. essentially, you would need any image-editing app that handles layers. oh, another reader also suggested picmonkey.
amazing tips your blog always surprises me 😀 I am a big fan =)…
Great post. As a newbie blogger, all this info is super interesting and more than helpful!! Muchos gracias x
Gahh I knew these things, but was in serious need of a refresher. Thanks all!
Wonderful advice!
Loved this!!! the potos are WOOOW!
Great tips! Thanks!
Thank you so much for the tips! As a complete newbie to the blogging world I appreciate all the help I can get 🙂
Thanks! Nice article
Thanks for the tips 🙂
http://www.ubetterwork.blogspot.com
can anyone tell me how bloggers number collages? like this: http://bleubirdvintage.typepad.com/blog/2012/03/we.html
thanks!
I have a question related to your post “10 Blog Layout Tips” (the comment box was closed). Do you know of a tutorial about aligning your pictures and text in a blog post using blogger? I remember seeing one once, but I forgot to bookmark the page. That would be so much help! 🙂
Is this where I leave my Blue Q comment? I want the Ice Cream Money coin purse! Yay! Please forgive if this is posted in the wrong place.
I always loved Katrina and Elsie!! OMG Thank you for sharing these. <3
Thanks for the tips! It leads to another question I have…how do you create more interaction with readers in a blog? I have readers but never hear from them and I’d love to meet some new friends? How to go about it?
Thanks,
Christi
stylishadventures.blogspot.com
Great tips! It gave me some ideas about how to improve my blog. Thank you.
Great tips! I never thought about adding clip art to photos, looking forward to trying that!
http://thecraftingklutz.blogspot.com/
This is just great! I do really enjoy this kind of articles.I was very pleased to find this site.I wanted to thank you for this great read!!Thanks for your post.
Hindi ako na magkano ng isang online reader upang maging matapat ngunit ang iyong site ay talagang Nice, panatilihin ito up! Kukunin ko sige at i-bookmark ang iyong site upang bumalik mamaya. Lahat ang best.pretty mga mahalagang bagay-bagay, pangkalahatang tingin ko ito ay karapat-dapat ng isang bookmark, salamat
great tips!
Val
http://valentinaduracinsky.blogspot.com/
thankyou i really appreciate this post! i just started blogging so this helps! maybe one day you have time you can check mine out and email me any suggestions! thx!!
Great post! Thank you for sharing to us…
http://www.brendawatson.com/digestive-conditions/irritable-bowel/
Thanks for the tips. I am going to experiment with adding captions to my photos.
Good stuff — thanks for sharing. 🙂
who makes that adorable dress??!!
This is brilliant. I love it. Such an interesting idea!
Best blogging tips ever!! Though they do require pretty skillful use of Photoshop which I have yet to master!! Hehe
-Stephanie
@LaminLouboutins.blogspot.com
Fantastic post! Now I need to get me a Bamboo Tablet!
Pretty helpful gather up! Thanks Katrina and girls =)
xoxo
Thanks so much for the tips!
I always love your photographs. Beautiful!
Brilliant advice here! Thank you very much for sharing:)
Very helpful! I’m a huge fan of picmonkey!
Cathy Trails
fab post! thanks for the tips http://heatheromade.blogspot.com
you guys are amahzing!
Thanks for the great tips! I wish I could take a photography and graphic design class from you. You have so many great ideas!
http://ohtheplaceswesee.com
I am very enjoyed for this blog. I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
Great tips, thank you for sharing {and such fun photos too!}xx
This is great. I’m a new blogger (literally just launched today) so it’s great to have these tips so well laid out and easy to understand 🙂 loves! Keep up the great content!
Super helpful and well written article. Thanks so much! (…that kinda sounds like generic spam but I promise you I’m not ;p)
thank you for the tips! very helpful!
http://www.weddingbybliss.com
Thanks for sharing,
I dont know why my blog pages look so messy, its about fonts, paragraphs, or themes…
any idea?
https://teslateb.ir/