推荐阅读
(6-9):制作网页翻转按钮
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮，参见范例网页。这称之为鼠标翻转效果，这是根据英文rollover翻译而来的，其实不是很符合中文的语境。其原理是利用两张图片，平时显示一幅，当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作，首先在Photoshop中将它们制作成图片，然后再做成网页。首先新建一个400×300的白底图像，新建一层，利用形状工具椭圆〖U/SHIFTU〗，在公共栏选择第3种绘图方式(填充像素)，调出信息调板〖F8〗观看数值，用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。0614【窗口>样式】调出样式调板，点击右上角圆三角按钮，选择“替换样式”，在出来的样式列表目录中选择“Web翻转样式”，确认目前选择的是新建层，然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。0615将新建层与背景层合并，然后【图像>修整】，如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处，或右下角最后一个像素处的颜色，在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。接着将背景图层复制一层，对复制出来的图层使用曲线工具，合并高光和暗调区域(高光点229,255；暗调点60,0)，形成加亮按钮的效果。如下左图。完成后我们得到两个图层，分别是暗色按钮的背景层，和亮色按钮的背景复制层。如果以上步骤无法完成，点此下载范例文件0616使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗，或点击工具栏最下方按钮，将会跳转到ImageReady中，这是Photoshop附带的一个软件，用来制作动画和网页。我们找到Web内容和图层两个调板，如下右图。后面的操作就是由这两个调板配合完成。 在完成以上5个步骤后，我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过，是随着鼠标的接触而发生的。这里涉及一种概念，叫事件和方法。我们的日常生活就是由许多事件和方法组成的，比如口渴是事件，喝水就是解决这个事件的方法。肚子饿是事件，吃东西就是方法。想学习是事件，看《大师之路》就是方法等等。这其实就是一种编程的思想，和人一样，电脑也是由事件和方法组成的一套逻辑系统。所以下面我们也要按照这种思路，去创建一个事件和解决方法。这个事件就是鼠标接触事件。平时鼠标不接触，我们只显示暗色按钮层(背景层)。而在鼠标接触的事件发生后，显示亮色按钮层(背景副本层)。
AutoCAD 2007 入门教程-CAD图形的输入输出
AutoCAD 2007 提供了图形输入与输出接口。不仅可以将其他应用程序中处理好的数据 传送给 AutoCAD ，以显示其图形，还可以将在 AutoCAD 中绘制好的图形打印出来，或者 把它们的信息传送给其他应用程序。此外，为适应互联网络的快速发展，使用户能够快速有效地共享设计信息， AutoCAD 2007 强化了其 Internet 功能，使其与互联网相关的操作更加方便、高效，可以 创建 Web 格式的文件 (DWF) ，以及发布 AutoCAD 图形文件到 Web 页。 AutoCAD 2007 除了可以打开和保存 DWG 格式的图形文件外，还可以导入或导出其他格式的图形。 导入图形 在 AutoCAD 2007 的 “ 插入点 ” 工具栏中，单击 “ 输入 ” 按钮将打开 “ 输入文件 ” 对话框。在其中的 “ 文件类型 ” 下拉列表框中可以看到，系统允许输入 “ 图元文件 ” 、 ACIS 及 3D Studio 图形格式的 文件。 在 AutoCAD 2007 的菜单命令中没有 “ 输入 ” 命令，但是可以使用 “ 插入 ” | 3D Studio 命令、 “ 插入 ” | “ ACIS 文件 ” 命令及 “ 插入 ” | “ Windows 图元文件 ” 命令，分别输入上述 3 种格式的图形文件。 插入 OLE 对象 选择 “ 插入 ” | “ OLE 对象 ” 命令，打开 “ 插入对象 ” 对话框，可以插入对象链接或者嵌入对象。 输出图形 选择 “ 文件 ” | “ 输出 ” 命令，打开 “ 输出数据 ” 对话框。可以在 “ 保存于 ” 下拉列表框中设置文件输出的路径，在 “ 文件 ” 文本框中输入文件名称，在 “ 文件类型 ” 下拉列表框中选择文件的输出类 型，如图元文件、 ACIS 、平板印刷、封装 PS 、 DXX 提取、位图、 3D Studio 及块等。
自己动手制作活动菜单条
用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋友都想在自己的网页中加入类似的东东，经过共同摸索发现用Dreamweaer 就可以实现这种效果，下面我们通过一个活动菜单条的制作来看看吧。 第1步：制作菜单外貌 在Dreamweaer 中新建一个文件，绘制一个层，在该层中插入一个表格（如图1），对该表格进行修饰，然后加入菜单项并建立各项的超链接，为了去掉超链接的下划线，可以编辑超链接的Css样式，在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration（装饰）”均设置为“None（无）”，将“Hover”的“Color（颜色）”设置为红色，最后将设置好的样式应用到各个菜单条中（可按“F12”键预览效果）。 第2步：设计菜单的动态效果 1、选定层面，当鼠标变成“十”字形时按住左键将层面拖动到页面右上角（使整个菜单条完全露出但上边缘正好靠拢页面上边界），在窗口菜单中打开时间线面板，选定层面将其拖动到时间线上，Dreamweaer会自动产生一个长度为15帧的动画对象，拖动该动画对象的最后一个关键帧到第30帧，将其长度设置为30帧。然后在第15帧处单击右键，在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧，并将层面拖动到适当位置（如图2）。
数码摄影10个技巧
以前一定听过这种话：数码相机(以下用DC)无所不能。你只要按下按钮，一张伟大的照片就会变魔术般展现在你面前。相机越好，照出来的照片越好。果真如此吗?见鬼，当然不是了! 事实是你可以用一个简单的消费级傻瓜DC拍出一张伟大的照片，也可以用最贵的DC拍出一张垃圾照片。漂亮的照片不是相机搞出来的，而是摄影师搞出来的。只要有一些拍摄方面的知识，再加上不断改进的愿望，你可以用你的小DC拍出能登上时代周刊的大照片。 为了帮助你在成为伟大摄影师的道路上快步前行，这里送给你10个技巧，它们会让你即使不花大价钱买昂贵的设备也能像专业人士一样拍照。 1.暖化你的照片 你注意过有些时候你拍的照片有一种冷冷的感觉吗?如果答案是肯定的，那你并不是孤独呵呵。DC的默认白平衡设置是“自动(auto)”，虽然在大部分情况下都是适用的，但有时候却会让景物太“冷”了。 当你拍户外景物的时候，特别是当阳光充足时，试着把你的白平衡调到“多云(cloudy)”那一档。对，就是“多云”那一档，这个变化跟在你的镜头前加一个暖色滤镜的效果是一样的。它使得照片中红色和黄色的更加丰满，从而暖化了这张照片 图1a是在一个山区拍摄的，白平衡设置在“自动(auto)” 图1b 同一个场景，我把白平衡换成了“多云(cloudy)”，同时把一副Costa Del Mar太阳镜放在了镜头前(佳能PowerShot S200,程序模式program mode) 如果你不相信我，那就试试吧。在户外分别用自动白平衡和多云白平衡拍两组照片，然后在你的电脑上对比着看，我猜你一定会喜欢看上去暖洋洋的那一组的 2.用太阳镜做偏振镜
最新发布
详细解析网页设计瀑布流布局的开发实践
瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片，并且图片是那种参差不齐的，如果瀑布流中文字过多，会给人很杂乱的感觉，所以瀑布流更适合单纯的图片浏览。前不久公司上线的项目–360图片搜索的美女秀场频道，就用到了瀑布流的布局方式，这种纯粹的看美女图片的页面用瀑布流还是挺合适的。以前并未开发过瀑布流布局的网站，第一个想到的实现方式就是多列浮动，从表面上看这种方式要简单。传统的定位布局方式但是，目前主流的瀑布流布局都是采用定位的方式，对每个单元格计算定位值，如下图：定位的方式实现起来其实也简单，在窗口 resize 时，也可以方便的对单元格进行重新计算排序。但是计算的频率比较高，如果要做无限的加载数据，以及 resize 时的自适应排列，那么性能就是一个必须要重视的问题。如果没有任何优化手段，成百上千个单元格本身就很耗资源，resize 时再全部重新计算一遍，可以想象浏览器在这个时候一定很吃力，必然会有浏览器假死的情况。多列浮动的布局方式
详细解析网页设计 如何准确看清用户需求？
如何准确看清用户需求?市场营销，就是“通过改变影响用户产品购买决策的各种因素，实现争夺用户或激发用户消费的目的”，对产品运营人员来说，无非是解决“吸引新用户、掠夺竞品用户、留住现有用户、促使用户购买、促使用户购买更多”等实际问题，于是，产品运营人员需要去不断了解用户需求，改善市场策略，而市场调研是了解用户需求最常用的方法。产品运营希望我们能告诉他们“怎么做?为什么?”产品运营人员需要的数据往往是很直接的，需要我们告诉他“为了抓住用户，该怎么做?”，而市场研究挖掘用户需求的方法很多，面对一堆数据结果，产品运营人员常摸不着头脑，不知道怎么去做。看一个挖掘用户团购需求的实际案例：用直接询问、结果推导两种不同方法挖掘用户需求，结果存在一定差异。直接询问时，商品折扣、品质、售后服务是用户最主要的考虑因素;实际选择时，这三个因素的重要性却明显下降，反而，网站知名度、用户口碑、周围朋友都在上面买等因素影响更大，作为产品运营人员，这些数据到底该怎么用?哪些因素对“争夺用户、实现利润”有明显作用? “商品折扣、品质、售后服务”是核心因素吗?反观其他非互联网行业产品，也经常会出现这种情况。如：询问用户选择某类产品的考虑因素时，质量、价格往往是不可避免的高需求因素，而在实际选择中，渠道、促销、口碑却又成了影响用户选择的关键，为什么会出现这种现象呢?原因是多方面的：1、用户陈述的因素，各品牌差异小(如：各品牌价格差异不大)，实际购买时，起不到影响作用;2、某些产品，用户冲动购买偏好强;
致那些终将流行的响应式网页设计心得
如今，web应用已经深入到我们生活的方方面面了。而你知道吗？72%的用户们都希望他们访问的网站不仅在台式机或笔记本上有赏心悦目的界面，同时也能适应移动设备的屏幕。为此，身为设计师和工程师的我们必须紧抓这个潮流，走在前沿。达尔文教给世人最精准的四个字就是：适者生存。而响应式设计，凭借着其灵活可变的特性以及一些其他因素，必定会被越来越多的设计师青睐，成为未来web开发的一大主流设计模式。Ethan Marcotte，致力于推广响应式设计的先驱者，指出响应式设计基本上包括三大元素：流体网格，自适应的媒体以及CSS3媒体查询。简言之，响应式设计是一种自适应的设计模式，能灵活地应对不同显示设备的分辨率大小，像台式机，笔记本电脑，手机，平板电脑，平板手机，电子书等。然而实现响应式设计并不是一件简单的事。Web设计师和工程师们常常面临着网站性能（主要是加载速度），广告，导航等多方面的挑战。不过这些挑战是设计过程中无可避免的一部分，也必将令响应式设计真正地变得赏心悦目和持久稳定。可以看到的是，许多网站都已纷纷投向了响应式设计的怀抱。下面我们不妨看看一些将响应式设计实际融入到网页中的优秀作品吧。ReadlistsInboundThe Boston Globe
详细解析如何打造网页的形式感技巧
作为自然界视觉的三种基础形态，它们分别由直线、折线、弧线组成。我们来看看它们各自的几何形态的情感：方：整齐、稳定、干净、锐利。缺点：生硬、呆板圆：可爱、灵动三角：动感、尖锐、不平衡其中方向因为其整洁、易识别、重构性好的特点在网页设计中应用比较广泛，但与此同时也容易让人审美疲劳形成画面生硬的印象，所以在非门户或大型资料站等页面时可以采用圆、三角这两个元素进行调和。如：活动专题页、内容不多的小型资料页。增强视觉上的灵动和刺激可以让页面快速抓住玩家的眼睛，达到专题快速传播的效果。
20大国外优秀网页设计的数据可视化工具点评
数据可视化在当前是一个热门话题，旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着，数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。然而，设计人员往往并不能很好地把握设计与功能之间的平衡，从而创造出华而不实的数据可视化形式，无法达到其主要目的，也就是传达与沟通信息。如今学习应用数据可视化的渠道有很多，你可以跟踪一些专家博客，但更重要的一点是实践/实操，你必须对目前可用的数据可视化工具有个大致了解。以下是Netmagzine列举的二十大数据可视化工具，无论你是准备制作简单的图表还是复杂的图谱或者信息图，这些工具都能满足你的需要。更加美妙的是，这些工具大多免费。第一部分：入门级工具1.ExcelExcel的图形化功能并不强大，但Excel是分析数据的理想工具，上图是Excel生成的热力地图作为一个入门级工具，Excel是快速分析数据的理想工具，也能创建供内部使用的数据图，但是Excel在颜色、线条和样式上可选择的范围有限，这也意味着用Excel很难制作出能符合专业出版物和网站需要的数据图。但是作为一个高效的内部沟通工具，Excel应当是你百宝箱中必备的工具之一。2.CSV/JSON
网页设计趋势之来尝鲜多边形风格设计吧
我们介绍过2013年的网页设计趋势有扁平化设计(Flat Design)、条纹式网页设计等等，其中Flat Design最为流行，不过最近，设计达人又发现了新的设计趋势——多边形风格，什么是多边形风格呢？其实它有点像白纸风格一样，如果不懂，下面我们为大家介绍一个制作多边形图像的网页工具。工具由somestuff提供，我直接分享至微盘：微盘下载使用方法很简单，下载后用支持html5的浏览器打开，拖动一张图片到”Drop your bitmap here”区域，如下图：拖进去后，你可以随意单击鼠标来制作多边形，也可以点击Randomly来快速生成，还有一个好处就是能生成SVG图片，这样能可以在AI在随意修改了。生成SVG方法：点击 Export ，然后在 this link 右击另存为，保存的时候记得添加”.svg”后缀哦！全屏网页设计最近不也很流行吗？所以设计达人网尝试使用这个工具来制作一个背景。原图：（图片来源未知，很多年前收藏的，有版权问题请告知我）
网页设计中透明效果的使用技巧心得
运用好透明效果是提高网页设计水准的重要方法之一。如同使用其他方法一样，设计师们有很多种手段将透明效果运用到网页中，今天这篇文章就来好好和您分享一下关于“透明”的实用小技巧哟。在网页设计中使用透明效果是件既美观又冒险的事儿。透明效果的使用是把色块，文本或图像“变薄”或者降低饱和度，使颜色变浅透明，这样下个图层的内容就能穿透显示出来。这种方法如果用好了，效果将会特别棒——能突出显示文本或者在图像的特定区域形成焦点。但设计者在运用透明效果时要特别小心，因为这么做可能会影响页面的可读性。要是框和文本的透明度不对，更可能会影响到整体的设计。下文是一些注意事项以及巧妙运用透明效果的成功案例。用“透明效果”来制造对比使用透明效果最大的优点是可以形成对比。设计者可以在图像上打造出一个色块或文本的焦点，增添屏幕的色彩维度。透明效果还能使文本从不抢眼的背景上跳脱出来。在运用透明效果时尤其要考虑对比度。只有图像和文本都具备可视性时，透明效果才算成功。所以采用透明效果时，别忘了问问自己：这会使文本/图像更容易理解么?不要遮盖图片的关键部分透明效果不能遮盖传递信息的背景或图片。当决定采用透明效果为框架时，要想想会不会少了什么。
16个网页设计师应该知道的UI优化秘诀
优异的用户界面可以让用户用得顺心，从而提高转化率(conversion rate)，换言之，好的 UI 在使用与销售层面上形成双赢。本文整理了16点优化用户界面的方法，希望对大家有所帮助。本文原作者加拿大UI设计师Jakub Linowski 译文出处： Inside单栏型式优于多栏单栏型式让你更能掌握自己的内容，从顶部到底部一气呵成，用故事引导读者，最终是要诱引他们「采取行动」(call to action，下称CTA，意指下载或消费等目的);而多栏反而可能导致读者分心。不要劈头销售产品「略施小惠」给使用者，贩卖的意图不要设计得太明显。小小的优惠或礼物，对未来的销售会带来大大的帮助。统一相似的功能，避免支离破碎的UI浏览网站时，我们很常看到琳琅满目的元素或特色，但它们的功能毫无二致，而相似的选项太多，只会提高让使用者无所适从。倘若发现自己的网站内有以不同 型式重复相同功能的状况，不妨考虑重新设计UI，把类似功能整合起来。譬如图中「Customer Service(客服)」、「Contact Us(联系我们)」其实是一样的意思，应当保留一个选项就好。
6个网页设计师必须知道的小技巧
平面设计和网页设计是两个截然不同的领域，这两个领域有不同的设计需求、设计实践和设计方法。例如，在网页设计中更常使用基于像素或栅格的文件格式，诸如JPG、GIF或PNG。相反，在平面设计领域像logo这样的图形可能会用到不同尺寸，因此使用最多的格式则是EPS和AI这样的矢量格式。然而，用于网页的矢量格式，如SVG或HTML5 Canvas则不能广泛应用，也不会被所有浏览器所支持。另外，用于web端的图形有基于它们自身的相关处理方式。其中一条便是你要时刻注意文件的大小，因为你需要使你的网页加载越快越好。作为一名网页设计师，你应当尽量减少HTTP对图像的请求次数——无论通过减少图片的使用数量还是将它们整合成CSS sprite——以及确保你选择了正确的图像格式，使其在图像大小和质量间得以平衡。photoshop是平面设计师和网页设计师使用的行业标准工具。以下是你在创建web端使用图像时的一些简单的小技巧。1. 将图片保存成Web所用格式在网页设计中，你必须确保你的图像大小越小越好。当然，当你想要图片完好显示时可以抛弃这条原则。在Photoshop中创建图像的完美方法便是平衡质量与文件大小。网页设计师经常犯的一个错误便是使用“另存为”命令，而不是使用“存储为Web所用格式”。“存储为Web所用格式”可以将图像保存成基于网页设计优化过的格式，包括图像质量、图像分辨率、浏览器兼容性和文件大小。
猜想未来的网页界面设计长什么样
近期引发最多讨论的界面设计无疑是iOS7新UI变化，但对iOS7的设计我在这先不做评论。而是想跟大家讨论界面设计趋势，引导设计走势的因素是什么?有句老话：“以史为鉴，可以知兴替”尽管人机交互界面发展时间不久，但从西方艺术发展史中能依然能给予我们启发。19世纪前艺术是为权力贵族与宗教服务，其宣扬的是宗教信仰与权力。那时期，以巴洛克，洛可可为代表的作品中，奢侈华丽绚烂的装饰特征深得权贵喜爱。无论宗教建筑，室内装潢家具，还是贵族妇女的摆群，甚至小到留空雕花瓷器茶杯，这些无都是文艺复兴思想的体现。19世纪后随着工业革命运动的爆发，自动机械开始代替传统手操作。同时随着对机械语言的理解加深，思想家逐步意识到工业设计应该服务于大量生产，为大多数人生产实用美观的物品，而不是为少数富有的特权阶层生产奢侈品。