推荐阅读
Illustrator打造超漂亮镂空艺术字教程
本教程主要使用Illustrator打造超漂亮镂空艺术字教程，教程是我在网络上学习的时候看到的，感谢风风语者的原创分享。喜欢的朋友让我们一起来学习吧。先来看看最终的效果图吧:具体的制作步骤如下：
PS制作巧克力文字效果
这篇教程教飞特的朋友们用PS制作巧克力文字效果，教程难度中等偏上，制作出来的文字效果挺漂亮的，值得一提的是大家在制作时必须注意巧克力块的大小和文字大小的匹配。转发过来和飞特的朋友们一起分享学习了，先来看看效果图吧：：具体的制作步骤如下：第1步：设置远景色为#fece01，和背景颜色#e8661b，使用径向渐变，从中间往角落拉。第二步：将我们提供的牛皮纸加入到画布中，然后设置不透明度为：50%。点击图层面板下面的新建调整层，选择色相/饱和度。
在网页中显示可拖动月历
r使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。具*作步骤如下：1、启动Dreamweaver MX，新建一个HTML文档，切换到代码视图，编写JavaScript脚本。(1)在HTML文档的< head>...< /head>插入下面的JavaScript脚本：< SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> //定义月历函数 function calendar() { var today = new Date(); //创建日期对象 year = today.getYear(); //读取年份 thisDay = today.getDate(); //读取当前日//创建每月天数数组 var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //如果是闰年，2月份的天数为29天 if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数 firstDay = today;//复制日期对象 firstDay.setDate(1); //设置日期对象firstDay的日为1号 startDay = firstDay.getDay(); //确定当月第一天是星期几//定义周日和月份中文名数组 var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); //创建日期对象 var newDate = new Date();//创建表格document.write("< TABLE BORDER='0' CELLSPACING='0' CELLPADDING='2' ALIGN='CENTER' BGCOLOR='#0080FF'>") document.write("< TR>< TD>< table border='0' cellspacing='1' cellpadding='2' bgcolor='#88FF99'>"); document.write("< TR>< th colspan='7' bgcolor='#C8E3FF'>");//显示当前日期和周日 document.writeln("< FONT STYLE='font-size:9pt;Color:#FF0000'>" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + "< /FONT>");//显示月历表头document.writeln("< /TH>< /TR>< TR>< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>日< /FONT>< /TH>");document.writeln("< th bgcolor='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>一< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>二< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>三< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>四< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>五< /FONT>< /TH>");document.writeln("< TH BGCOLOR='#0080FF'>< FONT STYLE='font-size:9pt;Color:White'>六< /FONT>< /TH>");document.writeln("< /TR>< TR>");
CDR如何修改椭圆与圆形的大小
第一步：用椭圆工具绘制一个椭圆，在属性栏上面可以看到椭圆的宽度与高度。第二步：选中椭圆对象，就可以在宽度与高度里面改成自已要的参数。在这里改成了30宽度与20高度。第三步：点击椭圆工具，按住Ctrl键不放，拖动工具绘制正圆。第四步：选中正圆，改正圆时要把锁定比率给选上，这样修改宽度与高度任何一个参数，都会一起变成一样的参数。在这里设置30MM 这里的30MM不是半径。
最新发布
解析IOS平台设计规范和常用尺寸
此文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范，有志于UI设计的童鞋推荐收藏起来，将来要做相关的设计可以直截了当戳进来学习。一、UI的控件概述：1、框架UI的元素分为4类：A：栏：状态栏目和导航栏的结合体;B：内容视图：应用显示的内容信息，包括相关的交互行为，例如滚屏、插入、删除等操作进行排序;C：控制元素：产品行为或显示的信息;D：临时视图：临时向用户提供重要的信息，或提供额外的功能和选项。2、框架UI的尺寸：
详细解析网页界面设计中Tab的小短线
有朋友说让我多写点能增加工作经验的，像上次《帮你做能落地的界面设计之输入框》那种，于是想起去年研究的一个问题，是关于Tab 的，想不想听?我们先来科普下今天要讲的东西是啥，看下图：每一个选项都是一个tab ，tab 的形式千千万，但今天只讲这种选中后下面带横线的。(我们给这个横线起个名字叫做小短线吧，下文都这么叫了哈!)今天的大纲如下：tab是用来干嘛的tab 的分类几种常见的小短线小短线的注意事项一小短线的注意事项二
详细解析网页搜索框的设计细节技巧
搜索几乎是现在所有网站，APP甚至操作系统的标配，不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道，起到了一个引导用户走向的重要作用。在不同的系统，不同用途的网站上搜索呈现的方式都有所不同。用搜索的原因使用搜索时，用户可以自己掌握浏览该网站的路径，从哪一页进入到哪一页，自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。另一个原因是，当用户浏览网页到一半不知道接下去该干什么的时候，往往会使用搜索直接去找到自己想找的内容。不使用搜索的原因相对于搜索，用户根据类目，或者从功能模块的入口进入各个页面其实是跟着页面的导向进行的下一步操作。网页的设计者会根据网站的不同需求从而设计不同的页面布局。根据这些页面布局进而引导用户一步一步的达成网站设计者的目的。这些目的可能就是买一件商品，参加一个活动等等。用户可以根据设计者创建的引导流程一步步的查看网站内容。不同用户群根据搜索是否主动搜索这点来分，可以把用户分成3种类型：任务型，链接型，混合型。任务型：
5个方面解析移动端电商的搜索框设计
一个好的搜索功能设计能够很好的帮助客户直达想要的地方，实现完美的用户体验，今天分享几个搜素框的设计技巧，希望可以�大家带来启发。你无法去卖一个用户找不到的产品。搜索是用户最基本的行为，也是构建一个可盈利的app或网站的重要元素。用户在发现和学习产品时期望在app中有流畅的体验，他们会根据搜索结果迅速判断出一个app的价值。一个好的搜索控件应当帮助用户迅速简便地找到用户想要的内容。在本文中我们将探讨如何将其实现。1. 搜索如何放置用户在寻找搜索的入口时通常是迅速且粗暴的。他们通常会浏览一个页面然后寻找能输入文字的框。目标：搜索框设计得明显可见且很容易识别。搜索区域放在明显的位置搜索是电商类app或网站的基础功能，需要放在显眼的位置，让用户很容易发现。搜索如果不放在显眼的位置，会给用户造成困惑,降低用户的效率。△ 左图中搜索功能隐藏在菜单选项后面
网页设计CSS选择符详解之关系选择符篇
相信大家都对CSS选择符都不陌生，选择符包含:元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符。在众多的选择符中，可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写，达到最大的质量和效率。今天就为大家介绍下选择符中的关系选择符，“关系”这可是一等一的大事啊，我们得理清楚，这样做事情才能更加的有效率。不然在CSS中有你受的，哈哈。关系选择符有四个类别:包含选择符、子选择符、相邻选择符、兄弟选择符。接下来为大家一一介绍。在这里特别的说明一下，我们平常中最常用的的是包含选择符，为什么我们都习惯用这个呢?因为在IE6浏览器中，只支持包含选择符，其他的均不支持。在以往(现在有点改观了)IE6是浏览器市场的主角，用户覆盖率极高，所以对于那些IE6所不支持的，也必然造成我们很少用到甚至根本不用的现象。但是记得在一篇文章看到，现在HTML5/CSS3是未来的一个趋势，而HTML5/CSS3将会重视起以前那些被我们误认为没有什么用的标签的运用。也许在某一天，IE6真正的功成身退了，不再折腾考验我们了，那些我们误以为没有用的标签语法将会掀起一次CSS效率大革命。哈哈，纯属个人幻想。请勿当成珍珠一样真。语法：E F{ sRules } 说明：选择所有被E元素包含的F元素。 示例: <meta charset="utf-8" /><style>ul li{color:#f00;}</style><ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> <li>项目列表4</li></ul> 输出结果图片:输出结果说明:ul li表示在ul下面所有的li都会有作用，只要是属于ul的li都会起作用。语法：E>F{ sRules } 说明：选择所有作为E元素的子元素F。 示例: <meta charset="utf-8" /><style>.test>li>a{color:#f00;}</style><ul class="test"> <li> <a href="http://www.jiawin.com">列表项目1</a> <ul> <li><a href="http://www.jiawin.com">项目列表1.1</a></li> <li><a href="http://www.jiawin.com">项目列表1.2</a></li> </ul> </li> <li> <a href="http://www.jiawin.com">列表项目2</a> <ul> <li><a href="http://www.jiawin.com">项目列表2.1</a></li> <li><a href="http://www.jiawin.com">项目列表2.2</a></li> </ul> </li> <li><a href="http://www.jiawin.com">列表项目3</a></li> <li><a href="http://www.jiawin.com">列表项目4</a></li></ul> 输出结果图片:输出结果说明: .test > li > a 表示对在选择器test下面的 li 标签下面 a 标签起作用。只有属于这个关系的才会起作用，大家可以从上面的例子看到，有些 li 元素的下面还有 ul li 的选择符，但是却不会起到作用。由此可见，子选择符比包含选择符提供了更精细的控制。结合上面的两个例子我们也可以得出:包含选择符的深度和广度超过子对象选择符；而子对象选择符的针对性和唯一性比包含选择符强。这也就是包含选择符和子选择符的区别，这是一个比较容易混淆的地方。
详解HTML5创意画板的网页设计教程
在HTML5备受期待和瞩目的今天，越来越多的人已经感受到它带来的无限魅力与震撼力，许多的技术人员、设计者、互联网爱好者们纷纷加入了HTML5的研究与设计中。首先我先为大家介绍一下一个功能很强大的HTML5在线绘画应用，它还拥有多种笔刷和滤镜，具有类似于photoshop的图层功能，可调节透明度隐藏等，还有渐变、油漆桶、拾色器、选择工具，大家一定会为此感到惊讶吧。但这样复杂的应用并没有使用flash实现，在canvas标记还没有出现之前，要想实现复杂的网页应用，或者直接在网页上进行绘图，只能借助于第三方的插件，比如Flash或Java，而现在，借助于canvas标记，我们可以实现图像显示和处理了，那么现在就让我抛砖引玉，讲解一下我的一些开发思路吧。想要制作一个简单的画板并不是太难，但我建议您掌握一定的canvas基础和javascript基础，这样更便于理解和学习本教程。而如果你canvas技术比较好的话，你一定会觉得本教程又长又�嗦，但是教程不可能顾及到所有的阅读者，所以麻烦你跳过你了解的部分，只关注重要的部分就好了。首先，我讲解一下我的开发思路。我们需要在页面中添加一个canvas标记作为我们的画布，也就是我们将来要绘画的画板。由于需要用户使用鼠标点击、滑动、释放鼠标等操作来实现绘画，所以我们也必须要使用鼠标的几个基本的监听事件mousemove、mouseup、mousedown。 document.addEventListener('mousemove', mouseMove, false); document.addEventListener('mousedown', mouseDown, false); document.addEventListener('mouseup', mouseUp, false); 为了使绘画出来的线条更流畅，兼顾性能问题，我们可以采用setInterval来设置监听事件的时间间隔。 setInterval(函数名,1000/60); 其中1000/60为时间间隔。 setInterval(loop, 1000 / 60); function loop() { $pos_display.innerHTML='你当前鼠标的位置为('+pos.x+','+pos.y+')'; if (isMouseDown) draw(context);} loop为循环执行的函数。当然，你也可以采用requestAnimationFrame(如果不了解该属性可以自行百度^_^)。这取决于你的习惯。那么现在我们需要获取用户鼠标点击的位置，在这里我们需要区分pageX,clientX,offsetX,layerX等概念 ，这里有篇文章讲解，你可以看看http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/
网页设计UI应遵循的三大网站设计原则
随着技术的进化，Web设计的艺术和技巧也在不断进化。新的技术创造了新的挑战，而新的挑战要求新的解决方案。我们通常工作在未知领域，需要给出全新的解决方案。 考虑到有限的Web设计历史，我们必须超越当前的领域去回答更有挑战性的问题。为此，我们可以通过借鉴其他不相关领域的发展历史，如音乐，从中寻求可以帮助我们解决问题的方案。下面将列举一个18世纪早期关于巴赫的一个小故事。巴赫和《The Well-Tempered Clavier》1972年，巴赫完成了一部著作《The Well-Tempered Clavier》(《十二平均律钢琴曲集》)，分上下两卷，每卷各有24首前奏曲与赋格曲。现在它已被誉为西方音乐历史中最重要作品之一。 在当时，为12个主要的琴键分别谱曲是完全不可能的。而巴赫却从整体上为全部的12个音作曲。正是他的这套《十二平均律钢琴曲集》，最终向人们证明了“十二平均律”是可以用来作曲的，而且其效果之美妙，以前的人们从未曾领略过。在这个过程，所采用的解决方案是重新定义了“合调”的概念。通过修改一定的间隔，使每个琴键稍稍偏离完美的音调，从而产生一种调音系统，允许人们在所有的琴键上演奏出合调的琴乐。****少量的个体品质以达到更完美的整体效果，被称为“平均律”。 该案例虽与网站设计不相关，但目的是一样的：使每个琴键都稍有缺陷，以便键盘整体表现完美。UI设计师需要做什么?最近几年，针对多设备进行设计已成为Web设计领域最令人兴奋的开发工作。以前主要关注网站是否可以在两个不同浏览器上运行正常，现在则转移到它是否可以在具有完全不同特性的多种设备上正常运行，这些设备具有不同的屏幕尺寸、不同的性能、不同的使用环境及不同的界面。 虽然响应式设计和针对设备定制网站可以帮助我们制作出针对不同体验的设计，但仍有很多时候我们必须做出统一的决策。这时，“平均律”的概念或许有些帮助。 该概念在UI设计中的应用一个简单的过程：为了针对一系列不同设备设计出好的体验，我们必须允许某些界面出现偶尔的不完美。我们必须做出小小的妥协，以保证我们的设计可以很好地适应其他的环境。 触摸优先设计 具有“平均律”特性的网站已经将触摸式界面应有到了最近的桌面网站设计中。 在占用面积上，手指要大于鼠标指针，所以手指需要更大的触控区域。为了确保可用性，交互元素需要更大。当交互元素的面积增大后，其他元素也需要相应的增大以保持平衡。这就需要通过margin和padding两个属性来设定。新版Gmail设计有大量的空白区域，对按钮设定了额外的Padding。虽然它只是针对桌面的设计，但也可以很好地兼容触摸设备。 iPad在触摸界面和不同大小桌面屏幕之间搭建了桥梁。而iPad的流行加速了触摸屏在桌面界面设计中的影响。如果你观察一些刚经过重新设计的著名产品，如Gmail，Twitter，你就会发现Web设计已有明显的不同。他们看上去更“丰满”。有更多的空白区域，按钮有更多的Padding，上面的元素整体看来增大了不少。当然，其他的因素也在发挥作用，比如桌面屏幕尺寸的稳定增长。 当为鼠标提供了“过多”的空间，而对于手指来说，空间刚刚好时，我们的设计就算完成了。我们允许与某体验的标准有稍稍的偏差，以获得对所有可能体验的更好支持。 有一点值得提出，对触摸友好的UI对于使用桌面鼠标的用户来说，更易用。容易触摸操控的按钮，更容易被点击。微软Metro风格的设计受到了触摸优先思想的影响响应式设计，达到统一设计的目的
利用CSS sprites制作随着鼠标移动的动画背景
网页设计中的背景图是至关重要的，在之前的文章《网页设计中的背景创意和发展趋势》也有为大家分享过网页设计中关于背景的设计以及发展趋势，一个优秀的背景图可以为你的网站增添不少的精彩。在浩大的互联网中，各种创意层出不穷，也许你在一些网站上看到的背景会随着鼠标的移动而移动，这是非常充满创意而且有趣的设计，你认为呢？今天就为大家分享下如何制作一个随着鼠标移动的动画背景效果。在开始制作动画背景效果前，先为大家介绍下CSS sprites，中文名为：CSS雪碧或者CSS精灵。它是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。这种技术的好处就是可以减少你的网站的HTTP请求数量，是通过使用CSS background和background-position属性来渲染的，也就是说是在css中定义的，并不适用于<img>标签。CSS雪碧的制作原理很简单，相信大家都知道，主要是制作一张背景图，图片里面包含a，a:hover，a:active各种状态下的图片，如果通过背景定位background-position来获取不同状态下相对应的图片。下面为示例：一览众巅峰CSS sprites demos, Make by:www.jiawin.com之所以在上面为大家简单的介绍css雪碧，因为css雪碧不单单仅限于使用在图片上面，还可以结合jQuery来制作动画效果。在引入jQuery后，我们可以利用鼠标光标的位置，来确定不同的触发点，相对应的改变background-position的值，从而使图像发生动画。先来看看最终的效果，用鼠标在下面的图片上面来回移动就可以看到。一览众巅峰在开始之前，我们需要将连成动画的每一张图片（帧）连接起来制作成一张大的背景图。大家可以在一个视频中，按照一定的时间连续快速截取10张或者更多关键帧的图像，然后使用photoshop等图片处理工具把每张小图按照规定的顺序依次排列，最终输出一张大的背景图。示例：图片制作完后，接下来我们就写出简单HTML代码： <div class="box"> <a class="pic" href="http://www.jiawin.com" id="preview">一览众巅峰</a></div> 接下来，我们用jQuery为#preview添加样式：
CSS教程：HOVER伪类选择符的多重影分身之术
E:hover伪类选择符，是我们最熟悉不过的一个伪类了，而且运用也是非常的广泛，可以说在互联网中每个网站上面都会出现它的影子。我们不可否认已经对这个伪类选择符已经是相当的熟悉，但你是否真正的将它的功能发挥到淋漓尽致呢？嘿嘿……只要善于发现，我们就可以创造出非常有意思的东西来，大家是否还记得之前的分享给大家的一篇文章《创意CSS技巧：看图购》，这篇文章就是一个很好的示范，建议在读完这篇文章后，可以去看看这篇文章的效果以及设计原理，多想一想，多做一做。在这篇文章中就是巧妙的运用了hover的功能属性，出现了很多让人印象深刻的充满神奇的效果。其主要的原理是不变的，只是我们更加巧妙的设置多个层hover的效果，那今天将为大家详细的解读hover伪类选择符的多重影分身之术！我们将用例子来为大家做详细的介绍，先来看看这一组的伪类选择符： .main:hover { opacity: 0.5; /*---- 组一 ----*/}.main a:hover { opacity: 0.5; /*---- 组二 ----*/}.main:hover a { opacity: 0.5; /*---- 组三 ----*/}.main ul:hover a { opacity: 0.5; /*---- 组四 ----*/}.main:hover ul:hover a:hover { opacity: 0.5; /*---- 组五 ----*/}.main a:not(:hover) { opacity: 0.5; /*---- 组六 ----*/} 这些选择符你都能一一的了解其中的含义吗？其实我们稍加细心分析就能马上判断这些都代表了什么。我们理清楚了hover伪元素在不同地方以及出现多个hover时的基本原理，那我们就来看看一个实际的例子，在这个例子中简单的通过上面的分析总结，在多个地方巧妙的运用了hover伪元素，实现了具有很强交互性的三排列表效果。 首先是我们的一个简单的HTML结构： <div id="all"> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul> <ul> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> <li><a href="http://www.jiawin.com">---</a></li> </ul></div> 然后我们最上面的结构进行hover的多重影分身处理，看css代码： body {margin:0; padding:0;}#all {margin:100px auto; padding:0; width:630px;}#all > ul { list-style: none; float: left; width: 200px; padding: 0 10px 0 0;}#all a { text-decoration: none; display: block; padding: 10px; background: #900; border-radius: 20px; color: white; text-align: center; margin: 0 0 5px 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease;}#all:hover a { opacity: 0.2;}#all:hover ul:hover a { opacity: 0.5;}#all:hover ul:hover a:hover { opacity: 1;} 关于hover伪类选择符的多重影分身之术就介绍到这里了，hover伪元素是个很有趣的东西，网上也有很多特效是利用hover来实现，就像本站（觉唯前端）的发布过的一篇文章《因为CSS3，动画将一切皆有可能》，其中的鼠标经过时显示动画就是运用了上面所说的组六原理，用hover伪类选择符结合否定伪类选择器来实现的。我相信关于hover还有很多实用的技巧还没挖掘出来，那么接下来为hover伪元素创造奇迹的你，还在等什么呢……
你应该知道的24种新兴交互设计
在互联网这个领域，每天都有不计其数的产品诞生，有些产品只是灵光一现，有的却存活了下来，但是不论存活与否，这些产品上总有一些设计细节让我们眼前一亮，下文中分类整理了一些不错的交互形式，希望能给大家带来新的设计灵感。一、导航1，Google+导航的隐藏功能Google+作为google进入社交领域的第一个产品，在交互方式有很多亮点，比如在导航的扩展性上，可以把不常用的标签拖放到“更多”中，从而使导航界面更简洁，这个操作进行时的效果也很精致、流畅。2，导航hover案例一：你选中某个导航标签时，并不是改变该标签的字体颜色或将字体加粗，而是点亮该标签的背景。案例二：选中的标签上会滴下一滴牛奶，并停留在那里，告知你的当前位置。(当然，这是一个关于牛奶的网站)。