推荐阅读
ps减去顶层形状不管用什么意思在哪设置？
在用ps做路径或者形状合成的时候，经常会做所谓的布尔运算，也就是形状或者路径的加减乘除，其中比较难理解的是减去顶层形状，如果只是减去形状，可能要更容易理解，那么减去顶层到底是什么意思，哪个是顶层形状，顶层是怎么设置的，能更改么，带着这些问题且看本文讲解。 1、路径工具选中之后，在上端选项的【路径操作】菜单中，可以找到【减去顶层形状】， 2、举例说明一下，左侧工具栏切换到【椭圆工具】，在背景图上绘制出一个圆形，图层面板上可以看到新增了一个形状图层，笔者设置为形状，是为了更加方便理解，当然这里也可以绘制路径。 3、一个圆形形状画出来之后，如果要再画一个元，可以直接在背景图上话，默认情况下鼠标变为【加号】样式，此时会自动新增一个形状图层，也就是说这两个形状，产生了两个图层，如果要做布尔运算，是需要先合并形状，在进行设置，形状的合并可以使用快捷键“Ctrl+E”， 4、绘制第二个圆，也可以在一个图层上完成，前提是先按Shift键，此时鼠标变为了一个大一个小【双加号】样式，按住shift键，再按住鼠标左键，此时就可以松开shift键了，如果想要正圆形，可以继续按住shift键， 5、两个圆形绘制完成，默认的路径操作都是【合并形状】，也就是相加的效果，大圆加上小圆，得到的还是大圆，所以没有变化，想要得到圆环的效果，就要减掉小圆，此时用【路径选择工具】点击选中小圆，上端选项中，点击【路径操作】图标，下拉菜单里面，点击【减去顶层形状】， 6、最终的效果如下图所示，小圆被减去，剩下的是圆弧效果， 7、那么为什么小圆就是顶层图形？因为先画的大圆，后画的小圆，所以小圆处于顶层，其实形状的层级是可以手动设置的，选中形状之后，点击上端选项【路径排列方式】，下拉菜单里面，可以看到【将形状设置为顶层】，以及其他选项，所以【减去顶层形状】，就是减去处于顶层的那个形状。 路径的布尔运算，需要路径或者形状处于一个图层中，如果在操作中遇到问题，可以在下方留言讨论。
Photoshop 鼠绘紫魅妖姬
最近在一本杂志上看到一个非常妖媚的女子，她拥有超黑而又超密的睫毛、黑黑的眼线、大片的腮红、红红如水晶般的双唇、乌黑的头发。充满着神秘气息的女子，很是抢眼。笔者今天来告诉大家此紫魅妖女的PS鼠绘制作过程。 老规矩，我们先来看看我们要打造的这位紫魅妖姬的样子： 最终效果图 1.首先打开PS，建立一个新的文件，长宽自己来定就可以最重要的是分辨率定为72就可以。正常屏幕观看给72就可以如果要打印出来的话就要根据纸张的大小、材质来定了。多多学习一下打印方面各个参数也是很不错的，对以后的实践工作会带来很大的帮助。（图1-1） 图1-1 2.用钢笔工具把人物的大体轮廓勾画出来，这个图绘制的是正面的效果，正面比较好绘制，把路径保存起来。新建一个图层，填上皮肤的颜色，这里皮肤的颜色RGB值为：239、198、178。（图2-1） 图2-1
用Photoshop打造撕纸文字效果
最终效果图 1、新建一个文件，设置宽度为10厘米，高度为5厘米，分辨率为300像素，模式为RGB的白色文件。 2、打开通道面板，在控制面板下方单击“创建新通道”按钮，生成新的通道Alpha 1，执行菜单栏中的“滤镜”“渲染”“云彩”命令，效果如图01所示。 图01 3、进入图层控制面板，在控制面板下方单击“创建新的图层”按钮，生成新的图层“图层1”，选择工具箱中的“横排文字工具”，在文件窗口中输入文字，效果如图02所示，按确认键，文字变为选区，效果如图03所示。 图02 图03 4、单击工具箱下方的“以快速蒙版模式编辑”按钮，使图像进入快速蒙版状态，效果如图04所示。 图04 5、执行菜单栏中的“滤镜”“像素化”“晶格化”命令，在弹出的“晶格化”对话框中，将单元格大小选项设为7，如图05所示，单击好，效果如图06所示。 图05 图06 6、单击工具箱下方的“以标准模式编辑”按钮，使图像退出快速蒙版状态，效果如图07所示。 图07 7、打开一幅报纸图片，并调整它的色相/饱和度，效果如图08所示。执行菜单栏中的“编辑”“定义图案”命令，在打开的对话框中单击确定，将报纸定义为图案。 图08 8、执行菜单栏中的“编辑”“填充”命令，打开填充对话框，设置参数如图09所示，选择自定图案为报纸图案，单击确定，文字效果如图10所示。 图09 图10
抽线效果新思考
Photoshop中的混合模式是其理解难点，它的实质是一种特殊形式的看不见蚁行线的选择。通过混合模式，可以以确定的方式决定哪些色阶的像素被屏蔽或者改变，因此，了解混合模式的作用机理，对用户有的放矢地使用PS达到目的非常重要。下面通过一个实例，说明如何使用PS中的颜色减淡模式抽出图像中的线条，以及由此引发的思考。 打开图像。 将“背景副本”的图层混合模式由正常变为“颜色减淡”，文档似乎变得空无一物，但是细心的读者会发现图像上还有一些黑色的杂点。想一想这是原图中的什么色阶的像素？
最新发布
IE 下 href 的 BUG
在浏览器 IE6 、IE7、Firefox2+、Firefpx3+、Opera9.6+、Safari3.1+中测试以下代码（Demo）：<div id="test"> <a href="#"> test </a></div><div id="result"></div><script type="text/javascript">(function(){ var test = document.getElementById('test'); alert(test.innerHTML); var result = document.getElementById('result'); result.innerHTML = test.innerHTML; alert(result.innerHTML)})();</script>结果会发现，在 IE6、IE7 浏览器中第二次弹出的 result.innerHTML 中的 A 元素的 href 值成为了绝对路径。其实先人们早遇到这些问题（感谢 玉伯 提供的资料）：在上面的文章中已提及了处理方案，就是在 IE 下使用 getAttribute( ‘href’ , 2 ) 方法。 Microsoft 给此方法扩展了第二个参数，可设置为 0、1、2，如果设置为 2 ，则返回属性原始值。脚本修正为：(function(){ var test = document.getElementById('test'); alert(test.innerHTML); var result = document.getElementById('result'); result.innerHTML = test.innerHTML; if(/*@cc_on!@*/0 ) { //if ie var links1 = test.getElementsByTagName('a'); var links2 = result.getElementsByTagName('a'); for(var i = 0, len = links1.length; i < len; ++i ) { links2[i].href = links1[i].getAttribute('href', 2); } } alert(result.innerHTML);})();在寻找此问题的过程中还搜索到 Hedger Wang 发现的一个有趣的 BUG 问题：在 IE 中当重新设置新的 href 属性值时，如果链接文字含有 “http://” 或 “@” ，则其 innerHTML 将显示不正确，显示成设置的 href 属性。解决方法（sHref 为要设置的 href 新值）：sHref = 'http://www.hedgerwow.com';var isMSIE = /*@cc_on!@*/false;if( isMSIE ){ sHref = ' ' + sHref; //add extra space before the new href};
HTML：大厦的基石
在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话，网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来，学HTML就像是学英文字母ABC一般简单。正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用<B />标签，斜体用<I />标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据<h />标签来显示成标题，根据<p />标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。
HTML：WEB标准的误解
在HTML4 Elements*计有91个标签，然而在这么多的标签中经常被使用到的标签不到四分之一，在这些常用的标签中有两个标签是属于最通用型的——div、span，这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中，再加上之前很多人直接把WEB标准误解为就是div+css，于是在一个页面里出现了特多的div或者是span标签，尽管这些地方本身有更符合语义的标签来实现。Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。于是Web标准中的结构标签几乎变成了div的秀场。div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。明明<strong />标签可以实现粗体样式，为什么还要用<span />标签再搭配粗体样式去实现呢？
HTML：WEB标准从头开始
在较早之前的网页上，我们经常可以看到如下的网页结构代码：<html><head><title>这是一个网页</title><meta name=”…” content=”…” />……</head><body>……</body>
PSD网页模版转化XHTML的一些理论知识
一.每个psd源图都有三种配色方案，要求按照同样规格分别切图，且三种配色切出的同一区域图片命名必需相同；二.按照配色方案建立三个以颜色命名的文件夹，每个文件夹里面放置“配色方案”制作成网页所需的资料；三.每种配色方案文件夹中包含的必需内容：images，css，headers，buttons文件夹和二个html文件以及两张大小网页效果图；所有命名按照样例进行，自定义内容可以自由命名。四.网页布局，所有网页都由以下几部分组成：页头（logo、headers）1级导航条（buttons）2级导航条（buttons）页面内容区（ 内容区用于显示英文网页）页脚（底部菜单、copyright）根据psd文件决定制作的区域，源图中绘制出的区域必需制作出来，没有的区域（有些没有2级导航条，有些没有页脚）不需要用制作。五．第一个html文件制作要求：命名html.html整个页面要制作在一个表格之内。页头：可以把header制作成背景，或者有些header图片属于不规则图形也可以切成几部分来处理，要尽量减少切割次数。Logo区域单独制作在一个表格内（可以限定表格宽度）；logo分为三部分logo图片、公司名称、公司标语；页面里公司名称需要输入40个大写W字符，公司标语也需要输入40个大写W字符；一级导航一级菜单（导航）中的内容必需制作在一个独立的表格内；不得设置单元格的宽度和高度；页面中必需制作六个一级菜单的项目，每个项目里面输入20个大写W字符（可以采用6个W加一个空格的方式输入）；按钮图片需要制作出超连接的三种状态变化（根据psd图，有些可能只有两种状态）；每一项里的图片和文字必需制作在一行里面可以使用br使他们产生分行显示效果。二级导航（竖导航）二级菜单（导航）中的内容必需制作在一个独立的表格内；不得设置表格的高度；按照样例制作；页面中必需制作10个二级菜单的项目，每个项目里面输入20个大写W字符（可以采用6个W加一个空格的方式输入）；文字链接最少需要制作出超连接的二种状态变化。页面内容区输入足够多的英文字符使页面撑开达到（在1024×768的屏幕下使用的ie浏览器出现左右上下拉伸条）页脚版权信息区域输入40个大写W字符。为页面美观要于上下区域保留一定的距离。底部菜单二级菜单（导航）中的内容必需制作在一个独立的表格内；不得设置表格的高度；按照样例制作；页面中必需制作六个二级菜单的项目，每个项目里面输入20个大写 W字符（可以采用6个W加一个空格的方式输入）；文字链接最少需要制作出超连接的二种状态变化；为页面美观要于上下区域保留一定的距离。六．第二个html文件制作要求：命名html2.htnl复制第一个html文件，删除里面的部分内容，保留三个一级导航、二个二级导航（竖导航）、三个底部菜单，每项里面出现6个字符；页面内容区保留两行英文字符（不撑开页面）七．在上述情况下两个页面要保持统一效果，背景可以实现循环；Header图片居中显示或者可以扩展（有些header区域可以制作背景）八．公司名称，公司标语，内容区页标题，与第一级和第二级的菜单字体如应该用标准的系统字体，例如：Tahoma或者 Arial,九．建立模板目录时，请在“工具”-〉“文件夹选项”-〉“察看” 里勾选“不缓存缩略图“的选项，这样模板zip 包内才不会包含多余的缓存文件.十．style.css 文件不能包含任何图片连接（实例: background-image: url(’../images/bg.gif’);），不能包含 html tags 的定义（例如css里面不应该对 进行定义如果要应用在上， 可以直接写在 html 的 标签里）十一．html 的 charset 编码必须为 utf-8十二．所有的（包括样式表和HTML）字体大小必须用Points(pt) 而不是像素（pixels), 最小大小为 8pt, 例如 font-size: 8pt.十三．模板内的元素（div 等）不能使用绝对定位，也不能包含JavaScript。十四．所有模板在浏览器IE, Mozilla, Opera效果相同十五．模板文件内的所有图片路径必须为相对路径。相对于”颜色“路径， 例如： blue 下的 images 下的文件，应该写为 < img src=images/xxxx.gif > 而不是 < img src=blue/images/xxxx.gif >十六．在特殊psd里有的无法容纳 40 个大小W字母的时候公司名和口号字体可以缩小， 但不能小于 8pt.十七．模板在高度上必须要填满整屏，对于没有内容的也一样（使内容部分能够垂直的延伸）十八．所有区域必需添加背景颜色（按照psd图进行）十九．不能出现空格符二十．所有属性值必须加在 “ ”里面。二十一．凡不成对出现的标签都要加 / 例如：应该写成< img src=****** >应该写成< img src=******/ >
怎样解决DIV层被Flash动画遮盖问题？
就成了，我加完后在IE下问题是解决了，但是FF下好像没有反应，后来才知道IE中和FF加的代码是不一样的，如下： IE浏览器下可用 firefox下可用 关于wmode属性资料： (可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。 "Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互，并且始终位于最顶层。 "Opaque" 使应用程序隐藏页面上位于它后面的所有内容。 "Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来，并且可能会降低动画性能。 "Opaque windowless"和"Transparent windowless"都可与 HTML 层交互，从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明，因此，如果 SWF 文件的某一部分是透明的，则 SWF 文件下方的 HTML 层可以透过该部分显示出来，而"opaque"则不会显示。
24个漂亮的个性化HTML表单技术
Checkbox 与 Radio Buttons 相关 1.) FancyForm FancyForm 是一个非常强大的 JavaScript 库，可以作为 checkbox 和 radio button 的替代品，能生成非常漂亮的 checkbox 和 radio button，并支持几乎所有浏览器，该 JavaScript 库需要 MooTools JavaScript 框架的支持。 2.) CRIR: Checkbox & Radio Input Replacement 这个 JavaScript 和 CSS 组合可以隐藏表单中的 checkbox 和 radio button，并允许你使用 CSS 对 checkbox 与 radio button 的设置式样模拟 checkbox 和 radio button。表单的功能不会改变，仍可以收集 checkbox 和 radio button 的数据值，checkbox 和 radio button 的标签会触发那些隐藏的对象。
如何全面清理浮动？
清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了，下一个专题再写)。对应的 DEMO粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）最后，列举完毕。然而我想有必要和大家道歉，关于之前转载鬼的那篇文章；非常后悔的是当初改了鬼的标题将“最简单”改成了“最优”，以致于后面误导了很多的同学。所以重新写了一篇给大家分享。
select控件是如何设计的？
有几个原因促使我们使用自定义的select控件来代替原生的select控件：先把用HTML+CSS把select控件的外观模拟出来：这儿用到一张图片arrow.gif运行代码框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <style> body, table, input, textarea, select{ margin: 0; font-size: 12px; line-height:1.5; font-family: Tahoma, SimSun, sans-serif; } .zSelect { display:inline-block; *zoom: 1; *display: inline; position:relative; height:20px; vertical-align:middle; } .zSelect .inputText { line-height: 17px; font-size:12px; background: #f7fafc; padding: 1px 17px 0 1px; border: 1px solid #68a; vertical-align: top; cursor:default; height: 17px; margin:0; } .zSelect .arrowimg { display:inline-block; *zoom: 1; *display: inline; position:relative; cursor:pointer; width:18px; height:20px; left:-18px; margin-right:-18px; vertical-align: top; outline:none; background: url(/design/UploadFiles_design/201105/2011050809104370.gif); } .zSelect .arrowimg:hover { background: url(http://www.blueidea.com/articleimg/2009/06/6794/arrow_over.gif); } .optgroup { position:absolute; z-index:666; left:0; top:19px; color: #369; } .optgroup div.optionsDiv{ padding:1px; overflow: auto; overflow-x: hidden; max-height:300px; color: #369; border: 1px solid #678; background: #f7fafc; width:auto; z-index:888; filter: Alpha(Opacity=90); opacity: 0.9; } .optgroup a, .optgroup a:visited{ font-size:12px; text-decoration:none; cursor:default; display:block; color: #369; white-space: nowrap; padding:1px 3px 2px 6px; _padding:0 3px 0 6px; height:18px; min-width:2em; } .optgroup a:hover,.optgroup a.selected:hover{ color: #dff; text-decoration:none; background:#38d; } .optgroup a.selected,.optgroup a:focus{ color: #eff; text-decoration:none; background:#49e; } </style> <script> function switchOptions(ele){ var optgroup=ele.parentNode.getElementsByTagName('div')[0]; if(optgroup.className=="optgroup")optgroup.style.display=optgroup.style.display=='none'?'block':'none'; } </script> <div>当前站点: <span id="_SiteSelector" class="zSelect"> <input type="text" class="inputText" value="请选择演示站点" style="width:100px;" unselectable="On"/><img height="20" width="18" class="arrowimg" src="http://www.ps123.net/design/UploadFiles_design/201105/2011050809104370.gif" onClick="switchOptions(this)"/> <div class="optgroup" style="width:120px;"><div class="optionsDiv"> <a href="javascript:retureValur(this);">*门户类演示站</a> <a href="javascript:retureValur(this);">新闻门户类演示站</a> <a href="javascript:retureValur(this);">企业形象类演示站</a> </div></div> </span> << </div> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]OK，在ff3下测试通过，在ie6、ie7下有一些错位，需要加CSS hack来作小许的调整，为了代码的纯粹，在这就不展示了。 接下来试着用js实现基本功能：通过JS替换页面内原有的select，当时我们希望这个JS是非侵入式的，只要引用了select.js这个js文件的页面，就自动把页面里原有的select控件替换接管了。
Web浏览器模式的选择机制
为了处理根据Web标准创作的网页和根据盛行于20世纪90年代末的旧时实践创作的网页，当代的Web浏览器实现了各种不同的引擎模式。本文说明了那些模式是什么以及如何触发它们。原文：Henri Sivonen的Activating Browser Modes with Doctype本文包括的模式转换（mode switching）适用于Firefox和其他基于Gecko的浏览器，Safari、Chrome和其他基于Webkit的浏览器，Opera、 Konqueror、Mac版Internet Explorer、Windows版Internet Explorer和内嵌IE的浏览器。避免提及浏览器引擎的名字，取而代之的是使用该引擎最知名浏览器的名字。本文着重介绍模式的选择机制，而不是记录每个模式的确切行为。以下是各种不同的模式：text/html内容的模式选择取决于doctype嗅探（doctype sniffing，本文后面有讨论）。在IE8中，模式也取决于其他因素。然而在IE8的默认情况下，那些不在微软提供黑名单上的非局域网（non- intranet）站点的模式取决于文档类型。再怎么强调每个浏览器中模式精确行为的不同也是不过分的，即使本文中进行了统一的讨论。Firefox、Safari、Chrome和Opera中，application/xhtml+xml HTTP内容类型（不是meta元素也不是doctype!）会触发XML模式。在XML模式中，浏览器尝试给XML文档在规范上的正确处理达到在制定浏览器中的程度。