推荐阅读
Photoshop抠出背景简单人物的三种实用抠图方法
最终效果原图一、 准备我们都知道，抠图会是一些事物本身造成一些缺失，需要将这些部分先用钢笔工具抠出来。我们先这样做。原图如下。 2、先复制两层，在加入一个背景图层，在子上面的图层用钢笔工具抠图，如下。先用钢笔抠出，右键点击建立选区，羽化一个像素。
Photoshop应用超小技巧十则
1、图形的复制 不管使用何种工具，只须将图形选择后，同时按住Alt和Ctrl键，用鼠标左键按住图形拖动即可。如图形在拖动前未被选择，则将复制出相同的图层。 2、图形的微移 有时因图形太小等原因，用鼠标进行微小移动操作很不方便，这时只要选中移动工具，按下键盘上的上下左右方向键，即可令图形自如移动。 3、图层移动技巧 要把当前的选中图层往上移，只要按下Ctrl键后，再按下“]”键，就可以把当前的图层往上移动；按下Ctrl键后，再按下“[”键，就可以把当前的图层往下移动。 4、快速查看Photoshop的处理效果 在使用Photoshop时，如果要查看对选择区处理后的效果，就要去掉选择，我们可以利用Photoshop的隐藏选择办法，但是比较麻烦。其实，你只要按上键盘上的Win键，就可以看到图片处理后的效果了。当你再按Win键时，又会回到选择状态了。 5、精确裁减图像 裁切工具大家都一定用过，这种情况你也一定遇到过：在你调整裁切框、而裁切框又比较接近图像边界的时候，裁减框会自动地贴到图像的边上，令你无法精确裁切图像。不过只要在调整裁切框的时候按下“Ctrl”键，那么裁切框就会服服帖帖，让你精确裁切。
老照片翻新教程
2。在对复制层初步处理后（调曲线、色阶or用图层属性将灰暗的图调亮） 3。再把初步整理的图复制一个图层（用作抠人象），下面的用做背景and对照， 4。点掉下面两层的眼睛，对最上一层抠图（一般用删除法：就是用不同的方法选取人像以外的部分逐步删除，比如曲线的地方就用钢笔[ctrl+鼠标点路径转化为选区]；一般的就用直线套索，边缘界线分明的用磁性套索，如果是纯色背景的用魔术棒或选取色彩范围[之前可以复制一层调色阶，也可反相用做辅助，之后删除该层]，还有很多方法[诸如通道等等――天师是不常用的]） 5。用图章and修复工具(我很少用)、手指（用做处理大大的网纹，改变形状大小，拉头发）对照片破烂、肮脏处进行修复打磨。（对于特别烂的地方，可以复制对称或相近的地方移植过来[――用套索工具选取，羽化“alt+s,f”,拷贝为图层“ctrl+j”,自由变换“ctrl+t”,放到大概位置后可以改变该层的透明度{主要是用来复制眼睛、嘴巴等精确位置的地方}：一般50%，然后精确调整位置，再对该层调色等处理―有必要的话才调整，让他和周围相近，最后向下合并“ctrl+e”,图章处理]，用图章精心处理五官，把画笔大小调大点图章透明度设小点[30%左右]，按照面部肌肉走向连续涂抹[注意不是点是拖]）――――――对于有网纹的可以结合高斯模糊 6。对于衣服，可以不必那么精细（如果你有足够的时间也可以仔细点），天师一般把衣服copy一个图层，方便以后上色、调整。 7。单独对身体上灰暗、偏色。。。。等地方再调整，特别是五官（有时用到手绘）。
Maya 官方教程-流体
大家先看效果 2 在 PS 下先制作一张图，比如： ALIAS 创建 2D 流体容器， CTRL+A 打开属性窗口，将分辨率 (resolution) 改为 100*100 如图所示 点按 Fluid Effects > Add/Edit Contents > Paint Fluids Tool 后面的小方框 . 弹出流体笔刷属性框，将 Paintable Attributes 选为 Density 在 IMPORT 标记菜单下， Attribute Maps > Import 的 Import... 将我们刚才做好的黑白图片导入 执行 Fluid Effects > Set Initial State 命令（初始化图画）
最新发布
IE8开发人员工具的菜单讲解
IE8正式版已经发布了。本篇文章不会非常扯蛋地去进行什么评测，然后给出什么“Chrome运行JavaScript能力是IE8的15倍”、什么“IE8页面渲染速度是Safari的2.456倍”、什么“IE8的抗强暴能力比FireFox高出1.235倍” 这样的操蛋的结论。我管谁比谁强多少？我只知道：当windows7发布的时候，IE8浏览器的市场占有率将让前台开发人员无法说：“不用去管IE8，没有几个人在用它”。所以，这篇文章将会非常务实的讲解一下，IE8中也许是唯一让开发人员感到亲切的“开发人员工具”。同时，我们会延伸一些相关的资料和知识。所以，请抛弃你对IE8的偏见，耐心的看下去吧。 你还没有安装IE8？ 如果你是前端开发人员，那么还请你安装一下这玩意吧。因为正式版已经发布了。不同于以前的beta版，这次咱得认真的关注一下它了。去下载并安装一个吧，下面是下载地址—— IE8中文版下载列表Windows XP Windows Vista Windows Server 2003 Windows Server 2008 Windows XP 64-bit Windows Vista 64-bit Windows Server 2003 64-bit Windows Server 2008 64-bit IE8英文版下载列表Windows XP Windows XP 64 Bit Windows Vista Windows Vista 64 Bit Windows Server 2003 Windows Server 2003 64 Bit Windows Server 2008 Windows Server 2008 64 Bit 哦，也许你会担心，你系统内的IE6或者IE7完蛋了。恩，的确，这有可能。但是，你可以试试下面的工具。它可以让你多版本的IE共存——IE多版本共存的解决方案——IETester 微软网页开发调试利器SuperPreview（附下载）认识“开发人员工具”虽然这玩意改了时髦的名字，但是却也不是什么新玩意，它的前身是“IEdevtoolbar”。但是，以前只是IE的一个插件而已。而在IE8中，浏览器已经自动集成了这玩意，不仅改了个有点土鳖的名字，而且功能也加强了很多。 开发人员工具在IE8的工具菜单下，或者直接点击F12快捷键也可以呼叫出来。 在我们介绍它之前，我们先来说说这玩意到底能做什么？如果你只是用浏览器来浏览网站，而不用操心页面是怎么做出来的。那么我想你已经可以离开这页面了。 总体来说，开发人员工具就是是为前端开发人员开发页面而设计的工具。提供一系列的小工具，让你可以方便的查找页面的bug，包括html代码、css代码和JavaScript代码。同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例如取色、屏幕尺子等。 ok，我们已经看到它了，并且也知道它能干什么了。那就让我们根据菜单的顺序一一来介绍它吧——
select网页下拉列表与div层遮盖问题
在html中关于select元素的问题在很多地方都提出过，而在前段时间的项目中，刚好遇到了关于select元素的两个小问题，这里进行一下总结。 相关文章：div层被flash层遮盖问题解决思路 第一就是比较有名的：一般div浮层在IE6下无法遮盖select元素的问题。首先提供了下面一个实例： 注解：如果你在FirFox下和IE7下看都的结果是一样的：浮层A、B、C都可以正常的现实，即遮住下面的select元素。但是在IE6下则是3种不一样的情况，浮层A依然正常；浮层B主体部分遮盖住了select元素，但是浮层的边框却无法遮住select元素；浮层3则完全无法遮盖select元素。造成这个现象的原因是在IE6下，浏览器将select元素视为窗口级元素，这时div或者其它的普通元素无论z-index设置的多高都是无法遮住select元素的，但是可以通过同为窗口级元素的iframe来遮住select，上面的例子就是这样做的。浮层C仅仅是一个div浮层，这里不多讲，直接看浮层B的结构： <div class="containDiv" > <iframe class="maskIframe" ></iframe> <div class="mainDiv" >浮层B</div> </div> 用一个div将实际需要的内容div和一个iframe元素放在一起，它们对应的样式为：.containDiv{position: absolute; top: 140px; left: 60px; } .maskIframe{position: absolute; left: -1px; top: -1px; z-index: -1;border:1px solid #000;height:50px;width:50px;_height:48px;_width:48px;} .mainDiv{background:#EBAC3B;width:50px;height:50px;} 浮层B运用了iframe在containDiv中绝对定位并设置z-index: -1;，然后让下面真正放内容的mainDiv可以遮盖住iframe，这个时候iframe是可以遮住select元素的，而间接的使得mainDiv也覆盖了select元素。但是浮层B还是不完美，原因就是这里的浮层B的边框使用的iframe边框，iframe本身可以遮盖select，但是它的边框却不能，所以出现了浮层B的情况。浮层A是解决了这个问题，达到了理想想过，它基本上跟浮层B一样，只是它使iframe比mainDiv上下左右各多出1px，然后再给mainDiv边框，这样浮层的边框是由mainDiv提供的，而整个mainDiv连同边框都在iframe上面，所以达到了理想效果！ select的第二个问题是在IE下动态生成option选项的问题。看上面第二个问题的例子，当点击（限FF）的链接时在FF下可以给select元素加入3个option选项元素，但是在IE下却不行；当点击（通用）的链接时IE和FF下都可以给select元素加入3个option选项元素。原因是第一个链接是通过select元素的innerHTML属性来加入option元素的
Web Slices是什么
微软3月20日发布IE8正式版，新功能Web Slices(网页快讯)是让我挺感兴趣的一个东西。Web Slices是什么？slice是指某一部分，Web Slices就是网页上的某一部分内容。比如你关心ITFeed上的最新文章或taobao上某个商品的最新价格，但是你又不想时刻打开页面去查看，怎么办？Web Slices就为你提供了这样的便捷，你可以在收藏夹栏上获得该网页所关心部分的更新。点击右键选择属性设置更新计划，当有更新时它会以加粗的方式通知你，或者手动刷新查看。如何制作Web Slices？Web Slices采用了Microformats(微格式)的方式，只要对某段(x)html代码设定3个特定的class标记就可以了，另外别忘了给这块内容加上ID，否则无效。三个class标记分别为hslice、entry-title、entry-contenthslice设定内容块entry-title设定显示的标题entry-content设定所要显示的内容<div id="news" class="hslice"><h4 class="entry-title">ITFeed最近更新</h4><ul class="entry-content"><li><a href="#">另一个来自老外的快速贷款</a></li><li><a href="#">垂直门户网站的SNS社区之路</a></li><li><a href="#">学做jQuery中的data()函数</a></li><li><a href="#">淘宝前端开发人员的心声</a></li><li><a href="#">利用jQuery制作一个浮动的导航. </a></li></ul></div>
中文Web设计HTML的em标记使用
标记em用来表示强调，其默认样式为斜体。由于一些原因，中文斜体显示效果并不理想，因此对中文直接应用em标记存在不妥之处。一些设计师使用加粗表示强调，中英文显示效果都不错。不妨插一句，小字号（如12px）的加粗文本在使用点阵字体的情况下与普通文本差异明显，在使用矢量字体时则可能与普通文本差异不明显。这些设计师甚至使用strong代替em。配合标记默认样式决定标记之选择的做法必不可取。我们有理由为标记定制样式，替换其默认样式。正式的中文排版中，强调往往是通过在文字下文打上实心圆点实现的，这样的圆点被称作着重号。在中文Web设计中，我推荐对em标记使用着重号的效果，strong标记仍保留对文本加粗的效果。由于汉字的宽度一定，这种效果不难实现。这里打算为12px大小的文章正文设置em标记样式。首先，制作一张12px宽的图片，下图是放大至16倍的效果。对12px大小的文字来说，将圆点直径设为3px看起来最为合适，虽然这样圆点的中心不可能处于绝对居中的位置（本图中圆点偏右）。此外，将圆点以外的部分设为透明将更具适应性。接着制定样式。.post p em { padding-bottom:4px; font-style:normal; background:transparent url(images/dot-accent.gif) repeat-x left bottom; } 为了保证效果，段落文本应具有1.5em以上的行距，否则着重号可能距离下面一行文字太近。下面是一段HTML代码及其对应的样式效果。<p>事业是<em>干</em>出来的，不是<em>吹</em>出来的。</p> 事业是干出来的，不是吹出来的。
后缀是.shtml的网页文件你知道是什么意思吗？
首先介绍一下html与htm 关于HTML，HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。 其次介绍一下shtml和shtm 关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include--SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。 关于shtm，shtm与shtml的关系和htm与html的关系大致相似，这里就不多说了。 html或htm与shtml或shtm的关系是什么 html或者htm是一种静态的页面格式，也就是说不需要服务器解析其中的脚本，或者说里面没有服务器端执行的脚本，而shtml或者shtm由于它基于SSI技术，当有服务器端可执行脚本时被当作一种动态编程语言来看待，就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。
HTML教程：脚本JS标记script详解
script标签有两种用途：它要依赖于src属性的存在。上面两种情况都需要</script>闭合标签。script标签可以包含下面的属性：src属性是可选的。如果存在src属性，它的值应是一个url(网址)表示的.js文件。当浏览器加载，编译与执行文件时，页面将停止装载与处理。<script src="url">与</script>之间不应有任何内容(保持空白)。如果没有src属性，<script>与</script>之间的文字可被编译与执行。script不能包含序列</ 因为可能与</script>混淆。可以插入反斜线符号在<与/之间避免此问题。</\ 反斜线将被JavaScript编译器忽略。不要使用<!– //–>这种hack脚本。这种方法可以阻止第一代浏览器（Netscape 1和Mosaic）将脚本显示成文字。已经有很长时间不需要这么做了。<!– //–>是一个HTML注释。注释中的脚本将被忽略，不被编译与执行。同样，HTML注释不包括–，因此脚本将忽略HTML错误。这个属性是不赞成使用的。它被用于选择其它的程序语言或特殊版本的JavaScript。尽量避免使用。
网页中利用Title属性的好处
最早大家都没有给链接加title的习惯，后来因为w3c标准普及，又集体加上了title。从一个极端走到另个极端，于是出现很多怪异现象。两方面，第一a标签内title不是必须使用，第二title可以用在除了base, basefont, head, html, meta, param, script和title之外的所有标签。抛开标签语义、搜索引擎友好等因素，在纯用户角度找几个场景来分析。列表内容被截断后通过title显示完整，此时如果没有被截的链接，也会被再显示出来。试想本来已经看清楚的信息，触发又提示一遍，传达是不是感觉很婆妈。如果没有截的链接控制不输出title，效果或许合理很多。或者title在此时根本就不应该？印象中英文好站似乎很少做列表截取。最典型类似对icon图示的辅助说明，可以最大化平衡界面复杂度与可操作性。并且针对某些群众认知度比较高的操作，如果图形传达到位，完全可以使用icon代替，更多交互场景请参考臭鱼在06年完成文字还是图标的总结。在导航系统的各条目中，title主要作用是做补充说明。同时也对应可访问性原则中，要求导航传达清晰简洁的建议。用户感兴趣后操作触发，再title提示更多详细，强调信息引导而不是推送。还有种做目地指引之用的案例，明确告知用户这个链接做什么？到哪里？在某些容易引起误会，或者不是很清晰的地方效果比较好。另外title不在a标签内也有广泛应用，典型如表单。可以为用户提供更精准、得体的操作指引，并且我想一定程度上可以代替明文提示。学以致用，顺手给评论模板加了条语句。上次改的时候本想写出来，又感觉多余，现在好多了。准备动手评论的用户，自然会看到，并且这么土的语句也没有兼容性问题。相应的不良应用不再图示举例，互联网上不胜枚举，深入分析语义和用法不仅能纠正错误、开拓思路，而且能贯通很多理论上的困惑。总结起来，title并不像seo从业者鼓吹的那么简单，在用户角度除避免与文字、图形重复传达，主要有三类用途：
202个免费的高质量XHTML模板(2)
继上一篇202个免费的高质量XHTML模板(1) 之后，破洛洛推出了该系列的第二部分，让我们一起看看这部分模板吧：预览 || 下载预览 || 下载预览 || 下载预览 || 下载
202个免费的高质量XHTML模板(1)
对于网页设计师中的新手来说，总是希望能找些好的免费的模板来学习，那么颇为纠结的是，国内相关资源相当匮乏，还好，国外有很多专业和高质量的XHTML & CSS模板可以免费使用。当然如果你对前端编码比较熟悉，你也将能从这些模板的代码中学到许多先进的技术。这些模板都是免费的，但是尽管如此，希望你在使用它们之前不要忘了检查一下授权。这里破洛洛推出了这些模板的第一部分——每个模板都是亲自挑选的，而且，我只选择那些对编码比较讲究或的确非常优秀的按照标准布局的模板。破洛洛这里是该系列收集的第一部分，有101个免费的高质量XHTML模板，和下一篇的101个模板加到一起，总共有202个模板。预览 || 下载预览 || 下载预览 || 下载
10个未被充分利用或被误解的HTML标签
网页开发人员常常希望能够了解并掌握多种语言，结果是，学习一门语言的所有内容是棘手的，但是却很容易发现你并没有完全利用那些比较特殊却很有用的标签。译自：TutsPlus不幸的是我们到现在还没有涉足的那些比较不知名的HTML标记所有潜力。但它永远不会太晚重新进入领域，并开始编写代码来发掘这些未开发的标签的能量。这里是10个未被充分利用或被误解的HTML标签。或许它们不太广为人知，但是在特定情况下他们却非常有用。貌似每个人都比较熟悉<blockquote> 标签，但是你可知道<blockquote>的小弟弟<cite>？<cite> 允许你定义元素内的文字作为一种参考。一般，浏览器会用斜体来显示<cite> 标签内的文字，但是这可以用一点CSS来改变。<cite> 标签对于引用目录或其它网站的参考非常有用。这里是一个在段落中使用cite标签的例子:David Allen的突破性组织性的图书完成你的工作给忘了带来了一场风暴。<optgroup>标签是定义select标签中的选项分组的一种很好的方法。比如，你需要按时间来分组电影列表，那么就可以这样做：