国外博客缩略图赏析

越来越多的Wordpress主题都具备了缩略图功能，而且此类型的主题也很受欢迎，这一功能给你的博客增添了观赏性。一个没个图片只有文字的页面，很难让人读下去。但如何能让缩略图真正吸引访问者，从而有助于鼓励他们继续探索您的网站，除了自身需要具备一定图形图像软件操纵能力外，还需要非常大胆和独特的创意。欣赏一下国外博客上漂亮的缩略图，可能会给你一些启发。

Examples of Post Thumbnails

A very Unique Solution on Tutorial9

Introducing, a true master at making an interesting post thumbnails, Mr David Leggett. In this case a very bold & unique use of the content (icons) to create a memorable thumbnail.

Clean and crisp thumbnail on AppStorm

A very clean lighting effect in the background with a modern font & great colors to catch attention. Notice the 1pixel white drop shadow on the word “interview” - a simple & effective approach.

Keeping your Photographs Relevant (UX Booth)

Another fantastic example from David Leggett. This time he’s not relied on his skill in Photoshop, he’s simply relied on that old favorite the photograph. A good looking, and relevant photo perfects your content perfectly.

Clever use of Screenshots on Obox

This example by Obox shows how placement of the elements on the thumbnail can generate interest. You get a sneak peak at the content with some cleverly placed screenshots with a good background lighting effect and the all important text which looks fantastic and the contrast is perfect.

Picking the Perfect Image, Courtesy of DesignShard

Again, Keeping your image relevant is a must. And in this example another photo, but it has 3 things: simplicity, visual impact and relevance.

OutlawDesign Makes the Thumbnails Part of the Design

Two great examples on Outlaw Design Blog. We see a stunning Photograph on one, and on the other one of the logo’s from inside the post has been chosen for the thumbnail, a great visual impact.

You can also start to see how the blog design benefits from showcasing multiple good looking thumbnails. The post thumbnails really become part of the design in this case.

UxBooth again with Text Over Photographs

Using fantastic looking text on top of some really appealing images can be a real hit. This is a great example of strong typographic elements on top of a crisp & relevant photograph.

WebDesignLedger Improve Exploration

Apart from looking great, a relevant & good looking thumbnail can help visitors navigate through your posts. This is particularly important if you have a lot of posts on your blog or site.

继续阅读下页

WebDesignerDepot Keep it Simple & Effective

If you are lucky enough to be writing about something that includes a lot of great looking content, show off this content. It’s not just a quick solution but a very effective one, and again it would help people who are scanning your content understand what the post includes.

Fubiz Lets the Image do the Talking

Layout can play a big part in the effectiveness of your thumbnails. This example uses quite a large image with a simple line of text. For me these are very useful, especially when the image is very pretty!

Fubiz does more with their Thumbnails

Having such interesting post thumbnails gives you the chance to experiment with alternative ways of navigating content, like this fantastic gallery view on Fubiz.

Build Internet combine Photography & Text

Text on the top of a photo once again, just another example of how this can work so very well. Remember our quality tips too when putting together any graphics.

Good Thumbnail Positioning on PSDTuts

The layout of your thumbnails is important. This style (which I first saw used across the Envato sites) seems to be very popular with bloggers.

WebDesignerWall Uses CSS to Style Thumbnails

A Simple use of a gradient & some nice typography. What I like about Web Designer Wall is that each of their thumbnails has the white edge with a gray border, it gives your images a bit of consistency and having a default style on images can make them fit in with your site a lot better.

Imeem have also styled their Thumbnail Border

Every thumbnail on the imeem website looks like it’s almost a photo sitting on top of the page. There actual photo does not have this effect on it, the frame around the image has been made & just sits behind, this makes your thumbnail look as if it’s it’s part of the frame, but really it’s all separate.

It’s a easy way of styling multiple images and leaves you open to change the style of the border, when you update your web design.

Methods of Making Creative Thumbnails

Summing up your post into one image, and making it look attractive is a big part of catching the interest of readers who are exploring your homepage. It has also become more common to see thumbnails next to blog title on a homepage, rather than just text. Layout of the image is important too, finding the perfect place to put your image is an art in itself. Sometimes a full image is used, sometimes a small thumbnail, anything from a photo to a sketch or full vector illustration, the ability to create so many different things should be your biggest advantage!

You have a fresh canvas with each blog post, you don’t need to keep constancy with your thumbnails & post images, each one can be a new work of art, a chance to express yourself and a chance to back up what you are writing with your creativity.

There are a variety of ways capturing & creating the perfect thumbnail for your post, but it’s important that the image compliments the post, keeps relevant and isn’t too complicated - we’re going to explain a select few examples in further detail now.

Unique & Custom Graphics

Without doubt this would be the most time consuming way of creating good looking thumbnail/introduction images for your post, but as you will see it’s clearly worth the time when you get it right. This process would involve looking at the post as a product, and the post thumbnail as an advert for that product, you need to find creative ways to best showcase that product, using a mix of various design methods.

A closer Look at Tutoria9’s Unique & Bold Style

David Leggett, the fantastic designer behind Tutorial9 has included some important techniques to style his thumbnail, a nicely executed drop shadow, a background lighting effect that helps to build depth, and also some blur is applied on some elements to also build depth and give the image something different visually. David has also kept some basic ideas in mind, such as contrast (light on dark) and he’s included a tag-line.

I think this example is a great use of space, and the fact David has made his image posts such a big feature on his site gives him room to experiment & create something outstanding each time. Have a think about what you can take from this and apply to your next blog thumbnail, remember to keep Quality in mind.

继续阅读下页

?