推荐阅读
Photoshop调出城市照片通透的清新色调
本教程主要使用photoshop调出城市照片通透的清新色调，教程主要应用色彩平衡、色相/饱和度、色阶、USM锐化功能，本教程对于PS初学者来说，是一个挺好的教程，但是如果第一步，那就要在色彩方面要多加工夫。效果图：原图：第一步，添加调整---色彩平衡，把中间调和高光按照下面参数调。调节色彩平衡，刚拿到的图是略带青色的，我们在中间调补充红色，由于天空是蓝色的，所以，我们可以在高光区加入一点蓝色，同时调节洋红和青色，使图像略显蓝，而不带黄色。得到效果
美图秀秀拼图教程 失恋六连拍
1、首先，你需要准备六张图片(如果能宽度都差不多就更好，毕竟要竖向拼图)图片前五张可以正常一些，但第六张请用反差比较大的哟。小编借用微博名宠瓜皮喵的图片。 2、打开美图秀秀程序，点击“拼图”功能。 3、选择“图片拼接”调整好图片的顺序，设置好边框粗细。点击确定。 大致整体就设置好了，接下加点文字就OK了。 function addCur(){ var url = window.location.href; console.log(url); $('.pager a').each(function(){ if($(this).attr("href")==url) { $(this).addClass('cur'); } else { $(this).addClass(''); } }); } window.onload = addCur; 完成!
铜质文字的制作
新建图层 Layer 1 ，在工具箱中双击颜色渐变工具，选择预置渐变色：铜色渐变。按住 Shift 键，在文字轮廓的选区内自下而上拖动鼠标用渐变色填充文字。<图1> 2.不要取消选区！请点击 Select(选择) > Modify(修改) > Contract(收缩) 将选区缩小 1 Pixels 。新建图层 Layer 2 ，用刚才铜色渐变自上而下填充选区。 <图2> 3.在 Layer 面板中，右击 Layer 1 图层，选择 Effects(混合选项) 菜单项目，选择斜面和浮雕)和 投影图层效果。设置参数如图3和图4，效果如图5 <图3> <图4> <图5>
无缝背景图制作之二
上一节我们学习了如何制作简单的无缝背景拼接图的方法，本节我们来学习制作可以应用到FW的材质库中的无缝拼接的图案，并且学习如何保存一个新图案。重点需要掌握的工具是Rubber Stamp Tool（橡皮图章工具），该工具在使用中可能不会很轻松的上手，需要多多试验才能熟练使用，希望各位能够做好心理准备。1、 打开Fw，然后打开需要转换为图案的图片文件，本例打开的图片如下图所示： 2、 选择图片中某一部分作为图案的基础部分，选取工具箱中的Marquee（选框工具），打开Option（选项）面板，进行设定：Style（选框形式）采用Fixed Size（固定选框大小）；将宽和高均设为100像素大小，如下图所示： 3、 在图片中需要转化为图案的地方进行选取，因为固定了选框的大小，所以可以很容易的选定区域，并且可以灵活的使用鼠标拖动选取区域，选中的区域如下图所示： 4、 将选中的区域进行复制操作（快捷键为"Ctrl+C"）。5、 使用快捷键Ctrl+N新建一个文件,文件的大小设为刚才选框大小的二倍即可，刚才选框设为了100x100像素大小，则新文件宽高均设定为200像素大小。6、 为了准确定位图片对象在编辑区的位置，执行菜单命令View（视图）/Grid（网格）/Edit Grid（编辑网格），在弹出对话框进行设定：将网格的尺寸大小设置为所选图片区域的大小（100*100），同时选中Show Grid（显示网格）和Snap to Grid（吸附到网格）选项，具体设置如下图所示： 7、 设定完毕，编辑区的网格显示如下图所示： 8、将刚才复制的选取图片粘贴到编辑区的左上角位置（快捷键为"Ctrl+V"），并吸附到左上角的网格，如下图所示： 9、 使用Alt+拖动（鼠标拖动或方向键拖动）方法复制图片。（当然，还可以用"Ctrl+V"的方式复制图片）将复制的图片放到第一幅图片右侧的网格。10、 重复第9步操作，再次复制两个图片，分别将图片放置到左下角和右下角的网格内，如下图所示：11、 执行菜单命令View（视图）/Show Grid（显示网格线），这样在网格显示的状态下就会关闭网格显示。12、 执行菜单命令Edit（编辑）/Select All（全选）（快捷键"Ctrl+A"），选中编辑区的四幅图片，执行菜单命令Modify（修改）/Convert to Bitmap（转化为位图），四个图片会自动的合并成为一个位图图片。[注意：]转化位图的操作是必须的，因为本节要学习的重点工具是Rubber Stamp Tool（橡皮图章工具）,而该工具只能作用于位图对象上。 13、 选取工具箱中的Rubber Stamp Tool（橡皮图章工具），打开Option（选项）面板进行设定：将橡皮图章工具的边缘设置为最柔和的边缘，如下图所示：[注意：] 下面的一步是整个过程的重点所在，需要技巧和耐心来完成，而且可能需要反复尝试才能成功。为了避免误操作而导致前面所有的工作全部报废，建议你现在最好先保存一下目前的图片。[关键操作介绍：]关于橡皮图章的源点和操作点是橡皮图章在使用过程中的核心点所在，你可以提前打开任意一幅图片，用橡皮图章进行一番操作，理解一下源点和操作点的关系，以便于后面的操作能够顺利进行，请先看下面的热身运动：第一步，打开位图图像，选取工具箱的橡皮图章工具。第二步、在笑脸处，单击橡皮图章，这样就定义了“源点”。第三步、定义了源点后，移动图章工具到下方，再次点击图章工具，这样就定义了操作点。
最新发布
格式塔在网页页面设计中的应用
什么是格式塔?格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。本文作者：搜狐畅游视觉设计中心团队，@畅游VC 欢迎关注：)最重要的格式塔原理接近性原理;相似性原理;连续性原理;封闭性原理;对称性原理;主体/背景原理;共同命运原理。>接近性原理接近性原理说的是物体之间的相对距离会影响我们感知它是否以及如何组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组，而那些距离较远的则自动划为组外。如上图所示，左图中的圆相互之间在水平方向比垂直距离近，那么我们看到了四排圆点，右侧则看成四列。接近性原理案例
详细解析网页扁平化设计与可访问性
这几年互联网变化好多，我们在网上浏览的方式也一样。在本文中，我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。扁平化元素拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状，因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而，对视障用户能有多少用户呢?坚持这种设计方法对他们会有价值吗?好吧，和拟物化设计相对应的，扁平化设计，有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状，比如，正规/不正规的多边形，它们更容易识别。在上图中，左边的，扁平化设计展示了方形/矩形元素和高对比色的按钮。而右侧的拟物化计算器，使用了低对比色和大量的立体和阴影元素。扁平化和拟物化的两个计算器对比展示了两种技术之间的不同。扁平化设计给予按钮本身较小的重要性同时增强了内容(本例中的数字和数学符号)。另一方面，拟物化设计通过给予按钮更大的重要性而使得它们很突出，而内容却因为低对比度而不太醒目了。上面的例子展示了扁平化设计如何提升和给予内容更大的重要性，从而能证明对视障用户是有帮助的。大字体和小图标不只是在扁平化设计中，极简主义设计也一样，大字体元素是最重要的一种表现。字体能让用户聚焦在内容，从而成为设计流程中最重要的一部分。当前设计中的趋势包括高对比色的大字体、清晰的自定义字体和平衡的段落的使用——基本上就是，把传统印刷排版带到Web中来。这些原则增强了易读性和可读性，提高了易用性的另一个方面。毕竟，高对比色的自定义字体能提升可访问性是一个众所周知的事实。
详细解析杂志化的网页设计趋势
继微软推出win8操作系统后，扁平化和拟物化的讨论就没有停止过。2013年6月11日，WWDC 2013 发布会苹果推出iOS7，颠覆性的界面设计，使”扁平化”和”拟物化”再次被推到风口浪尖上。这篇文章我并不想讨论”拟物”和”扁平”哪个好?它们都可能好，也都可能不好。先来看看几组变化：过去的很长一段时间内,界面设计的风格都处在循序渐进的改变，”扁平化”的设计却是在短短十几个月的时间内迅速流行起来。从本质上看，这不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。就像上个世纪在建筑领域极简主义运动对过度装修的冲击，扁平化设计可能是一个对已经被使用多年的过度设计、或者过于花哨的网站和界面的一个颠覆。
详细解析如何有效的向用户传递信息
在设计产品的过程中，产品经理和设计师的职责之一，是有效的向用户传递信息。在互联网产品中，操作引导、结果反馈、界面呈现的元素、大小、颜色等，都可以看作是信息的传递。高效准确的信息传递，是良好用户体验的基础。下面总结了几种简单的进行有效信息传递的原则：一、使用用户容易理解的语言信息的传递过程就像是一种对话，对话就需要语言。语言的形式可能是文字、图片，也可能是闪烁、变色、大小对比等，但不论采用什么形式的“语言”，一个基本的要求是，确保用户能够“听”得懂。例如，应该尽量避免使用用户不理解的专业术语、含义不明确的符号、表意不准确的动画等。GOOD DESIGN：图标图标是一种经典的传递信息的方式，好的图标设计可以让用户一眼就知道它后面对应的程序是干什么用的，生动并且直观。所以现在流行的系统中，很多都采用了图标的方式来标识程序。上图所示，即便没有文字，我们也能猜到这些图标代表着什么功能。GOOD DESIGN：iBooks的列表界面在iBooks中，显示图书列表的界面并没有做成常规的list的感觉，而是使用了拟物的方式，以一个书架的形象呈现，书架上摆满了用户已经下载的图书封面，就像是你真的面对着一个书架，上面摆满了图书一样。这样的话，用户很容易意识到，只要把书“拿下来”，就可以阅读了。
究极解读网页渐变背景技巧大揭密
渐变在我们生活中随处可见，是一种很普遍的视觉现象。这种现象运用在视觉设计中能产生强烈的透视感和空间感，是一种有顺序、有节奏的变化。渐变作为视觉设计师经常使用的手法之一，几乎每个设计师在页面中或多或少都会做一个渐变(绝不夸张。。。)大家都知道渐变是PS里的基本功能，而且 十分简单，在渐变工具设置好不同颜色，一拉就出来了，这还需要研究吗?实际上,如何选用一个合适的渐变是设计师的基本功，也更是一门艺术。渐变幅度在设计中非常重要。渐变的幅度太大，速度太快，就容易失去渐变所特有的规律性效果，给人以不连贯和视觉上的跃动感。反之，如果渐变的幅度太 小，会产生重复之感，但慢的渐变在设计中会显示出细致的效果。所以，就有人把渐变分成强渐变和弱渐变。从功能角度上，也有人分为效果渐变和功能渐变两类， 个人觉得，到底哪一种分类更准确无可厚非，其目的还是希望设计师能够了解各种渐变的特点、使用场合以及制作技巧等等。一、效果渐变(强渐变)这种渐变主要运用在一些需要展示效果的页面上，比如风格夸张迥异的专题设计和banner，炫酷的游戏界面、时尚的娱乐性软件等。这些页面需要在短 时间内抓住用户眼球，吸引用户继续阅读。这种渐变饱和度高、跨度大，亮暗部色相可以不一致，塑造的质感比较厚重，往往营造的氛围十分强烈。专题页德州扑克游戏界面banner图
网页设计可用性指导之如何成功使用图片
nornor 俗话说，一图胜千言。无论这是真是假，图片都是网页中重要的组成部分。自从嵌入图片步骤变得简单，我们可以看到很多网站都内嵌了许多图片，其中一些 网站从不同角度展示了正确利用图片的好处，然而，大部分网站则不是如此。尽管这对于一款设计来说，并不是多大的影响，但是这些图片可能会减少你销售产品的 机会，除非你有一个很好的诱导用户的页面或者创造了很好的阅读流条件。图片是细节胜于原则的问题，处理图片应该是设计师们更加需要理解和掌握的能力。网页设计可用性指导-处理图像实际上，用户更想看到与他们想找的信息相关的图片，因此他们更青睐一个没有图片的页面而不喜欢那种充斥着无关图片，显得臃肿的页面。根据研究，在网页中使用图片的关键，是基于以下几则基本的思路：图片基本因素：尺寸，组成元素，质量，曝光率是衡量一张好图片的四大因素。用户关注图片的质量，甚至连对比度都能产生很大的影响。效率：如果一张图片令人兴奋或者让人产生兴趣，那么它就成功了。一张高效的图片包含几个特点：情感：图片中，你的产品能让激发用户使用的欲望?合理：图片展示了产品的优点?品牌：图片符合你的品牌风格?传递信息： 图片能传递正确的信息给网站的读者。
浅谈网页设计提高表格可读性的一些技巧
表格的应用DLIN：由于工作原因，经常接触到表格。我们发现，表格不但广泛的运用在各类数据收集和分析，同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式)，能够很好的表达信息之间的逻辑关系，易于帮助理解横纵信息之间的关系。在实际的网页设计应用中，表格横纵相互独立又相互关联的模式尤其适用于：1.组织和展示大量的信息表格简单的结构不但能包含大量的信息，且同时保证信息的可读性,便于读者快速扫描信息、从大量的条目中找到所需的信息。2.展示对比性信息通过合理的布局，表格能清晰的展示出同类对比信息，便于读者分辨不同条目信息之间的关联和区别，从而关注到关键、问题条目。总的来说，一个构造清晰的表格布局，将大大提升读者对信息的接收速度和理解程度例如下图中苹果官网对不同型号mac book的信息陈列方式，就采用了表格的结构，清晰的展示了4款不同的macbook，及各自的性能、售价等属性，同时读者第一眼就可以扫描到并理解表格 结构，横向是4款macbook的排列，纵向分别列出了各自的属性，然后进一步就可以根据自己的兴趣点就4款macbook的不同属性进行对比，信息完整 且便于扫描。
详细解析网页设计的分割布局秘密
随着互联网的高速发展，各种各样的网站层出不穷。在这样的环境下，用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式——分割布局，这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。作为网页设计师，我们可以参考的设计范例和布局原则有很多，比如说：栅格化、纵向一致性、F型布局、Z型布局、三分法则、黄金分割法等等。注重这些原则将会给你的设计带来视觉吸引力和功能性——现在让我们来看一种简单的方式，将页面两等分。虽然在一开始听起来有点傻，但是这种基本布局确实能起到非常好的效果。当我们通览一个页面时，我们的视线常常会沿着一个“之”字形移动。而如果用户的视线是沿着一条水平线移动时——就像在Z型布局里一样，那么他/她就会很专注(或者说尝试着专注)。但由于初来你网站90%的用户都不会很仔细的去关注你的页面，因此让你的设计“浏览起来友好”肯定会获得不错回报哦!眼动和“之”字形从雅虎的眼动追踪研究可以发现：·人们通过扫视页面的主要部分去判定这是个什么网站以及他们是否想在这多呆一会。·用户仅仅在三秒内就会对页面做出决定·如果用户决定留在页面，他们会最关注屏幕顶部的内容。网站的用户总是很匆忙，他们有其它的事情要做，你不要指望他们会停下来去欣赏你网站的美学。虽然良好的美学设计是非常重要的，但是这并不能完全激发访问者去采取行动——去点击“立即购买”或者“了解更多”按钮。
2013年的13个优秀的网页设计趋势
1、扁平设计扁平化设计正好是苹果一度推崇的拟物主义skeumorphism的反面极致。有一家公司尽管不是第一家实现这种风格的公司，但把它推向全新高度的却是这家公司无疑。这家公司就是微软。似乎 Windows 8 整个操作系统都是围绕着彻底扁平的 UI 来开发的，随处可见 Metro 和 Live Tiles。这种风格有利有弊，应根据需要权衡。最近采用了这种扁平化设计的是一颗冉冉升起的新星，它的名字就叫做Rise—一款闹钟 app。它的整个 UI 都没有一丁点的三维元素，简洁贯穿着整个应用，跟灰度结合起来之后，我们看到的是以一个外观漂亮的闹钟。当然，扁平化设计并不适合于所有的应用，但是越来越多的设计师和开发者仍将会把极简主义作为 app UI 设计的方向。2、更少按钮，更多手势一旦应用缺少了各种按钮和可视化维度的东西，用户不自觉地就会求助于手势。Clear就是一款出色地运用了手势的应用，彰显出四维思考的魔力。Google 最近发布的 Google Maps 想要同时做到扁平化设计和运用手势这两点。手势将会是 2013 年的设计趋势。3、辅助动画：功能可见
16个天马行空令人印象深刻的CSS3 HTML5实例
关于CSS3我们已经说了很多年了。现在终于看到很多童鞋开始深入研究并将一些高效有意思的功能放进各自的项目中去，看了很高兴。这两年随着HTML5的迅速崛起。这两者的结合将是未来不可避免的一个趋势。网页设计在沉静的N多年后终于开始诠释了设计的概念。很多公司也开始考虑深入交互和体验。这是互联网的一小步，网页发展的一大步。关于未来总是在超乎我们想象中的未来。很多可能都是在现在懵懂后的不断尝试中发现和得到的。今天我们要分享的是16个天马行空的CSS3&HTML5的尝试。这些尝试让人印象深刻。希望大家能够喜欢。Css3d CloudsExperiments Wave 03One Hour Per SecondClock