推荐阅读
Photoshop绘制磨砂风格的清凉立夏壁纸设计教程
效果图思路分析画之前先来看看小笔记【一】草稿我的草稿比较简洁(承认偷懒了)，希望大家不要这样，尽量能画精细就精细点，因为线稿对于上色来说很重要，如果线稿精细点的话会影响后面的上色环节，上色时会一脸懵逼状。【二】上色图层名字方面不用参照我的，按自己习惯来就行。(这用到的上色笔刷前面有提到名字，不知道的可以去前面看看。
那些不为人知的Photoshop高效操作秘籍
作为一名画图工，常年被改稿狂魔的蹂躏后，虽然不敢说能完全掌控 photoshop 这个常年崩溃的小婊砸，却在日常的操练中发现很多让我觉得“阿西吧，还能酱紫”的技巧。在这里和大家分享下，虽然有的技巧比较奇葩，但是如果小伙伴掌握了，必定能提高自己50%的操作效率(瞎扯)，与 Photoshop 和谐共处，远离加班，无忧改稿。自定义快捷键玩 ps 就好像玩 mmo 游戏，通过键盘释放技能的人 kpm 明显高于在屏幕上点点点的人。Photoshop 提供了非常丰富的快捷键并支持自定义，记住常用的快捷键可以节省大量的操作步骤，进阶级玩家还可以自定义快捷键，一键对齐、切片。自定义快捷键：编辑->键盘快捷键或者Shift + Option + Command + K调出自定义面板。下面推荐一些隐藏得比较深但是炒鸡实用的快捷键：数字19：选中一个图层按19可以调节当前图层不透明度，如按1为10%不透明度，快速连按59为59%不透明度。/：锁定当前图层，使之不可移动。按住 alt 再点按当前图层的小眼睛：只显示当前图层。shift+数值调整：在很多数值调整的情况下，按住 shift 再调整数值可以使数值以10的倍数进行增减，如 shift+方向键下，以 10px 的倍数向下移动图层。
形状编辑与交互式设置花蝴蝶
利用交互式工具可以制作出一系列特殊效果，通过变形对象，给对象添加新的元素或改变对象外观等多种操作，使其达到不同的效果，本节以制作蝴蝶为例，介绍交互式工具的使用。花蝴蝶预览效果图步骤1 新建一个空白文件执行【文件】|【新建】命令，建立一个新的文件（或按键盘上的Ctrl+N快捷键）。步骤2绘制蝴蝶翅膀在工具箱中选择【贝塞尔工具】，鼠标在工作区变为形状，在图层中拖动鼠标，绘制不规则图形如图1-4-1所示。
个人首页制作诀窍
1.首先主题选择不要落俗！现在许多的个人主页就象“大锅饭”。题材包罗万象，内容雷同无味。人人都是“软件速递”“音乐宝库”“主页教程”等等。让我一看就赶紧“back”，我可是花钱上网的噢！题材的选择少而精，又能坚持天天更新的话，会很快受到大家的欢迎，就象书路的电子图书，龙翔的游戏资讯。另外提醒您的一点就是，最好不要在主页里设有关hacker（解密，注册码）的资料，国内大部分的免费空间提供商都不接受含此类信息的站点。 2.如果您准备建立新的个人首页，千万不要立刻开始制作页面。一定要好好的想一想，总体规划一下整个网站的结构。特别要考虑到网站的维护更新方便。一时兴起，想到什么就作什么，往往会使您的网站，虎头蛇尾，条理混乱，最终因维护困难而夭折。 3.开始制作请您千万不要急着许多页面一起制作。许多新手会及不可待的将收集到的各种资料填入各个页面，转眼首页速成，成就感喔！可等您回过味来想要修改一些页面元素时，却发现一页一页改的好辛苦！建议您先制作有代表性的一页，将页面的结构，图片的位置，链接的方式统统设计周全，例如：每页设置“返回首页”的链接，Email地址，版权信息等。然后copy成N个页，再将相应的内容“填空”。这样制作的主页，速度快，整体性强。如果您能结合borders的使用,可以天天轻松改变站点的风格。 4.制作时，内容不要全搬照抄他人的内容，适当加入一些自己的文章，评论和见解，会使大家更加相信您，尊重您。例如翻译一些英文教程，写作一些软件的用法，分析一些实例制作过程。毕竟是个人主页，要体现您的个性，风格，让大家了解，接受您的观点，是个人主页的精神所在！ 5.每个页面不要使用超过2个的java程序，能够用javascript替代效果的则尽量不要使用java。因为目前来讲java的运行速度实在慢的让人无法忍受。java会使您的网页速度减慢至少50%。由于浏览器的版本，有时候等候半天，却告诉您java applent不能启动，这种经历相信您也有！ 6.单张图片不要超过30k，每页图片总量不要超过60k（一般情况）。据统计分析，每页不超过60k图片的网页，其下载速度是可以让人接受的，所有的图片都必须“减肥”小图片（100x40）一般可以控制在6k以内，动画控制在15K以内，较大的图片可以“分割”成小图片。合理采用jpg和gif格式也是至关重要的，色彩鲜艳高分辨率的用jpg，色彩单调低分辨率的用gif，采用gif89a格式的图片在download时能交错显示。 7.设置一个专门的“what's new”页面。及时醒目的告诉来访者您主页最新更新的内容，这样能方便常客浏览和寻找他们所需要的内容。许多好的主页干脆将首页的内容作成“what's new”如“欢乐天地”“华军主页”，让您一目了然，不致于层层深入，一无所获。 8.为您的图片加注解。图片的下载较慢，在没有显示出来时注解的标注有助于让浏览者知道这是关于什么的图片，是否需要等待，是否可以点击。特别考虑到纯文本浏览者浏览的方便，您千万抽空为图片加一个注解。这是一个小地方，却体现一个网页的制作水准哦！ 9. 备份您的主页。您要说了，这也算窍门？象在凑数！千万千万不要这样想。“机有不测风云”，现在系统大战，软件Bug百出，病毒横行的年代，您保不准什么时候机器罢工，辛辛苦苦制作的网页付之东流。这样的“惨痛教训”我可不止一次了。算俺罗唆也好，杞人忧天也好，您就备份了罢！
最新发布
CSS3动画运用得不错的网页设计作品
最初我们是使用Table来布局网页，动画就用FLASH代替，而现在这些都要过时了，网站的排版布局使用DIV+CSS，动画和其它交互使用CSS3、HTML5和JavaScript结合来实现，这些都是未来发现的趋势，而我们也必须跟着这些趋势走。CSS3是一门样式语言，学习它并不是很困难，但怎么去使用它却有很大的学问哦，今天我们整理30个CSS3动画运用得不错的网站，这些作品中有很多通过样式或是结合jQuery脚本来实现交互，十分有新鲜感觉，下面大家一起来欣赏这些优秀的网页设计作品吧。来自巴西的创意设计工作室官方网站。 浏览网站网站中间的圆圈是可以左右拖动的哦，拖动的同时人物会自动换装… 浏览网站这是一家控股及投资类公司网站。 浏览网站 浏览网站组织活动类网站。 浏览网站
详细解析百货大类页网页如何打动用户
项目背景：随着易迅用户基数不断扩大，由于易迅用户本身对百货类商品有需求，且该类商品的客单价低、购买频次高、能够快速增加易迅的单量并能够拉新客户，基于此，百货类商品为易迅扩充品类打响了头阵。借着扩充品类的机会，参与了其中一些项目，在此就百货大类页的设计思考稍作总结。一、大类中间页的机会小瓶儿：首先从中间页说起，互联网商品信息的爆炸发展导致用户从海量的商品中找到自己的需要变得十分困难，从人类理解事物的有效方式来说，按照一定的逻辑归类才是靠谱的做法，大类页应运而生。这种“类”包含的不仅仅是商品本身的属性(比如个人护理>男士护理>剃须等)，还包括用户特征(如母性驱动购买宝宝商品)、行为特征(喜欢新的东西)、产品本身特征(如除湿功效)甚至是商业赋予它的属性(热捧的苹果等)。相比较易迅原有的数码家电类商品而言，百货类商品的类别和数量非常庞杂，对于用户而言，要买一样东西的成本很低，但是能够想要到易迅来买百货商品并转化为老用户甚至活跃用户，并不是一件容易的事。目前百货类的商品更多零散地分布在页面的非核心位置，用户更多是通过分类去找，而大类页可以承载不同用户购买商品的不同需求，具有针对性的内容搭建有利于形成用户回访。对于运营而言，需要固化页面承载流量并且分配到给重点单品、搜索、活动、专题等等，大类页可以通过丰富购物线索使用户分流到下一流程。对于平台而言，品类的扩充势必会带来女性用户的增长，她们在购买时的非理性因素意味着在挑选时没有那么强的目的性，并且容易受推荐性内容、口碑性内容、新鲜内容的影响，这类人在挑选时更加需要一些商品属性以外的东西来帮助做决策，通过常规品类细分和不断搜索已经不能够满足她们的需求，那么大类页可以提供这类用户一个稳定的、可以通过多元化线索找到商品的地方。二、百货类商品用户类型百货类商品跟日常生活、跟自身的身体需要和心理需要紧密联系。通过挖掘用户对于不同品类的不同诉求以及诉求的不同程度，可以看到，会产生逛大类页需求的用户主要集中在基于某种身体需求(清洁皮肤、清洁环境、饮食……)或者某种心理需求(学习、扩充视野、尝鲜……)上的目标不太明确、以及跟风从众的人群上。比如，才烫了头发，不想去洗发店修护太贵，就打算在网上找找好一点的洗发水，具有修护作用的;再比如，换季了，看看有啥新出的护肤品刚好可以用的。
40款新鲜的WEB开发人员开发框架和工具
对于现在很多WEB开发人员来说，项目的效率就是一切，因为时间就是金钱。很多人都不在自己的模式里捣鼓研究了，而是用各种流行的框架和第三方平台去让项目更快的推进。今天我们要分享给大家的就是一些新鲜的WEB框架和开发工具。这些工具也是一些GEEK长时间的总结研究出的一套体系。用框架的好处就在于，只要你是正确的架构就能不用担心太多自身的漏洞和BUG。可以避免走很多弯路。好好研究使用起来吧。会让你事半功倍的！PhalconPhalcon is a web framework delivered as a C extension providing high performance and lower resource consumption.YARDYARD is the only Ruby documentation tool that supports storing metadata alongside your documentation. This metadata can be used to create consistent documentation in any format you wish. YARD also comes with a powerful templating system to quickly modify existing templates. And for the simple case, you can even add custom metadata to your docs with nothing but the command-line.KoalaKoala is a GUI application for Less, Sass, Compass and CoffeeScript compilation, to help web developers to use them more efficiently. Koala can run in windows, linux and mac.
韩国电商网站与国内电商的差异化分析
关于视觉理论分析的文章有很多，我们从目标与设计关系来讨论一些东西吧。shopping.naver.com是目前屈指可数的购物站典范之一，也有很多人对其进行了剖析，今天，我们来尝试挖掘一下这个站体验设计与目标呼应上的关系。当然也有一部分是对产品的分析。看看到底是怎么好的，这次的分析过程、方向、方式，希望能帮助一些朋友在参考其他优秀案例时择优去糟。需求假设NAVER的购物站与国内电商比起来，对商品的展示过程，用户的使用过程大体相同，寻找目标>梳理对比>展开详细>购买行为…(NAVER以大搜索业务为核心，针对电商，购买行为应该是在第三方平台进行的，基于这个不同，我们仅仅讨论购买行为之前的一些层面)视觉美观性,舒适性,合理性,信任度横向对比其他国内的电商站，你不难发现，视觉美观性上他们之间大概差了两个级别，就算有区域性审美特点的原因，大部分人也会觉得NAVER的购物站更美观，更舒适，在这点上，NAVER的设计师已经将设计价值更大化。
10个人人必知的网页设计术语分享
想要获得快速成长，我们就必须要知道一些网页设计的术语。和众多其他行业的发展一样，网页设计刚开始还处于起步阶段，但是到现在它已经有太多的术语缩写，有一些简单的技术和理念是必须懂的。今天的环境相比过去已经是一百倍的复杂，因为我们在网络上使用工具和框架，语言和库的开发使得一切进步飞快。设计师 —— 即使是专业的网页设计师，也必须努力保持对所有不同的专业术语和技术的理解，所以在这里我们给出了10个最重要的网页设计方面的术语，每个人都应该有起码的了解。（HTML表示超文本标记语言，而HTML5是最新版本）HTMLHTML代表超文本标记语言，而且是web语言。简而言之，HTML为网页设计师提供了一种方式，告诉浏览器如何处理一个特定的内容。HTML包含许多不同的标签，允许设计师通过语义标记使段落被识别为浏览器文本，而且允许图像输入等。CSS
40个非常优秀的网页界面设计分享
一个良好的用户界面应具有高转换率，并且易于使用。但要用户体验良好并不容易做到，下面我们整理了40个良好用户界面Tips，希望能对你有帮助。单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。给用户一份精美小礼品这样的友好举动再好不过了。具体来讲，送出礼品也是之有效的获得客户忠诚度的战术，这是建立在人们互惠准则上的。而这样做所带来的好处也是显而易见的，会让你在往后的活动进展（不管是推销，产品更新还是再次搞活动）中更加顺利。在整个产品开发期间我们会有意无意地创建很多模块，版面或者元素，而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块，它无用且降低了电脑性能。此外，界面上模块越多，用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。在获得项目机会或提高项目转化率时客户的好评是一种极为有效的手段。当潜在客户看到其他人对你的服务给予好评时，项目机会会大增。所以试着提供一些含金量高的证据证明这些好评是真实可信的。多次重复主旨口号这种方法适用于界面很长或者分页的情况。首先你肯定不想满屏刷出相同的信息，这样会让人生厌。但当页面足够长的时候这些重复就显示自然多了并且也不显得拥挤。所在在页面顶部放一个按钮然后在页面底部再适当放个突出的按钮的做法没有什么不妥。这样当用户到达页面底部在思考接下来该做什么的时候，你提供的按钮就可以获得一个潜在的合同或者即使用户不需要你的服务这个按钮也可以起到过滤的作用。
精选国外功能强大的WordPress企业主题
关于买模板来做网站，听起来有点贬义，觉得模板就是模板，千篇一律，其实这是因为你找不到好的而已，不信？你看看今天设计达人网为你整理的功能强大的WordPress主题，这些主题采用了流行的网页布局以及前端技术制作而成，不怕过时而且质量靠谱。主要功能特色：如此强大的模板，你说是不是心动呢？我是设计师，我只要原创，没关系，这些主题除了设计美观外，还包含有很多创新的交互设计给你学习参考，我想它会给你带来很多好的创造灵感哦！这个wp主题可以用视觉来做网页的背景，是不是很有新鲜感呢？当然在使用的时候注意优化你的视频。在线演示 主题下载网站整体设计简约，多种网页配色方案给用户选择，含多语言功能。在线演示 主题下载这个WordPress主题适用于图像展示，比如展示设计师作品、摄影师的照片等等有很好的视觉效果。
如何在响应式网页中安置图片及视频
响应式网页设计，是一种正在流行的网页开发思想，它是利用灵活可变的栅格系统，令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应。预计2015年的时候，移动端的用户数量将会从目前的8亿，增长到19亿，而这也意味着目前我们为桌面浏览器而设计的网页，将会在他们的手机和平板上呈现出非常糟糕的使用体验。但是随着实际应用状况的改变，响应式网页设计还是会出现一系列复杂的并发症。本文余下的部分，就是详细阐述如何在响应式网页中安置和处理多媒体元素，诸如图片和视频，最终的目的是帮你做出一个靠谱的网站，能让这些元素无缝地在各种手持设备上加载运行，提升用户体验。响应式网页设计中的图片处理先说说响应式图片的处理方法。在响应式网页设计中，图片处理的问题或多或少地和传统网页中的导航栏设计有相似之处。随着新的移动设备的普及，更高像素密度的屏幕使得网页的任何一个瑕疵都显得无比明显，因此，图片处理的核心问题在于如何确保网站（尤其是图片）的各个方面都能尽可能灵活，并且确保每个像素不会在高分屏下模糊。图片显示的问题首先，当网页对设备响应时，并不存特定的图片发布标准。并且针对这一问题，有大量的可选方案供你选择。不过，这个时候，问题出现了：3G模式下，在视网膜屏幕下的移动设备上图像应该如何处理。在网速较差的情况下，图片的尺寸大小是否应该自动优化（降低）？这就是所谓“美术设计”的问题。网站提供的图片在不同屏幕的设备上都能够显示，还是远远不够的。小屏幕设备的用户可能完全看不清图片的细节，那么，就应该在“能正常显示”的基础上，为这块小屏幕单*剪一个版本，让用户看清细节。有人提出，开发者应该将所有不同尺寸大小比例的图片都预先上传到网站页面中，并且设置好CSS与媒体查询功能，将过大或过小的图片都隐藏起来，让浏览器就下载像素完全匹配的图像。然而，实际状况并非如此，浏览器在加载CSS类之前，就已经将所有的相关图片都下载下来，这使得网页更加臃肿，加载时间更长。图片问题可能的解决方案在继续探讨之前，先明确一点：让每块屏幕都完美显示图片的解决方案是不存在的。可是我们能够不断探索可行性更高的方案，尽可能地提高精度，以下是我们为响应式网页的图像问题，找到的可能的解决方案：Bootstrap
2014人气网站界面设计PSD免费素材
网站模板一直很流行，因为它可能帮助一些企业或用户快速搭建一个专业的网站出来，模板听起来有点不舒服，也许你见太多山寨作品了吧。在设计达人网这里你可以看到很多专业设计师制作的作品，即使是模板也会很漂亮。对于没设计能力或者想投入更少资金来建站，那么选择模板是最好的了，比如购买高级版的WordPress主题或使用免费HTML模板都可以。今天我们主要分享PSD格式的模板，界面设计不错，就算你不用也可以参考参考。页面布局友好的，时间线的设计很漂亮，用来做介绍自己的个人主页是不错的选择。进入下载页漂亮的作品集网站PSD源文件。进入下载页这个页面的设计比较简约，喜欢简单的用户可以用它。
淘宝设计师经验分享之APP的栅格试验
这里专门说一下关于WAP App的栅格设计。以下相关都是基于一淘H5和一淘App总结得出。先介绍三个名词：Wap App;Native App;Hybrid App(融合体，H5页面嵌套在Native中)，之所以说这三个，是因为它们相互之间的联系在某种程度上制约了Wap App 的栅格设计。下面详细说下栅格试验。Phone栅格和PC栅格，本质上没有区别，一样的计算方式，无外乎屏幕大小的差别，但这屏幕大小，就有很多细节需要结合手机用户习惯来判断和取舍。我们试验的Phone栅格都是流体栅格，简单说，就是不定义具体尺寸，而是屏幕占比。说到屏幕占比，我们需要设定基准屏幕(这个可根据某些具体数据确定，比如我的目标用户群使用的手机屏幕尺寸占比最多的是1136*640，即可定位基准屏幕)，这里假定基准屏幕是960*640 。通常栅格的计算公式 (m+a)*n-a=640-2b (m 栅格宽;a 槽宽;b 留白宽;n栅格个数)试验 1m=40 n=12 a=10 b=25(我们通常定义栅格数目n是2，3，4，6的整数倍，12栅格算是最简单的栅格结构)。试验1的栅格是沿袭PC的思想，但在后来应用到越来越多的页面时，这种栅格做2，3，4，6等分都很OK，但不做等分时，灵活性就很差，也算是一个致命的缺点，对于视觉设计师来说有很大的局限性。所以不建议在手机上使用12栅格。