推荐阅读
ps怎么选择区域变亮调整局部变亮变暗
ps局部提亮的方法有很多，常用的方法比如曲线整体提亮，反向蒙版后，用画笔局部提亮，或者用白色画笔绘制后，通过图层混合来调整等等，本文讲解的方法，类似于蒙版的操作，不仅可以正向提亮，还可以反向消除，下面通过截图简单说明操作步骤。 1、本文介绍的方法，是在中性灰图层上，绘制白色或者黑色，达到局部提亮或者压暗的效果，中性灰图层采用叠加的混合方式，所以会呈现透明的状态，不会影响整体效果，前景色和背景色可以设置为白色+中性灰，绘制的过程中，出现不满意的地方，还可以再还原回来，类似于蒙版的操作原理，先来新建中性灰图层，点击【图层】，弹出的菜单里面，点击【新建】-【图层】， 2、弹出的窗口中，模式选择为【叠加】，勾选【填充叠加中性灰（50%）】， 3、因为中性灰在叠加模式下，呈现透明效果，所以不会妨碍到后续的操作，前景色设置为白色，背景色也设置为中性灰，颜色值为#808080， 4、切换到画笔工具状态下，选择【柔边圆】笔刷，流量调整的小一些，低于50%， 5、下图中，如果想要提亮下端阴影部分的山石，可以选中中性灰图层，使用画笔在上面绘制，可以看到局部提亮的效果， 6、如果想要缩小范围，把多余的提亮地方擦掉，可以切换中性灰为前景色，画笔绘制还原即可， 7、如果想要压暗局部，只需要把前景色设置为黑色即可，操作方法与上述相同， 局部提亮的方法有多种，哪个方法顺手用哪个，如果您对上述操作有疑问，可以在下方留言。
学习鼠绘矢量风格小货车图标的PS教程
本教程主要使用Photoshop绘制蓝色立体效果的小货车图标，整体的效果主要先使用钢笔工具勾画出轮廓，然后在使用图层样式来完成效果图，喜欢的朋友让我们学习吧。先看看效果图第一步使用钢笔工具画出小货车的大的形状，值得注意的是一些形状中的细节，不要忽略，这是让图标最后看起来生动的基础。第二步继续添加例如方向盘、座椅、前后车灯、轮毂等一些形状细节，并开始使用渐变、凹凸线等方法给油箱、轮毂、车身添加质感。第三步
制作星空立体电影主题文字图片的PS教程
本教程主要使用Photoshop制作电影主题风格的3D艺术字，不用三维软件只用PS就可以完成电影3D金属效果的字体，步骤有点多，不太复杂，但是操作步骤比较多。首先我们先看下最终的效果图步骤1先准备两张图案1、2，图案的样式用于改变3D字体的表面的材质 步骤2把两张图片导入PS，进行定义图案存储
网页设计师设计网页遵循的3条原则
在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种内容的定位。DIV是HTML语言中的一个常用元素，而DIV+CSS是网页布局的一种方法，这种布局方法区别于传统的Table布局，达到了内容与代码相分离的效果。使用DIV+CSS设计的网站是符合W3C标准的，可以更方便搜索引擎的索引。 通常搜索引擎对标准化制作的网站页面所给予的权重更高，并且使用DIV+CSS的架构也有很多优势，比如改版方便，不需要变动页面的内容，网页打开速度也会明显加快。 很多网站都会忽略网页中的各种META标签，它虽然是HTML语言Head区的一个辅助性标签，但是完善这些标签会使得页面在搜索引擎中更受欢迎。对于搜索引擎来说，一般需要添加的标签有keyword（关键词）、Description（页面描述）、robots（搜索引擎抓取器）等，META标签的写法如下：<meta name="keywords" content="网页关键词，填写一个页面的内容关键词，关键词不可重复过多。"><meta name="description" content="网页描述内容，最好的一段完整的句子。">（具体可以参考网页教学网，查看网页源文件<head>之间的代码。） 除了网页头部的META标签，网页中的一些标签同样需要晚上描述内容，比如一些网站为了使页面更加美观，导航也采用图片格式，这样一来搜索引擎就无法“读懂”。 这时就可以将图片使用alt标签进行标注说明。方法是将图片加上alt=描述文字，如鼠标停靠在本博客每张插图上面现实的文字就是实现效果。 虽然网页中的关键词对于页面在搜索引擎中的排名很重要，但是在设计网页的时候，也不能有大量的重复关键词。 在搜索引擎的网页排名算法中，很重要的一个因素就是关键字密度，即某个词语在网页中的分布情况。
最新发布
详细解析设计更优的移动支付流程的方法
译者注：在电子商务中，我们发现用户在支付环节的流失率非常高，支付流程的用户体验是至关重要的环节。本文介绍了一些移动端支付流程的方法，怎样让我们的支付流程更加易用。业余时间翻译了这篇文章跟大家共享，若大家发现任何错误，欢迎随时给予纠正。原文地址：designing-a-better-mobile-checkout-process数据显示越来越多的用户具有使用智能手机进行付款的倾向。“ 这些用户愿意在移动设备上完成购买吗? ”这个问题得到了迅速回答。2012年，美国移动电子商务销售额飙升81%,形成了250亿美元的市场。值得注意的是，这些成交贡献只有一部分来自于app。根据调查显示，61%-81%的用户更倾向于在移动端的网页上来完成购物的各种操作：研究商品和价格，查看商品详情，参加促销活动，下单和支付等。比起功能相互****的app，他们更倾向于在浏览器中来进行购物(来获得浏览与支付环节之间的无缝体验)。让我们深入看一些移动端结账流程的例子。1、只保留重要信息我们也许都回答过很多令人讨厌的问题，比如“你是怎么知道我们的?”这样的问题可能是对商家有用，对消费者来说没有任何作用。然后这些消费者需要付出辛苦赚来的钱，他们也更有权力决定是否关闭这个页面。虽然这些问题在网页上不那么重要，但是在移动端却是致命的。让我们来看两个例子：左边是是由Moby设计的响应式移动支付流程，他减少了不必要的信息只保留了必要的信息。成功的把整个支付流程聚合到了一个页面。
网页设计中文字排版的10点技巧分享
在网页设计中，文字排版对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用。当我们谈论网页是否能和用户建立有效的沟通的时候，通常是指文字排版在这里起到的作用：“网页中95%以上的信息是以文字形式呈现的。”良好的排版使用户更易于阅读，而混乱的排版则使用户失去继续浏览的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道：“排版的目的是优化可读性，访问率，可用性，保持和图形的平衡关系”换言之，优化排版也在帮助您优化界面。本文中，我们提供一组规则，将帮助您提高文本内容的可读性和易读性。1.不要使用过多的字体网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。通常情况下，将字体家族的数量限制在最小数量(2个是很多，1个通常就够了)，整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。
详细解析网页初级学习者如何学习
嗨少年，你是否下定决心学习网页设计？那就恭喜你了！网页设计可能是你职业生涯中让你满血复活的技能之一了。路漫漫其修远兮，在这漫长的学习中,开始的30天是至关重要的，因为很多人仅仅坚持了一两个星期就放弃。在这篇文章中，我将传授你一些有用的知识和技巧，让你更好的开始网页设计之路，并长久的留在这个赛道上。向上吧，骚年！网页设计是一个涉及面很广的领域“我想学习网页设计”这句话就像“我想学习如何烹饪”一样,你知道吗？做饭有成千上万的食谱,很多不同的烹饪风格。每个成为设计师的人都应该知道,网页设计有成千上万的特定工具和一般原则。也正因为网页设计是这样一个广泛的领域,许多人就简单地问：叫兽，我该如何开始？这个问题虽然只有六个字，却能阻挡了人们的网页设计之路：有这么多工具可以选择,那我到底该选哪个呢？我真的无从下手。我的网页设计之路在网页设计大军中,我也曾是一个被如何开始和从哪里开始弄的不知所措的菜鸟。我不知道是该先学习Dreamweaver呢还是photoshop ? 或者先学习如何用JavaScript编程?其实这些事情我都可以做,但当学习的资源很多的时候,我们中的许多人就会面临着过载的选择,当你有很多选择时,你会烦恼,最终一个也不想选了。你有过这种经历吗？Dreamweaver是一个很基本的程序,它可以帮助你更快编写HTML和CSS代码。它的优点是简单,缺点是你会花更多的时间去编码。所以Dreamweaver只能是一个节省时间的好方法,而不是学习网页设计的好开头。这就是我已经吸取的教训。所以我的选择是:首先学习HTML和CSS. 为什么要从HTML 和CSS开始?
色彩的流行趋势分析及实际设计中的应用
无论是平面设计，包装设计还是网页设计，空间设计还是产品设计，色彩永远是最为重要的环节，但我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是电脑界面的色彩。关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍或者特别棒的设计案例，有利于系统系统地理解，在此我们通过设计的对比和配色告诉大家在工作中，色彩的配置和色标使用;下面介绍一些色彩在实际使用中的步骤;第一步、底色和图形色;色彩搭配的问题确实不是一个简单的问题。这一代的设计师比上一代的设计师，所能运用的色彩工具多了许多。如今，我们能运用好计算机为我们提供的丰富色彩，看来不是很简单的事情。就我个人而言，在我从事设计师工作以来，往往也会迷失在色彩的世界。现在交流一下自己学过的和掌握的一些经验，希望大家指正。配色所要注意的要素实际设计时，我们经常会按照设计的目的来考虑与形态、肌理有关联的配色及色彩面积的处理方案，这个方案就是我的配色计划。在做配色计划时，我们应该考虑下述几点以突出视觉效果。在设计时我们会经常遇到用几个色做各种形的构成，作为底的色我们往往会将它推远，而作为图形或文字的色我们要将它拉近。这就需要我们了解受配色关系的影响是什么样的。一般明亮和鲜艳的色比暗浊的色更容易有图形效果。因此，配色时为了取得明了的图形效果必须首先考虑图形色和底色的关系。图形色要和底色有一定的对比度。这样才可以很明确的传达我们要表现的东西。我们要突出的图形色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。第二步、整体色调 如果我们想使我们的设计能够充满生气，稳健，冷清或者温暖，寒冷等感觉都是由整体色调决定的。那么我们怎么能够控制好整体色调呢?只有控制好构成整体色调的色相、明度、纯度关系和面积关系等。才可以控制好我们设计的整体色调。首先要在配色中心决定占大面积的色，并根据这一色来选择不同的配色方案会得到不同的整体色调。从中选择出我们想要的。如果我们用暖色系列来做我们的整体色调则会呈现出温暖的感觉，反之亦然。如果用暖色和纯度高的色作为整体色调则给人以火热刺激的感觉，以冷色和纯度低的色为主色调则让人感到清冷、平静的感觉。以明度高的色为主则亮丽，而且变得轻快，以明度低的色为主则显得比较庄重、肃穆。 取对比的色相和明度则活泼，取类似、同一色系则感到稳健。色相数多则会华丽，少则淡雅、清新。 以上几点整体色调的选择要根据我们所要表达的内容来决定。第三步、配色的平衡 颜色的平衡就是颜色的强弱、轻重、浓淡这种关系的平衡。这些元素在感觉上会左右颜色的平衡关系。因此，即使相同的配色，也将会根据图形的形状和面积的大小来决定成为调和色或不调和色。一般同类色配色比较容易平衡。处于补色关系且明度也相似的纯色配色，如：红和兰绿的配色，会因过分强烈感到刺眼，成为不调和色。可是若把一个色的面积缩小或加白黑，改变其明度和彩度并取得平衡，则可以使这种不调和色变的调和。纯度高而且强烈的色与同样明度的浊色或灰色配合时，如果前者的面积小，而后者的面积大也可以很容易的取得平衡。将明色与暗色上下配置时，若明色在上暗色在下则会显得安定。反之，若暗色在明色上则有动感。第四步、配色时要有重点色 配色时，为了弥补调子的单调，可以将某个色作为重点，从而使整体配色平衡。在整体配色的关系不明确暧昧时，我们就需要突出一个重点色来平衡配色关系。选择重点色要注意以下几点：重点色应该使用比其他的色调更强烈的色。 重点色应该选择与整体色调相对比的调和色。 重点色应该用于极小的面积上。而不能用于大面积上。选择重点色必须考虑配色方面的平衡效果。第五步、配色的节奏 由颜色的配置产生整体的调子。而这种配置关系在整体色调中反复出现排列就产生了节奏。色的节奏和颜色的排放，形状，质感等有关。由于渐进的变化色相、明度、纯度都会产生变化而且时有规律的，所以就产生了阶调的节奏。将色相、明暗、强弱等等的变化做几次反复，从而会产生反复的节奏。可以通过赋予色彩的配置以跳跃和方向感就会产生动的节奏，等等。我们可以通过学习或训练来掌握更多的节奏效果。
让你的表单升级到CSS3和HTML5客户端验证
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。查看预览首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：名称电子邮件网站地址提交按钮我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。
详细解析网页页面光影特效的运用
为了展现页面的主题或者是贴近游戏的氛围，常常会看见游戏的页面中运用了许多不同类型的光效的渲染，一个简单的元素有时候加上一点光效就可以化腐朽为神奇。那么光效究竟是如何具体地影响页面的视觉观感的呢?1、 丰富页面的层次当人物和背景的颜色比较接近时，为了增强人物的立体感和空间感，可以在人物上添加光效，拉开人物和背景的距离，形成视觉差异，这样需要强调的人物就瞬间凸显了出来，页面的层次也一下子体现出来了。2、 烘托气氛光效的颜色、形状和出现的位置会对设计表达的气氛产生很直接的影响，就好像现实中的光源一样，浅色暖色调的光效给人光明温暖的感觉，深色冷色调的就给人阴暗冷酷的感觉，同样的素材加上不同的光效，展现的也许就是完全不同的立场。具体到游戏页面设计，不同的*性格不同，通常都有各自的代表颜色，这时候用对应的光效来表现，很容易就能烘托出这些*不同的个性来，是非常基本的运用。3、 视觉焦点有时候光效在页面上以光源的形式出现，这样可以很容易抓住用户的眼球，吸引住用户的焦点，页面上需要重点强调的信息，就可以展现在光源附近，这时光效充当的就是引导用户的作用，非常简单，但是很有效。
常见的浏览器HACK技巧总结
如果你经常需要做前端页面，那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack，记录一下，方便以后查阅。IE系列浏览器的hack大略如下：这样就基本上就可以兼容所有IE。其中粉红色部分为属性hack，黄色部分为选择器hack，它们可以结合使用。此外Firefox和Chrome也有它们专有的hack，详细hack方式及使用示例如下：Firefox： @-moz-document url-prefix() /*写在选择器外层时（只可写在此处）：Firefox only*/ Chrome： @media screen and (-webkit-min-device-pixel-ratio:0) /*写在选择器外层时（只可写在此处）：Chrome only*/ 使用示例： @-moz-document url-prefix() /*Firefox*/{ body { background-color:pink; }} 浏览器对css的解析是从前到后的，并且采用最后一个样式声明。 .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF0000/9; /*IE6、IE7、IE8会显示红色*/ *background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background-color: #009933; /*IE6会变为绿色*/} background: red; /* 对FF Opera和Safari有效 */#background: blue; /* 对 IE6 和 IE7有效 */_background: green; /* 只对IE6有效 *//*/background: orange;*/ /** 只对IE8有效 **/!important /*FF、IE7有效*/* /*IE都有效*/ IE8是可以和IE7兼容的，简单一行代码，让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。
社交媒体分享图标在网页设计中的作用
上周末，我参加了生平第一次黑客马拉松。你知道什么是黑客马拉松吗?那是一个出钱的人(投资者)寻找可能开发成功的项目，然后持续24小时的很长很长的马拉松式的编程活动。所以我和我的朋友们或多或少的建立并提出了一些现成的项目(无论从发展还是商业的角度去看)，于是投资者选择在这些项目上投入。在一个项目发展的最新阶段上，我们在社交媒体图标的选择上面发生了很多争执，而且没有一个人想要放弃。这次的争论给我们提供了新的想法，也使我们更加注重社交媒体图标在网页设计中的作用。它们看起来像什么?它们真正的作用是什么呢?为什么网页开发人员怀疑它们呢?剖析社交媒体图标事实上，社交媒体图标可以理解为社交媒体、社交网络的标志以及说明的链接。社交媒体图标可以表现出几个不同的功能。有时，它是社交网络中的公司资料页面/帐户的链接。通常情况下，你可以在它们的周围看到“跟随我们……”或“加入我们……”这样的字样。这些图标通常会被放在网页的顶部或底部，也可以放置在侧边栏。从经验来说，它们在整个网站都是可见的。New York TimesLucius社交媒体图标可以在社交网络中的用户帐户内共享特定的网站页面内容。这样的图标总是应用于博客和网上商店，我们也可以把它分为两种类型：普通的社交媒体共享图标;
设计一个成功电子商务网站的四大特点
电商网站的设计是最复杂且交互性最强的，对于一个不谙此道的人的来说将会是一个艰巨的任务。即使你在网站设计圈子里混迹多年，你也可能不知该从何处下手。所以一旦你下定决心要趟这一趟“浑水”，牢记以下几点将会使你在设计道路上事半功倍：1、面向合适的用户群在浩瀚网海，你可以找到任何你想要的东西，那么是什么使用户能来网上光临你的网店，而不是去大型零售专营店血拼呢?为用户提供良好的用户体验，使他们相信并且尊重你在这方便独到的眼光就显得尤为重要。如果你能给用户博学可靠的印象，那么用户也更愿意花时间同你一起购物。认清你的电商网站的闪光点，然后在你的设计中将其突出放大。例如Kiki &Bree专注于双胞胎婴儿装的设计。或许你也可以在专营连锁店找到类似的产品，但是K & B提供的网站设计和产品描述，会让你觉得他们的产品经过设计师的精雕细琢，是其他三俗网站无可比拟抄袭不来的。2、遵守常规的导航元素一个电商网站也是最需要讲求实际的网站之一，对于其他网站的设计(比如作品集和博客)，一些规则可以被打破，但是对于电商网站，“形式遵循功能”的设计理念需要严格遵守，如此才能将用户的困惑和不满降低到最小。应遵从的设计理念如：导航栏需要在左边或者右边可快速识别的搜索栏