推荐阅读
梦幻照片，PS给森林动漫人物照片添加梦幻柔光效果
我们做一张片子，是需要先理解片子，理解到位了，才能把照片里所要表达的意境表达准确，那么什么是意境呢?我认为“意境”应该这样去理解，它是艺术辨证法的基本范畴之一，也是美学中所要研究的重要问题。意境是属于主观范畴的“意”与属于客观范畴的“境”二者结合的一种艺术境界。这一艺术辨证法范畴内容极为丰富，“意”是情与理的统一，“境”是形与神的统一。 在两个统一过程中，情理、形神相互渗透，相互制约，就形成了“意境”。我们今天要做的片子是要走梦幻的意境的，方向一定要清晰，方向对了，才能达到目的地。 效果图： 我们开始作图，第一步我们进入Camera Raw 小分析下，我们在Camera Raw处理的时候一定要把皮肤调干净，尽量人和景分离，参数建议如下设置：
3ds Max制作死刑裁决游戏漫画宣传画设计教程
大家好，我是Petr Nasirov。我是一个白俄罗斯模型师，今年24岁。“死刑裁决”这个作品是作为“挑战09动漫展”作品制作的，赢得了第一名，在制作这个作品之前，我花了2天的时间研究漫画人物，当我看到“死刑裁决”的图像时我就决定要制造这个模型，因为他看上去很有趣，非常奇特。1、 素材收集素材收集是一个很重要的步骤。你在人物性格研究方面花的时间越多，后期就会越少犯错误在这个阶段，你需要研究所有的细节，人物的结构和他的衣服的设计和材质，确认每一个细节的地方都是合理且正确的。角色的创建是一个复杂的的多阶段的过程。如果你在制作尾声的时候发现一个错误，它可能要花更多的时间来纠正它。最坏的情况，你甚至可能需要修改多边形建模还有纹理。创建《死刑裁决》这个模型的时候，我充分利用了我在谷歌搜索里面找到的素材。关于《死刑裁决》的原设计有很多种，他们的一些元素吸引我，有些对我来说毫无吸引力。 有一张海报为我的作品中的一只手提供了参考，因为我喜欢它的细节和色彩。 另一张海报给了我一个人物的肩膀上的鸟的灵感。 这些收集来的素材，帮助我创建了属于我自己的人物角色。找到的有用素材越多，我的角色就会越丰满、越细腻!2、 基础多边形建模在收集的素材的基础上，先建一个简单的立体多边形出来，然后再在立体多边形的基础上面进行调整。在这个阶段中，我使用标准的3ds Max的材料，设置不同的颜色来模型元素。这不仅有助于我得到人物的基础形状，而且还得到了一些元素的照明效果。把重点放在调整模型上面。3、复杂多边形建模用3ds Max中的修饰工具Turbosmooth创建了一个高聚模型。衣服上的褶皱、身体上的褶皱和其他的一些小细节都只能在ZBrush里面制作。
Fireworks滤镜快速打造3D彩虹拖尾字特效
使用Fireworks中的Motion Trail滤镜可以快速制作出如下图所示的3D效果彩虹拖尾字。 图1 本例在Fireworks 8中文版中制作完成，具体操作步骤如下。 1.启动Fireworks 8中文版后，按Ctrl N新建一个文档，大小自定，然后使用文本工具在画布上单击，输入文本“天极网设计在线”，注意这里共七个字，设置字体为“隶书”，字号为64，结果如图2所示。 图2 2.在文本框中选中“天”，将颜色改为紫色，再选中“极”，改为蓝色，依此类推，将七个字的颜色分别改为紫、蓝、青、绿、黄、橙、红，即七彩虹的颜色，结果如图3所示。 图3
FW制作苹果水晶图形
Mac的风格大家一定不陌生，而且近些年越来越流行 我是做软件SKIN设计工作的，当然更加深有体会。但像这样风格的图标、按钮却不是那么好找。我之前经常为了找几个合适的水晶图标而浪费大把的时间。经过自己简单的分析，我发现这种图标的制作方法其实非常简单。完全可以把自己需要的图形、符号用我自创的方法做的和上图一样，晶莹剔透作图先要选择一个图形图像处理软件，现在有很多这样的软件，还有很多专业的图标制作软件这个是以前在第三方软件区贴的但我用的是Frieworks（FW）,这个软件操作起来很灵活，比较适合做网页的按钮大家如果想用PS的话，当然也可以废话不说了，我就来讲下FW下水晶图标的制作过程1、新建文件，参数自定，画布不要开得比图标小就可以了2、在画布上画出你需要制作的图形，文字也可以（只是文字将来要转换为路径）3、我做的是文字，字体为：Cooper Black(如果没有这种字体，找一个粗一些的，圆一些的，这样做出的文字看起来效果更好，而且比较可爱)，文字大好后就将文字转换为路径，如果是多个文字，转换路径后，还需要将文字解散群组4、选中其中的一个文字，在属性面板中对其填充颜色进行更改，更改为线性渐变5、再点击填充色的取色框对其渐变颜色进行调整，滑块的一边为白色，一边为红色，将红色的滑块拖到图中的位置。再用黑键头工具选中文字，对其渐变色调杆进行调节，改变渐变的方向。6、接下来需要将文字的边框色进行更改。点击属性面板右侧的边框色取色框，将颜色定为#AA0000，这样文字下面的反光效果就做出来了7、接下来要做文字上半部分的高光，这样才有水晶的光滑通透感。用钢笔工具勾出一个图形，如果图形的边缘不满意，可用白箭头改变曲线的曲力。如图8、将文字选中，ctrl+c，ctrl+v这个大家都应该知道是在干什么。然后同时选中文字和刚才绘制出的路径，选择Modify菜单里Combine Paths下的Intersect命令。//这是对路径进行修改的一组命令。第一个join是将路径进行组合，类似于图形之间的Group（群组）第二个Split，这个命令和join是相对应的，就是将路径解散第三个Union是将路径进行融合，和join不同的是，两个路径完全结合变为一个图形，而且除了ctrl+z以外无法逆向操作第四个Intersect命令是取两个相交图形所共有的部分第五个Punch使用后绘制出的图形在先绘制出的图形上打洞第六个Crop和Intersect的效果差不多，具体有什么不同，我暂时忘了//好了，接着将我们水晶字，使用Intersect命令后，我们得到了一个新图形，这就是文字的高光部分。9、对高光部分的颜色进行调节。首先把这部分的边框色去掉，（这部就不用我废话了吧），然后对其填充进行仔细的调节，这里的填充也是渐变填充，从白到白，不过其中一侧的不透明度为80，如图调节渐变方向控制杆，整体不透明度为90。好了，基本上完工了，最后一步，给R加上一个投影效果，这样看起来就更漂亮了这样，第一个字就做好了。后面的字作法和第一个一样。大家自己做吧，我的手已经酸了最终效果图这是源文件
最新发布
safari：webkit
支持CSS属性Safari和WebKit实施大子的CSS 2.1规格所界定的万维网联盟（ W3C ） ，以及部分的CSS 3规格。 。这个CSS属性本条划分的群体界定由W3C的CSS规格：1,webkit Box模型 CSS定义：-webkit-border-bottom-left-radius: radius; CSS定义：-webkit-border-top-left-radius: horizontal_radius vertical_radius; CSS定义：-webkit-border-radius:radius; CSS定义：-webkit-box-sizing: sizing_model; 边框常量值：border-box CSS定义：-webkit-box-sizing: sizing_model; 内容常量值：content-box CSS定义：-webkit-box-shadow: hoff voff blur color; CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：collapse CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：discard CSS定义：-webkit-margin-bottom-collapse: collapse_behavior;常量值：separate CSS定义：-webkit-margin-start: width; CSS定义：-webkit-padding-start: width; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 round round; CSS定义:-webkit-border-image:url(borderimg.gif) 25 25 25 25 stretch stretch;
IETester兼容win7
IETester兼容win7啦，http://www.my-debugbar.com/wiki/IETester/HomePageIETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.New in v0.5 : IETester now working on Windows 7 !This is an alpha release, so feel free to post comments/bugs on the IETester forum.Requirement : Windows 7, Windows Vista or Windows XP with IE7 (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)Download IETester v0.3.5 (24MB)(IETester v0.3.5 zipped intaller for people unable to download .exe files due to proxy limitations)
优秀产品设计中的9点良好的用户体验设计
我们在研究网页的用户体验时，不因该仅仅局限与网页的范围，在很多优秀的产品和设计中都体现出许多好的用户体验设计，我们来看下以下的九点，他们都代表了一些出色用户体验方式，当然这些在网页设计中也是通用的。1.依赖第一印象：酒店了解这一点，因此，良好的酒店都会在酒店大堂提供微笑，在您的枕头准备巧克力和书面说明。2.发现和注重细节：apple公司通过对细节的努力考虑，并考虑的结果应用到他们产品的包装上，从而实现了差异化。结果就是他们的用户从ipod的包装拆起就开始拍照，记录哈。3.个性化和自定义的matter： 星巴克允许他们的顾客自主自定义coffee,任天堂和其他的一些游戏公司也允许用户自己创建游戏角色。Second life（第二人生–备注：一个游戏）公司拿走这一创意，并且把它作为一个新的标准满足用户需求并且主张用户的个性化。对于web开发者来说，有些事情也 是一样简单，比如在网站的欢迎词中使用用户的名字，会让用户有感觉更受欢迎，跟喜爱你的网站。4.(dripfeed your information)—这里可以理解为分类或者分级。我理解的意思就是信息不能一次大量的冲击波似的提供给用户那样用户会一下接受不了。最好就是有选择性和针对性的提供给用户，可以让用户自己操作细化选择自己需要的信息比如：Basecamp提供给用户根据video特征去任意选择video，雅虎网站也会用一些的lightbox（广告灯箱）形式去解析他们网页重新设计的一些特点。5.照顾世俗6.使他更充满乐趣：在一些文案或者操作的提示的时候，让用户感觉更亲切，更感兴趣的做法。比如Moo在他们发给客户的邮件中会这样说：hi，您好主人我是小MOO，我会按照您的指示管理。。。。
网页设计中的标点符号应用规范
网页中的标点符号经常会被很多人忽视，其实无论是英文还是中文网站，短句还是长句，标点符号的应用在一定程度上也影响着网站用户的体验。包括我们在设计页面时，不仅要注重网页的布局，颜色，设计等，另外对于文字的标点符号也要引起足够的重视，具体标点符号会起到什么作用在下文中我们一一解说：标点符号的作用标点符号大致来说有三种作用：表停顿；表语气；表词语的性质。1、表停顿，用来表明句子的结构。2、表语气。通常交谈的语气有三种：陈述预期，告诉别人一件事情；疑问预期，向别人提出一个问题；祈使预期，要别人做一件事情。这几种语气在交谈中用语调来表示，在书面上用标点符号表示。3、表词语的性质。某些词语加上某种标点，词语的性质就会发生变化。如“高兴”指的是一个形容词；而《高兴》就表示一部电影或书籍或文章的名字。中英文标点符号的差异1、汉语中某些英文中所没有的标点符号。a) 顿号（、），英文中分割居中的并列成分多用都好。b) 书名号（《》），英文中没有书名号，书名、报刊名用斜体或下划线表示。在英文中文章、诗歌、乐曲、电影、绘画等名称和一些专有名词也常用斜体表示。c) 间隔号（·），英文中需要间隔时多用逗号。
微软IE团队开始注重HTML 5规范
本周五微软表示，IE团队正在详细查看HTML 5规范现有草案，并汇总自己的意见。此举显示，微软开始认真对待这一新Web标准。HTML标准上一次正式更新发生在1999年。Google、苹果、Opera和Mozilla等公司一直在致力于创建新一代HTML标准，但微软的参与热情一直不高。不过，本周五IE开发经理艾德里安·巴特曼（Adrian Bateman ）表示，IE团队希望分享自己对HTML 5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML 5发展的最佳方式。目前HTML 5规范草案中已经包含了许多重大改进功能，例如内置支持视频和音频，以及可以将数据存储于本地计算机的功能。在Google、苹果和Mozilla的最新版浏览器中，一直在宣传HTML 5功能，但是微软在这方面一直保持谨慎态度。
iframe自适应大小
页面域关系：主页面a.html所属域A：www.taobao.com被iframe的页面b.html所属域B：www.alimama.com,假设地址：http://www.alimama.com/b.html实现效果：A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.问题本质:js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.解决方案:引入代理代理页面c.html与a.html所属相同域A，c.html是A域下提供好的中间代理页面，假设c.html的地址：www.taobao.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.代码如下：
HTML网页制作教程:谨慎使用iframe标记
使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能：使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。iframe 阻塞 onloadwindow 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。window 的 onload 事件直到它所包含的所有 iframe，以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome 中，用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。一个连接池对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari 3+ 和 Opera 9+ 增至4个，Chrome 1+ 、IE 8 及 Firefox 3 增至6个。人们可能期望每个 iframe 有单独的连接池，但并非如此。在大多数浏览器中，连接被主页面和它的 iframe 所共享，这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。如果 iframe 中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下 iframe 中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给 iframe 的 src 赋值。美国的10大网站中有5个使用了 iframe。它们多数用来加载广告。这不是很合适，但可以理解，这是一个简便的在内容中插入广告的途径。在很多情况下，使用 iframe 是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。
HTML减肥:精简HTML标记制作网页
改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名。下面是一些我们总结的使 HTML 标记更精简的方法。HTML 4HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过 HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记）</area> </base> <body> </body> </br> </col> </colgroup> </dd> </dt> <head> </head> </hr> <html> </html> </img> </input> </li> </link> </meta> </option> </p> </param> <tbody> </tbody> </td> </tfoot> </th> </thead> </tr> 比如，你的代码是<li>List item</li> 可以写为<li>List item 又比如段落要以</p> 结尾，你可以只写<p>My paragraph 甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。HTML 5
HTML 5解析规则
HTML 5推荐标准的成功之一是提供了一个详细的规范来说明如何解析HTML文档。一直以来，浏览器提供商都试图猜测和拷贝其它浏览器的实现，寄希望于他们的解析器在处理HTML文档的时候不产生过多的问题。尽管HTML 5中的一些部分目前争议比较大，关于解析的这部分得到了浏览器厂商的一致认同。一旦浏览器开始实现它，用户就可以从所带来的兼容性提升中获益。HTML 5解析规则的最初实现之一是为了支持HTML 5验证器而开发的。（如果你想测试这个验证器的话，http://ejohn.org应该是合法的HTML 5。）这个实现是用Java开发的，提供了SAX和DOM的接口，并且是开源的。有趣的是Henri Sivonen（验证器的作者）最近为Gecko开发了一个全新的HTML 5解析引擎，会在下一个版本的Firefox中使用。这个实现实际上是通过把Henri的HTML 5解析器的Java实现自动转换为C++来完成的。这个转换是自动完成的，所有的改动都会提交到Mozilla的代码库中。一般来说，当提到这种大规模的程序式的把Java代码库转换到C++的做法时，我会跳出来。不过结果非常的出人意料：页面加载的性能提升了3%。这些是建立在该代码库会提供的一连串的bug修正和一致性检查的基础上。你可以在Mozilla的bug库中查看该补丁的进度。如果你想尝试新的解析器的话（你不太可能发现很多明显的变化，但是任何寻找bug的努力都是值得感谢的。），下载一个Firefox的每日构建版本，打开about:config，把html5.enable设成true就可以了。如果想升级到HTML 5，那么现在就是时候。因为HTML 5是HTML 4和XHTML 1提供的功能的超集，所以升级是非常容易的。只需要把目前的(X)HTML文档类型声明换成HTML 5文档类型就可以了。
IE 下的只读 innerHTML
今天做东西遇到一个问题，我试图动态为一个表格添加多行数据，先定义了一个table：1 2 3 4 5 6 <table> <thead> </thead> <tbody id="filelist"> </tbody> </table> 然后在JavaScript 中这样操作：1 2 3 4 5 for(var i in entries){ ... var filetable = document.getElementById('filelist'); filetable.innerHTML += '<tr><td>111</td><td>222</td></tr>'; } 在FireFox 下这么干是没有问题的，但是放到 IE 下面就死活不行了，问了下同事+搜索了一下，发现在 IE 下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的，不能直接操作。但是也不是没有解决办法，TD 的innerHTML 还是可以操作的，上面的代码可以这样修改：1 2 3 4 5 6 7 8 9 10 11 12 for(var i in entries){ ... var filetable = document.getElementById('filelist'); var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = '111'; var td2 = document.createElement('td'); td2.innerHTML = '222'; tr.appendChild(td1); tr.appendChild(td2); filetable.appendChild(tr); } 可以先使用 DOM 的 createElement 方法创建 tr 和 td，然后对 td 的 innerHTML 进行相应操作，最后用 appendChild 方法把创建的元素添加到 DOM 树中。这样在 IE 下就可以正常运行了。需要注意的是，如果你的 table 没有 tbody，而是这样：1 <table id="filelist"></table> 这个时候就不能对 table 直接使用 appendChild 方法了，因为IE6 下 table 元素是不支持 appendChild 方法的(IE8 貌似已经支持了)。网上也有人提出用 insertRow() 等方法来做，不过这个方法对不同浏览器的兼容也是有问题的（在FireFox 下就需要使用 insertRow(-1) ），所以就没用。BTW，虽然之前也有意识地看了不少 JS 的资料，但还是实践出真知啊，现在刚开始手忙脚乱的，学习淡定ING