推荐阅读

CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面,画面以绿色调为主,通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感,并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感,制作时通过为图形添加阴影效果,拉开了画面的层次,给人一种纵深的空间感。如图3-3所示,为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤:绘制远景植物(1)启动CorelDRAW,新建一个工作文档,在属性栏中将“微调偏移值”设为0.1mm,其他参数保持系统默认。然后使用“矩形”工具,在视图中绘制矩形。如图3-4所示。

Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层,参数如下 选用较暖的明暗色作为叠加层,确定后把混合模式改为“叠加”,不透明度改为:30%,如下图。2、创建色彩平衡调整图层,参数及效果如下图。

(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】,如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项,大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项,需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则,如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意,末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构,即一个汉字字符已携带完整含义,而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大,因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离,若设为自动,间距将会跟随字号的改变而改变,若为固定的数值时则不会。因此如果手动指定了行间距,在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生,下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮,横向缩放相当于变胖和变瘦,数值小于100%为缩小,大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距,它们的作用都是更改字符与字符之间的距离,但在原理和效果上却不相同。我们可以动手来理解它们的区别,新建一个足够大的图像,打上simple这几个字母,字体为黑体,大小为72像素。如下图左端所示,我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄,但其左右的字距也较大,这样做是为了保证每个字符占用的宽度一致。否则,较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候,Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变,也就是说,对于同一个字体来说,字号越大,字符之间的距离也越大。反而反之。那么,字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100,所有的字符间距都减去100,字符就互相靠拢了。但是这样做并没有改变疏密不同的情况,尽管mp已经是互相紧靠着密不透风,但pl还是有很大的距离。当然,如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右),但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解:假设mp原来的距离为100,pl之间的距离为300,当字符宽度设置为-100的时候,mp之间的距离为0,pl之间的距离还有200。要令pl之间的距离为0,字符宽度必须设置为-300,但同时mp的距离必须为-200,所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意,只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是:当比例间距设为50%,相当于所有字符间距减半(mp间距为50,pl间距为150),当设为33%的时候,所有字符间距减为原先的三分之一(mp间距约为30,pl间距为100),当设为100%的时候,所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离,使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时,这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整,常用来制作上标和下标。正数为上升,负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的,它的作用也和文字形式一样是将字体作加粗、加斜等效果,但选项更多。即使字体本身不支持改变形式,在这里也可以强迫指定。它与字体形式可以同时使用,效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写,但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似,就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。

用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片,复制图层,将 背景 层锁定。我们将在复制层进行抠图,隐藏背景层。选择 >> 色彩范围,打开色彩范围窗口,选择最左边的吸管工具并点击图像背景,这时在色彩范围窗口中你会发现被选择部分变成了白色,移动颜色容差滑杆,使得图像大部分区域变成黑色,并且背景易于选取。提示:要添加颜色到选区时,应使用中间的吸管工具点击要添加的色彩部分2 获得选区,在通道面板中,按下“将选区存储为通道”按钮,得到一alpha通道,取消选择(Ctrl+D),点击“Alpha 1”层,这时图像变成黑白色。提示:图像中的黑色区域是我们要保留的部分,白色为要扣除的部3 这时我们发现图像中还有部分灰色区域,这些将成为半透明区域,所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶,打开色阶窗口,由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度,涂抹需要保留的区域,用白色笔刷涂抹羽毛边缘,根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布

网页设计时超级链接target=_blank的使用
虽然已经是个很古老的议题了,不过感觉依然有很多站长朋友在做网站的时候并不是非常注意这种细节,使用target=_blank并非绝对错误,不过为了提高网站的可访问性,应该分场景探讨如何减少新开窗口。抛开某些不合逻辑意图不论,为什么大量使用弹出页面?因为设计师担心用户迷失方向。为什么用户会迷失方向?因为导航系统不够好。为什么导航系统不够好?因为产品功能太多太乱。为什么功能太多太乱?因为需求没控制好。为什么需求没控制好?因为提需求的人自己也没想清楚。说白了,很多场合都不仅仅是设计师的问题,因此只能选择不断妥协用劣质方案堆砌豆腐渣结构体系。快节奏中有些事情没法避免很正常,但设计师应该尽责做到迭代式的全局统筹重构。应该强制target=_blank1.文件下载链接2.文件打印链接3.非主线任务并打断进程的链接以上参考淘宝的老包同学在08年总结符合国情的链接新窗口打开中的应用场景。下载各种文件、打印各种文档,需要前后对比的帮助,注册表单的隐私条款都有必要target=_blank。能够定论target=_blank必然提升用户体验的场景很少,并且个人认为随着客户端技术的发展,会被逐步取代。比如lightbox这个ajax应用,给设计师带来了“查看大图不用再新开窗口”的全新设计理念,这在以前是不可想象的。可选择target=_blank

HTML教程:marquee标签实现滚动效果
说了这么多年的 Web 标准,似乎类似 marquee 这种非常规的标签,已经逐渐淡出视线,不过芒果刚刚在项目中用了这个蹩脚的标签,我觉得这是合理的善用,没必要顾忌太多的标准问题。标准并不是一项技术,标准只是一种规范与提议。既然如此,我们尚且撇开 Web 标准不谈,着眼于应用,无需 JavaScript 的掺和,marquee 标签对滚动效果的实现方便简练。代码示例:<marquee>这是一个滚动示例</marquee> 属性参数:direction表示滚动的方向,值可以是 left,right,up,down,默认为 leftbehavior表示滚动的方式,值可以是 scroll(连续滚动)slide(滑动一次)alternate(来回滚动)loop表示循环的次数,值是正整数,默认为无限循环scrollamount表示运动速度,值是正整数,默认为 6scrolldelay表示停顿时间,值是正整数,默认为 0,单位是毫秒valign表示元素的垂直对齐方式,值可以是 top,middle,bottom,默认为 middlealign表示元素的水平对齐方式,值可以是 left,center,right,默认为 leftbgcolor表示运动区域的背景色,值是 16 进制的 RGB 颜色,默认为白色height、width表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认 width=100%,height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动出于用户体验的考虑,当鼠标移入暂停滚动的效果可以使用 JavaScript 独立出来。

网页设计师制作网页注意的10个技巧
这片文章大体概括了一些设计网页中的大问题。希望能给你做下一个网页时给予一些儿启发。1.记住:你能掌控的时间是有限的我仅仅用4秒钟就能浏览完平常的页面,因此,你没有足够的时间吸引用户并让他们继续浏览你的网站。也就是说你应尽可能准确的描述你设计的网站是关于什么的。如果它需要让浏览者花费更多的时间去弄明白此网站是关于什么的,他将放弃并离开。2、记住:用户是略读页面当你进入一个房间时,你不会具体的看每一样东西的外表。首先你会注意屋子里面人或物的外形,你环视整个屋子,然后找令你敢兴趣的东西。在第一次浏览网站的时候也会发生类似的事儿,浏览者或用户首先是大体浏览一下。这就需要你引导用户去你想要让他们去的地方。它可能是个登陆按钮、更多内容按钮、或博客文章等等3、网站的左上角是最明显的位置这是大家公认的事实。主要原因是大家都是用这种习惯方式来读书读文章的(从左上角的位置开始),另外早期的网站和应用软件也是基于此方法进行设计开发的。我们通常会把LOGO放在左上角,这样是很好的。但是考虑一下加入一个或者两个其他的元素在这个位置让它看起来更明显(注册的链接、搜索的表单、标语等)。4了解“F”结构一些视觉跟踪调查研究证明,用户浏览网站的视觉路线类似于字母“F”型。最顶部的位置总是能被看到,中间区域仅有一半被看到,再往下只有左边一部分能被看到。当你在设计的时候不知道将一个内容块放到社么位置的时候,你可以去考虑一下这一因素。5.了解用户忽略什么用户都是对广告视而不见的。他们习惯于忽略图片广告和文字广告。避免设计的东西看上去像广告,同时,用户也会忽略大块的文字区域。没有人有时间(更确切的说是耐心!)去阅读大片的文字,他们仅仅是了解页面文章的大意。6.文字和图片一个有趣的事实是。文字比那些绝妙的图片更能够获得注意!如果你想向你的用户传达信息,我建议你使用大的标语文字来代替那些很炫的头部图片……7.用设计元素来吸引注意来吸引注意的好的元素是文字口号,行动纲领的按钮(通常用亮色调),分成1-2-3级,或者就是一个普通的列表……如果你在写一篇很长的文章,很重要的一件事情就是你要去找小标题。小标题比其他的内容容易获得关注。使用恰当的标题,通过这简单的步骤向用户阐述这篇文章的主题。8.文字格式恰当的文字格式的编排更有意于阅读。不要担心使用过多的段落、加粗、斜体、引用、下划线或者字母大小写……它们都可以让文字块更有视觉冲击力。当然,你也需要用格式化强调一些你认为很重要的文字或者句子,这些能够引导你的读者阅读完全文。9.使用简洁图片我前面已经提及过用户对广告是视而不见的。当你在设计过程中使用到图片时,要确保它们不要杂乱、令人讨厌或不被理解。大部分人感觉看杂乱、色彩花哨的图片是比较费劲儿的。图片应该简洁、易理解的。你使用人的脸部图片更容易引起用户的注意,尤其当图片人物的眼睛盯着用户。当然你也可以用目光的方向来引导用户关注某一个方向。

网页设计师必须知道的XHTML代码编写技巧
本文总结了30条HTML代码编写指南,只要在编写HTML代码的过程中牢记它们,灵活运用,你一定会写出一手漂亮的代码,早日迈入专业开发者的行列。1. 一定要闭合HTML标签在以往的页面源代码里,经常看到这样的语句:<li>Some text here.<li>Some new text here.<li>You get the idea.也许过去我们可以容忍这样的非闭合HTML标签,但在今天的标准来看,这是非常不可取的,是必须百分百避免的。一定要注意闭合你的HTML标签,否则将无法通过验证,并且容易出现一些难以预见的问题。最好使用这样的形式:<ul><li>Some text here. </li><li>Some new text here. </li><li>You get the idea. </li></ul>2. 声明正确的文档类型( DocType )笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:1. 验证CSS文件,解决所有可见的错误 2. 加上文档类型 DoctypeDOCTYPE 定义在HTML标签出现之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合出现,这样浏览器才能正确的解析标记。通常有四种文档类型可供选择:1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">关于该使用什么样的文档类型声明,一直有不同的说法。通常认为使用最严格的声明是最佳选择,但研究表明,大部分浏览器会使用普通的方式解析这种声明,所以很多人选择使用HTML4.01标准。选择声明的底线是,它是不是真的适合你,所以你要综合考虑来选择适合你得项目的声明。3. 不要使用嵌入式CSS样式当你在埋头写代码时,可能会经常顺手或偷懒的加上一点嵌入式css代码,就象这样:<p style="color: red;">网页教学网</p>这样看起来即方便又没有问题,但是它会在你得代码中产生问题。

简单学习认识HTML5标签
HTML是人们在万维网上沟通和交流所必须要使用的核心标记语言。最新版本的超文本标记语言HTML5已经带着新的功能和要素推出了,这里提供一些信息供您学习HTML5.HTML5是基于HTML4.01,XHTML1.0和DOM级别2HTML的下一代推荐标准。它的目标是减少对专有RIA技术的需要,就比如Adobe Flash, MicrosoftSilverlight 和 Sun JavaFX.这个改进HTML的想法由WHATWG始于2004年且现在还在继续,虽然一些改进的部分已经完成并被使用了,但这是一个持续性的工作,将会持续很多年。它当然拥有一系列新元素和属性去改进现代的网站,一些基本元素已经被增加包括为一些通用块和内联元素的语义替换。其他元素将会在标准化接口下运行,比如<audio>和<video>元素。当你学习了HTML5,你会发现有很多元素已经从HTML4.01中被淘汰。其中一个特性就是关于<font>和<centers>的表象元素已经被CSS功能替代了。最后,你会发现HTML语法已经不再基于SGML,现在变成了和SGML文档类型声明很像的一种新的引导语句,使用“DOCTYPE sniffing”语句则允许在所有的浏览器中使用标准统一的语言。在一个升级改进后的软件或程序版本中找到新的元素和附件总是另人期待的,同样的在HTML5中你会找到新的标签。最新版本在通过如何操作不同的HTML元素上制定了明确的规则,降低了开发成本的同时提升了协同工作功能.在万维网语言中有几个不同的元素具备了新的功能。一些新的功能用于插入音频、视频、图片,客户端数据存储和交互式文档。此外,你会发现像,,等新的元素。你将会找到HTML5利用了超过100种新的HTML5标签。你会发现一些新的标签是用于定义一则评论,文档类型,超链接,文本,主体元素等等。正如刚刚提到的,HTML5有多个新标签帮助我们定义娱乐功能。在这一领域一些新的标签包括<video>,<img>是为图片使用的,<canvas>则是描述图片,还有<audio>用于定义声音文件。在越来越多的网站在其网页上支持视频和音频播放的时候,认识并了解这些标签是必要的。

XHTML5实例:HTML5的表单验证
在网页加载完成是,光标自动聚焦在用户需要输入的地方,比如邮箱登陆页面的输入用户名,之前我们需要在网页onload的时候来用javascript代码指定某个输入框获取焦点的做法,现在html 5直接支持在输入框中加入autofocus属性。之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息,现在只需要增加一个placeholder属性。判断必填项判断数据格式可以直接拖动,可以设置最小值、最大值、以及每拖动一格的步长。

HTML5教程:HTML5的基础写法
对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西。•文档声明更简单了。1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <!--在HTML5中,这样写:--> 3 <!DOCTYPE html> •html标签上不需要声明命名空间。1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 2 <!--在HTML5中,这样写:--> 3 <html lang="zh-CN"> •字符集编码声明也简单了1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 2 <!--在HTML5中,这样写:--> 3 <meta charset="UTF-8" /> •可以不用给css及javascript代码写type属性了1 <script type="text/javascript"></script> 2 <style type="text/css"></style> 3 <!--在HTML5中,可以直接写:--> 4 <script></script> 5 <style></style> •没有XHTML代码规范的要求

PSD模板转XHTML/CSS文档教程
继上篇”碳纤维风格的插入式导航菜单“,Richard Carpenter把菜单图片转化为CSS/HTML文档了。我们就一起接着学习吧!查看CSS/HTML完整版,请点击这里:在我们开始切割图片之前,先在本地web服务器上布署文件,创建文件夹,在新建的文件夹中新建空白HTML文件”index.html”,空白CSS文件”styles.css”,styles.css放在另一个文件夹”stylesheets”中,最后再新建文件夹”images”存放图片。用代码编辑器打开html文件,在标签”BODY”内新建DIV,设置ID属性为”container”,此DIV将是所有元素的容器,代码如下:在”container “DIV内创建另外一个DIV,ID属性为”nav”,是包含所有导航元素的容器,代码如下:在”nav”DIV内创建一个简单的UL无序列表,设置UL的class属性为”navigation”,每个列表元素(LI)也设置不同的class属性,根据class属性来设置LI的样式。代码如下:

网页设计中的常用表单设计技巧
“输入框( Input )应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。”– 《HTML权威指南》Web应用程序总是利用表单来处理数据录入和配置,但并不是所有的表单都保持一致。输入区域的对齐方式,各自的标签(label),操作方式,以及周围的视觉元素都会或多或少影响用户的行为。表单布局考虑到用户完成表单填写的时间应当尽可能的短,并且收集的数据都是用户所熟悉的(比如姓名、地址、付费信息等),垂直对齐的 标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉,并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动:下。在这种布局中,推荐使用加粗的标签,这可以增加它们视觉比重,提高其显著性。如果不加粗的话,从用户的角度讲,标签和输入框的文字几乎就一样了。如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难(比如一个地址的多个组成部分),左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了,而不会被输入框打断思路。但这样一来,标签与其对应的输入框之间的距离通常会被更长的标签拉长,可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。于是产生了一种替代的方案,标签右对齐布局,使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家,人们习惯于从左至右的书写,所以这种右对齐的布局就给用户造成了阅读障碍。

预览:Dreamweaver CS5新功能更新列表
Dreamweaver CS5新功能更新列表: 1、集成 CMS 支持 尽享对 WordPress、Joomla! 和 Drupal 等内容管理系统框架的创作和测试支持。 2、CSS 检查 以可视方式显示详细的 CSS 框模型,轻松切换 CSS 属性并且无需读取代码或使用其他实用程序。 3、与 Adobe Browserlab 集成 使用多个查看、诊断和比较工具预览动态网页和本地内容。 4、PHP 自定义类代码提示 为自定义 PHP 函数显示适当的语法,帮助您更准确地编写代码 5、站点特定的代码提示