国外博客缩略图赏析

知更鸟
知更鸟
知更鸟
1528
文章
6915
评论
2010年3月5日17:23:04 3 5.6K

越来越多的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.

国外博客缩略图赏析

继续阅读下页

?

weinxin
关于本站
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在构建网站时,使用 CSS 框架是一个实时的节省,因为它为您提供了每个网页设计师和前端开发人员在制作网站时需要的工具。 CSS 框架是一个软件框架,它允许使用 HTML/CSS 进行更简单、更符合标准...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

设计响应式网页,PC端和移动端的样式兼容性,很让人挠头,最常见的就是文字垂直不居中,而且苹果手机和安卓手机下表现也不尽相同,往往苹果手机是垂直居中的,但在安卓机上字却靠上了,总是差那么一像素,应该是安...
jQuery幻灯片插件:OWL Carousel Web前端

jQuery幻灯片插件:OWL Carousel

Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有以下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式...
js实时获取浏览器窗口大小 Web前端

js实时获取浏览器窗口大小

js实时获取浏览器窗口大小,我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件,例如window...
匿名

发表评论

匿名网友 填写信息

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

评论:3   其中:访客  2   博主  1
    • iiooo iiooo 1

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

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

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

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

        • 知更鸟 知更鸟

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

        • qiker qiker 2

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