推荐阅读
photoshop 利用图层样式打造漂亮的金色闪烁情人节字体
1、创建650*450px大小的图层，拖拉出渐变颜色，如下图2、将素材图层拖入去，通过自由变换，拖到合理的位置如下图 4、选择文字，双击图层样式，对斜面和浮雕、内发光、光泽、颜色叠加、渐变叠加、图案叠加和投影进行调整。参数设置如下图
Corel Draw 10入门(三)工具栏
我们不得不承认，工具栏是Corel Draw最重要的部件，因为没有了它，那么你将无法进行任何创作。现在由上至下来看看工具栏每一个工具大概的用处：选择工具（PICK Tool）用来选择对象，可以点选，也可以通过拖动出一个选择框来选择多个对象。提示：对于点选，使用SHIFT＋左击鼠标来选择/去选多个对象； 对于拖动选择框，通常情况下，只有选择框完全包围了目标对象或目标对象群的时候才能完成选择，但是可以通过按住ALT键使得被选择框接触到的对象立刻就被选中。 对于群组（GROUP,以后的章节将会讲到），使用CTRL键＋左击可以点选组中的某个对象 形状工具（Shape Tool)选择编辑对象的部分，从左到右分别是:形状工具(Shape Tool)：选择、编辑曲线(Curves)以及节点(Node),以及调整文本的字、行间距 切刀工具(Knife Tool)：把一个对象按照所画曲线切割开 橡皮擦工具(Eraser Tool)：擦除对象的某些部分 自由变换工具(Freehand Transform Tool)：令人着迷的自由变形，包括旋转，镜像等等 提示：快捷键为F10缩放工具(Zoom Tool)缩放观察（放大镜）和移动视图（手形工具，作用与PHOTOSHOP中的空格键一样）提示：放大(Zoom In)，通过拖一个放大框来实现放大局部图形。快捷键为F2 缩小(Zoom Out)，与放大刚好相反。快捷键为F3 缩放到实际大小(Zoom Actual Size)，缩放到实际打印尺寸大小 缩放到选定对象(Zoom to Selected)，快捷键为SHIFT+F2 缩放到所有对象(Zoom to All Objects)，快捷键为F4 缩放到页面(Zoom to page)，快捷键SHIFT+F4 Corel Draw10提供了另外2种移动视图的方式：1. 用ALT+方向箭头。2. 用视图移动工具，就是在工作区右下角两个滚动条交汇的地方, 按住那个小方块移动鼠标。 曲线工具(Curve Tool)曲线工具可谓是矢量作图软件最基本的创作工具，从左到右分别是：徒手曲线工具(Freehand Tool)：徒手绘制曲线，如果你有压感笔那是再好不过了。 贝塞耳曲线工具(Bezier Tool)：通过调节曲线、节点的位置、方向以及切线来绘制精确光滑的曲线。 艺术笔工具(Artistic Media Tool)：令人赞叹的工具，各种图案、笔触可以根据曲线的变化而改变的工具，线条的粗细支持压感！ 量度工具(Dimension Tool)：量度并自动标示距离、角度的工具。 智能连接工具(Interactive Connecter Tool)：让用户可以非常方便地使用折线来连接对象的工具。 提示：这是一个非常有用且用法很多的工具组，以后会详细讲述。快捷键为F5。矩形和圆形工具(Rectangle Tool, Ellipse Tool)这是任何接触Corel Draw的用户都会用到而且也是最初接触到的工具了。提示：按着Shift键拖动鼠标，所画的图形将会以起始点为中心（缺省是一个角） 按着Ctrl键拖动鼠标，可以画出正方或者正圆。 可以试试把Shift和Ctrl键同时按下来画。 快捷键：矩形为F6，圆形为F7 物体工具(Object)这个工具的命名有些奇怪，但似乎也找不到其他一些能概括以下三样工具的一个总称：多边形工具(Polygon Tool)：创建3边形、4边形、5边形……当然你也可以试试120边形，不过它跟圆形几乎没两样。还可以画出3角星，四角星，5角星…… 螺旋线工具(Spiral Tool)：你会发现做螺旋线还是用矢量工具好 栅格工具(Graph Paper Tool)：快速建立n×m单元格的工具 提示：同上基本图形工具(Basic Shapes)这是Corel Draw 10新增的一个工具，对于那些不常用Corel Draw的用户或者只打算用Corel Draw来进行流程图、办公室文档建立的用户来说，这是再好不过的东西了。无需复杂的曲线编辑，即可快速获得各种形状的：基本图形 箭头图形 流程图框 星形 对话框 提示：拖动红色的节点，你会发现制作形态各异的基本图形是多么的简单！文字工具(Text Tool)不知道Corel公司原本是什么意图，但是从Corel Draw 9开始，文本工具的图标从“A”变成了“字”，这挺让人感到高兴的。提示：点击文字工具之后点击工作区，然后进行输入，这时生成的是美术字 点击文字工具之后用鼠标在工作区内画文本框，这时生成的是段落文 快捷键为F8 交互工具(Interactive Tool)这是Corel Draw最强有力功能组！通过一系列的交互工具，可以创建出令人惊叹的矢量效果，我敢说如果没有这组工具（这当然是不可能的啦），Corel Draw绝对没有今天的成功。它们分别是：交互混合(Interactive Blend Tool)：产生两个或多个对象之间的形状、颜色渐变，还可以沿路径渐变 交互等高线(Interactive Contour Tool)：可以向内或向外制造出对象的等高线，籍由这个工具可以做出发光或羽化等效果 交互扭曲(Interactive Distortion Tool)：非常COOL的扭曲工具，包括了推压扭曲，锯齿扭曲和旋转扭曲 交互包络(Interactive Envelope Tool)：将对象封装包络在一个框子里面，籍由对框子的变形实现内容对象的整体变形 交互拉伸(Interactive Extrude Tool)：我更喜欢将它称为3D拉伸工具，有了它，无需借助任何外挂滤镜就能模拟三维物体 交互阴影(Interactive DropShadow Tool)：产生高精度立体投影的工具，它是模拟三维投影的 交互透明(Interactive Transparency Tool)：让矢量物体能像PhotoShop里面的层一样实现各种类型的透明和叠加(虽然叠加类型的名称有所不同)，Corel Draw 10里新增了轮廓线透明。 提示：关于这组工具的详细用法会在以后的章节里面讲述滴管/油漆桶工具(Eyedrop Tool, PaintBucket Tool) 这对工具能使用户非常容易地获得对象，甚至是导入的位图中的颜色，然后再应用到其他对象中。提示：请注意区分油漆桶工具和填充工具(Fill Tool）的区别。区别在于油漆桶所填充的颜色是直接从滴管工具中获得的，而填充工具所填充的颜色是从调色板或者颜色泊坞窗里面获得的。轮廓线工具(Outline Tool) 修改对象轮廓线的宽度、式样和颜色，这是一个传统的工具，但是由于它不是一个创造工具而是一个属性修改工具，所以它正在慢慢与一些调整属性的DOCKER融合，也许在以后版本的Corel Draw中将不会见到它了（只是个人猜测而已）。轮廓笔对话框(Outline Pen Dialog)：请注意它的名称，它是一个属性对话框而不是一个工具，这也是我刚才下的猜测的根据之一。它的作用是调整轮廓的粗细、颜色、样式。 轮廓颜色对话框(Outline Color Dialog)：快速进入轮廓笔颜色对话框的方法，我认为它应该很快会被颜色泊坞窗所取代，下面将说明。 无轮廓线(No Outline)：它的作用跟在调色板里面选择无颜色是一样的 发丝细轮廓线(HairLine Outline)：这是一个概念性的而不是一个实际的宽度，跟数学中的“无限小”是一个意思。 接下来6个是预设的宽度，分别是1/2、1、2、8、16、24点宽 颜色泊坞窗(Color Docker Window)：打开颜色泊坞窗，可以通过颜色滑棒(Slider)、查看器(Viewer)和色板(Palettes)来实时调整对象的轮廓颜色。 提示：快捷键：轮廓笔对话框为F12，轮廓色对话框为SHIFT+F12填充工具(Fill Tool)修改对象填充的工具，基于同上理由，我认为它将会被取代。填充颜色对话框(Fill Color Dialog)：就是改变填充颜色，应该也会被颜色泊坞窗所取代。 渐变填充对话框(Fountain Fill Dialog)：这本来是产生美丽的矢量渐变色的唯一工具，但是自从交互填充(Interactive Fill，等会儿会说明)出现后，它几乎就被废弃了。 图案填充对话框(Pattern Fill Dialog)：用软件提供或者自己定义的位图图案进行平铺填充的工具。 纹理填充对话框(Texture Fill Dialog)：CorelDraw另一大特色。虽然填充内容是点阵的，但却是由数学模型得出，也就是说无论你的图形多大，使用纹理填充将会得到一样的效果。 PS纹理填充对话框(PostScript Texture Fill Dialog)：与图案填充相似，不过填充的图案是矢量而非位图。 无填充(No Fill)：它的作用跟在调色板里面选择无颜色是一样的 同轮廓线工具中的颜色泊坞窗 提示：快捷键：渐变填充对话框为F11，填充颜色对话框为SHIFT+F11交互填充工具(Interactive Fill Tool)我不是很清楚为何要把交互填充跟其他交互工具分开而跟网格填充(MESH FILL)放在一起，也许填充实在太重要了。交互填充工具(Interactive Fill Tool)：通过这个工具，可以实现上面填充工具所有功能而且是通过鼠标操作的交互方法！多好的工具！ 网格填充工具(Interactive Mesh Fill Tool)：这也是一个激动人心的工具，自Corel Draw 9以来它就成了对抗Adobe Illustrator的有力武器。虽然现在不得不承认Corel Draw的Mesh Fill效果还比不上Illustrator的柔和，但是已经非常出众。它的作用是在对象上附着一个可以自由调控的网格，对网格中的每个节点都可以进行上色，各个节点之间的颜色是柔和渐变的！ 通过以上的说明，大家应该可以了解到工具栏的重要性了吧，而它内里隐藏的强大力量在往后的讲解、实践中会慢慢显露出来。
最新发布
2012年排名前20位的CSS网站作品欣赏
2012年涌现出众多独特的，令人印象深刻的 CSS 网站作品，要从中挑选出年度应用 CSS 的最佳网站列表一个严峻的挑战，因为 CSS 涵盖了媒体查询（CSS3 Media Queries）、CSS 动画和3D转换等众多特性。我根据过去 CSS 典型的应用场景挑选了其中的优秀作品组成一个列表，如果你有收藏更好的作品，欢迎留言向大家分享。1. Beercamp这个啤酒节的活动网站充分应用了 3D CSS Transform 技术，充满立体感的旋转和折叠效果。2. SpelltowerSpelltower 不仅是一个令人上瘾的游戏，它也有一个网站，充满乐趣和个性。使用的俏皮动画和过渡效果，让你想抓住一个 iPhone 并启动游戏。3. Envy LabsEnvy Labs 的其中一个标语是“我们创造的乐趣”。采用CSS3 Transform 和 Transition 呈现一个很有趣的旋转木马！
css3中的@font-face制作图标字体icofont
icofont为何物？图标字体也。图标和字体怎能混为一谈呢？icofont就是用font-family来实现icon，主要用到了css3中的@font-face。实现我们来熟悉一下@font-face这个属性。@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }浏览器兼容问题上不用太担心，‘@font-face’规则首先定义在 CSS2 规范中，但是在 CSS2.1 中被删除，目前又被纳入到 CSS3 推荐草案中，所以不用担心IE系列，从IE4开始就支持这一属性了，并且现在一些主流的浏览器（Chrome 1+/Firefox 3.5+/Safari 3.1+/iOS 3.1+/Opera 10+）也都支持。说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，因为不同的浏览器对字体格式支持是不一致的，这样大家有必要了解一下，各种版本的浏览器支持什么样的字体。.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】 这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。 举个栗子：
网页设计中关于透明元素的使用心得
每隔一段时间我都要在网页设计的各个方面做一个研究探讨，以提升网页设计水平。互相学习交流!网页设计中使用透明元素，即美观又棘手。为什么这么说呢，当你某个模块的透明度没有把握恰当时，可能难免造成体验失调，字体信息不清晰，信息捕获不明确，主次不分明，色调失调。所以一个透明度却能造成这么多严重后果?当然，细节成就美，但是我们只要主题运用细节，相信能发挥透明元素的作用，让你的网页更加栩栩如生。由于国外网站原创性比较高，下面我将采用国外的一些案例来做一些研究探讨。(当然不是说国内网页不好哦，但是国内和国外还是有一定差距的，我们是不断学习，不断借鉴，不断创新的，国外的设计师，可能时时都会比我们快一步，我们怎样比国外设计师快?这个，我将在以后进行对自己的一个分析，来进行一个探索。)1.内容模块和网站框架的对比运用透明图层，不透明度在80%左右，让字体清晰可见，避免挫伤用户体验。下面的例子是创建对比度，区分内容模块的运用大家常见的灯箱效果，就是一个透明度和背景造成对比的运用，让用户很容易区分。2.半透明导航的跟踪运用新浪微博，腾讯微博等等，都在顶部导航上做了半透明的处理，用于固定浮动来跟踪用户页面的浏览，方便用户操作主导航。这样的运用很常见
解析网站404网页设计那些不得不说的事
前阵子做我们一淘优惠商家统一的报错页面， 整理了一些有意思的404页面(后简称404)，加之最近网友热议的QQ空间公益404页面，在这里一起拿出来跟大家分享一下。阅读全文什么是404页面?404是HTTP其中一种的标准回应信息，通俗的说，当用户浏览网页时，服务器无法正常提供信息，例如用户输入了错误链接;或者无法相应并且找不到原因，这时候页面会出现这个404页面。404是一个信息码，通常之后会有一个可读信息反馈给用户：Not Found。它意味着网页不存在。为什么叫404?据说在第三次科技革命之前，互联网的形态就是一个大型的中央数据库，这个数据库就设置在404房间里面。那时候所有的请求都是有人工手动完成的，如果在数据库中没有找到请求者所需要的文件，或者由于请求者写错了文件编号，用户就会得到一个返回信息：room 404 : file not found。后来互联网兴起后，人们也就习惯了用404作为服务器未找到文件的错误代码了。(via 百度百科)为什么要设计404页面?尽管404页面被用户看到的概率相对全站的其他页面要小很多，但页面难免会出错，无论是用户的误操作还是服务器的原因，这是一个极少数才会出现的错误情况，作为网页的设计者或者开发者，有时候我们无法控制错误页面的出现，但我们可以通过使用一个定制的404错误页面将损害降到最低。好的用户体验是我们不能放过任何一个小的细节，一我们需要在这个页面很好的把信息传达给用户，二引导用户下一步的操作，引导用户留在我们的网站而不是沮丧的关闭窗口。他们都在404上做了什么?下面我们先来看几个直观形象版的404页面：
详细解析UI设计中搜索栏设计的技巧教程
在一个内容型的APP中，搜索功能可以说是标配。它是巨大的流量入口，同时又承载着产品运营的能力。碰巧最近在做JOOX搜索页面的优化，借机整理了一下关于搜索设计的几个要点。根据用户的实际使用行为，我们可以把搜索这个操作按照用户行为路径节点分为发现 – 进入 – 使用 – 得到4个部分。发现搜索入口进入搜索界面使用搜索功能得到搜索结果发现入口搜索框的入口一般有几种：一级tab、搜索框、搜索icon、隐藏式搜索框。不论何种样式，遵循的最基本的原则都是两个点：快速发现和容易识别。
怎样在网页中应用手绘风格，以改善网站的用户体验
本文中，我们将讨论怎样在网页中应用手绘风格，以改善网站的用户体验。识别度与真实感手绘风格非常有利于展示人性色彩，形成独特的识别度，为用户带来真实感。当你收到好友寄来的明信片时，你总是希望看到卡片是手写的，带着好友独特的笔迹，而不是用电脑打印出来的。一张手写的便笺也总是比电脑打出来的纸片更加随意和亲近。在网页设计中，道理也是一样的：手绘和手写风格的应用可以让产品显得更加独特、更加真实、更加值得信赖。下面是手绘风格带来识别度和真实感的三个例证：独特的外观和感受首先，手绘风格带来独特的外观和感受。著名的原型图和线框图工具 Balsamiq 是典型代表。Balsamiq 的功能强大而复杂，其外观和感受却是非常简单明了，手绘风格的应用使用户回忆起基本的纸笔勾画，让用户专注于基本的功能呈现，而不是纠结于产品外观上的细节。同时，这样的外观也形成了 Balsamiq 本身独特的风格。识别度与个性化手绘风格带来更高的识别度，让用户记住你的产品。例如 Windows 上著名的代码编辑器 Notepad++ 的新 logo：
z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.这个星期我们团队做了一次内部的技术分享, 南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.本文谈及多个影响节点显示层级的规则, 其中用到的所有例子全部罗列在《position 属性和 z-index 属性对页面节点层级影响的例子》中.如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. <div id="a">A</div><div id="b">B</div> 如果将 position 设为 static, 位于文档流后面的节点依然会遮盖前面的节点浮动, 所以position:static不会影响节点的遮盖关系. <div id="a" style="position:static;">A</div><div id="b">B</div> 如果将 position 设为 relative (相对定位), absolute (绝对定位) 或者 fixed (固定定位), 这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点, 说明前者比后者的默认层级高. <div id="a" style="position:relative;">A</div><div id="b">B</div> 在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A' 会覆盖 B.
详细解析UI设计师如何设计最常见的关闭按钮
读完这篇文章你将会了解到：关闭按钮「x」的设计历史「x」设计的注意事项关闭按钮设计的最佳案例「x」图标在应用中是一个非常常见的交互暗示，可以将烦人的弹窗从内容上进行关闭。无论是模态，对话框还是弹出窗口，都是内容交互中必要的操作元素，我们只需要建立合理的退出方式就好。视觉设计在ux通用设计模式中「退出」(e-x-iting)是非常简单的，你们看到我在 exiting 这个单词中刻意突出了「x」。「x」这个符号的历史可以追溯到20世纪70年代的计算机设计语言，它第一次出现可能是在 Atari TOS(译者注：Atari TOS是雅达利电脑操作系统，在1993年就停产了)菜单中，「x」是退出的命令。它后来被「NeXT」所使用，它为 Windows 的设计带来了灵感，并在1995年随着 Windows 全球大规模的使用而成为关闭的标准符号。讲这段历史，目的是为了说明，没有必要重新造轮子，使用全世界每个人都能懂的符号更为合适。
浅谈网页设计怎样才算一个好重构
用这个标题，是因为前一段时间组里有一个开放式讨论：怎样才算一个好重构?其实，"好"与"坏"向来都是相对的，因为每个人眼中看待"好"与"坏"的标准不一样，不如从自身的角度考虑一下：如何做一个好重构?先来看一个平时我们遇到的最多的两栏布局：基本的html代码：来看具体的CSS代码实现(忽略margin)：很明显在保持同样html结构的情况下，实现两栏布局可以有多种CSS方案实现(左栏定宽)，主要方向是用浮动或不用浮动，右栏定宽或者不定宽：Qzone、朋友网、Facebook都给左栏浮动，唯一不同的是右栏的写法，Qzone给右栏定宽并且浮动，而朋友网和Facebook则并没有给右栏定宽也未浮动，而是利用了创建BFC并且为低版本IE触发hasLayout的原理让右栏自适应宽度。
