推荐阅读
PS制作非常漂亮蓝色水晶相框
本教程非常详细的介绍蓝色水晶相框的制作。作者制作的时候非常细心，光感调的非常到位，尤其是那些光光的地方作者做得更是绝美，每一个小的地方几乎都是很完美。非常佩服！ 最终效果
家具公司网页
家具公司网页的页面在设计上，使用了一张怀旧的家具照片，并将该照片和一个红木柜子并列安排在页面的*，形成相互对比、相互衬托的画面效果，在设计过程中，要注意比例关系、色彩关系、疏密关系等，使之构成具有美感的整体关系。如图10-59所示，为本实例的完成效果。图10-59 本实例完成效果在棕红色调的图像中，一幅黑白照片打破了这种色调的，同时也打破了规则的构图方式，使画面变得活泼，具有了动势。本实例的制作中运用了大量的素材，其中红木柜子是刻画的重点，通过添加图层样式效果制作出柜子的立体效果和光泽变化，柜子上的装饰图像使用了大量的素材，为素材图片添加图层样式以及调整素材图片的混合模式，使其在柜子上的效果更加真实自然。如图10-60所示，为本实例的制作流程。图10-60 本实例制作流程（1）启动Photoshop，执行“文件”→“新建”命令，参照图10-61所示设置“新建”对话框，创建一个名为“家具公司网页”的空白文档。图10-61 设置“新建”对话框（2）在“图层”调板中新建“图层 1”，将前景色设置为深褐色（R123、
Frontpage2000值得学习的10个操作技巧（上）
1>页面的传输报告显示为了使你更方便的了解网页的实际浏览情况，在Frontpage2000中提供了页面传输报告的功能，你可以清楚的获取当前网页以不同的传输方式需要的时间，从而确定网页大小及整*作是否合理。在编辑窗口的状态栏中图标右边右击鼠标，会弹出传输方式选项列表，如图：其中包括了普通MODEM（14.4,28.8,56K），ISDN，T1，T3等几种常用接入方式，选定以后在状态栏中会显示出当前的传输方式及完全下载需要的时间。2>直接制作超级连接翻转效果鼠标悬停的连接对象变换效果在网页设计中是经常见到的，记得在以前的Frontpage98版中需要Css样式表（stylesheet）来完成，虽然操作起来并不是很难，但对初学者而言理解起来还是有些晦涩，2000中的“傻瓜”式设置应该说帮了一个大忙，你可以不懂什么是CSS，但效果同样精彩。在网页“普通”编辑模式下，右键选中“网页属性”菜单，同时指向“背景”标签，启用格式部分中的“启用超连接翻转效果”复选框，这时下面的“翻转样式”按钮会变成可用状态，点击进行具体的设置，即鼠标悬停后的样式，如图3>网站的自启动设置默认情况下，Frontpage在重新启动时总是自动进入一个“新网站”窗口中，而不是你上次编辑过的网站，这时你不得不重新打开目标网站，相信通过下面的设置你就可以完全避免这一点了。“工具”-“选项”，在常规选项卡中勾取“在启动Frontpage时，自动打开上次打开的网站”，重新启动一下，是不是没问题了。4>边框及阴影的使用在网页中我们会经常看到一些类似的边框效果，而这些边框大多是通过表格或是特定的图片组合形成的，不过2000中边框及阴影效果的引入，可以说又给大家提供了一个好的方式，并且通过他们还能够实现内容的定位等等。“格式”-“边框及阴影”，进入边框阴影设定窗口如下：设置：即边框的“四边”是否封闭设置，可以直接通过点击窗口中“预览”部分四个方向的按钮来实现。当取消某一边时，设置栏中会自动跳转到“自定义”选项中。样式：选择边框的显示效果，其中提供了包括实线，虚线等在内的8中样式。颜色及宽度：设定边框的颜色和宽度，这里的宽度一般为1，当然具体情况可以适当调整。填充：通过给定内容距边框的距离确定具体的定位，可以自由设定大小。另外，点选上面的“阴影”标签时，可以进行背景色，前景色的设置。5>设定网页源代码的不同颜色标示虽然现在比较多的是在“设计”窗口内编辑网页，不过有时直接对HTML源代码操作也是必不可少的，设定不同代码的颜色区分，对于一个专业网页设计人员来说是非常重要的。“工具”-“网页选项”，选中“彩色代码”标签，同时启用“用颜色区分代码”的复选框，为不同的代码类型设置不同的颜色，当然有时为了统一标准，可以点击“恢复原始颜色设置”按钮以使用Frontpage默认值
最新发布
格式塔在网页页面设计中的应用
什么是格式塔?格式塔心理学诞生于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