推荐阅读

ps颜色替换为指定颜色改图片局部颜色
更改局部颜色的方法有很多,笔者也写了不少相关的文章,比如常用的方法,使用色相饱和度,无需做选区,直接调整颜色,虽然操作简单,但有一定的局限性,无法替换为指定的颜色,效果也差一些,那么既要替换颜色,还要保留原有的褶皱等明暗关系,哪种方法相对好一些,操作也容易上手一些,下面通过截图简单介绍一下操作流程。 1、下面通过案例说明一下渐变映射改变颜色的方法,下图中更换女孩上衣的颜色,使用【快速选择工具】把衣服选出来, 2、点击图层面板下端的【创建新的填充或调整图层】按钮,弹出的菜单里面,继续点击【渐变映射】, 3、渐变映射图层添加上之后,可以看到选区变为了蒙版,渐变颜色默认为【前景色】,弹出的属性面板上,双击渐变条, 4、弹出的渐变编辑器界面上,渐变条的下端,当鼠标移动到上面之后,鼠标指针变为手指样式,点击可添加色标, 5、色标添加之后,点击选中后,在【颜色】一项中,双击颜色块,弹出【拾色器】,拾色器界面上,是可以填上RGB值的,把需要替换的颜色值填上,确定即可, 6、新增的色标,向右滑动会颜色加深,反之向左滑动,颜色减淡, 7、除了色标可以调整,还有菱形图标的颜色中点,左右滑动看一下,也可以颜色加深减淡的微调,如果色标颜色设定为黑色,调整菱形按钮,可以出现哑光效果, 8、最后展示一下效果,还可以借助图层混合模式, 比如正片叠底或柔光模式,获取意想不到的效果, 渐变映射,是根据不同的亮度,映射不同的颜色,不会改变原有的明暗关系,如对上述操作有疑问,可以在下方留言。

photoshop 利用高反差给偏黑少女磨皮美白
原图效果图1、打开素材原图,复制一层。图层样式设置为“滤色”不透明度为50% 如下图2、创建色阶图层,对其进行调整。参数设置如下图5、执行滤镜>其它>高反差保留。参数设置如下图6、执行图像>计算,连续执行三次。加强效果 如下图

根据用户浏览器及分辨率调用不同的CSS样式文件
DIV CSS教程:根据用户浏览器及分辨率调用不同的CSS样式文件 (未测试 来自网络 请自行验证) var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引号里面分别填写,用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引号里面分别填写,用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。 不判断分辨率,只判断浏览器 应E.Qiang提议,编如下代码。实现根据浏览器类型自动调用不同CSS。
最新发布

5种方式提高网页设计中的对比度
在网站建设工作中,你是否会觉得你的网页设计项目好像缺少那么一些特殊的流行元素?这很有可能是因为页面缺少了足够的对比度。其实,通过页面中提供的不同元素之间的对比区分,可以使得每个元素看起来更加个性化,突出以及特殊。网站设计可以通过多种方式来创建各种极具个性的对比,而且,你不用拘泥于一种或几种不同的的元素,所有不同类型的元素都可以应用到。从排版到色彩再到空间,通过创造对比可以使一个设计从“啧啧”的嫌弃到“喔”的惊叹,其中的落差你可以自行脑补。这里我们总结提供了五种方法来提升网站设计的视觉对比。1.刻意使元素更大(或更小)当在设计中创建焦点时,过于体现对称性和有序性可能是在给自己挖坑。页面上如果具有太多相等权重的元素,会使得它们最终看起来没有主次,完全是相同的,这样就显得过于平淡了。但面临以上的这个问题时,最容易的解决方案就是凸显一个元素,你可以让它更大,或者更小。通过这种方法,可以使这个元素成为页面上直接的焦点,通过这个“小心机”,用户会自然的被吸引到这个区域,因为比起周边的其他元素来说,它是不同的。使元素,照片或文本区域更大或更小不仅仅是通过物理尺寸控制的,它也包括通过视觉重量的轻重来体现。想了解这一点,最简单的方法就是在排版或字体使用上多花一些心思。看看上面的图像。两个词都是相同的“大小”,但注意,通过视觉,你觉得哪种形式的设计显得更“重”呢?上面的这种对比就是通过字体中的粗笔画和薄笔画来体现的。你可以试着将这种相同概念应用于几乎任何其他网页设计元素中,结果一定会让你吃惊的。

10个思路帮你设计出简单易用的网页
极简主义的流行让越来越多的网页设计师开始着迷简单、简约的网页设计,CARRIE COUSINS 的这篇文章就帮你搞定这个问题。坦率的讲,在网页设计这件事情上,简单的设计往往更好。一个简单易用的界面更容易为用户所掌握,也更容易将一个新用户转化为一个活跃用户。面对庞杂的需求,许多设计师总会身不由己地向着复杂的方向来设计网页,那么到底要如何将一个已经比较复杂的网站简化下来呢?其实思路并不复杂,诀窍在于根据用户目标,重新审视整个路径,将妨碍用户达成目标的障碍都清除掉。而今天我们要聊的10个简化技巧都是围绕着这个思路来推进的。无论你是正在设计一个全新的网站,还是针对现有的网站进行简化,这10个简化技巧都非常值得尝试。1、专注于做行为召唤设计网站上的每一处设计都应该是有目的的,都相应地迎合用户的某个行为或者需求,这是显而易见的。这也为行为召唤的设计提供了依据。引导用户的文案、按钮和链接都应该清晰、明显,永远不要让用户错过。2、简化分页

7个秘诀帮你做出体验极佳的网页表单
表单是网页设计中最常见的元素,几乎每个网站都会包含一种甚至几种不同类型的表单。从简单的电子邮件搜集和订阅,到注册、下单、购买,表单一直伴随着网页而存在。所以,设计出好看易用的表单是非常有必要的。也正是因为表单一直伴随这网页存在,在过去的20多年间,表单的设计规范和标准也一直在逐步发展。虽然许多网页中的表单涵盖了大量的信息也数量可观的栏目,但是绝大多数的优秀设计和最佳实践都是以简单而著称。好的表单一目了然,用户不需要输入太多信息,条目标识明确,格式清晰,让用户尽可能一次就能正确填写。今天分享7个表单设计的秘诀,帮你设计出素质过硬的网页表单。1、尽量让表单一目了然用户浏览网站的时候,通常会快速扫视来获取信息,看看网站内容和设计是否对他们的胃口或者符合需求,再决定要如何应对、交互。表单也是一样的道理。一目了然的表单能让用户立刻知道他们需要填写多少信息,以及如何提交表单。一份一目了然的表单具备下面的特征:·对比度:文本和标签都简短直观,易于阅读,避免使用大量的色彩,尽量采用传统的黑白式的文本/背景组合。·分组和间距:像较长的表单那样,将相近、相关的信息都分到同一组当中。以支付为例,用户的基本信息、支付信息和物流信息分成不同的组。三个较短的条目比一个较长的条目要更容易接受。控制好标签文本和填写表单之间的间距,根据相关靠近原则,让条目之间的相互关系更明确。·行为召唤:金莲使用大且容易看清的按钮。按钮中的文本指向性明确,比如“提交”“立即支付”或者“下一步”,直观不拖沓。

7项帮你创造优质移动端UI的网页设计最佳实践
在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。这无疑是一个系统而宏大的话题,也许不是一两本书能够说明白的事情。不过,实例总是有说服力的,今天我们用7个APP设计的最佳实践来为你来展现优质APP的设计之道。1、一屏一个任务降低用户完成任务之时所需耗费的精力。你为APP的每一屏都应当承载一个对用户有用、有价值的交互或者任务,一次完成一个任务,且只能有一个任务,其中应该不包含超过1次的行为召唤(CTA)。这样的设计能让用户更轻松地学习,更便捷地使用,在设计上也更容易添加删减以及构建。以Uber为例,Uber 清楚地知道用户的目的是乘坐出租车,所以,应用程序不会一次给用户太多的信息,会根据地理信息自动检测用户的位置,而Uber 提供给用户的每一个界面的交互都是单个的,用户只需要选取位置,下单即可。2、隐形的UI内容即是界面。专注于内容,并且尽量删除不必要的元素,这样可以缩短用户集中注意力的时间,用户将会更快地被引导到他们正在搜寻的内容,而内容本身正是一个隐形的界面。最典型的就是Google 地图。在重新设计的时候,Google 地图删除了所有不必要的面板和按钮,地图本身就是最好的界面。

详细解析网页设计轻松制作信息图的五个工具
在成千上万的文字中解读茫茫网海已经不再是主流了。如今正兴起的信息图形,给没有时间和精力坐下来好好琢磨满屏文字的人们带来了福音。或许过去,你需要大量的证据和分析去解读某一信息,取而代之的信息可视化,为人们提供了更易解读,更有乐趣,更加美观,快速便捷的获取信息的方式。当然,你也可以利用信息可视化图形来装扮你的网络空间(避免单调的纯文字信息),包括你的个人网站,Email,或者是社交主页,比如微博,facebook,Pinterest……Visual.ly提供了大量由其他用户制作的信息图形,让你在几秒钟内制作属于你自己的信息图形,没有设计技能要求。Easel.ly是个非常容易上手的应用,虽然严格上来说它还处于测试阶段。你只要选择一个模板(vheme, ”Visual Theme的简称”),添加你需要的信息,拖拽些元素上去点缀点缀,一张精美的信息图形就完成了!虽然没有Easel.ly易上手,Infogr.am仍然是面向非设计师的信息图形设计工具。它允许用户将数据传到网站上并将其解读成图表模式,允许用户自定义图形,并提供更多智能化界面展示信息。Wordle将其定义为制造文字云图的“玩具”并不为过。Wordle能够根据用户提供的文字内容自动生成多彩有趣的文字云图,并突出其中最频繁出现的信息。你也可以根据自己的想法改变文字的字体,颜色和布局。

详细解析网页设计如何做一款成功的APP应用
本文作者从自身丰富的应用开发设计实践经验和大量的优秀应用实例中,总结提炼了从产品概念、设计、开发到市场推广等一系列的相关原则,指导移动开发人员怎样来打造一款成功赚钱的应用。姗姗来迟的这篇文章希望给大家带来一些感悟与帮助。绝大多数应用都失败了。 这个残酷的现实令很多幻想破灭的开发者开始认为,在Apple store中成功就像在淘金热潮中致富一样:你所需要的仅仅是运气。“运气论”这种想法是危险的,它就像是用来减轻失败痛楚的麻醉药。感到痛苦是件好事,这样才能看到问题所在。如果我的应用失败了,我会寻找失败的原因。与其埋怨那些超出你控制之外的因素,为什么不看看像tap tap tap和Tapbots这些公司做了些什么,可以让他们一次次的成功。尽管采用一套毫无缺陷的模式是几乎不可能的,但朝着这个方向工作会显著的提高你成功的几率。这些内容观点都以iOS平台为例,但是很多准则也同样适用于其他平台。1.产品概念任何一款成功的应用都需要以坚实的产品概念作为基础,因为概念决定了产品最终完成的潜力。如果你在洗澡中突然灵光一现 ,要抵抗住将它立刻落实成产品的冲动。前期少许的研究工作可以帮你在接下来的工作中省去很多麻烦。寻找空白点Phill Ryu在一份记录中对一些成功应用进行了持续的跟踪,包括Clear、The Heist、Classics等等。他验证自己产品概念的秘诀相当简单:寻找空白点。 App Store里的应用在产品质量、用户体验和概念创新等方面存有大量的空白点。这些空白点都是一些很棒的等待填补的机会。看几个例子:

全球45个最热门免费下载电子图书的网站设计
伟大的互联网里有着许多惊人的资源库,只要你善于挖掘,你可以找到任何关于学习的一切资源。今天,我们推荐给你一些真正有用的网站,在这里你可以找到许多电子书籍和杂志。大部分网站提供pdf格式的电子图书,当然也有其他格式的。scribdScribd是一个在线文档上传以及分享的社区;它允许用户上传.pdf,.doc,.ppt,.xls,.txt等多种格式的文档文件,并以Slideshow的形式展示给用户。Project GutenbergProject Gutenberg你可以下载到你的电脑,iPad等其他便携设备上读取,有超过33,000个免费电子书。Get Free e-Books它是一个免费电子图书网站,在那里你可以免费下载的书籍完全免费。您在这个网站上找到的电子书收集来自各地或由创始人亲自编制。

网页设计师常用的Photoshop插件解析
photoshop是网页设计师常用的一个非常重要而强大的工具,可以让网页设计师的工作高效便捷的进行,也为设计师们的天马行空提供了实际技术实现。一般我们的网页设计师设计完成后,需要将其转换制作成网页形式文件,生成HTML和CSS;然而在Photoshop中却没有这个转换高效率的功能,但万幸的是我们可以用插件来实现。Photoshop插件可以扩展我们的Photoshop基础功能,让他更加的强大和专业。 今天就为大家收集了一些对于网页设计师来说非常实用的Photoshop插件,包括:PSD转换HTML插件、css3生成插件、网格系统插件、图片精灵插件、屏幕分辨率插件、web字体插件等等。希望对大家在实际项目中有所帮助。基于云的免费Photoshop插件,可以将Photoshop图层特效转为CSS3代码。可以对图层的一些特效(如:阴影、发光、圆角、渐变等)进行css3的完整代码输出。这是一个高效切图插件,可将制作好的手机APP文件,直接输出成iOS、Android、PC用的格式,同时还会自动命名(具体操作可参考官网介绍)。导出来的图片格式为png格式,并且你还可以指定大小。你甚至可以同时导出按钮的所有状态(默认、点击、经过)图片。 另外,可以用这个插件来解决Retina显示屏的图片放大与缩小问题。这是一个非常简单的Photoshop动作。在选择对应层后,选择动作,然后按播放。文件将会被转换成一个16位的png文件。还有这个动作可以有效的解决渐变工具颜色过度不柔和的问题。这个小插件提供了一个非常便捷的方式生成像素级别的辅助线(栏,行,中线),免去了我们计算网格数值的麻烦,只要在插件面板输入你定义的数值,就可以快速的拉出辅助线。这是个字体管理插件,可以轻松使用到世界上流行的字体。还可以通过Google Web Font使用500+种字体。

解析网页UI扁平化设计的五个特点
自从Windows8的Metro风格出来后,扁平式的设计风开始成为网页设计和UI设计的年度流行设计趋势,但现在我们不称它为Metro风格了,国外设计师都说是Flat Design(即扁平化设计),或者你很讨厌Metro风格,但你不定讨厌Flat Design,它的设计很有特色,那么什么是扁平化设计呢?国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点,下面看看扁平化设计(Flat Design)的五个特点:1.拒绝特效扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。这一设计趋势极力避免任何拟物化设计的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文本和导航栏与背景图片格格不入,各成一派。那么,扁平化的效果如何呢?因为这种设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局,这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。