推荐阅读
(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.用太阳镜做偏振镜
最新发布
设计师如何快速的搞定产品详情页设计
因为最近接触的都是美妆类目，所以我就以美妆为例。其他各行各业可能会有些不同，这里主要是分享一些方式方法，具体执行的时候肯定需要结合所属行业和促销情况来决定整个框架。首先我们分析一下产品详情页的基本结构逻辑：组成部分：1.版头2.产品信息3.提出问题(也就是告诉买家为什么需要你家的产品)4.解决问题(用产品成分和功效、或者使用对比图等证明你的东西可以解决买家的问题，有个性的的话还可以加一些材 质、设计什么的)5.打消顾虑(牛逼的销量、达人推荐、资质证明、品牌实力、贴心服务，什么无效退款，赠运费险啦等)这些东西有时候会直接置顶，或放在版头+产品信息的下面。根据实际情况和运营需求确定。6.使用说明7.产品细节/拍摄原图下面我们再对每一个板块进行分析：
通过私活实例总结了两个实用的设计经验
这些天帮朋友做了个小活儿，收获几点感悟(接到私活该如何按什么步骤进行设计，收藏的优秀素材该怎么用才能提升自己等)，与各位分享。1，求单位时间内的最优效果最初接到的需求非常明确：视觉包装最着急，Logo其次。理智的做法应该是先做简单的视觉包装，做完一步是一步;然后有宽裕时间了再去想Logo。然而我，却总是情不自禁地先去想Logo，然后一晚上一晚上的想方案否决想方案否决……等到快要发视觉包装的时候，才发现时间快不够了，才赶紧去做包装。结果Logo也没勾出啥名堂，包装又做得很仓促。别以为这是知难而上，其实这是极不专业。如何在有限的时间里，合理安排时间、分配精力，在deadline前拿出效果最好的方案，是和“设计”同样重要的能力。打个比方：有8分设计能力，2分时间管理能力，结果可能是5;但若有6分设计能力，8分时间管理能力，结果可能是7。
5种通过讲故事的方法设计BANNER背景
一直有人问Banner 背景怎么做，其实设计Banner 和讲故事一样，都是用来烘托主体的，所以也有套路可循。今天TTTing1这篇好文就总结了5种常用的Banner 背景设计，简单易懂，案例丰富，建议阅读。写在前面我们先回顾下banner由哪些部分组成：主要由文案、商品图或模特、背景、点缀物组成，如下图所示：(这张图的出现频率很高，大家估计都已经烂熟于心了吧，哈哈～)我们可以看到，一个Banner的主体始终是文案或商品模特，文案为主的情况居多，而背景始终是个配角，它是用来烘托主题，渲染气氛，突出主体的。二、如何用讲故事的思维理解Banner设计及背景的制作呢？那么，在讲banner的背景制作之前呢，我们先看一段小故事场景描述(描述1):阿呆是一名电商设计师，今天他发工资了，因为约好了请几个哥们儿晚上一起吃饭，所以忙完手上的事情，他匆忙地收拾了东西就钻进了电梯，目光一下子就被一位打扮靓丽手提2016秋冬最新款prada包包的年轻女士吸引住了，他定睛一看，没想到就是他的前女友!～“几年不见，她的变化已经这么大了??简直就是标准的白富美啊!”他心想着，看着电梯按键面板上已经亮着的按键“-2”，他默默的按下了按键“1”。
设计师如何快速的寻找LOGO设计的灵感
之前我做了一个直播节目《三分钟奇葩烧脑》，内容就是观众在直播中随意说名词，我任意选择两组不相关的名词，将其视觉化，根据视觉化的图案，在三分钟内，快速的对元素重构，筛选，组合出一个完全新的图案来。下面我主要讲述一下我是怎样通过两步，三分钟做无限创意的。“主持人好，观众朋友们好，我是每日一设哥，这次的两组奇葩名词是“写作”+“咖啡”，可以看见画面中我把咖啡杯口和写作文稿，做了一个结合，进而形成了新的图案，可用做写作咖啡屋的Logo，谢谢宝宝送的火箭，有现场的观众说出了“闪电”的名词，我又把杯子的下半部分和咖啡杯口又结合了一个闪电的标志，比如有一新款速溶咖啡叫极速咖啡，就可以用上面的这个Logo，主持人，大概情况就是这样，请画面交回给主持人，”这是我当时直播的时候做的一些创意图标，我选取一部分创意内容做成了图标，看似不相关的名词，在特定的环境就会出现新的含义。第一步，两组奇葩名词为什么是“两组奇葩名词”?我们在做LOGO设计的 时候往往都是两组或两组以上的元素相互堆叠后，进而设计出新的图形。在设计LOGO之初，我们往往会根据甲方或客户的信息，针对品牌进行市场调研，分析公司资料，服务体验，竞争对手，品牌市场认知等，对企业的用户人群定位和品牌概念：提炼几组精准关键词(品牌灵魂所在)，然后根据几组关键词进行头脑风暴。头脑风暴过程：收集想法——产生联想——进入创造——联想图案在头脑风暴的时候，针对关键词任意联想相关的词语，可以多级层次的联想，不在乎质量，达到足够多的数量，也不要带批判性的去评价联想词语。
如何做好移动APP让用户体验脱颖而出
启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态，都是容易被忽视，而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。启动页当用户打开 app 时，最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时，又不可能优化该怎么办?你不得不让用户等。如果他们愿意等，你得知道如何 吸引他们。启动页解决了等待的问题，让你有一个简洁有力的窗口来吸引用户。这里有一些小贴士，在设计启动页的时候记得注意：Google 和 Apple 都建议用启动页 模拟更快的加载 来提高用户体验。启动页给到用户即时反馈，表示 app 已经启动并正在加载。 为了保证人们等待的时候不厌倦，给他们一些 娱乐：有意思的，意想不到的，或者任何可以抓住用户注意力的东西，时间长到够 app 启动就好。如果 app 的初始设置超过 10 秒钟，考虑使用 进度条 来表示正在加载。记住，不确定时间的等待给人的感觉要比确定时间的等待更加漫长。所以，你要给用户一个清晰的标识，他们需要等多长时间。(通过使用进度条让加载过程更自然)
设计师来看这两个超实用的配图加工秘方
做设计最怕的就是图片质量低/不清晰/不够新颖，今天飞屋睿UIdesign分享几个配图的加工秘方，帮你解开图片难题的困扰。网页设计中的所需要的配图素材有一个非常重要的来源——摄影。摄影配图是我们最常见，也最为简单的配图方式。网页设计师大概都会有这样的体会，如果摄影作品足够优雅，设计师的工作相对就更轻松无碍。当然，优秀的摄影作品是可遇而不可求的，很多时候，我们能拿到手的资料也许就是一张平凡无奇的摄影图，这对于设计师而言无疑也是一种挑战。几个摄影为王的例子下面这两个网站的首页设计都用一张全屏的摄影大图展示，优秀的摄影作品让网站本身的形象立起来了。如果是以时尚服饰、餐厅等内容的网站，本身就需要展示其产品本身的魅力，因此摄影图本身就极为重要。因为服饰的美感、美食的诱惑……本身就足以打动观众了。但是，怎样摄影摆拍依然需要精心设计。下面这一组展示鞋子的摄影本身就充满了设计感，这样就比单纯去展示鞋子效果要好。如果有这样的摄影作品资源，网页设计的视觉效果必定不会太差。就算是服饰展示，也可以运用模特美感，选用恰当的布景设计。以体现产品本身的个性特点。这需要摄影作品里的一种独道的叙事能力。下图这一张摄影作品里流露出复古的华丽风尚。
3个方面帮你改善移动端APP的输入体验
在用户输入时如何利用有限的屏幕空间，这篇文章列出了三个改善数据输入体验的关键因素，分别是 改进输入速度，为用户提供帮助和支援 和 在用户输入时直接指出问题所在，全是干货，一起来看看。一、输入根据需要输入的文本类型匹配键盘布局用户喜欢那些在输入文本时能够提供合适键盘布局的应用。不像物理键盘，触摸键盘可以随时调整，根据每个表单域的不同数据类型，为用户提供不同的键盘布局。通常可以进行优化的输入类型包括：数字: 电话号、信用卡号、PIN 码文本: 固有名称、用户名混合格式: 邮箱地址、街道地址、搜索查询确保这些项可以在你的 app 中 持续地 进行优化，而不是只在某些特定任务中优化。合理配置自动大写功能
5个动效设计技巧提升界面设计的用户体验
动效能讲述故事。和图片不同，动效能够呈现变化的过程，讲述一段简短而有趣的故事，能够同你进行对话：“嘿，你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过，动效的目标并不是单纯的娱乐用户，而是帮助用户了解交互的效果和界面中发生的变化，让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点：“我们设计的不再仅仅只是静态的界面，实际上，我们所设计的是用户从界面获得内容的过程。”动效广泛运用于网页内容和背景当中，用来强化功能，提升美感：它会直接影响用户的行为，引导用户注意到特定的内容，呈现状态，帮助用户找到他们想要的内容，达成目标。想要借助动效提升用户体验，可以参考下面的指引来进行优化：加载过程不要让用户感到单调无聊如果你无法缩短加载和等待的过程，那么你应当尽量让用户在等待过程中感到愉悦，这个时候的动效基本只是在提醒用户后台正在加载。而几乎所有的网站和APP都会碰到这样的情况，而好的设计通常都是通过微妙而有趣的动效，让用户的注意力转移到动效本身上，而不是被无聊的情绪所左右。下面的的案例中，设计师让界面从基本的框架结构开始加载，明显地缩短了等待的主观体验。不要让状态改变过于生硬动效最重要的功能之一是强化过渡效果，所以，它需要让过程的起始和结束都要被明显的呈现出来。一个设计良好的过度动效应当合理地将用户的注意力引导到需要被关注的地方。Adrian Zumbrunnen 有个非常不错的案例，它展现了用户点击了链接之后，滚动动效是如何让用户明白变化过程的。对比下面硬生生的转变和加了动态效果之后的版本：
8个设计师必须懂得的LOGO设计忌讳
logo设计中有一些基本的规则，今天跟大家浅谈一下logo设计最忌讳的8个点。一：禁特殊符号有一些符号和图案在logo设计中要避免使用1、国旗如果在logo中需要体现国家元素，尽量只体现国家的气质特点代表元素。而产品logo最好不好涉及国家。2、宗教其实设计师只要把他们看作不常见的通用图形就行了。
移动端UI中常见的视觉分隔设计技巧
乍一看许多APP的布局并不复杂，感觉换成自己也能设计出来，但是当你真的开始着手设计这么一个APP的原型的时候，会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难，可是当自己动手的时候，在特定的元素的选取和设计上很容易陷入困局，这个时候才明白它的难点并不在于工作量的多少，设计者常常深陷于细节构建的囹圄，这才是它的困难之处。即使是元素与元素之间的分隔方式，都能随随便便用一整篇文章来进行探讨。传统的分隔方式在UI界面中，最传统也是最常见的分隔方式用的是线，将视觉上或者内容上需要区分的内容用横向或者纵向的细线区分开来，它帮助用户了解页面的层次结构，赋予页面内容以组织性。1、全出血位分隔线全出血位原本是一个平面印刷中的概念，这里所说的全出血位分隔线通常用来凸显和强调不同的内容与区块，就像电子邮件中不同邮件之间就会用一条横贯整个屏幕的细线来进行分隔。在下面的Android 的Gmail邮箱的UI当中，用的分隔线都算是全出血位分割线。这些分隔线给人以“停止”的感觉，让用户清晰地知道界限在哪里。全出血位分割线将每一个部分都分隔开来。2、内嵌分隔线