推荐阅读
CorelDRAW绘制绿色的森林一角场景
该实例制作了一幅森林场景画面，画面以绿色调为主，通过不同绿色之间的搭配关系营造出丰富的色彩关系。在处理手法上要注意表现画面的纵深感，并且要层次分明、主次有序。图3-2为本实例的完成效果。图3-2 本实例完成效果3.1.1 技术提示本实例的画面具有一定的纵深感，制作时通过为图形添加阴影效果，拉开了画面的层次，给人一种纵深的空间感。如图3-3所示，为本实例的制作流程。图3-3 本实例制作流程3.1.2 制作步骤：绘制远景植物(1)启动CorelDRAW，新建一个工作文档，在属性栏中将“微调偏移值”设为0.1mm，其他参数保持系统默认。然后使用“矩形”工具，在视图中绘制矩形。如图3-4所示。
Photoshop调出唯美冷色效果的外景人像
最终效果原图1、打开素材图片渐变映射调整图层，参数如下 选用较暖的明暗色作为叠加层，确定后把混合模式改为“叠加”，不透明度改为：30%，如下图。2、创建色彩平衡调整图层，参数及效果如下图。
(10-2):使用字符调板
1012以上是在文字工具的公共栏中出现的选项。在点击了字符调板按钮后即会出现字符调板【窗口_字符】，如下图。在其中可以对文字设定更多的选项。在实际使用中也很少直接在公共栏中更改选项，大多数都是通过字符调板完成对文字的调整的。其中的字体、字体形式、字号、颜色、抗锯齿选项就不重复介绍了。注意其中的为亚洲文本选项，需要在Photoshop首选项〖CTRL_K〗的常规选项中开启“显示亚洲文本选项”才会出现。1013拼写检查选项是针对不同的语言设置连字和拼写规则，如下右图显示了英国英语和美国英语对同样文字的不同连字方式。注意，末尾连字只有在框式文本输入时才有效。因为框式文本是自动换行的。通过手动换行的文字是不会有连字效果的。有关框式文本的输入方法在本节后面部分介绍。连字和拼写规则对于中文是没有意义的。因为汉字为单体结构，即一个汉字字符已携带完整含义，而字母系语言需要多个字符组合才能携带完整含义。也正是因为汉字携带的信息巨大，因此现在电脑的计算能力还不足以完美处理中文化的信息结构。-1014行间距控制文字行之间的距离，若设为自动，间距将会跟随字号的改变而改变，若为固定的数值时则不会。因此如果手动指定了行间距，在更改字号后一般也要再次指定行间距。如果间距设置过小就可能造成行与行的重叠。如下左图是自动行距与手动指定为12像素行距的比较。如果有重叠发生，下一行文字将会遮盖上一行。1015竖向缩放相当于将字体变高或变矮，横向缩放相当于变胖和变瘦，数值小于100%为缩小，大于100%为放大。如下右图中3个字分别为标准、竖向50%、横向50%的效果。-1016在字符调板中有比例间距和字符间距，它们的作用都是更改字符与字符之间的距离，但在原理和效果上却不相同。我们可以动手来理解它们的区别，新建一个足够大的图像，打上simple这几个字母，字体为黑体，大小为72像素。如下图左端所示，我们看到整个文字的宽度是由字符本身的字宽与字符之间的距离构成的。这两者都是在制作字体的时候就定义好的。有的字符本身较窄，但其左右的字距也较大，这样做是为了保证每个字符占用的宽度一致。否则，较窄的字符就只能占用较小的宽度。但这种设计却也造成了字符之间疏密不同。如下图中的mp之间与pl之间的疏密就不同。这种情况一般出现在使用中文字库输入字母的时候，Windows系统自带的黑体、宋体、楷体字体都存在这种现象。因此输入英文时应避免使用这些字体。字宽与字距间的比例将随着字号的大小相应改变，也就是说，对于同一个字体来说，字号越大，字符之间的距离也越大。反而反之。那么，字符间距选项的作用相当于对所有字距增加或减少一个相同的数量。可手动输入数值。如下图中将字符间距减去100，所有的字符间距都减去100，字符就互相靠拢了。但是这样做并没有改变疏密不同的情况，尽管mp已经是互相紧靠着密不透风，但pl还是有很大的距离。当然，如果继续减少字符间距也可以最终令pl之间也“密不透风”(设为-300左右)，但mp之间却会产生重叠的效果了。我们可以用一个简单的算式来理解：假设mp原来的距离为100，pl之间的距离为300，当字符宽度设置为-100的时候，mp之间的距离为0，pl之间的距离还有200。要令pl之间的距离为0，字符宽度必须设置为-300，但同时mp的距离必须为-200，所以mp产生了重叠的现象。比例间距选项的作用是同比例地减少(注意，只能是减少而不能增大)字符的间距。按照上一个算式中的前提来假设计算的话就是：当比例间距设为50%，相当于所有字符间距减半(mp间距为50，pl间距为150)，当设为33%的时候，所有字符间距减为原先的三分之一(mp间距约为30，pl间距为100)，当设为100%的时候，所有字符的间距就都被降为0了。因此我们看到的效果是所有字符都彼此依靠(抗锯齿选项及字体形式的不同可能带来微小差异)。1017间距微调选项是用来调整两个字符之间的距离，使用方法与字符间距选项相同。但其只能针对某两个字符之间的距离有效。因此只有当文本输入光标置于字符之间时，这个选项才能使用。1018竖向偏移(也称基线偏移)的作用是将字符上下调整，常用来制作上标和下标。正数为上升，负数为下降。一般来说作为上下标的字符应使用较小的字号。如下图。1019强迫形式的名称是我们为了与文字形式相区别而起的，它的作用也和文字形式一样是将字体作加粗、加斜等效果，但选项更多。即使字体本身不支持改变形式，在这里也可以强迫指定。它与字体形式可以同时使用，效果加倍(更斜、更粗)。其中的全部大写字母选项的作用是将文本中的所有小写字母都转换为大写字母。而小型大写字母选项的作用也是将所有小写字母转为大写，但转换后的大写字母将参照原有小写字母的大小。如下图所示。上标与下标选项的作用与竖向偏移类似，就是增加了可同时缩小字号的功能。下划线选项与删除线选项的作用是在字体下方及中部产生一条横线。
用PS完美抠出复杂的羽毛头饰的简单教程
打开如下图片，复制图层，将 背景 层锁定。我们将在复制层进行抠图，隐藏背景层。选择 >> 色彩范围，打开色彩范围窗口，选择最左边的吸管工具并点击图像背景，这时在色彩范围窗口中你会发现被选择部分变成了白色，移动颜色容差滑杆，使得图像大部分区域变成黑色，并且背景易于选取。提示：要添加颜色到选区时，应使用中间的吸管工具点击要添加的色彩部分2 获得选区，在通道面板中，按下“将选区存储为通道”按钮，得到一alpha通道，取消选择（Ctrl+D），点击“Alpha 1”层，这时图像变成黑白色。提示：图像中的黑色区域是我们要保留的部分，白色为要扣除的部3 这时我们发现图像中还有部分灰色区域，这些将成为半透明区域，所以必须将他们调整为纯黑色或纯白色。图像 >> 调整 >> 色阶，打开色阶窗口，由左向右拖动黑色滑杆直到灰色区域变为纯黑色为止。由右向左移动白色滑杆将白色区域变的更清晰4 选择黑色笔刷并提高笔刷边缘硬度，涂抹需要保留的区域，用白色笔刷涂抹羽毛边缘，根据涂抹区域大小的不同使用不同粗细的笔刷
最新发布
在网页设计中使用不对称设计心得
不对称设计技术可以非常直观有趣和创建不同的焦点。下面是一些鼓舞人心的例子和关于如何使用不对称设计的技巧。不对称仅仅是缺乏对称性，但不对称并没有缺乏平衡与和谐。不对称和对称的设计都可以创造一种活力和紧张的感觉，但也某种意义上的和谐取决于使用的比例。虽然大多数人往往首先能想到的是对称性，因为这是一种很常见的自然现象——想想达芬奇的维特鲁威人或动物的脸的样子;但不对称也是一种自然现象，只是不同的方式出现，例如人类往往会出现左或者右撇子居多。不对称设计的用途非常广泛。通常被用于创造出一种混乱或混淆但充满美感和艺术的技巧。不对称可以强调运动或行动，它是拥有最常用于创造出一种活力或屏幕上的焦点的巨大优势。一些网站如果没有正确或错误的使用不对称或对称设计，会导致网站的元素错乱杂混。不对称的设计使用
十分钟零代码实现HTML5视差滚动特效
视差滚动是最近出现的一个比较火的站点视觉效果，适用于做整站(mini-site)也可以做小动画。通常来说，要使用JavaScript和CSS手工编代码来实现视差滚动效果。本文来介绍如何使用Edge Animate，在十分钟之内，无编码，无压力地实现类似效果。在ipad和我的HTC One上，动画非常流畅，你也可以在你的移动设备上试一试: DEMO上述动画用到的图片资源是作者厚颜无耻的“借”自一个视差滚动效果JS库：spritely.net 。非常感谢。在本教程发布的时间，Edge Animate版本为1.5，可以在Adobe云创意平台上免费下载。 您只需要在注册地址注册即可登录下载。Edge+Animate+Tutorial+4.zip 本教程用到的素材可以在项目解压后的images目录下找到，包括：本教程不会逐步来介绍如何实现上述动画，在上述动画中用到的一些技巧在之前教程中也有介绍过，比如如何使用SpriteSheet来生成逐帧动画 。生成元件在上面的视差效果动画中，背景和前景始终在不间断的滚动。这是通过操纵一幅图片完成的。打开Edge Animate，新建一个作品。快捷键Cmd+I/Ctrl+I导入背景图片hill2.png，在舞台上选中该图片后，快捷键Cmd+Y/Ctrl+Y将其转换成一个元件(Symbol)，命名为symHillBack。结果如图：在舞台右侧的Library面板下的Symbol子面板中能看到“symHill”。现在，你可以删除舞台上symHill实例。我们来开始编辑symHill元件。平移图片hillA
在网页设计中使用纹理传递氛围
在所有类型的设计中，使用纹理的网站占了很大一部分。当你想最大程度的勾起观众的感受的时候，使用纹理是最好的。您可以创建一个温暖和友好的网站，或者相反，你可以创建一个冷漠和严肃风格的。下面的集合包含25个使用纹理创建的华丽网站。你可以看到，他们每个网站都会向用户传递出不同的氛围和感受。Vacheron ConstantinThread’s Not DeadWild Blue TechRedMeat CreativeLes trophées du bar
20款免费和创新的PSD网页设计模板
如果你是一名设计师，经常都需要设计和制作网站，如果有现成的 PSD 网页设计模板可以使用的话，您可以快速的制作出精美的网站作品。 所以，这篇文章专门整理了20款免费的 PSD 网页模板设计，你可以免费下载这些网站布局模板进行编辑和修改，也可以通过这些免费的网页 PSD 模板获取创作灵感。提示：国外blazrobar网站的资源都是顶尖的，可能出于数据指标考虑，现在需要注册了，当然很方便！随便录入个@邮箱即可海量下载！ 强烈推荐！呃，最后，老规矩欢迎同学们打包后私信优设哥分享！或者评论晒地址！ ——————————————————————————————————————————————————————————————————————————————————————————————————————
网页设计新鲜实用的资源下载
在刚刚过去的2月对于网页设计时和开发人员需要注意那些新鲜的东西呢。互联网泡沫那么大，信息量那么多，不需要的咨询常常充斥这我们的大脑，占据这我们的时间。那些我们需要关注的优秀新鲜的WEB应用程序，jQuery插件,Javascript资源，项目管理工具，CMS，HTML框架，WEB开发工具以及那些伟大的新字体。他们都在哪里！？需要燃烧我们多少时间和精力呢？今天我们收集了2013年2月一些新鲜实用的资源，来分享给大家。这些资源都是新鲜的，许多都是可以免费实用的。相信能给大多数设计师和开发人员带来帮助。Dropzone.js是一个开源的，简单的拖放文件上传的图像预览。这是很容易设置（特别是如果你使用的组件，你可以添加它作为一个依赖）的形式或以编程方式实现。 Flowtime.js是一个框架，可以很容易创建HTML的演示文稿或网站整页的流体布局，多个导航控制，转换，视差支持，多。 Notism视觉内容与团队工作是一个很好的工具。您可以上传，叠加，及检讨可视化项目的想法，静态模板创建工作原型，讨论草稿，多。甚至有签署布局上的工具。Dropify可以很容易地使文件可供下载在你的Facebook粉丝专页。有一个免费的计划（不提供像门控），以及保费计划。这是伟大的艺术家，作家，广告，品牌，小企业。 Onepager
四招网页设计让你的网站重获新生眼前一亮
我们都想拥有很棒的网站，想让其他人在看到我们的网站时眼前一亮。 如果他们喜欢的话，还会再次点击浏览或者分享给他的朋友们。这就是好网站的魅力所在。这就需要设计出“有亮点”的网站出来，而这并不等同于一定要亮瞎的毫无目的的视觉渲染以及纯粹为了炫技而编的特效代码。用户总是难以伺候的，现在的上帝都是易怒的，他们甚至也会拿着各种终端来考验你的网站，所以响应式设计也在最近几年在行业里津津乐道，大家都争先恐后的在使用这门新技术。我们不但要会运用HTML5，CSS3和其他复杂的语言，也应该会利用基础技巧打造自己的网站。我敢说很多网页设计者或开发者都难以解决CSS3语言无法在IE浏览器中像在其他浏览器一样正常显示的问题。这是个严肃的问题。如果网页无法显示，那还有什么意义呢?谁想要一直花时间解决错误漏洞呢?如果你的客户没有一笔很大的预算，但你还是想做出很棒的网页来，该怎么办?你要学会打造一个简单的网站，同时又能保证浏览量。这有很多可以实现的方法。以下的几点都可以为建成基础又美观的网站助你一臂之力。1. 巧用动画屡试不爽: 当你想在网站中添加动画时,你通常会使用flash。然而!Flash在过去几年经历了不堪的衰落过程。以至于现如今很多设备或浏览器都无法支持Flash插件的播放。现如今我们有了更理想的替代品。他们在移动设备上也具有独立性并可见。这主要得益于JavaScript, Ajax,jQuery和其他语言，数据库。他们使网站变得有趣，不再无聊。譬如上图的案例http://toriseye.quodis.com/
浅谈如何将战略性内容添加到网页设计
对于网页设计人员，如何组织和规划内容可以说是一个十分关键而又令人头疼的问题。本文站在管理者的角度，从内容规划、开发和维护三个阶段来告诉读者应该如何采取并实施正确的内容策略，同时提供了不少实用方法及内容规划工具，如Basecamp、Trello、GatherContent。原文地址：How to Bake Content Strategy into Your Web Design Process我在创建自己的数字机构时遇到了一个很大的问题： 组织内容。对于我们遇到的大多数项目来说， 内容都是一个显著的瓶颈。 从客户那里收集内容本身已经够困难的了， 但更麻烦的是管理基础设施，工作流，出版技术细节和认证工作流程。让我们承认吧， 内容的开发仍然是一个巨大的，令人沮丧的流程。 客户一下子朝你丢过来一份200页的word文档， 有时还附有一张装满了零散图片的CD和仅仅达成部分一致的流程。你能有多少时间用来浪费在用邮件收发校对word文档上呢?基于管理和经营一个14人工作室的经验， 根据三个不同的内容开发阶段， 我想分享一些心得来帮你驯服这个令人头疼的流程：• 内容规划： 问对问题， 得到第一手的需求， 创建信息图 – 信息构架。• 内容开发： 从客户那里得到内容， 紧盯需求变化和认证的流程。• 内容维护： 让创建的信息图更生动， 开展评审来保证需求的实时性和内容的准确性。以上的3个步骤帮助我们精简了计划， 管理与发布内容的方式， 让我们与客户的关系更融洽。
最好的国外优秀网站模版推荐
2013年一、二月份最好的网站模版热腾腾出炉啦——用HTML5、CSS3、JQuery创作的才华横溢、大受欢迎的作品。这儿有各种类型的模板—HTML5，单页HTML5模板，完全使用JS的模板，WORDPRESS主题，交互式模板，Bootstrap, Moto CMS, JS Animated, Joomla, Drupal, HTML Plus JS animated主题和Magento模板等。不管你是在找内容管理系统（CMS）模板还是商业模板，抑或交互式模板和javascript 动画模板，我们这儿都提供。立刻浏览享用我们收集的模板吧！ Template 43077 – Fashion Blog WordPress ThemeTemplate 42629 – Greenco Landscape Website TemplateTemplate 42526 – King Of Website TemplateTemplate 42680 – Fashion Stylist Website Template
40个能给你提供用户界面灵感的网站
你是否经常遇见一些设计其实是有一个固定的解决模式的？没错！亚麻跌！来看看这些网站吧，保证让你更深入了解现实例子中的最佳实践，以及最有效的技术！所谓设计范式呢，就是我们现实例子中可以不断重新利用的、很适用的”模板”或者指标。比如网站导航列表会把要展示的内容集中放在一个区块标签中。面对神级客户的特定需求，咱们其实还是有很多解决方案滴，作为一合格称职的设计师，最重要的选择当然是在五花八门的方案中找出最能体现用户需求的设计咯。本文中，咱们将分享各种精华网站、画廊、在线出版物和图书馆，为用户界面设计而战！当然要感谢Pavel Konoplitski为我们提供的这些宝贵资源了。————————-网站和Web应用程序的UI系列—————————-UI-patterns.com设计师的UI设计灵感大口袋~关键是…她…她…她居然是免费开放的！！还愣着干什么？！赶紧去瞧瞧各种大神的力作分享吧！！KonigiKonigi非常强调在现实世界中的交互设计和视觉设计范式的使用。这里给了我们丰富多彩的资源导航，你可以通过标签、导航、关键词等等找到你想要的，你对现在流行的关键词、产品、公司感兴趣不？来这里试试吧~QUINCE: X Patterns Explorer我会告诉你这是一个优雅迷人的web应用程序吗？无数用户体验设计模式都来源于此，假设你的浏览器不支持观看这个伟大的应用程序，换个浏览器试试？保证让你大饱眼福获益匪浅。
CSS实例教程：使用伪元素制作时尚焦点图相框
在css标签中有这样子的标签div:before、div:after，对于before、after来说有部分人是相当陌生的，那么这两个标签是什么呢？有什么用处？:befor、:after是CSS的伪元素，什么是伪元素呢？伪元素用于向某些选择器设置特殊效果。 我们用CSS手册可以查询到其基本的用法：既然说到了before、after，那么我们也要大概的了解下content，content用来和:after及:before伪元素一起使用，在对象前或后显示内容。基本的用法如下： div:after{content:'任意字符串';} 现在我们大概知道before和after的大概用法了，那么我们就可以在元素的内容之前或者之后插入新内容。而插入的内容我们也可以用css样式来加以控制和美化。也许在平常中这样子的标签用处不大，但是存在即是真理，哈哈，肯定有他的妙用之处，今天就来看看利用before和after制作的一个创意的时尚焦点图相框，以后制作这种边框线的时候我们可以完全抛弃图片的做法，而且做出来的非常的精美。不信，就请先看看效果demo吧：查看预览下载附件1、 在图片层加多一层div，设置1像素的边框线，边框线有上下左右四条边框，而我们想要的只是每两条边框线组成的类似小三角形的形状，那么我们只要把四条边框线的中间部分去掉，那不就实现了我们的效果。那我们应该怎么把四条边框线中间部分去掉？或者用什么东西把他盖住，不让他显示出来？解决办法就是，我们知道before和after伪元素可以在元素之前或者之后添加新的内容，那我们就利用这两个伪元素来盖住四条边框线的中间部分。 2、 我们先去掉左右两边的边框线，在边框层，利用before伪元素，使用css样式的定位，设置白色边框，为什么要白色的边框呢？因为要把之前的左右边框中间部分遮掉，颜色设置成和背景色（本例的背景为白色背景）一致，这样子看起来就相当于中间部分被裁剪掉了。 3、我们继续去掉上下两条边框线，方法同上，利用after伪元素，使用css样式的定位，设置为白色边框，遮掉上下边框线的中间部分。这样子一来，基本的形状就出现了 4、美化步骤，调整我们的细节，边框线调整为虚线。 了解了基本的思路和方法，是不是很简单呢？那我们就开始动手写代码吧。 <div class="content"><ul> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_1.jpg" /> <p class="focus"></p></a></li> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_2.jpg" /> <p class="focus"></p></a></li> <li><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_3.jpg" /> <p class="focus"></p></a></li> <li id="noborder"><a href="http://www.jiawin.com" target="_blank"><img src="jiawin_4.jpg" /> <p class="focus"></p></a></li></ul></div> CSS样式代码 .content {width:788px; margin:auto; height:auto; overflow:hidden; padding:30px; }.content ul li {float:left; height:176px; border-right:1px solid #DDDDDD; position:relative; padding:10px;}.focus {background:rgba(250,250,250,0.25); width:174px; height:174px; border:1px dashed #666; position:absolute; left:10px; top:10px; display:none;}.focus:before {width:174px; height:134px; border-left:1px solid #fff; border-right:1px solid #fff; content:''; position:absolute; left:-1px; top:20px;}.focus:after {width:134px; height:174px; border-top:1px solid #fff; border-bottom:1px solid #fff; content:''; position:absolute; top:-1px; left:20px;}.content ul li:hover .focus {display:block;}#noborder {border-right:0 none;} 通过这个例子是不是很方便的把这个效果做出来了呢？而且看看我们的代码，是不是很简洁呢！哈哈……或许还有更好的方法来实现，我们可以一起探讨。我个人感觉其实div+css是很好的一门很容易手上但是功能性很强的技术，而且他很好玩很有趣。利用你的奇思妙想， 你可以做出各种意想不到的效果。期待你的作品哦。查看预览下载附件