<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>刘钢的博客 - 我是UED &#187; 图片</title>
	<atom:link href="http://www.iamued.com/tag/%e5%9b%be%e7%89%87/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 18 Jan 2012 02:51:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>漂亮的图片区域设计</title>
		<link>http://www.iamued.com/design/1185.html</link>
		<comments>http://www.iamued.com/design/1185.html#comments</comments>
		<pubDate>Sun, 24 Jan 2010 08:58:36 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[视觉设计]]></category>
		<category><![CDATA[图片]]></category>
		<category><![CDATA[设计]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=1185</guid>
		<description><![CDATA[【译者的话】很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。 由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。 Factor Design网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。 这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。 版面结构： 书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。 点击上图看大图 颜色： 在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。 点击上图看大图 文字颜色对比： 不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。 图片区域： 放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始： 充满表现力的变化： 在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。 本文所用颜色数值（RGB）： 原文出处：www.bamagazine.com 转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html]]></description>
			<content:encoded><![CDATA[<blockquote>
<p align="left"><span><span><span><span><span>【译者的话】</span></span></span></span>很 多网页都有一个醒目的大横幅区域，但设计上大都千篇一律，如果你访问FACTOR  DESIGN网站，你会发现，该区域的变化比你想象中要丰富得多——并不是通过特效，而是通过版面设计，他们对横幅的间隔设计让你在任何平面设计中都能获 得灵感。</span></p>
</blockquote>
<p align="left"><strong>由图片构成的区域显得结构清晰、重点突出及信息有效传达，并且具有多种意 想不到的功能。</strong></p>
<p align="left"><a href="http://www.factordesign.com/" target="_blank">Factor  Design</a>网站令人一见难忘，其版面结合了作品展示及手册设计的特点形成漂亮的效果。白色的 开阔区域，高度简洁及最小化的构成，柔和的颜色搭配，通过一些隐藏的表格整洁清晰地呈现出来。</p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165836GiQ.jpg" alt="" width="451" height="452" /></p>
<p align="left">这个版式结构我们有两点是特别欣赏的：一是它采用了印刷类的平面设计风格，使用衬线字体， 文字颜色对比低调柔和，不同文字栏宽度形成强烈对比。二是上面的水平图片区域设计，使整个版面显得优雅漂亮。这个图片区域只看上一眼，你可能不能一下子认 识它的所有优点，但我们之所以深入讨论这个区域是因为如果从技术上来说，你采用了同样这种方法，就可以得到同样漂亮的相似效果——无论是网站设计还是其它 平面设计。看一下我们能够从这个网站设计中学到什么。<br />
<span id="more-1185"></span></p>
<p align="left"><strong>版面结构： </strong></p>
<p align="left">书本状的页面版式结合了印刷及网站设计的风格，只使用一种衬线字体，而文字尺寸只有两种。</p>
<p align="center"><a href="http://www.logosky.net/image12/3_panels_banner/02_big.jpg" target="_blank" rel="lightbox[1185]"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165852lPo.jpg" border="0" alt="" width="510" height="281" /></a></p>
<p align="center">点击上图看大图</p>
<p align="left"><strong>颜色： </strong></p>
<p align="left">在开阔的白色背景上，两种文字颜色已经可以传达出一种清新及悦目的效果。</p>
<p align="center"><a href="http://www.logosky.net/image12/3_panels_banner/03_big.jpg" target="_blank" rel="lightbox[1185]"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165906aW3.jpg" border="0" alt="" width="510" height="287" /></a></p>
<p align="center">点击上图看大图</p>
<p align="left"><strong>文字颜色对比： </strong></p>
<p align="left">不同的背景颜色有不同的栏目文字名称颜色，但文字与背景的颜色却保持了低对比度的关系。</p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165922Niv.jpg" alt="" width="510" height="456" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165949I6m.jpg" alt="" width="386" height="647" /></p>
<p align="left"><strong>图片区域： </strong></p>
<p align="left">放置图片的横幅区域的大小及位置是固定的，但里面却可以有千变万化。设计从最基本的空间分 割开始：</p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165950cxi.jpg" alt="" width="510" height="264" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/165955KV0.jpg" alt="" width="510" height="563" /></p>
<p align="left"><strong>充满表现力的变化： </strong></p>
<p align="left">在下面，我们将会看到图片通过结合、搭配、剪切及组织可以有非常丰富的变化，而让人印象深 刻的是这些效果都只是在这个简单的横幅中实现。</p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170000zVV.jpg" alt="" width="510" height="506" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170006PLg.jpg" alt="" width="510" height="253" /></p>
<p align="center">
<img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170016jbu.jpg" alt="" width="510" height="507" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170021xqm.jpg" alt="" width="510" height="323" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170021MQx.jpg" alt="" width="510" height="516" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170021w3O.jpg" alt="" width="510" height="585" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170027rOg.jpg" alt="" width="510" height="278" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170032GUU.jpg" alt="" width="510" height="242" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170057YMi.jpg" alt="" width="510" height="508" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170057ULK.jpg" alt="" width="510" height="584" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170058C23.jpg" alt="" width="510" height="509" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170103mSr.jpg" alt="" width="510" height="547" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170104QyN.jpg" alt="" width="510" height="505" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/1701050QN.jpg" alt="" width="510" height="350" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170105rK4.jpg" alt="" width="510" height="508" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170114BPh.jpg" alt="" width="537" height="515" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/1701204ld.jpg" alt="" width="510" height="506" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/1701251Oa.jpg" alt="" width="510" height="571" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170131n6t.jpg" alt="" width="510" height="502" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170136ffC.jpg" alt="" width="510" height="482" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170147UMY.jpg" alt="" width="510" height="400" /></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170147IB8.jpg" alt="" width="510" height="389" /></p>
<p align="left"><strong>本文所用颜色数值（RGB）：</strong></p>
<p align="center"><img src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2010/01/170148pfU.jpg" alt="" width="394" height="322" /></p>
<p><span><br />
</span></p>
<p align="left">
原文出处：<a href="http://www.bamagazine.com/" target="_blank">www.bamagazine.com</a></p>
<p align="left"><a href="http://www.logosky.net/webpage/artreview/3_panels_banner.html">转自：http://www.logosky.net/webpage/artreview/3_panels_banner.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/design/1185.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

