How To Create Recognizable And Really Unique Article Thumbnails

Advertisment

Picture can save a thousand words. That’s true and it works everywhere, even in blogs. Next thing visitors spot after the title is thumbnail. Well done post thumbnails will attract more visitors and they will explore your website with interest.

In this article I’m going to share some tips and advices about beautiful post thumbnails. You will see lot examples of using thumbnails and hopefully learn something new.

Size and Location

Correct size and placing is as important as the thumbnails themselves. Don’t overplay with the sizes. Too small size might not display all the information you need, but too large size will be distracting. Don’t choose too striking or too imperceptible position either. Cleary visible spot for your thumbnails is good, but the content is more important, right? Too imperceptible spot won’t attract so many visitors. Below you will find some of the most popular thumbnail placing and size.

Large thumbnail below title or introduction

Layouts where quite large thumbnail lies below heading or introduction has become quite popular. They’re handy, because you can insert a lot of information there. You don’t have to resize your preferred image to half. Great preview is available. Lot of blogs choose to put pictures or screenshots there, because creating so large thumbnail yourself is time-consuming. Usually the width is fixed, but the height varies from around 200 to 400 pixels. And that’s great, because if you are using a photo, you can crop it as you like. These large thumbnails if made properly can really attach lots of visitors. But be aware that not all designs will look good with these large thumbnails.

Fubiz

Denis Designs Blog

Little Box Of Ideas

SW Graphic

Chilli Blog

In Chilli the thumbnail is actually above title. The thumbnails aren’t too large, they fit perfectly and make superb contrast with this awesome dark design.

Square thumbnail leftwards title

This is definitely most used layout in design blogs. It’s very practical and the thumbnails doesn’t take up too much room. Users can quickly scroll trough posts. Sizes of these thumbnails usually varies from 100 to 250 pixels for each brink. If you have a good taste and accordant skills, these thumbnails can look really beautiful and make people willing to read your posts.

PSDFan

Appstorm

PSD Vault

SpeckyBoy

Square thumbnail below title and leftwards content

This solution is very similar to previous one, but not used as much. It allows users to focus more on the title, and only after the title they spot the thumbnail. I like this solution, because you can read the title and then get a small preview about article. However thumbnail is not as important as the content itself and in this location the thumbnail distracts attention from your post introduction a little. But there are many blogs, where this layout looks very good. The most popular again is square shaped thumbnail, but there are blogs using rectangular thumbnails too.

Forcg

Web Designer Depot

My Ink Blog

Creative Fan

Square thumbnail rightwards title

Infrequent placing, but basically it’s pretty much the same as within the left side. Only people are not used to it, that’s why it looks a bit strange. Personally I prefer left side placing, because I don’t like switching my look from thumbnail to beginning of the title and backwards. But in some blogs those thumbnails actually make segregated column and look pretty solid.

UX Booth

Techniques

Photographs

Photos matching the subject you are writing about can really highlight your post. Choose them with taste and keep the photos relevant. If you are writing about jQuery tutorials, don’t put a photo manipulation as thumbnail. I suggest checking out 60 Free High Quality Stock Photography Sites if you want to find free stock photos. But I think you will agree that photos on those sites usually aren’t exactly as you imagined. If you want the quality, you have to pay for it. Here are some good sites to get finest quality images:

• iStockphoto
• Dreamstime
• Bigstockphoto
• Shutterstock

Of course, it’s pretty expensive to buy images there one by one, but subscription would be a good option. Then you could use some magnificent images to afforce your posts. If you have already found and included some photos in your post, you can assuredly put one of those photos as thumbnail.

Screenshots

If your post includes well designed webpage, tool or a software, then why don’t you put it as a thumbnail? It will completely measure up with the content and you will unite appropriate with enjoyable. People will get a preview about what’s in the article.

Psd.Tutsplus has a freebie to offer, it’s pretty logic that they’re putting preview of it as a thumbnail.

Here Smashing Magazine is writing about jQuery and some tools and they have included a screenshot of one of them as the thumbnail. It’s a good looking tool with nice contrast and at the same time it gives readers a visual preview about what can they expect from the article.

Show off content

This method is even more simple than using screenshots. If you are writing about art or design, you can just pick one image from your post and set it as thumbnail. Again, people will get a preview of post content and thumbnail will be attractive.

Abduzeedo always chooses one gorgeous image from their daily inspiration series and sets it as a thumbnail. Readers spot the great artwork and want to see more.

Reencoded is writing about humorous artworks and they’ve picked up colorful and catching image as their thumbnail.

Text on thumbnail

Adding some text to your thumbnails can help people focus to your posts. This text can also help to bring visitors if they search for images in sites like Google.

Trendland has a unique and really great solution. Once you hover the thumbnail, a pop up with some introduction is revealed. That way you can save a lot of space and visitors can have both visual and written preview available.

United style

If you are writing lot about similar topics, a united thumbnail design is a neat solution. You can create thumbnails after premade template. That way you will save time and you will have stylish thumbnails. Many blogs have CSS solutions for thumbnail styling.

See those shadows under thumbnails in Web Stuff Share? They’re under every thumbnail making them look small arches. That gives your blog more unified look. Every thumbnail is different there, but you can see those shadows right away.

Hv-Designs releases freebie pack every Friday. Instead of creating new thumbnail every week, Richard Carpenter has created a template and just changes the number once a week.

Other uses

Thumbnails are not used just in main page while users browse trough posts. Of course that’s the most important use of them, but there are still some other, worth to mention, uses.

Related posts

Related posts section after article is a nice feature itself. But monotonous links just themselves aren’t embolding users to read some other articles. You need to brighten them up. That’s where thumbnails come in again.

Web Design Ledger has nice 5 related posts after article each with pretty large fixed size thumbnail.

Smashing Hub also has 5 related posts, but they’re using small squared thumbnails. The cons are that there are large spacings between titles and those thumbnails are really small.

But Graphic Design Blender has a solution for this problem. They have placed titles in fixed space below thumbnails. Though there are less posts, but the spacing is good and it’s very compact.

Featured posts

Featured post thumbnails are even more important, because they will be seen by much more people. Again, if your thumbnails are worked great, they will attract lots of visitors.

Iso 50 doesn’t have a lot of space for featured posts, but those small dishy thumbnails are working great on the right side of posts.

Epicera Studio has got really large thumbnails and they’re using jQuery to rotate them. There is also category and title with direct links on thumbnails. If you have a lot of space in your design, this is one brilliant solution.

Gallery view

Blogs, who are posting a lot often use gallery style post view. Thumbnails are very important then. Since you won’t be able to add long post descriptions, only available information will be title and thumbnail. And, of course, in that miscellany people won’t focus so much to the titles. They will look for a pleasant picture to click on.

Design Aside is publishing a lot of posts, so they have chosen gallery post view. With those large thumbnails it’s very easy to quickly run over the content.

Chonch Style has customized thumbnails to match the designs. Pretty large rectangular thumbnails with title on them makes browsing agreeable.

List thumbnails

When you have a long list with articles or links again, as in related posts, people won’t be willing to read those titles anc click on them. Small thumbnail is a fine way out.

Web Design Ledger has placed two lists with their premium files and recent articles on the left side. Each link has a small 25×25 pixel thumbnail in front of it. You can’t get a good preview of them, but at least it’s something and it’s much better than just boring list of links.

Boompa has added small squared thumbnails showing off their new music. There aren’t many of links, so they can afford the thumbnails to be larger.

Quick tutorial

I’m going to show you how I created 150×150 pixel thumbnail for this article. I’m going to use screenshot above mentioned of PSD Fan.

1. Create a new document like shown below.

2. Take the screenshot and paste it into your document. Then press Ctrl + T and enter settings shown below.

3. Move your photo up a bit using Move Tool. You should have something like this.

4. Go to Filter – Blur – Gaussian Blur and apply 1.5 pixels. Then go to Filter – Blur – Motion Blur and apply 4 pixels with 10° angle. You should have something like this.

5. Grab Rectangle Tool, set it to Fill Pixels mode and fix it’s size to 150×32 pixels. Create a new layer and draw it. Place it somewhere in bottom.

6. Lower the Fill Opacity to 35% and apply 1 pixel black stroke with 40% Opacity.

7. Add your text. I used

• Myriad Pro
• Regular, 18 pt, Sharp, White, 0 Tracking
• Drop shadow, 30% Opacity, 0 px Distance, 0% Spread, 1 px Size

Then I duplicated layer, rasterized it and painted it black. I placed it under original and moved 1 px down. That will give you little depth effect.

8. Select soft brush (I used 50 px large) and brush around brinks. Then go to Filter – Blur – Box Blur and apply 20 pixels. In this case I lowered the Opacity to 45%.

9. Create a new layer above your screenshot layer. Fill it with 50% grey and set it to Overlay. Use Burn and Dodge tool to darken corners and highlight middle part. After you’re done, apply some Gaussian blur (I used 8 pixels). Lower layers Opacity if you need.

10. For final touches, I added some blurry vivid colors, warm photo filter and black and white Gradient map with low opacity.

Summary

Well, what can I say to you? You’ve seen various layouts, techniques and uses of thumbnails. Now it’s time to improve yours.

Learn Photoshop.

There aren’t specific tutorials for creating thumbnails much, but if you’re blogging about Photoshop, then sometimes it’s really worth checking out some of the tutorials. Learn new techniques and explore facilities. That will relief your work immensely.

Ask advice

If you aren’t sure about your design, ask for a feedback. You will get objective opinion and will be able to do some work on mistakes.

Analyse

You’re probably using Google Analytics or similar service to track your sites stats. So research more and find out how big influence on tour visitors your thumbnails have.

Ways of use

You saw some great ways to use thumbnails. Don’t be afraid to be creative. Think where you could use your thumbnails to benefit the best from them.