推荐阅读
Photoshop调出古典唯美效果图的外景婚片调色
案列对比图：左为原片，右为效果图1、[注：一直不厌其烦的讲复制背景层，不要在背景层上修改]。复制背景层，生成新的背景层，而后复制背景层生成图层1，修改混合模式为滤色，操作目的：提亮。2、创建“色相/饱和度”调整层，设置参数如下：3、创建“渐变映射”调整层，操作布草如下：
插画艺术网
本实例以造型优美的、抽象的花朵形象和渐变的、绚丽的花朵色彩，来表现插花艺术网页页面的设计主题。该设计效果强烈，点、线、面、色彩和图形的组合运用是构成网页的装饰要素。紫红色的运用为画面增添了浪漫气息。如图11-40所示，为本实例的完成效果。图11-40 本实例完成效果在本实例中所设计的内容与主题相符，体现插花这门艺术的优美与浪漫。协调的处理色彩与其他设计要素之间的相互关系，增强网页的信息和情感传递效果，使人们在浏览的时候产生共鸣。在制作过程中主要采用绘制路径、描边路径来绘制图像，使用“画笔”工具来修饰图像的颜色，更改图像的混合模式使两幅图像叠加起来，能得到更加丰富的图像效果。如图11-41所示，为本实例的制作流程。图11-41 本实例制作流程（1）启动Photoshop，执行“文件”→“新建”命令，参照图11-42所示对打开的“新建”对话框进行设置，创建一个名为“插画艺术网”的新文档。图11-42 设置“新建”对话框（2）单击“图层”调板底部的“创建新图层”按钮，新建“图层 1”，然后使用工具箱中的“矩形选框”工具，参照图11-43所示在视图中绘制一个矩形选区。
CSS兼容IE6,IE7,FIREFOX的一些收集
第一种，是CSS HACK的方法height:20px; /*For Firefox*/*height:25px; /*For IE7 & IE6*/_height:20px; /*For IE6*/注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */第二种是使用IE专用的条件注释<!--其他浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及一下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->第三种css filter的办法，以下为经典从国外网站翻译过来的。.新建一个css样式如下：#item { width: 200px; height: 200px; background: red;} 新建一个div,并使用前面定义的css的样式：
最新发布
8个在网页设计中即将被淘汰的趋势
时代一直在变，一个又一个的创新让我们感到惊讶万分。网页设计的趋势如同流星，光芒耀眼，但来得快、去得也快。虽然跟风很不好，显得毫无设计主见，但很多设计潮流确实值得追随。就像当下响应式设计、扁平化设计、以及滚动视差等。可是呢，还有很多极为”糟粕”的设计趋势，本文一一列举，请君对号入座。1. 除了电话线时代的老顽固，现在已经没人喜欢页面跳转了“下一页”、”下一张”，明明一页就能展现的内容，非要跳转20多次才能看全，你把用户当*?操作繁琐、浪费时间、效率低下，没人喜欢页面跳转过于频繁的网页。2. 十面埋伏的广告确实有很多网站的维持依赖广告收入，但是广告的位置一定要合理，不要妨碍用户浏览信息，用户体验永远位于广告之上。没有用户访问量，也就没人找你打广告。3. 弹出窗口滚出网页设计界
8个智能手机移动应用的设计趋势
如果说智能手机和智能设备现在被认为是个人和办公方面的科技标准，那么这种描述就过于简单了。几乎没有人能否认一个事实，就是每个人都需要这种智能 技术。尽管每个人拥有智能手机或其他智能设备的理由不尽相同，但它是必须的。无论从个人或者商务的角度看，智能科技已经成为我们生活的一部分。现在，智能科技无处不在，开发商不得不为智能手机用户设计出更加方便的移动应用程序。我可以肯定的说，2013年将会出现最新潮最特别的移动应用程序。实际上，总有 一款移动应用达到某种用途，并适合于每个人。你会在新入手的iPads里发现令孩子们激动的游戏，还有一些程序则可以促进人们之间的交流。移动应用不再是 消磨时间的手段，它们总会在某种程度上令使用者受益。由于移动应用程序的需求量增加，移动应用变得更加美观，更加多功能，更加促进人们之间的交流。 2013年仍然有漫长的路要走，我可以说这几个移动应用的趋势实际上变得非常明显，引领着其他移动应用程序的脚步。接下来我们就来看看最新潮的移动应用吧。智 能技术的新起使得传统的台式机已经落伍了。现在，人们都使用智能手机上网，所以你的app必须有这个功能。由于有各种各样的设备，开发者要确保程序可以通 过不同的设备访问。显然，没有人会愿意为每一个移动设备单独创建一个应用程序的。得益于HTML5增强功能，你不再需要为某个设备单独设计一款应用程序。 使用html5将会是一种趋势，因为它允许开发者基于不同设备确能够使用相同的代码库。下面我们将提到Jo，一种简单的html5应用程序框架。Jo HTML5框架：HTML5应用程序搭载于一个单独的页面，Jo可以帮助你创建类似本地应用程序体验。当然，需要一些DOM处理，不过你不必担心它。通过JavaScript编程，做一些CSS调整，就这样结束一天的工作吧。移动电子商务是电子商务的延伸。我相信在2013年，很多电子商务相关的移动应用程序将保持流行。原因是现在有很多人喜欢网上购物的过程，他们通常使用移动设备浏览网页，所以移动应用程序在消费者当中非常热门。iPad eCommerce App
精选国外优化网站图片速度的网页推荐
页面的加载时间是每一个设计师都担心的数据，或者至少是每个设计师都应该担心的问题。图片的大小肯定是一个需要留意的问题。这就是为什么在这里写了几个有助于优化页面中的图片的小技巧，这些小技巧将有助于大家解决这个问题，这些小技巧也可以在你需要优化图片的时候提供很多帮助。TinyPNGTinyPNG是使用智能有损压缩技术，来减小png图片的大小。Smush.itSmush.it使用的是从图片中消除不必要的字节来减小图像大小。OptiPNGOptiPNG是一个对png图片优化非常好的工具，可以在不损失图像信息的前提下把png图片压缩到更小的大小。ImageOptimImageOptim可以使图片占用的磁盘空间更少加载的更快。他们使用的是找到最好的压缩参数并且消除不必要的字节（包括注释及颜色配置文件）。它可以处理PNG，JPEG和GIF动画。CodeKitCodeKit帮助你建立更快，更好的网站。
浅谈如何尝试网页设计中不对称的美
随着审美的不断提高，越来越多的设计具有一种不对称的美感。越来越多的设计师将视觉重点放置到偏离视觉*的位置，通过不对称性来吸引用户注意，打造一种特殊的视觉路径。过于对称的设计，无法更自然高效的组织侧边栏、导航条等界面元素，对称设计提供的空间也往往有限。而非对称性具有一种视觉上的张力，将某种特殊的感觉转化为用户的兴趣。尽管非对称设计在布局调整上稍有难度，而且也会造成一种不平衡的感觉。然而用非对称性设计取代对称性设计，利大于弊，提供了更多的”可能”。这也是网页设计师的进阶之路，成为高手都会尝试的风格，不妨现在我们就来先了解一下吧。下面，我们收集了一些很有说服力的不对称性设计网站，相比对称性设计，这些网站具有更好的信息传达、更个性化的特点。不对称性网页设计案例The Enterprise锯齿感极强的线条以及不对称的形状，配以华丽的色彩，这种不对称设计的视觉冲击力绝对要比对称性设计大。Sjobygda设计师很有技巧的运用了背景图像，采用了不对称设计，让背景的功能性变得更强，呈递给用户壮观的视觉内容。
详解Web图像的常见应用策略与技巧
本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。特点：应用简单，上手容易，性能表现良好难点：lazyload实现根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：1.1 固定尺寸图像基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。在dom里图像与在css里的图像写法如下面的例子<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w" sizes=" (max-width: 360px) 100vw, (max-width: 768px) 90vw, (max-width: 1980px) 80vw, 768px" src="360.jpg" src="http://www.missyuan.net/uploads/allimg/170502/1409454491-0.png" "393""293" />在iphone4（320）下，图像宽度和我们设置的100vw一致，但是为什么浏览器选择了768的图像而没有选择360的?因为4的dpr是2呀^_^，浏览器很智能的选择了质量最合适的768.再看一下6p（414），很听话的按照我们的设置，显示了90vw。因为他的dpr更高，浏览器聪明的选择了1200质量的图像。这里我们可以欺骗一下浏览器：
精选国外CSS3编写的面包屑导航收集
随着Web技术越来越先进，浏览器更新换代也很快，在国内很多网站已经有使用css3和html5的技术了，所以我们也应该多学习这些新知识，设计达人网站整理的资料，你在学校、图书上也是未必看到的。今天我们整理了10个纯CSS3制作的面包屑导航，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以研究学习一下。
浅谈统一原则在网页设计当中的运用
形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括，世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则：统一和变化，对称和平衡，节奏和韵律，对比和调和。前面跟大家有分享了对比、留白在网页当中的运用，今天我们继续来分享网页当中那么多元素是如何做到统一一致的。在视觉上的统一可以体现在：图片，色彩;区块;布局;字体，视觉元素。此外，还有一个交互上的统一。1、图片统一图片统一体现在图片大小尺寸上的统一，颜色色系上的统一和图片风格的统一。不管是京东还是天猫淘宝，这些商城在网站上的图片处理就用了这样的统一原则。不一样的场景下对图片的要求也都不一样。比如京东商城的首页，每一个区块起到一定的导航性作用，在这样的场景下，需要的图片都是比较简洁而不是背景复杂的。下面我做了一个错误的示例给大家演示：左图是官网的图片，右图是一个错误示范。显而易见，左图的展示性和可读性都比较强，视觉效果也比较好。右图之所以觉得不好看是因为图片大小不一致，图片的背景颜色也不一致，所以看起来特别不协调。好了，现在应该有人会想问，那京东或是天猫淘宝通过搜索后进去的页面里面的产品配图不是五颜六色的吗，那怎么看起来也没有觉得不协调。这些界面的统一一致性体现在产品区块的大小尺寸上和整体的样式上，除了产品图不一样，其他的布局样式、区块大小都是一样的，这恰恰跟首页相反，首页各个区块大小不一致，所以采用图片一致来协同，内页则是区块样式一致，图片不一致。但不管哪一种协调方法，界面都起到了很好的协调性。
全球10大高端建站神器经典推荐
这不是天方夜谭!你不需要知道HTML、CSS、PHP和其余晦涩难懂的语言。这些工具就像一个图像编辑器，只需绘制矩形、填充颜色。我知道这很难相信，但他们就是存在!而且全球备受赞誉。1、IM Creator听我说，我们的IM Creator易用性和多功能性超越了很多客户的预期。只需要你把控住超级菜单，根据您的需要做相应的拖放和功能选择。它们包括视频、图片、画廊和幻灯片、按钮、超链接、甚至一个HTML小部件。最酷的地方在与你不需要创建繁琐的帐户，你可以轻松上路。唠叨了半天，我差点没有提到最好的部分：以上所有服务都是完全免费的!2、WebStartToday.com如果你是一个细节癖，喜欢抠各种设计细节，那么你完全应该来看看WebStartToday!这里提供了超过1000个不同的网页模板来匹配你的需求!甚至那些很少见的模版：旅行、夜生活、豪华轿车服务、锁匠、美食、琳琅满目数之不尽!当然这并不意味着我们的模版就是千篇一律，随处可见的!在这里的模版，可以保证是独此一家的，如果你在其他地方发现了，那一定是他们借了我们的宝贝，偷偷的!3、Kopage
20个超精细网页圆形旋钮PSD素材下载
旋钮分布于生活的各个角落，在人机界面中非常常见，也正因为此，旋钮也成为了设计师非常乐于表达的对象。今天为大家带来20个超精细旋钮的PSD文件，需要的童鞋速速下载吧。1. 圆形菜单旋钮2. 黑色音量控制旋钮3. 蓝色发光旋钮4. 金属旋钮5. 黑色扁平旋钮
浅谈网页设计动作按钮可没你想的那么简单
动作按钮?不就是一个按钮加两文字么?这有什么好说的·····如果你还这么认为，那就大错特错了。一个小小按钮，看似简单，里面却有大大的学问。下面是我总结的一点见解，希望抛砖引玉，给大家一点启示。按钮分为两个部分：按钮文字 按钮形状先说说按钮文字的设计：1 用文字创造出一种紧迫感这主要适用在购物网站，使用一种紧迫感的词语更可能让用户采取行动。在按钮上加”现在”"立即” “马上”等文字，能大大提升按钮的转化率。这些文字能给用户暗示和感知，如果继续等待，很有可能错过这次大好的机会。不信?可以试一试。