国外博客缩略图赏析

Web前端35.8K阅读模式

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

国外博客缩略图赏析-图片1

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.

国外博客缩略图赏析-图片2

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.

国外博客缩略图赏析-图片3

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.

国外博客缩略图赏析-图片4

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.

国外博客缩略图赏析-图片5

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.

国外博客缩略图赏析-图片6

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.

国外博客缩略图赏析-图片7

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.

国外博客缩略图赏析-图片8

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.

国外博客缩略图赏析-图片9

继续阅读下页

 

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.

国外博客缩略图赏析-图片10

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!

国外博客缩略图赏析-图片11

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.

国外博客缩略图赏析-图片12

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.

国外博客缩略图赏析-图片13

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.

国外博客缩略图赏析-图片14

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.

国外博客缩略图赏析-图片15

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.

国外博客缩略图赏析-图片16

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.

国外博客缩略图赏析-图片17

继续阅读下页

?

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  3  访客  2  作者  1
    • iiooo
      iiooo 1

      鸟哥,您好,想请教一个关于timthumb的问题:)
      多谢!
      ——-
      用timthumb做缩略图,六间房的外链是可以显示缩略图的,但是我的子域名的图片就不能能够显示缩略图出来,请问,这有哪些可能呢?

      —–
      用主域名的上传的图片是可以显示缩略图的,就是子域名的不行。

      ——
      子域名的图片时可以打开的,加了timthumb.php?src=后,就不能显示了。

      多谢啊!》。。。。。。。

        • 知更鸟
          知更鸟

          @ iiooo 如果主题不是你作的,先把作者链接恢复再说吧

        • qiker
          qiker 2

          鸟哥你好,真是对不起啊。有很多问题都自己在这里找到解决方法了,就是因为看你的教程太少了。

        匿名

        发表评论

        匿名网友
        :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

        拖动滑块以完成验证