推荐阅读
电商设计师总结的8条产品设计趋势分析
这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在，我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。写在前面2011年那会儿，我还是杭州某互联网公司的一名ui设计师，那年双11我亲眼目睹了我们整层办公楼500多人都在买买买的壮观场面，不过那时候的我对电商没有任何概念，甚至对网购都不熟悉;2012年年初，我阴差阳错地接触到了电商设计，爱上电商设计并一直坚持到现在，已近5年时间。这5年时间，我呆过已经倒闭了的小电商平台，做过腾讯电商的外包，也真正近距离参与过京东大大小小的各种活动设计，亲眼目睹了天猫双11成交额从2011年的52亿一直增长到2015年的912亿，直到现在我把我的部分关于电商的思考和观察总结写成文章近百篇分享给大家。这几年，电商的发展速度是惊人的，我觉得有必要对自己的观察和体会做一个小结，于是就有了这次的话题：“入行电商设计近5年，写文近百篇后，我给大家总结了这8条趋势分析和建议”。这篇文章也许对正在电商设计这条路上或即将迈入这条路的人有所启发，接下来我们直接进入正题：少数人会驱动多数人的行为和想法这个少数人是指什么人呢?指某一个行业领域里走在最前面的人，再或者是某一个圈子里最活跃的那一批人，毫不夸张地说，这些人的一举一动都会牵涉到其他人的发展方向，这种现象在炒股行业也许最为明显，知名企业或知名投资人的稍微一点动作就会对相关公司或行业的股价产生不小的影响。那么在设计圈里其实也是一样的道理，比如现在在设计圈很火的C4D，三维建模和渲染，虽然这个在工业设计领域是非常常见的一项技能，但是不知是被谁引入到了电商设计行业，然后大家开始纷纷效仿三维的效果。还有合成效果早几年前比较常见于创意互动广告界，一开始一些简单的合成效果也只是常见于一些比较追求炫技和非主流效果的店铺(因为那时候的效果都做的比较粗糙所以看起来有些俗气)，其实对于天猫或者京东这样的平台页面设计里是很少会用到这些效果的，因为这种效果对于动辄就是好几十个不同会场的平台活动来说，很难进行品牌视觉延伸，再一个就是合成玩的好需要很强的绘画功底和想象力，处理不好容易变得非常俗气。
CorelDRAW绘制日式卡通美女教程
在本节实例的学习中，将制作一幅具有日本卡通绘画风格的漫画。日式卡通中对人物的塑造具有很鲜明的特色，归纳性很强。在制作过程中可以很容易的抓住人物特征。整个画面用色鲜明，女孩飘动的头发与背景中舞动的枫叶，使画面充满了动感。如图1-89所示，为本实例的完成效果。图1-89 本实例完成效果1.4.1 技术提示为了节省篇幅，实例的背景图形和卡通女孩的轮廓图形，使用了导入的素材。实例的制作过程将重点讲述角色的绘制、润色、细节刻画等方面操作。如图1-90所示，为本实例的制作流程。图1-90 本实例制作流程1.4.1 制作步骤：刻画角色五官(1)启动CorelDRAW，新建一个空白文档，参照图1-91所示设置文档属性。
PS简单几步为照片增加对比度和层次感
原图效果1.磨皮:这个为什么第一步磨皮呢，个人习惯吧..呵呵。我习惯用Topaz 2. 复制一层，模式为滤色，不透明度视情况而定别太白了3.向下合并图层，然后选择图像-调整-可选颜色，先分析这张图，红色占大部分所以不用大范围地调整红色通道.参数设置如图2,效果对比如图3
PS烟雾笔刷应用：制作出逼真火焰效果
先看看效果图：下面是制作的步骤：1、新建一个文档，拉出一个径向渐变，颜色如图： 2、新建图层，将前景色设为跟火焰接近的颜色，选择一些烟雾笔刷，画出一团火焰。烟雾笔刷下载：http://www.86ps.com/Soft/ShowInfo.asp?InfoID=3753
最新发布
用CSS设计高用户体验的web文字大小
在设计网络应用时，您必须决定如何编辑字体。使用CSS时存在大量选项，每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。 字体大小 CSS2规范根据长度――水平和垂直尺寸――来定义字体。这个长度为一个数值，前面可能带一个可选的加(+)或减(-)标记符。另外，该数值后可能有一个可选的单位标识符。 另外，CSS2规范定义了两个单位类型:绝对单位和相对单位。绝对值指定单位，而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符: 下面是有效的绝对单位标识符: 测量绝对大小的另一种方法是使用衡量一个值的比例因数，应用以下关键字:最小、较小、小、中、大、较大和最小。中为基值，变小就减去一个因数，变大就增加一个因数，等等。CSS2规范定义的比例因数为1.2，这个值也可能依浏览器而变化。 还可以应用百分比值来格式化文本。百分比值是一个可选的标记符，即数字后带有一个百分比符号(%)。百分比值总是与另一个值成比例。就字体而言，它与网页的基本字体大小成一定比例。 如您所见，有许多方法可完成呈现文本这个看似简单的任务。下面的HTML格式文本(在段落元素中)应用了各种单位标识符。其中所有的值都相等，并假定以72dpi进行显示。 您可以在这个列表中增加像素值，但它的值要依环境而定。例如，我的分辨率为1280X1024的手提电脑将显示与在上表中使用50像素值一致的文本。
对css滑动门技术的一些总结和归纳
其中有个人说"如果你是高手,那你就详细介绍一下css滑动门技术",这句话把我刺激了,于是我连夜从网上搜罗了一些关于css滑动门技术的东西,并且自己做了一个滑动门,事实上在学习css滑动门技术之前,我发现我已经做过很多类似的菜单效果,最有代表性的就是搜狗网址导航的搜索框,后来这个效果被广泛运用到搜狗的搜索引擎当中,我在这里总结一下一些css滑动门的知识,希望能给大家对css的学习起到一个帮助作用,另外结合javascript,css可以制作出更多炫目的效果. 背景: 从我的理解来讲,css滑动门是被刺激出来的,因为很多人认为css并不能做出漂亮的网页,但是事实上恰恰相反,css不仅能做出相当漂亮的网页,还可以很好得把内容和表现分开,给设计师和开发人员更大的空间去发挥; 定义: 滑动门技术就是:当点击页面上的导航按钮后这个导航按钮的CSS特性发生变化，从而区别于该组的其他导航按钮，提示给操作者，当前浏览的内容就是这个CSS特性发生变化的按钮所指向的内容。这种效果的一大好处在于，在多导航的页面上能够清晰地反映当前浏览内容隶属于哪个栏目或者哪个类，同时给人以美观、清晰、明了的视觉感受。滑动门技术的主角是被操作的对象，也就是这里被点击的对象，其CSS特性主要是指该导航按钮包括其中的其它元素的属性发生变化，当然，这个按钮的形式可以是BUTTON、A、TD甚至可以是P或者DIV这样的闭合元素，它们的属性主要是指这个元素的边框、背景、字体的颜色、大小、粗细以及外间距和内间距等等，总之，其一切可以把自身的“地位”区别于其它属主的属性都可以被应用起来使用在滑动门技术上。 应用范围: 网站导航菜单 技术要点: 1.用无序列表ul和li组成菜单结构 2.给li设置背景(如果有圆角,则设置为右置或左置,背景图片远远超过该子菜单的长度)
网站重构 CSS样式表的优化与技巧
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。 二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。 三.区分大小写 当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。 class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。 四.取消class和id前的元素限定 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:
使用图片和CSS结合制作动画按钮
很多时候大家可以看到FLASH里面的按钮可以是动画的,而大部分HTML作出来的按钮都是单帧切换的.其实做成动画也是可行的.先看看下面的预览图片鼠标移动上去,鼠标点击,鼠标移开下面是实际效果，亲自体验一下 .temp1 a{display:block;height:31px;width:88px;background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091641612.gif)} .temp1 a:hover{background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091641694.gif)} .temp1 a:active{background-image:url(http://www.syku.net/web/UploadFiles_5065/200612/20061209091642451.gif)} .temp2 a{display:block;height:31px;width:88px;background-image:url(/design/UploadFiles_design/200806/2008062023300288.gif)} .temp2 a:hover{background-image:url(/design/UploadFiles_design/200806/2008062023300299.gif)} .temp2 a:active{background-image:url(/design/UploadFiles_design/200806/2008062023300241.gif)} a{display:block;height:31px;width:88px;background-image:url(图1)}a:hover{background-image:url(图2)}a:active{background-image:url(图3)}其实最重要的是在动画图片本身首先看看这个图片,似曾相识把.原理是一样的
导航上用CSS标志当前页效果的实现
当前页面--比如说现在的页面是首页，那么在导航栏上首页的色彩等和其他栏目有所不 同，用以给浏览者一个明显的指示。下面来说下具体的做法，菜单的基本实现和一般的CSS菜单没多大区别，着重说下如何 实现当前页。设菜单有5个栏目：home、about、products、services、contact，分别给每个栏目一 个ID，m1-m5，CSS可写成如下： #home #nav li#m1 a, #about #nav li#m2 a, #products #nav li#m3 a, #services #nav li#m4 a, #contact #nav li#m5 a{ color: #FFF; background: #DC4E1B url(navbg.gif) no-repeat; } xhtml：<ul id="nav"> <li id="m1"><a href="index.html">Home</a></li> <li id="m2"><a href="about.html">About</a></li> <li id="m3"><a href="products.html">Products</a></li> <li id="m4"><a href="services.html">Services</a></li> <li id="m5"><a href="contact.html">Contact</a></li> </ul> 然后分别给每个页面的bady标签一个独立的ID，例如给首页的ID是home，其余的类推 。 这样做法的好处是每个页面的菜单都是一样的，方便修改，动态页包含也容易。
通过Dreamweaver设计网页时组织CSS的建议
代码式（Inline）：写入到代码中的一次性的样式。 内嵌式（Embedded）：可控制一个页面中所有元素的样式表 外联式（External）：可控制许多页面中的元素的样式表 事实上，许多站点都根据需要把这三种方式结合起来使用。 在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器，基于电视的浏览器以及Palm pilot和TTY（teletypewriter，远程打字机）一类的手持设备。 最佳习惯是指什么？ 大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于： 1：增加站点的寿命 不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。 2：让你的站点对所有的用户以及浏览器都适用。 有些地方的*已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。 3：让站点更新和维护更加轻松。
引入样式表(css)的四种方式
一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如： <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在<STYLE>...</STYLE>标签之中。 <STYLE TYPE="text/css"><!--样式规则表--> </STYLE>例如： <STYLE TYPE="text/css"><!--BODY { color: BLUE; background: #FFFFCC; font-size: 9pt}TD, P { COLOR: GREEN; font-size: 9pt}--></STYLE>通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以<LINK>标签引入。 假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的<head></head>部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。 四、使用@import引入： 跟LINK用法很像，但必 放在<STYLE>...</STYLE> 中。 <STYLE TYPE="text/css"><!-- @import url(引入的样式表的位址、路径与档名);--></STYLE> 例如： <STYLE TYPE="text/css"><!-- @import url(http://yourweb/ example.css);--></STYLE>要注意的是，行末的分号是绝对不可少的！
修饰之美：CSS在表格边框上的美学应用
具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。 1.上边框宽度 语法: border-top-width: <值> 允许值: thin | medium | thick | <长度> 初始值: medium 适用于: 所有对象 向下兼容: 否 上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边框、边框的宽度或边框的属性略写。 2.右边框宽度 语法: border-right-width: <值>
20 个优秀 CSS 网站
从这些 CSS Gallery 网站中精选了 20 个比较漂亮的 XHTML＋CSS 布局网站。推荐给喜欢网页设计的人，无论是做博客模板还是做网站设计，在设计理念、色调、导航条、按钮、排版布局方面，都有一些值得借鉴的地方。1、www.apple.comminmax_bound="true">刚刚改版的苹果官网，配合即将上市的 Leopard 风格。2、www.youtilize.comminmax_bound="true">这种布局和色彩搭配很适合我的口味。3、www.pingdom.comminmax_bound="true">一个测试网站连接和内容 (包括 HTML, CSS, JS 和图片) 加载时间的服务。4、www.workhabit.orgminmax_bound="true">5、www.web2themes.comminmax_bound="true">这是一个 WordPress 主题，特别之处就是加入一些人的剪影作为网页元素。6、www.zik.frminmax_bound="true">7、www.ashwebmedia.comminmax_bound="true">8、maczone.skminmax_bound="true">9、www.joshuadunaway.netminmax_bound="true">
CSS:标准的 语义的 非侵入的页签切换
自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更舒畅。很多网站接受并使用，如新浪等。 页签的标记结构 那么，让我们来看看这些页签后的代码。 新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的：<div> <ul> <li>页签1</li> <li>页签2</li> ... </ul> </div> <div> <div>内容1</div><!--它们可能由Ajax载入--> <div>内容1</div> ... </div> ... 符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），容易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：<div> <ul> <li><a href="#content1">页签1</a></li> <li><a href="#content2">页签2</a></li> ... </ul> </div> <div> <div id="content1">内容1</div><!--它们可能由Ajax载入--> <div id="content2">内容1</div> ... </div> ... 这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。 语义，语义，语义！