推荐阅读
(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.用太阳镜做偏振镜
最新发布
大气磅礴的太空主题优秀网页设计欣赏
火星救援》的热潮还未褪去，马上《星球大战7》又要上映了。其实即使没有这些电影，大家对于宇宙的热忱也从来没有降低过。人类自古就喜欢仰望头顶的天空，这样也解释了我们为何如此着迷于宇宙，行星、恒星、黑洞、星系、外星人、宇航员、卫星等等等等，它们总能吸引我们的目光。宇宙给人探索的欲望，当这些元素被加入到网页中之后，会增添更多的神秘感和不一样的生机。宇宙主题的网站则总能唤醒我们的好奇心。这类主题看似是一种限制，但是使用之类元素的网站并非都要与之直接相关，借助这类元素，网页在视觉和内容上确确实实得到了改善，用户也被它们所激励。那么我们来看看，这些元素和主题是如何被运用到网页设计中去的。MinicoolMinicool 是一个用漂亮插画填满的网站，作为一个儿童图书预售类的网站，这些想象力十足的可爱插画充满蜡笔质感，而行星、外星人的可爱形象为整体风格增色不少。Easy Rocket StudioEasy Rocket Studio 是一个全新的在线平台，它可以帮助各种体育项目赢得更多的收入。太空主题的页面设计非常符合这类项目所给人传递的情绪，科技感十足的设计也确实令人难忘。值得一体的是，首页使用了大量的矢量插图，使得在不同平台上看起来都很棒。All I Wish You
Photoshop设计时尚超炫光效字体设计教程
这期教程主要是利用ai和ps制作出超炫的科技文字，教程的难度一般先看看效果图下面是教程1、首先确定这期海报的风格是科技风，以此为依据来寻找灵感，找到你想要的感觉2、简单灵感的探索之后，我们开始提炼关键词，接着就开始设计文字了3、打开ai，输入你想输入的文字，选中文字然后右键，选择创建轮廓，得到如图所示的结果
图标设计：PS设计扁平化风格的铅笔软件图标
最终效果1、新建500 * 500画布，填充为：#01dbcd。2、椭圆工具，画一个362 * 362的正圆填充#01dbcd，描边1像素，命名为“圆”。3、用矩形选框工具画一个长方形，填充为黑色，Ctrl + T 旋转45度左右，大小自己调到合适，然后调到恰当位置，命名为“阴影”。4、将图层“阴影”移到“圆”的后边，不透明度为8%。5、用椭圆工具画一个252 * 252的正圆填充为白色，命名为“圆2”。
Photoshop设计绘制扁平化风格的天气图标教程
六月天变化莫测，今天带同学们来撸一发天气图标，包括彩虹、太阳、阴雨天和雨伞图标，教程不难，不过绘制的时候用了很多小技巧，比如绘制太阳的Ctrl+Shift+Alt+T，全是实用又酷炫的，新手拿来临摹再好不过。最终效果：让我们开始学习吧!1. 做一个彩虹图标第一步我们开始画彩虹的最外层红色条纹。用椭圆工具(快捷键U)画一个450 x 450 px的圆，打开属性面板(窗口>属性)在属性面板中，我们可以改变圆的大小、位置、颜色等等一些其他的设置。把圆的描边设置为3 pt，不填充颜色，然后我们调整下描边的颜色。 单击描边颜色图标，开打颜色样本选择窗口，你可以在样本中选择一个颜色也可以点击右上角的那个拾色器按钮，打开纯色面板，这样你可以更精确的选择颜色。
国外优秀的关于我们页面网页设计欣赏
和网站访客进行沟通的方式有很多，但是最典型、最直接的还是通过关于我们页面来获取沟通方式。在网站设计越来越多样的今天，设计师和设计团队对于关于我们页面的设计也越来越重视，页面的每一个细节似乎都成了展示设计师个性和品牌特色的重要介质。关于我们的页面设计并不难，但是要设计一个完美的版本并不容易。它通常取决于你的出发点，是要个性化的设计，还是品牌化的运作?是提供自己联系方式，还是获取用户的联系方式?下面的优秀案例会告诉你，优秀的关于我们页面要如何设计。1、友好的界面友好的联系人界面总会让人感到亲切的，如果它还具备一些功能性，并且易于阅读，用户会感觉更加舒适的。“What can we help you with”则可以引导用户去点击“加入我们”“聘用我们”以及参与邮件订阅。2、展示全球各地办公室Tool 的关于我们页面中，设计师用醒目的字体标注出团队在洛杉矶、纽约和法国的办公室的地址和联系方式，点开关于我们页面的用户不就是想知道这些信息么?正确的联系方式，简单直接的设计，就是这么做的。3、简化沟通流程
精选视觉效果MAX的优秀网页设计欣赏
在设计网页时，灵感枯竭了可是非常头疼的事情。这个时候看看同行设计师的优秀作品是一个非常有效的方法。比如今天这篇好文，集结了21个创意爆棚的网站，每一个都有简略的创意解说，灵感不足的设计师不妨来瞧瞧，说不定也能成为以后的设计参考。Al Erykah City在中间将很大的LOGO和背景组合起来，将照片和LOGO进行重叠的一种设计方法。Retro Minder90年代左右比较流行的一种风格，输入演员的名字显示在网页中间的一种复古的在线游戏。难度比较高。Mambo Mambo使用流行的明亮的色彩，通过恰当的使用动画，让整个网页变得平滑宜人。
精选活泼大气的粉色系网页设计欣赏
当我们谈及粉色的时候，常常会同女性联系到一起，但是如果你观察的足够多的话，会发现这并非是普遍规律。的确，粉色常常会让人联想到诸如棉花糖这样的绵软可爱的物件，这也使得粉色在绝大多数场景下很少见到，这样一来，一些有趣而独特的网页会将粉色纳入到设计当中来，将它俏皮、活泼的一面展现出来。当然，不同类型的粉色能够传递出不同的情绪，从明艳的粉色到樱花盛开的色调，给予人的感受是截然不同的。今天的网页设计合集中，25个页面使用的粉色各不相同，设计的手法也差异不小。但是，无论是怎样的设计，所呈现出来的效果都相当不俗。接下来，我们逐个研究一下~The VHS Retrominder这个有趣的网站提供了一个90秒的快速测试，检测你对于复古知识的了解。网站首页采用了失真特效的设计，充满了80年代的风情，失真效果下粉色的光晕配合着略显复古的字体搭配，营造出和内容相匹配的氛围。Publicis90这个页面是 Publicis90 的90周年的纪念活动页面，这个全球性的倡议组织正在推行数字化企业，充满活力的红色和粉色搭配到一起，显得积极向上，你可以在这个网站查到所有相关的信息。Around the World in 12 Dishes
精选国外以黄色调为主的网页设计欣赏
对于任何网站而言，配色方案都是其中最关键的影响因素之一。你可以使用你所熟悉的配色方案，也可以跳出来选择更加大胆、明快、更有性格的配色方案，它们或许更容易给人留下深刻的印象。而今天我们要说的，是黄色。作为暖色调，黄色象征能量，带来温度，充满生命力，它可以让你的网站看起来更具有亲和力，舒适而温馨。毫无疑问，黄色色调的网站设计大多都非常的醒目，让人难以忽视。但是同时，它也是一个不容易掌控的颜色，一个不小心可能会毁掉网站的整个设计。所以，你需要清楚地了解黄色的运用手法——比如先看看那些设计优秀的网站是怎样使用大面积黄色色调的。在黄色作为主色调/背景色的时候，文字内容如何展现，各种控件如何使用，这些都值得学习。Lordz明快的黄色和动感的舞蹈有着天然的契合度，这也是为什么瑞士城市舞蹈学院选择使用黄色作为网站的主色调。为了确保网站内容的识别度，设计师采用的是黄黑搭配。James Tupper拥有韩国血统的摄影师JamesTupper 也在设计他的作品展示页的时候选择了黄色作为主色调。 在字体配色上，他同样选取了黑色。Collectif-yay
详细解析HTML5开发移动项目经验谈
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web(我们选择了h5)开发。但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案。1. 响应式web设计说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。我们在PC端常用的两种布局方式就是固定布局和弹性布局，前者设置一个绝大多数电脑能正常显示的固定宽度居中显示，后者则采用百分比。关于这两者讨论的文章很多，有兴趣的自己查阅下，我今天要介绍的就是相信你已经听过的“响应式布局”，响应式布局意味着媒体查询，这个在css2就已经出现的东西随着html5、css3的到来又增添了新的生机。响应式web设计并非新的技术，只不过将已有的开发技巧(弹性布局、弹性图片和媒体查询等)整合在了一起，并命了这个听起来很牛X的名字——响应式web设计。犹如当年的Ajax一样，将已有的技术重新组合发挥新的作用。(1).媒体查询初探。媒体查询并非新出现的技术，如下：其中就使用了媒体查询，通过 标签的media属性为样式表指定了设备类型，当然CSS3时代的媒体查询更加丰富。发现了他们的区别吗?对，不只是针对设备进行适配，而且加了一个条件，就是当设备纵向放置的时候才匹配，咱们再看一个。
讲解网页的首屏标准你了解多少？
首屏的英文是above the fold，fold有折叠之意，above the fold是指在折叠之后能看到的，为什么首屏的英文翻译会跟折叠有关系呢，原因很简单，因为这个概念最早用于出版领域，可以简单的理解为“头版”因为报纸的运输和分发过程是折叠起来的，所以报纸的折叠后暴露在读者面前的那一部分内容就显得尤其重要，读者会根据头版的内容决定是否购买。因此处于头版的内容意味着一个，编辑认为它们是最重要的，头版的内容也决定了出版物的立场和定位。所以“above the fold”也用来表示所有优先显示或或优先级最高的内容。“above the fold(头版)”的概念延伸到互联网领域。用来指代web网页中不用滚动屏幕看到的信息。与出版业的“头版”不同的是互联网的首屏区域是动态的，由于互联网用户复杂的屏幕分辨率环境，导致他们看到的首屏内容有很大差距。很多店铺设计就是因为对首屏的忽视导致很严重的体验问题。天猫&淘宝的首屏那么我们店铺的买家看到的首屏是什么样的呢?首先看以下天猫和淘宝的买家用户的屏幕分辨率占比情况：下图是最近的淘宝网用户屏幕分辨率占比情况的分布图。