推荐阅读
Photoshop合成末日城市街道中行走的吸血女图片PS合成教程
本教程主要使用photoshop合成末日城市下打伞的吸血女教程，主要是使用PS把各种素材合成到一起，主要是后期颜色的搭配非常的炫酷，喜欢的朋友一起来学习吧。先看看效果图下面是教程构图,绘制草图,将大致的想法画下来,画的自己能看懂就成,然后根据操作进行搜集合成所需素材。人物素材是我本来素材库的素材，草图也是看到这张人物素材之后才有的想法，其它素材大部分都是网上找的，这些素材是经过筛选之后的。制作背景新建一个大小合适的文档，置入需要背景素材，置入街道素材，使用蒙版擦拭，使需要跟街道无痕融合。再置入天空素材，替换掉原本的城市蓝色天空；使用CS6以上版本的颜色查找，找出一个颜色。使用调色工具调整，调出适合的色调。
Maya 4.0 多边形建模-多边形的基础知识
在 Maya 中，针对多边形模型，系统提供了平面、边和顶点级别、编辑和设置纹理的多种工具。这些工具将在本章中进行详细的介绍。但是首先需要对多边形有一个较为全面的认识和了解，主要是它的构成元素及各元素的功能。通常情况下，多边形包括顶点 (Vertices) 、面 (Faces) 、边 (Edges) 、法线 (Normals) 和表面 (Surface) 等许多要素。 1. 多边形的顶点 从视觉上看，全选状态的多边形顶点就像一张聚集了众多圆点的图片，如图 5-1 所示。顶点是多边形的一个重要构成元素，对它进行的一系列变形操作或者调整，将影响到多边形的最终形状。 多边形顶点的选择方法主要有以下 3 种， 3 种方法之间没有什么区别，视用户的习惯而定。 ● 通过 F9 键可以快速地激活多边形的顶点。 ● 移动光标到处于激活状态的物体上，单击鼠标右键并从标记菜单中选择 Vertices 命令，然后拖动出一个选取框选择指定的顶点，如图 5-2 所示。 图 5-1 多边形的形状 图 5-2 通过标记菜单选择顶点
Dreamweaver MX Ultradev探索（前言）
Dreamweaver MX 之 Ultradev( 前言) 今天弄到了Dreamweaver MX，这也是我手头上的第三个MX产品了（先前是Flash MX、ColdFusion MX）,今年可真是个MX年啊！自从过了年后，Macromedia关于MX的好消息一个接着一个，大家等着吧，马上就有第四个了（Fireworks MX）。我现在真的有点为Macromedia担心了：以后这些产品的下一个版本该用什么名字了，呵呵。废话少说，干正事了。 现在的MX在后台方面不但可以用Asp、Jsp、Coldfusion还有Asp.net和Php以及Coldfusion MX，大家可选择的余地又多了，开心吧！支持最新的Coldfusion MX tag，调试Coldfusion MX代码, 完全支持Asp.net Datasets,DataGrid,Datalist. 启动MX (以后在文章中都叫MX了，Dreamwerver不加了，打字麻烦)，启动界面和Flash MX感觉差的，的确我想别的MX产品可能都是这样的吧！进入界面以后布局和Flash MX很象，面板颜色和位置都是差不多的，这方面的统一使得广大的使用着更加容易上手了。我们在这里主要讨论Application面板(因为和Asp有关的东西都在这里了)，其他面板我们就不在此探讨了，那是老虎的事情，如果是新手，我只能在此向你说抱歉了。 告诉大家个好消息，我发现MX中的后台部分和以前的UD好象区别不大。他的功能标签全包含在Application面板中(如图qy-1)，单击Application，看到没，以前在UD中经常看到的东西全部在这里出现了。图qy-1 展开Application面板，（如图qy-2） Database：定义数据库连接 Bindings：进行数据绑定 Server behaviors：行为（功能最多，最强大的地方） Components：在Asp中，这个面板是用不着的 我想这些东西大家一看就很亲切吧。选择Database标签，看到没，还有帮助了，告诉你使用步骤，对于新手来说，可以边做边学。不错，非常不错。图qy-2 还有一个很重要的地方就是工具栏了，东西很多，不过我们主要是讲后台，和我们有关的主要是ASP标签和Application标签（如图qy-3）图qy-3 好了，今天讲的都是初步的认识，让大家有个概念，因为MX整合的东西太多，功能太强大，先让初学者有点方向。我们今后会讲MX在后台方面的运用，主要是结合Asp+Access。只要大家慢慢看下去，一定可以使用MX组建一个动态的个人网站。
MAYA中运动模糊黑边的解决方法
1.我们在使用MAYA的运动模糊（Motion Blur）时，会发现渲染出来的物体边缘会出现很明显的黑边. 如图： 2.这种情况不仅影响了整个画面的效果，而且在后期调整中也带来了极大的不便。那么如何来解决这一问题呢？下面我来介绍一个既方便又可达到理想效果的方法。 3.首先，创建一个平面。我们将利用这个平面的像素来控制物体边缘的运动模糊。 4.创建并进入摄相机，打开安全框（View-Camera S 5.赋予平面Lambert材质球，导入背景素材。由于我们只需要利用它的像素来控制模糊，而不想让ALPHA通道被一同渲染输出，所以现在进入材质球面板里关闭Matte Opacity,将其设置为0。
最新发布
网页设计师和前端开发者看的前端性能优化
在这篇长文章中，我将分享个人项目经验，一些关于快速简单且非常有趣的WEB性能知识的点点滴滴，以便使你的行为可以像一个初级的网页设计师和前端开发者；希望对任何想开始学习性能的人，有一定的启迪作用，并使你的前端项目变得超快。我相信这些技巧你能很快掌握，并轻松实现。因为都只需要一点小技巧，以及一些浏览器怎样工作的基础知识。注意 本文需要预先知晓一些基础的性能知识，如果有任何你不熟悉的就Google搜索一下好了！基础知识关于性能，有一些知识在所有的设计师和前端开发者中广为传播。例如，尽可能少的请求，优化图片，把样式表(stylesheets)放在<head>, 把JS放在</body>之前, 最小化(minifying) JS 和 CSS 等等。这些基础知识已经被用来加快用户响应了，但还有更多更多需要学习。虽然在我们每天的工作生活中，浏览器给我们制造麻烦，使我们头疼，但请记住，他们也是很聪明的; 它们为我们做了很多性能优化工作, 所以大量的性能调优知识不但要知道浏览器在哪里给我们做了优化，还要知道怎么更好的挖掘它们。大量性能调优诀窍只是理解，利用和操纵浏览器已经替我们做好的优化工作。顶部的Styles, 底部的scripts这真的是一条基本规则，每个人都能非常容易的在大多数时间遵守，但为什么它重要？简短的说：CSS块渲染是因为浏览器总是试图渐进式的渲染页面；它们想在元素到达的时候顺序的渲染它。如果style在距离很远的页面下部，浏览器在获得它之前没有办法渲染那个CSS。因为这个原因，如果浏览器在渲染文档过程中，改变了之前渲染的东西，它们可以避免style的重绘。浏览器在它获得所有需要的style信息之前不会渲染页面，如果你将style放在文档底部，你就是在使浏览器等待，阻塞了渲染。所以，只要你将CSS放在页面的顶部，那么浏览器就可以立刻开始渲染。JavaScript块下载是由于好几个原因（这又是浏览器聪明之处），但首先我们需要知道浏览器里的资源下载是如何实际发生的；简单的说，浏览器会从一个单一的域名并行的尽可能多的下载资源。它从越多的域名下载，就能在一瞬间并行的获得更多的资源。
8个实用的页面布局和用户界面jQuery插件
网页设计师和网页开发人员在做项目的时候可能会有一些页面的布局或者对于UI有一些特定的要求。可能一些需求不能单独使用CSS就能实现的。于是很多时候开发人员都会消耗大量的时间和精力去写一些JS来协助实现。其实如果你知道一些jQuery，你会发现这些jQuery非常的好用和灵活。在这篇文章中我们分享了一些优秀实用的jQuery插件。希望可以帮助你完成一些你一直想要的东西，也希望可以提高你进行中的项目。它涉及到关于网页的布局和用户的界面。均衡的高度或宽度的元素的jQuery插件。jQuery滚动的路径这是一个插件定义自定义的滚动路径。这使用画布味的语法来绘制直线和圆弧。Freetile是一个jQuery的插件，使该组织的网页内容在一个高效，动态和响应布局。这是神话般的拖动和拖放多列网格已经到来。Gridster是一个jQuery插件，允许建立直观的拖动的布局元素跨越多个列。rcarousel – 一个连续的jQuery UI的旋转木马。
如何快速打造一个有设计感的网站
拥有属于自己的网站是很多人的梦想，但大多数人只能借助像 WordPress 这样的 CMS 实现，甚至很多公司网站也是这样。但这些网站大多数看起来都比较缺乏设计感，通俗来讲就是有点“土”。那么对于像程序员以及其他对设计比较小白们来说，如何能让你的网站看起来更加前卫，有范，有设计感呢?极客公园编译了 24WAYS 的文章 How to Make Your Site Look Half-Decent in Half an Hour 为您提供解决方法。像我这样的程序员来说经常被“设计”这个词吓到，因为我是一名程序员而不是设计师，我拥有的是计算机学位证，另外我对 Comic Sans 字体并不介意。虽然只是一名程序员，但我还是想让自己的网站看起来更加吸引人，一方面出于虚荣，因为这样可以显得我更加“专业”，而另一方面是出于现实，因为研究机构调查发现用户会更加信任那些网站“看起来”很好的网站。但是因为很长时间一直从事的是编程工作，对设计并不是熟悉，甚至害怕，因为在我这个外行看来设计是由很多只能感受不能言传身教的规则以及所谓的设计感悟组成的，知识壁垒比较高。但是不久之前我决定要尽我最大努力让我网站看起来显得更加专业一点，即使比不上真正由设计师操刀做出来的效果，但对像我这种没有设计能力的人来说还是很有帮助的。1. 使用 Bootstrap如果你还没有使用 Bootstrap 的话那么赶紧开始吧，这个来自 Twitter 的开源项目使得网站设计真正进入大众化时代。本质上 Bootstrap 是一种隔栅系统，由两名 twitter 员工 Mark Otto 和 Jacob Thornton 开发的开源前端框架[注：想了解更多请查看什么是 Twitter Bootstrap?]，它集成了很多 CSS 样式的合集，可以帮助那些不懂或者不擅长 CSS 的开发人员快速的建立一个外观看起来很不错的网站。使用 Bootstrap 的另一个好处就是网站本身就是自适应的(Responsive)，可以省去各种为移动设备等的适配工作。此外，Bootstrap 还是可定制的，可以根据你的需求自己配置。(注：英文不好的可以查看中文版的 Bootstrap 文档或 Bootstrap中文网)
不可不知的移动色彩设计新趋势
移动设计正发生着质的飞跃。但我不得不说操纵移动设计最重要的因素是色彩。色彩之所以在移动设计领域没有那么快流行起来是因为人们在用色上不够大胆并没有充分利用它。幸好这种情况正在改变——因为色彩渐渐变成移动设计中不可或缺的元素并有了它自己的流行趋势。什么是色彩?颜色的有趣生动、养眼好用令人着迷。色彩是非常棒且很重要的设计元素和工具，我们不应该害怕色彩而要拥抱色彩。移动设备不像显示器，它的屏幕有限，你不可能像在桌面上那样自由地控制它。移动设备用色和桌面用色没什么不同，但似乎比它更重要。人们在用手机的时 候很可能都很忙，各种事情分散他们的注意力;这时候色彩能帮助你抓住他们的视线。更重要的是，色彩能帮你表达某些特定的情感，把用户视线带到特点的地方或 者帮助你传达信息。如果你只是直接丢一堆颜色给用户，他们也不会集中注意力在你的设计上的。色彩很微妙，所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样，色彩也要好好利用才能发挥它的魔力。太多或太少用户都不会想看，就要刚刚好。所以，我想通过下面几点向你展示“色彩是如何被用于移动设计”的，而且你也应该这样用。强调色我想你已经在各式各样的像室内装潢、印刷和网页这样的设计中看到过强调色。强调色应该给用户保驾护航——引导点击，理解事物，并且帮助他们行如流水。在移动设计中最好的就是通过那些大胆漂亮的用色来吸引用户的目光。下面看两个例子，首先看一个非常有意思的找房应用。在这个页面上你不可能看不到那个拨号按钮。没有那个橙色背景是不可能有这么好的效果的，现在再不集中注意力的用户也不可能对它视而不见了。同样的，看第二个例子中的蓝色按钮，你一定注意到那两个亮蓝色的按钮了，这两个按钮最好的一点是他们从其他文字中凸现出来告诉你下一步改干嘛——是增加联系电话还是增加项目。
书法字体在设计中的应用及信息可视化研究
本文主要就”书法字体在设计中的得当应用”与”信息可视化研究”这两个主题进行分享。1.浅谈书法在视觉设计中的应用毛笔书写汉字是一种个性、抽象的中国传统文化艺术。它通过简洁的线条，演绎出魅力无穷的视觉艺术形象，表现出丰富的内涵，极具表现力和感染力。汉字通过毛 笔的书写，不单是把字写出来，更重要的是将精神和意境传达出来，使文字具有更高的审美价值和艺术特征。书法的应用也丰富了视觉设计的表现形式。书法字体通常有五种：”篆隶楷行草”：篆书篆书空间结构匀称、中正、严整有序。严谨、秩序、庄严的静态美，给人一种古色古香、古朴高雅的的感觉。常应用于贺年卡、请柬、印章设计等方面。隶书隶书是小篆的简易写法。蚕头雁尾的横和分张外拓的撇捺，是隶书最有特征的笔画。隶书平正、清晰，给人庄重、匀整的感觉。楷书
HTML5+CSS3城市场景动画教程
最近一直在研究HTML5的动画表现，特别是在移动设备上的呈现。在上一篇文章《盛开的CSS3梦幻荷花》中提到如何用css3制作丰富动画效果的两个思路，当然除此之外，结合使用javascript脚本语言将可以实现更加强大的动画效果以及交互动作。 今天就为大家分享一个用HTML5+CSS3制作的城市场景动画，动画包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；除此之外，页面的视觉效果采用了插画的设计风格，希望大家会喜欢。这个示例中的HTML结构采用了HTML5的语言来编写，代码将更加的简洁、结构更加清晰易懂。从下面的代码可以看出示例中的每个元素是独立的，最后再重组成一个完整的动画效果。<section><div class="stage"><div class="nightOverlay"></div><div class="skyline"></div><div class="beans"></div><div class="ground back"></div><div class="ground mid"></div>
网页设计中图片格式的选择技巧
网页设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。以设计师最常用的 photoshop 以及 Illustrator 为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：相 信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式，但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是，选择 GIF 后的输出结果看起来变得很糟，于是 PNG (24)似乎突然间风行了起来，不论图档尺寸是不是因此多了好几倍。JPEG由 于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为 8.3 的格式，因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以(甚至只能)输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩(lossy compression)的图档格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降低图档的档案大小。就如这些使用 JPEG 的设备一样，JPEG 非常适合作为储存像素色彩丰富的图片、例如照片等等，这些图片即使有些微的失真也不容易轻易的察觉：而反过来说 JPEG 并不适合用来储存线条图、图标或文字等等有清晰边缘的图片多次重复进行 JPEG 的图档的储存将会永久性地破坏图片中的细节。GIF
浅谈扁平化界面风格的设计心得
什么是扁平化设计？简单的说就是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，使用一些简单的纯色块，从而打造出一种看上去更“平”的界面。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。下面是列举一些国外网站的例子：Squarespace新版的Squarespace几乎完全采用了扁平化的视觉风格，只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现，其实他们的产品在功能逻辑上还是蛮复杂的，但这一切都隐含在简约直白的界面背后，你真的可以从中隐约感受到其设计团队付出的心血。FacebookFacebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外，其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色，至少我们可以说这种设计风格对于Facebook来说是完全适用的。Rdio
每个开发人员应该知道5个设计技巧
优秀的编码和优秀的设计之间是相辅相成的。不幸的是，视觉设计能力偏弱的人通常会觉得自己缺乏天赋，换句话说，就是人们要么觉得自己具有出众的美学天赋，要么就是这方面的白痴。对这个说法，我可不敢苟同。你只要稍微思考一下就会发现：如果你5岁的时候就停止写作，那么你对写作可能就是一团糟，对于艺术设计，道理是一样的。大多数人都是在他们开始掌握画画的时候就停止创作艺术了。幸运的是，学习永远都不晚。并且从事实来讲，日渐成熟的你将更容易从主观观点中学习到客观的知识。如果你在一个小团队里面身兼数职，却又没有多少美学基础。又或者你觉得你们的项目在视觉上还有更多发挥的空间，那么这篇文章就是写给你的。我们将谈到传统的5个消除丑陋艺术设计的元素和原则(或者至少能够进行一定程度的掩盖)1.来点留白大多数的开发者并不在意添加空白的像页边距，填充，行高，或者其他任何增加空白的CSS属性。识别出开发者设计的界面是很容易的：文本都是紧紧地挨着边缘的，没有任何留白，而且屏幕元素之间是通过直线来实现分割的，而不是空白。可以看到，在上面的盒子中，文本紧紧地挤向了盒子的边缘，每一行之间也没有空白。相比之下，第二个就要易读多了，而且能够看得出是经过精心规划的。在艺术领域，元素之间的这个区域就被称之为负空间，尽管在设计的其他领域，通常被称作“空白空间”。负空间能够使得浏览者迅速地识别设计的不同部分。同时也让文字更易读。下面是几点小建议：
新人交互设计师画网页草图容易忽略的几件事
通过工作中的观察与总结，我发现不少新人交互设计师以及产品人员，在画线框图时都会忽略一些重要内容，导致和视觉设计师的沟通成本增高、返工增多、工作效率下降、设计质量下降等重要问题。为了解决这些问题，一方面需要加强沟通，另一方面还需要多站在视觉的角度考虑线框图的设计，使大家的配合更默契。那么具体怎样做呢?以下就是我工作中积累的一些心得，希望对大家有所帮助。一、通过明暗对比表达以前，我是这样画线框图的，这样能非常清晰的展示各模块元素之间的布局关系。然后我会告诉视觉，这些模块或元素之间的优先级关系是怎样的。但头疼的是，当界面元素很复杂的时候，视觉就难以一一记住了，这个时候就需要反复的沟通，视觉在这个过程中也非常的痛苦，经常是改的头都大了但还是有错误。现在，我这样画线框图：加入了明暗对比之后，界面元素的重要级关系更直观，我们不再需要跑过去跟视觉说：这N个模块中这个最重要，那个其次…… 视觉的工作效率也大大的提高了。但需要注意的是：深色并不意味着比浅色更重要，要看色块之间的对比关系。比如下图：