推荐阅读
详细解析多终端产品视觉一致性
随着智能终端的多样化和快速普及，越来越多的产品都面临着多终端的挑战。那么视觉设计师应该如何去把控好多终端产品的设计?如何让多终端的产品做到具备一致的品牌识别性?这是我想跟大家一起探讨的话题。首先对于”一致”一词，本人诠才末学，只能说是在自己目前的层次上去解释这词，请不吝赐教，相信探讨完后会让我更上一个层次。什么是视觉一致性?一致，即整体、统一。在我看来，它与对比是形成了互斥的矛盾关系，但两者同时也是相辅相成的。因为两者的和谐存在，才能形成所谓的美感。物质形态如果在形成中缺少了对比那会显得枯燥乏味，如果缺少了一致也会显得杂乱无章，所以两者是不可或缺，但需要调和。所以说，美就像是走在钢索上的人，两边都是陷阱，要走下去就必须保持两边的平衡。笼统上讲，视觉一致性就是通过视觉层次、比例、颜色、质感、排版等在设计上达到一致性。我们也可以从生活中找到些体现一致性的例子，而视觉一致性可以提高产品所塑造的品牌形象，一定程度上减少用户的认知成本。好比你进去LouisVuitton的店铺时，你不可能会看到有Chanel或者其他品牌风格的包包罗列在里面吧，LouisVuitton同一个系列的包，从手提包到肩包到行李箱，虽然产品上略有不同，但它们的细节和气质都是一致的，标识图形、埃尔泽菲尔字体以及颜色已经形成了其品牌的识别符号。甚至其衍生产品也都保留着LV独有的气质。我不是一个网游爱好者，但对游戏界面略有研究。当你在玩2D的阿拉德欧式风格的游戏，途中突然弹出一个3D的很唯美的又带有东方古典风的广告弹窗，肯定会觉得很不和谐吧。当你使用游戏中的充值币时，细心点你会发现消耗充值币的动画与消耗游戏币、消耗体力等消耗类的动画效果是一致的。其实每一款好的游戏界面都必须做到相关元素一致性、风格一致性、色彩搭配一致性等，这样才会给用户带来好的体验。还有就是你常看到的系列广告，他们系列感也是可以通过好些方式(画面表现手法，内容板式，slogan的位置等)来体现出视觉一致性，让用户可以直观出同一个产品的系列广告。
用美图秀秀怎么修改gif图片尺寸裁剪gif大小
gif设计的时候，是一组相同尺寸的图片，加上动图效果生成的动图。那么要修改其尺寸，且不破坏原有的动图效果，那么就需要找到合适的软件才能完成，本文使用美图修改动图，也是为了能够让大家轻松掌握，虽然不能像裁剪图片那般容易，但一些技巧还是有一定的借鉴意义的，希望看完本篇教程，能够给您启发。 1、使用的还是v4，v5最新版不支持此种操作，美图官网直接点击【立即下载】，安装完成后启动软件。 2、首先用美图打开动图，以静态图片的形式展示，目的是为了确定裁剪尺寸。下图中打开gif图片，提示显示为静态图片，点击确定即可。 3、图片打开之后，如下图所示，我们只需要中间的区域，点击裁剪按钮， 4、通过拖拉选框，找到合适的位置，比如下图中，中间图案的尺度为140*90，我们的目的就是把gif裁剪为此尺寸。 5、点击右上角的【新建】按钮，弹出的界面上，输入上面获取的宽度和高度值，背景色选为【透明】，点击应用按钮， 6、创建出的画布上，单击右键，点击弹出的【插入一张图片】，选中gif图片。 7、因为固定了画布大小，所以只需要移动gif图到合适的位置，露出需要的图案部分即可，然后点击右上角的【保存与分享】按钮， 8、弹出的界面上，可以看到默认展示的动图缩略图，以及后缀名为gif，更改路径和文件名之后点击保存即可。 如果只是修改gif图片的尺寸，那么就更为简单了，只需要新建画布，拖拉缩放gif图片保存即可，如有疑问可以在下方留言。
Illustrator CS5初学者必读（15）复杂无缝贴图
在上节内容中制作了较为简单无缝贴图，在本节内容中，继续为朋友们讲述使用裁切标记，制作较为复杂的无缝贴图的方法。为了更加便于朋友们理解这个命令的应用原理，我精心的为朋友们安排了实例，在开始教程的学习之前，请先在网站下载配套的练习文件，以便跟随操作步骤学习。（1）执行“文件”→“打开”命令，将“复杂图案.ai（2）在“图层”调板中，复制“背景”图层。（（4）执行“对象”→“创建裁切标记”命令，创建裁切标记。
Painter9.5+友基绘影绘制卡通人物漫画
工具：Painter9.5+ 友基绘影ⅡPF8080 1.首先要完成线稿，漫画类的和写实的不同，线稿很重要。要有耐心，因为最后线稿不会覆盖全部显示的出来 图1 2.提线条 打开PS，将线条和之后要上色的图层分开，涂色的时候不要伤到线稿~，直接把背景图层复制到上一层，将模式改为正片叠底，然后把背景图层清空。将线稿调整颜色。 完成。 图2
最新发布
首次完整小型站点架构的心得体会
http://www.jzfestival.com/你现在看到的是我对近学习标准化网页设计几个月的一个测试结果。这次我力争将内容与样式分离及考虑到尽可能多的重用性，在图片压缩上也花了很大功夫，但最终因为设计稿在制作的过程中没有考虑到的一些原因导致某些图片压缩效果不够理想。不过总体来说我自己对这次的作品还是很满意的，还希望前辈们给我泼泼冷水。以下总结一下这次项目过程中的一些心得：第一，等对整体有个了解后再开始。随说现在的网页设计已渐渐趋向于根据内容及结构出发来设计页面了，但不可否认大部分人还是在根据设计师给我们的的 psd 上去实现的过程中。因此这次对于整个网站框架的设定是等了 3 个页面（首页，分类导读页，内容页）设计稿出来之后才开始的，这样能在对整个网站有更全面些了解的基础上去考虑问题。第二，在对图片进行压缩的过程中有些小技巧的发现。对于色彩使用不多，渐变较少的图片压缩时，可以尽量选择 png8 的方式进行导出，当然在使用的颜色模式上根据具体效果进行调整，你会发现文件大小会比同等效果的 gif 小很多。然后就是对于透明 gif 及 png 图片的导出，往往会出现锯齿，特别是文字，这个时候可以尝试两种方式：1.如果欲导出的图片在要使用的地方背景是单色的或者颜色不多变，可以在导出的时候在杂边处选择和背景一样的颜色即可，通畅会好很多。2:如果导出后的图片是要用在背景色变化比较大的背景图片上面时，你可以考虑给图片加上一像素的阴影，这样即可防止锯齿的出现。第三，对于多出使用的一些背景图片，最好能在同一张大图上进行制作，然后通过 background-position 属性来定位到要使用的背景位置，这样第一可以防止鼠标滑动效果时可能因为网速问题导致的短暂空白现象，第二可以很方便的对网页整体效果进行调整，只要对这张背景图集合图片进行如饱和度等下调整即可改编整个网站的风格，减低了改版成本。第四，在对下属无指定样式的标记进行样式设定时进行段落缩进。这点也可能是因为做程序员的原因，感觉这个方法能更清晰的了解整个样式代码。这个问题大家看看图就会明白了。div.box_top { background-position:top right; padding:4px 0 0 4px;} div.box_top h2 { background-position:top left; margin:0; padding:0; }div.box_inner { background-position:bottom left; margin-right:4px; padding:0 0 4px 4px;} div.box_inner dl { border:1px solid #cad3e2; } div.box_inner dl dt { position:relative; background:url(../images/bg_common.png) repeat-x 0 -20px; font-size:12px; height:25px; line-height:1.8em; padding:0 10px 0 18px; color:#666; } div.box_inner dl dt em { position:absolute; top:-2px; right:10px; font-style:normal; font-size:9px; } div.box_inner dl dt span { color:#c00; } div.box_inner dl dt span a{ color:#c00; } div.box_inner dl dd { clear:both; padding:8px 10px 5px; font-size:12px; }是不是这样的 CSS 样式更能让你读懂呢，个人非常喜欢这样的编码习惯，虽然会损失一点点压缩效果，但相对以后麻烦的维护工作来，不觉得“性价比”很高吗？
网页中各度量单位的比较
作者相关：http://www.cnbruce.com/blog/在网页中对网页元素的大小修饰除了数值大小外，还有就是度量单位的选择了。不同的度量单位会有哪些不同的效果呢？首先先了解下各类单位及说明。像素（px）根据显示器的分辨率来确定长度，在web应用中多采用该单位；点数（pt）根据windows系统定义的字号大小来确定长度；英寸（in）、厘米（cm）和毫米（mm）根据显示的实际尺寸来确定长度。此类单位不随显示器分辨率的改变而改变；12pt字（pc）即windows系统定义的12字号大小为单位(1pc=12pt)。该单位前输入的数字表示字号大小的倍数。如{font-size: 2pc;}表示文字大小为24pt；以上单位均为定值，改变浏览器中浏览文字大小不会对应用这些单位的文字产生变化。字体高（em）表示当前文本的尺寸。如{font-size:2em}是指文字大小为原来的2倍；字体x的高（ex）表示当前字母“x”的高度；%是以当前文本的百分比定义尺寸。如{font-size:200%}是指文字大小为原来的2倍；
网页设计文字大小相关的四种设置方法
一、长度单位 长度单位分为两种，一种是相对长度，另一种是绝对长度。 以下为三种相对长度单位： ◆ em 相对于父对象的大小 ◆ ex 相对于特定字体中的字母x的高度 ◆ px 相对于特定设备的分辨率，这是最最常用的单位，也是我们一直坚守的单位。从技术角度来说，px像素其实是一种相对大小的度量单位，它于特定设备的显示或打印的分辨率有关。例如，一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。 以下为五种绝对长度单位： 绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。 ◆ in 英寸 ◆ cm 厘米 ◆ mm 毫米 ◆ pt 点 ◆ pc 12点活字二、相对大小的关键字 相对大小的关键字只有两个值： ◆ larger ◆ smaller
web标准概念入门
注：本文是应Alan邀请为《CSS布局实录》写的一个web标准入门指导。书已经上市近一年了，现在摘选出来，给初学者一个参考。希望了解更多实现技术的可以购买原书。 "我的工资卡是交通银行的，但我经常在我家楼下的工商银行提款机上取款；我是上海人，我用普通话可以和广州的同学进行交流；今天水龙头坏了，我去水暖商店买了一个新的换上；我去法国旅游，通知我法国的朋友在北京时间15:30分来接我。" 生活中每天都发生类似的事情，这样的事情似乎再正常不过的了，并没有什么特别之处。但是，你有没有想过： 为什么所有银行卡的大小都是一样的尺寸？为什么我用普通话就能和广州同学交流？为什么买来的新水龙头的螺口正好与老的水管能接上？为什么法国朋友不会接错时间？ 对于日常的很多事情，我们并没有注意到这背后都有着一个隐藏的“因素”在起作用，这个因素就是：标准。 有了“银行卡的标准”，你就不用担心不同银行的卡大小不一样，所有提款机的入卡口都一样；有了“普通话标准”，全国人民可以方便的进行语言交流；有了“螺口的工业标准”，你买个6分的水龙头就绝对可以可6分的水管接上；有了“格林威治标准时间”，全世界的人们都不会接错班机时间。 生活中各行各业都有着自己相应的标准与规范，标准可以方便交流、促进协作、提高效率。 对于IT行业，设备的多样性与信息的多样性更加需要标准来保证它们之间的沟通与协作。我们可能在手机、打印机、数码相机之间交互数据；我们可能在网站、邮件和办公软件之间传递信息；我们可能要在未来新设备（例如机顶盒、信息家电）中应用现有资源。如果没有统一的标准，那么现在所有的信息都是孤立的、不可分享、不可重用的；我们需要浪费大量的人力物力重新为新设备建立数据；我们需要为每一次的多系统应用做专门的开发。 好在我们已经找到了解决的方案，这就是---XML。 XML简单说就是一种“有规定格式的文档”，只要我们的设备或系统产生的数据都遵守这种格式，就可以实现互相的数据交换、分享与协作。
IE地址栏显示网站图标三步走
时下，个性ico图标却成为一些主流大牌网站提高用户体验（UE）的一个“时髦”玩法，那么，是如何在IE地址栏显示出网站的个性图标的呢？ 常浏览网站的你，是否注意到打开一些网站时，IE地址栏会显示一些网站的小图标呢？传统的IE地址栏的图标都是“e”字标，而时下，个性ico图标却成为一些主流大牌网站提高用户体验（UE）的一个“时髦”玩法，那么，是如何在IE地址栏显示出网站的个性图标的呢？ 首先你必须制作一个ico图标，并把它命名为“favicon.ico”，把它传到你的网站目录下面。 中国站长.站 然后，在想展现该个性图标的页面代码head部分中，添加一段描述代码，比如国家教育网的head中<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />，就是控制个性图标的描述代码。 Chinaz.com 这样就完成了设置，那么如何制作ico图标呢？有两种方法： 一是针对不懂设计的朋友来说，可以使用在线生成工具 。
关闭网页中广告条的方法
在FLASH广告条中加入关闭的按钮只要在按钮上加入quit退出的命令即可。 现在在FLASH PLAYER中点击退出即可关闭FLASH PLAYER，但在网页中却不可以退出。在网页中要想直接实现退出是不可能的，不过我们可以利用层的隐藏属性来实现。具体插入层的方法这里就不多说，看看下面的代码吧。 <div id="right" style="position: absolute; visibility:z-index; left: 679px; top: 14px;"> <EMBED src="100250.swf" quality=high PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" TYPE="application/x-shockwave-flash" WIDTH="100" HEIGHT="300" id="ad" wmode=opaque></EMBED></div> <SCRIPT FOR="ad" EVENT="FSCommand()" LANGUAGE="JavaScript">right.style.visibility="hidden";//设置id为right的样式属性中的可见为隐藏，hidden改为visible即可显示</script>
优秀的社区软件Discuz!之NT版本教程
说起Discuz!NT，就不得不先提起同为COMSENZ旗下的另一款引领国内社区论坛软件市场的权威产品Discuz!。Discuz! 拥有六年发展历史，全球用户超过三十万。其代码质量、运行效率、负载能力、安全等级、功能可操控性和权限严密性等方面都在广大用户中有良好的口碑。 Discuz!NT借鉴了Discuz!的丰富开发经验，并且继承了Discuz!的优良血统，与之一脉相承。下面让我们来看看Discuz!NT传承了Discuz!PHP哪些领先优势吧。 性能： Discuz!系列产品的传统优势之一就是优秀的负载能力，能够轻松应付如落伍者、55bbs、BT之家等大型论坛的超大访问量，万人在线，轻松自如。 Discuz!NT很好的继承了Discuz!的高负载特性。产品研发伊始便仿照Discuz!在数据库设计中所采用的分表策略，避免帖子表过大造成的检索缓慢，同时参照了Discuz!成功的缓存策略，大大增强服务器负载能力，而且与Discuz!一样采用多线程异步处理邮件发送和短消息群发，提高了论坛信息的发送效率。应该说，Discuz!NT与生俱来就是个“大力士”，是一个性能优越的高效论坛程序。 功能： Discuz!绝大多数站长关心的功能，Discuz!NT都直接传承或者借鉴引用。具体如下： 1、Discuz!NT提供了丰富的逻辑结构(分支、循环)，语法简洁灵活，拥有和Discuz!一样优秀的模版方案。新手只需要了解简单html和CSS，就可以自定义模版风格。同时特别为高级用户提供了强大的模版设计机制，百变风格，皆出您手。 2、延用了Discuz!强大的广告管理系统，Discuz!NT第一个版本就具有头部横幅、尾部横幅、页内文字、帖内、浮动、对联、六种广告布局模式，并且支持代码、文字、图片、flash四种内容形式。这大大方便了站长发布与管理广告，让访问量变成真实收益。 3、Discuz!NT在参考了Discuz!传统的板块分类策略基础之上，利用自身的特点首次实现了无限级板块分类，极大的方便了站长划分内容;无限级子版横排，减少页面面积，清晰展现多级内容。
Discuz!5.5 JS的调用
一、开启JS调用：系统设置--基本设置--JS调用--启用JS调用(如图1)图一 在此可以设置的参数有3个：JS数据缓存时间、JS日期格式、JS来路限制 二、打开JS调用的设置：系统设置--系统工具--JS调用向导--选择调用的内容(如图2)图二 这里可选择的调用内容有：主题列表、论坛列表、会员排行、论坛统计、附件图片调用以及自定义JS调用。 本教程以调用“主题列表”为例说明。 [node]{prefix} 主题：{subject}所在论坛：{forum} 主题作者：{author} 发布时间：{dateline}[/node] 其中：“{prefix} 主题：{subject}所在论坛：{forum} 主题作者：{author} 发布时间：{dateline}”这一段是单条数据的模板，使用[node][/node]将模板封装，然后在外加入...设置数据的显示颜色。 简单地讲：[node][/node]就是将模板封装。 三、点击“主题列表”进行设置，(如图3和图4)。
用ASP动态生成JS的表单验证代码
这两种方式都有其优缺点，比如第1种方式速度比较快，而且通常使用警告框的方式，用户能够很快的根据提示完成表单的填写，但是缺点就是用户的浏览器必须是支持JavaScript脚本的，再不然如果他关闭了JavaScript，那就!@#$%&^*（小田已经倒在地上了^_^）；而第2种方式的兼容性比较好，但是缺点是速度比较慢（提交到服务端，在返回）而且使用也不方便。这次主要是用JavaScript的方法来验证，当然，如果同时用２种方式来验证是最保险了，不过（汗…………）要累死我们这些程序员了：） 上面解释了表单验证的２中方式，下面就具体来讲讲动态生成JavaScript的概念。为什么要动态生成呢？因为这种客户端的验证代码是很烦琐的，如果每次都要自己编写真是累啊！用惯DW(Dreamweaver)或UD的朋友可能通常使用表单验证的插件，使用后生成的代码也没有艺术感，而且很多是用不到的（代码冗余）。小田要讲的是，生成完全符合表单情况的代码。 声明：小田对JavaScript并不精通，这里只是想谈谈动态生成的方法，JS的高手完全可以自己改。 那么我们开始喽。 1、我们先来看看一段简单的JavaScript的验证代码： 这段代码是验证表单form1的name表单项，必须填写内容。这里就有几个关键的部分：表单域名称、表单项名称、判断语句；这些就是我们下面编写ASP函数的关键了。 2、如何生成JavaScript代码。最简单的，就是用Response.Write输出了，比如把上面代码输出就可以是：
精简Flash文件体积的几个小技巧
1、尽量减少文字的叙述。 2、应尽量把图画转为“电影剪切”或“图形”。 3、导入的图片格式最好是*.jpg或*.gif图片格式。 4、如果需要导入音乐文件，最好是*.MP3，这样你的源代码不会太大。 5、导入音乐后，在它的属性设置里去掉“使用文件默认品质”，然后，在它的品质设置如下：“压缩”选择MP3;“位比率”选择16Kbps;“品质”选择快速。如此设置之后，3MB的MP3输出后不足500KB，音质只有少量的损失，这样也可以算是音乐DIY吧! 6、如果非特殊需要，就不要把图片“打碎”，应该尽量在图片帧中进行。 7、不要在同一帧放置过多的“电影剪切”，否则可能使你的*.SFW成倍增肥。 以上几个小技巧希望对各位朋友有所帮助!，如果有疏漏的地方还请各位指正。