ps怎么抠头发丝,ps头发丝抠图技巧

在PS里打开要抠出头发丝的照片后,按下CTRl+J键复制一下该图像,再在该图像上按CTRL+L打开色阶,把对比度调明显些。 接着点击通道面板,点击一个黑白对比最分明的一个通道,拖动它到复制图层的图标上,复制出一个通道,再在该通道上进行反相。 反相后,再在该通道上打开色阶,把对比度再调明显点,调的时候,可适当拖动中间那个滑块,以让头发丝的边缘更清晰。 这时,图像的背景色基本上应为纯黑色,然后点击画笔选纯白色,把非边缘部位,全涂成纯白色。 接着,在按下CTRL键后,点击一下复制出的当前通道,以生成选区,再点击RGB那个通道层。 然后点击图层面板,回到最开始按CTRL+J复制出的那个图像图层上,如下图所示。 再在该图层上按一次CTRL+J键,这样就把整个要抠出的头发丝部位,复制出来了;如有需要,可点移去白色杂边把头发丝边缘的颜色再净化一下,然后就可以在下面加上任意底色的图层了。   https://jingyan.baidu.com/article/1876c8525a323c890b137618.html

字体图标 Font Face

设计师做的高保真原型图,难免会用到艺术字体。 采用切片的方式,简单,粗暴,节省时间。除了retina屏其它兼容性也是一流。但是在修改的时候,会花很大的力气。即使只是修改文字大小,也需要重新切图,更别说修改文字,或者改变文字颜色了。 有没有想过,文字本来就应该是它原本的样子。只是看起来像,似乎不和情理。 之所以不直接使用艺术字体,最大的一个问题就是字体文件,一般都太大了。轻轻松松就上兆的节奏。在网页这种流量寸土寸金的地方,真的是很难应用起来。 我们在一个网页上一般用到的艺术字体的地方,往往只有banner和大标题。其实真的算下来也没有几个字。如果我们能把用到的字单独存在一起,组成一个字体文件,这不就解决了字体文件太大的问题了吗? 准备字体形状 将文字,分解成一个字一个图层。 选中所有图层,右键转换为形状。 选中所有图层,右键导出为… 导出svg图片 修改每一个图层的文件设置为svg。 导出 登录网站 登录https://icomoon.io, 选择右上角icoMoon App 或者直接登录https://icomoon.io/app/#/select 导入图片 点击import Icons导入所有svg文字 选中你要打包的文字 点击右下角Generate Font 修改文字 修改文字映射 点击download 导出代码 打开style.css文件 拷贝@font-face代码 拷贝fonts文件夹 修改相关路径,修改字体名称 只需要在使用的时候设定font-family为我们制定的字体名称就可以了 from:http://www.cnblogs.com/css27/p/5473766.html

图文介绍csh是什么格式文件以及csh文件用什么打开

Photoshop中除了.csh文件之外,还有几种常见的格式文件,比如.abr是画笔文件,.aco是色板文件,.grd是渐变文件,.asl是样式文件,.pat是图案文件,.shc是等高线文件,.csh是自定形状文件,.tpl是工具预设文件。 这些格式文件在电脑中不能和软件、图片这些直接打开使用,通常需要加载之后才能使用。 本文介绍的方法,既是对“csh文件用什么打开,csh是什么格式文件”的回答,做到举一反三,遇到类似的,在网上下载的.abr之类的笔刷如何安装如何使用这些问题,一样可以通过预设管理器中载入之后使用。   本文就来一起学习解决.csh文件用什么打开?具体操作如下:   1.笔者现在使用的Photoshop CS6版本,执行“编辑——预设——预设管理器”,打开“预设管理器”对话框。   2.在“预设类型”下拉框中选择“自定形状”,单击“载入”。   说明:比如我们需要安装在网上下载的画笔笔刷,此时在“预设类型”中选择“画笔”,单击“载入”即可。其余格式文件安装方法一样。   3.弹出“载入”对话框,选择相应的.csh文件,单击“载入”即可。   4.单击“完成”,关闭“预设管理器”对话框。   5.在工具箱中找到“自定形状工具”,在自定形状工具属性栏中,单击“形状”下拉箭头,可以找到我们上面载入的.csh文件。 from:http://www.ittribalwo.com/article/2161.html

移动端尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640×960, 640×1136, 750×1334, 1242×2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法,而且有规律可循。 像素密度 要知道,屏幕是由很多像素点组成的。之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。比如480×800的屏幕,就是由800行、480列的像素点组成的。每个点发出不同颜色的光,构成我们所看到的画面。而手机屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320×480,iPhone 4s的屏幕像素是640×960。刚好两倍,然而两款手机都是3.5英寸的。 所以,我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。像素密度越高,代表屏幕显示效果越精细。Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。 倍率与逻辑像素 再用iPhone 3gs和4s来举例。假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。3gs上大概只能显示4-5行,4s就能显示9-10行,而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。 在现实中,这两者效果却是一样的。这是因为Retina屏幕把2×2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。 在以前,iOS应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带@2x字样,有的不带。其中不带@2x的用在普通屏上,带@2x的用在Retina屏上。只要图片准备好,iOS会自己判断用哪张,Android道理也一样。 由此可以看出,苹果以普通屏为基准,给Retina屏定义了一个2倍的倍率(iPhone 6plus除外,它达到了3倍)。实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。 Android的解决方法类似,但更复杂一些。因为Android屏幕尺寸实在太多,分辨率高低跨度非常大,不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间,给不同范围的设备定义了不同的倍率,来保证显示效果相近。像素密度概念虽然重要,但用不着我们自己算,iOS与Android都帮我们算好了。 如图所示,像素密度在120左右的屏幕归为ldpi,160左右的归为mdpi,以此类推。这样,所有的Android屏幕都找到了自己的位置,并赋予了相应的倍率: ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] xxxhdpi [4倍] 各型号iPhone的倍率比较简单,我们后面会讲到。那么Android手机那么多,具体怎么分?哪些手机是几倍的倍率呢?我们先看一张表,这是友盟2014年10月到2015年03月的数据: 就目前市场状况而言,各种手机的分辨率可以这样粗略判断。虽然不全面,但至少在1年内都还有一定的参考意义: ldpi 如今已绝迹,不用考虑 mdpi [320×480](市场份额不足5%,新手机不会有这种倍率,屏幕通常都特别小) hdpi [480×800、480×854、540×960](早年的低端机,屏幕在3.5英寸档位;如今的低端机,屏幕在4.7-5.0英寸档位) xhdpi [720×1280](早年的中端机,屏幕在4.7-5.0英寸档位;如今的中低端机,屏幕在5.0-5.5英寸档位) xxhdpi [1080×1920](早年的高端机,如今的中高端机,屏幕通常都在5.0英寸以上) xxxhdpi [1440×2560](极少数2K屏手机,比如Google Nexus 6) 自然地,以1倍的mdpi作为基准。像素密度更高或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率近似的显示效果。 不过需要注意的是,Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480×800和1080×1920,它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到逻辑像素为320×533和360×640。很显然,后者更宽更高,能显示更多内容。所以,即使有倍率的存在,各种Android设备的显示效果仍然无法做到完全一致。 单位 不难发现,真正决定显示效果的,是逻辑像素尺寸。为此,iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt,Android的尺寸单位为dp。说实话,两者其实是一回事。 单位之间的换算关系随倍率变化: 1倍:1pt=1dp=1px(mdpi、iPhone 3gs) 1.5倍:1pt=1dp=1.5px(hdpi) 2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6) 3倍:1pt=1dp=3px(xxhdpi、iPhone 6) 4倍:1pt=1dp=4px(xxxhdpi) 单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080×1920,有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。 无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素,我是按照xhdpi做的”这样的话了。 Web怎么办 移动端页面的绝对单位仍然是px,至少代码里这么写,但它的道理也和app一样。由于像素密度是设备本身的固有属性,它会影响到设备中的所有应用,包括浏览器。前端技术可以善加利用设备的像素密度,只需一行代码,浏览器便会使用app的显示方式来渲染页面。根据像素密度,按相应倍率缩放。 可以通过这个测试页面 http:/m/test.html 来看看你的移动设备屏幕宽度,这是逻辑像素宽度。 以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。 实际应用 大家最关心的还是实际运用,画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前,我要为使用PS进行设计的朋友介绍一个小技巧。 之前我说过,我们要以逻辑像素尺寸来思考界面。体现到设计过程中,就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面,把尺寸和文字单位都改成点(Point)。这里的点也就是pt,无论设计iOS、Android还是Web应用,单位都用它。当然,各平台单位名称还是要记住的。这里我们用的只是它的原理,不用在意名称。 要调节倍率,则通过图像大小里的DPI来控制。这个DPI,其实就是PPI,像素密度。有个常识大家都知道,屏幕上的设计DPI设成72,印刷品设计DPI设成300。为什么是这两个数字? 首先说300,这和人眼的分辨能力有关。由于1英寸是固定长度,每1英寸有多少个像素点决定了画质清晰程度。之前说过,这就是像素密度,也就是DPI。DPI达到300以上,其细腻程度就会给人真实感,像真实世界中的物件。相反,DPI只有10的话,在你一个食指指节大小的长度内只有10个像素,这明显就是马赛克了。所以印刷品要设成300,才能保证清晰。 再说72,这有一定的历史原因。最早的图形设计是在mac电脑上进行的,mac本身的显示器分辨率就是72。PS中把图像DPI也设成72,就能保证屏幕上显示的尺寸和打印尺寸相同,便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准,这套规则就这么沿用下来。 现在回到正题,我们怎么通过DPI来调节倍率?既然屏幕本身的分辨率是72,DPI设成72刚好是1倍尺寸,那设成72的两倍就是倍率为2的屏幕了,就这么简单。 下面来看看3个平台各自的画布设置: iPhone iPhone的屏幕尺寸各不相同,我说的是逻辑像素尺寸,这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone,就要选择逻辑像素折中的机型。 从市场占有率数据来看,目前最多的是iPhone5/5s的屏幕。倍率为2,逻辑像素320×568。上升势头最猛,未来有望登上第一的是iPhone 6的屏幕。倍率为2,逻辑像素375×667。 按照这两种尺寸来设计,都是比较主流的做法。可以兼顾短一些的iPhone 4s,大一点的6 plus也不会过于空旷。 不过在切图的时候要注意,由于iPhone 6 plus的3倍图是由2倍图放大而来,所以位图要注意保证清晰。 Android 都说Android碎片化严重,但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了:360×640,就看你设成几倍了。想以xhdpi为准,就把DPI设成72×2=144。想以xxhdpi为准,就把DPI设成72×3=216。 对于那些比较老的低端机,宽度是480px的那批,画面确实会小一些,显示内容会更少。稍微留意一下,重要内容尽量保持在界面中上部分。 当然,这些机型不出一年就会被边缘化,基本淘汰。现在能运转的也是当作功能机在用,软件多了必卡无疑,用户体验无从谈起。不作考虑也是OK的。 Web 手机端网页就没有统一标准了,比较流行的做法是按照iPhone 5的尺寸来设计。倍率2,逻辑像素320×568。 这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。当然,缺点就是在倍率3的设备上看,图片不是特别清晰。 如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸,倍率3,逻辑像素414×736。 总结 移动端的尺寸比PC端复杂,关键就在倍率。但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。 from:http://www.chinaz.com/web/2015/0421/400286.shtml

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

代码如下: .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 说明: 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。 在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名: Mac OS的一些: 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro Medium 儷宋 Pro:LiSong Pro Light 標楷體:BiauKai 蘋果儷中黑:Apple LiGothic Medium 蘋果儷細宋:Apple LiSung Light Windows的一些: 新細明體:PMingLiU 細明體:MingLiU 標楷體:DFKai-SB 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋_GB2312:FangSong_GB2312 楷体_GB2312:KaiTi_GB2312 微軟正黑體:Microsoft JhengHei 微软雅黑体:Microsoft YaHei 装Office会生出来的一些: 隶书:LiSu 幼圆:YouYuan 华文细黑:STXihei 华文楷体:STKaiti 华文宋体:STSong 华文中宋:STZhongsong 华文仿宋:STFangsong 方正舒体:FZShuTi 方正姚体:FZYaoti 华文彩云:STCaiyun 华文琥珀:STHupo 华文隶书:STLiti 华文行楷:STXingkai 华文新魏:STXinwei 注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效! from:http://www.jb51.net/css/163448.html

CSS3的REM设置字体大小

在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 最近在学习em的相关知识的时候,无意之间让我拾得一宝,就是使用rem来设置Web页面的字体大小。让我一下子就来劲了,一口气看完并测试了一回,还真是爽歪歪的呀。师傅说好东西不能吃独食,于我就在这里给大家吹吹这个从没见过的REM。 在详细介绍rem之前,我们先一起来回顾一下我们常用的两种记量单位,也是备受争论的两个: PX为单位 EM为单位 PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“em”来定义Web页面的字体。 em为单位 前面也说了,使用是“px”为单位是比较方便,而又一致,但在浏览器中放大或缩放浏览页面时会存在一个问题,要解决这个问题,我们可以使用“em”单位。Richard Rutter’在《How to size text using ems》一文中有做过详细的介绍,追至早一点,Richard Rutter也在《How to Size Text in CSS》中进行过深入的剖析。 这种技术需要一个参考点,一般都是以<body>的“font-size”为基准。比如说我们使用“1em”等于“10px”来改变默认值“1em=16px”,这样一来,我们设置字体大小相当于“14px”时,只需要将其值设置为“1.4em”。

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?如果你了解过“em”后,你会觉得这个问题是多问的。前面也简单的介绍过一回,在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。这样一来可能又不是我们所需要的方法。 这里我只是简单的介绍了一个这两个单位的使用,具体一点的大家可以参阅: Best Practices的站长Kyle的《CSS Font-Size: em vs. px vs. pt vs. percent》 Converting px into percentage and em for relative CSS font sizes Em Vs Percent Widths CSS: Units of Measurement Jennifer Kyrnin的Using Points, Pixels, Ems, or Percentages for CSS Fonts Rem为单位 CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。 前面说了“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图: 我们来看一个简单的代码实例:

我在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。 浏览器的兼容性 rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8无法,你们就把他们当透明了吧,我向来都是如此。 不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用"px"来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。就让IE6-8不能随文字的改变而改变吧,谁让这个Ie6-8这么老呢?哈。。。。大家不仿试试,还蛮有意思,说不定这个就是主流的度量单位了。   from:http://www.w3cplus.com/css3/define-font-size-with-css3-rem

移动 App 开发人员应该关注的 7 件事

Apple App Store里有130万的app,而Google Play则托管了140万的app。在竞争如此激烈的移动应用环境中如何确保我们制作的app能获得大量的下载量呢? 广受用户欢迎,并创下了上百万的下载量是每一个移动app开发人员的终极梦想。但是,这谈何容易呢! 在最近的一次网络研讨会上,Rahui Nischal,Nucleus Software Exports公司的高级产品经理,就谈到了开发人员要想创建有吸引力的移动app,所需要关注的几个关键方面。 1.理念是根本 一个移动app的成功取决于它是建立在什么样的核心理念上的。对于开发人员而言,第一步要做的是像目标用户那样思考,用他们的眼光去看待问题,并 在此基础上构建移动app,构建可以让他们的生活更简单的app。步步为营,不断地检查app与最终用户的相关性,积极调整产品以满足用户的需求。 2.单一的服务目标 一个移动app只需要具备单一的功能。确定你app的主要目的,然后钻研能否只通过一到两次点击就可以访问进入。 3.保持简单 保持一切简单化其实是最难的。如果移动开发人员可以成功地将复杂的技术隐藏在简单界面的后面,那么他就越靠近成功。 4.保持轻量级 三年前,Facebook的应用程序重达35-40M。现在,它只有大约10M。之所以会产生如此大的变化,是因为Facebook认识到,在印度和非洲——甚至连3G还尚未普及的区域,下载重量级的移动应用程序往往需要一段又长又难挨的时间。 由于现在的移动app都是面向全球的,所以开发人员最好能够创建轻量级的应用程序以便适应不同地域。 5.UI很重要 WhatsApp在推出之前从来不做广告。虽然现在网上提供了许多的聊天应用程序,但是WhatsApp的用户使用量还是达到了成倍的增长。它成功的秘诀就是干净和简单的UI。为了确保界面友好,我们在创造移动应用的时候需要关注三件事——愉悦性、实用性和功能性。 6.倾听用户的声音 应用程序在发布之后,开发人员应该时刻关注用户的反馈,更新进步,努力提供更新更好的功能。 7.了解用户行为 游戏“愤怒的小鸟”的开发人员发现,Android用户不喜欢为下载应用程序付费,而iOS用户,大多数则愿意购买app,但却讨厌在免费app上面看到任何广告。了解不同的用户行为,有助于移动开发人员为不同类型的用户创建令人满意的消费体验。 from:http://www.oschina.net/news/64613/mobile-app-developers-should-focus-on-7-things

【VC观点】浅谈情感化设计(原创)

  from:http://www.zcool.com.cn/article/ZMTYyMDAw.html 体验地址:https://dash.readme.io/login 体验地址:http://us.blizzard.com/en-us/games/war1/ 体验地址:http://www.bluedaniel.com/404

新增14个免版权可商用的高清图片资源网站

无版权限制、免费使用的高清图片素材,对于设计师、新闻媒体、网站传媒、博主等用户来说都是很好的资源,在此之前我们已经分享了《15个优秀的免费高清图片素材网站》,而今天,设计达人网小纺再次为大家精选一些优秀的免费图片网站,当你需要使用图片的时候,这些网站是最方便免费获得的地方,建议收藏起来。 此外已将部分网站加入到设计导航的免费高清图片素材栏目下,并且里面还包含有30个相关的图片资源网站。 注:如果注明有Tumblr的,表示使用tumblr博客搭建,可能某些城市网络无法进入,或需要代理。 CUPCAKE 版权:免费个人和商业使用。 Cupcake提供的图片很有FEEL,可以用来做全屏网站背景不错,缺点是现在图片数量有点少,希望作者日后更新多点上去吧。 进入网站 Stokpic 免费个人和商用。 注册用户每2周可获得10个免费图片,分类齐全,有抽象、动物、背景、黑白照片、人、体育、健康、运输等等。 进入网站 Free Nature Stock 免费个人和商业使用。 该网站专注分享大自然为主题的照片,照片的质量很好,如果你仅需要自然图像,这里是很好的选择。 进入网站 | 归档浏览 (tumblr) StockSnap 免费个人和商用。 Stocksnap的图片每天更新数十张,所以照片量挺多的,虽然没有分类目录,但用户可以用搜索功能来搜索,注意是要英文哦! 进入网站 Pixite 免费个人和商业使用。 网站有大量的风景照片、自然季节图片、如需要风景、户外图片的用户,可以先来这里找找,他的目录细分有很多,很容易选择。 进入网站 Realistic Shots 免费个人和商业使用。 每周更新7张免费图片,图片以自然景观、旅游照片居多。 FOODIESFEED 免费个人和商用。 看多了景观照片?哪就来看看这个以食物为主题的图片分享站,很多美味的食品图片,对于做食品网站的设计师们,这个要收藏哦,但设计达人网小编在不翻墙的情况下,访问有点慢…… Snapwiresnaps 免费个人及商业使用 CC0 有很多感觉良好的图片分享,每天更新 进入网站 | 按归档浏览 (tumblr) Barn Images 免费人个和商业用途。 网站已经按细类划分,唯美图片很多,有抽象、自然风景 、动物、工业、人物、旅游景点、食物和饮料等等。 进入网站 Trunklog 所有图像免费个人和商业使用。 网站图片来自博主的旅游图片,很多美丽的山庄、山村以及城市景观照片,唯一缺点就是访问好慢啊! 进入网站 Tookapic 请使用我们提供的连接进入网站,这些图片才是免费的,如果你点击其它导航浏览,要注意图片版权。 进入网站 Fancycarave 免费人个和商业使用。 图片适合设计师、开发人员用在网站上,旅行照片居多。 进入网站 (tumblr) Freelyphotos 免费个人和商业用途。 小编浏览了下,看到有很多和基督教之类的图像,所以如果祝福、祈求等氛围的项目,可以从这里找想关图片。 进入网站 MMT 免费个人或商用 这 网站大致浏览了下,发现很我漂亮的鲜花以及什物图片, 进入网站 from:http://www.shejidaren.com/free-photo-resources.html

20 款超棒免费的 Bootstrap 管理和前端模板

1. SB Admin 2 Details & Download 2. Admin Lite Details & Download 3. Director Responsive Admin Template Free Details & Download 4. Free Bootstrap Admin Template Dream Details & Download 5. Dashgum – Free Dashboard Details & Download 6. Free Responsive Admin Template – Zontal Admin Details & Download 7. Free Download Bootstrap Admin Template Details & Download 8. Janux – Free Responsive Admin Dashboard Template Details & Download 9. Joli – Free Responsive Bootstrap Admin Dashboard Template Details & Download 10. KAdmin – Free Responsive Admin Dashboard Template Details & Download 前端模板: 11. Cyprass HTML5 Responsive Business Template Preview |Details & Download 12. Temptation Details & Download 13. Brandaloka – Onepage flat Bootstrap Responsive Web Template Details & Download 14. Ninestars – Free Bootstrap 3 Theme for Creative Details & Download 15. Lucid – Free Bootstrap Landing Page Template Details & Download 16. E-Shop Free Bootstrap Responsive HTML5 Template Details & Download 17. Velocity – HTML5 Responsive Bootstrap Template Details & Download 18. Triangle – Free Responsive Multipurpose Template Details & Download 19. Apparel Details & Download 20. Kebrum – Product Based Flat Bootstrap Responsive Web Template Details & Download via themespad from:http://www.oschina.net/news/62506/20-best-free-bootstrap-admin-and-frontend-templates-2015

40 个免费的扁平图标集 —— 2015年5月

每个设计师都知道图标可以表现非常多的意图,因此会尽量的把图标做得很漂亮。这里我们收集了最新的一些扁平风格的图标供你参考: Random Stuff Free Iconset by Ghani Pradita Happycons – 40 Free icons by Darius Dan Free CV Icon Pack by www.PixsHub.com Class Learning Achievement Icons by Create the Bridge Credit Cards by Tim Parker Free Polygon Flat Writing And Drawing Equipment Icon Set by Oxygenna Stripes & Co Line Styled Icon Set by www.PixsHub.com Smashicons by Oliver 70 Simple Icons by Young Kang Free Drinks/Lifestyle Icon Set by Oxygenna Icons by Michal Salva Art Icons by Wassim Flat Camera by Huzaifa Ratlam 21 Flat iOs Icon Set by HevnGrafix Design 25x Editable Icons by The Hungry JPEG 45 Icon Set In Svg, Psd, Png by www.PixsHub.com Free Icons – Interaction gestures by Paul Idrobo Nautical Vectors by Sarah Nelson Carte Banking icon set by Nikolay Ivanov Spring’s In The Air by New Haircut Icon set by Peecheey Toolbar Icons by Emily Rosen Pamoke: Free Icon Set by Miguel Ángel Avila Educate Icon Set by www.PixsHub.com Free Outline Web Icon Set by Oxygenna 96×3 Free Icons by Darius Dan 15 icons PSD download by krishnanunni Free Fantasy Icons by Boris Kondratenko Lily software icon by Artyom Pasko Good Idea Icon Set by Agata Kuczminska Free Arrows Icons by Creative Tail 100 Icon Set by The Hungry JPEG Free Shoes/Lifestyle Icon Set by Oxygenna Righteous gestures by Martin Cajzer Floder freebie by Jason Lv 75 Various Outline Icon Set by HevnGrafix Design Koelsch Icons – Free by Benjamin Hartung Free icon set by Pauline Sdrigotti 64 Free Fanaticons (AI + PNG + SVG) by www.PixsHub.com Free Travel Icon Set via developersfeed from:http://www.oschina.net/news/62294/40-flat-and-free-icon-sets-for-may-2015

这 30 类 CSS 选择器,你必须记在脑袋里!

大概大家读知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。 1. * ? 1 2 3 4 * {   margin: 0;   padding: 0; } 在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空margin和padding。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。 *也可以用来选择某元素的所有子元素。 ? 1 2 3 #container * {   border: 1px solid black; } 它会选中#container下的所有元素。当然,我还是不建议你去使用它,如果可能的话。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 2. #X ? 1 2 3 4 #container {    width: 960px;    margin: auto; } 在选择器中使用#可以用id来定位某个元素。大家通常都会这么使用,然后使用的时候大家还是得相当小心的。 需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢? id选择器是很严格的并且你没办法去复用它。如果可能的话,首先试试用标签名字,HTML5中的新元素,或者是伪类。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 3. .X ? 1 2 3 .error {   color: red; } 这是个class选择器。它跟id选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 4. X Y ? 1 2 3 li a {   text-decoration: none; } 下一个常用的就是descendant选择器。如果你想更加具体的去定位元素,你可以使用它。例如,假如,你不需要定位所有的a元素,而只需要定位li标签下的a标签?这时候你就需要使用descendant选择器了。 专家提示:如果你的选择器像X Y Z A B.error这样,那你就错了。时刻都提醒自己,是否真的需要对那么多元素修饰。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 5. X ? 1 2 a { color: red; } ul { margin-left: 0; } 如果你想定位页面上所有的某标签,不是通过id或者是&#8217;class&#8217;,这简单,直接使用类型选择器。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 6. X:visited 和 X:link ? 1 2 a:link {color:red;} a:visited {color: purple;} 我们使用:link这个伪类来定位所有还没有被访问过的链接。 另外,我们也使用:visited来定位所有已经被访问过的链接。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 7. X+Y ? 1 2 3 ul + p {    color: red; } 这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段,并将它们的颜色都设置为红色。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 8. X>Y ? 1 2 3 div#container > ul {   border: 1px solid black; } X Y和X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 <div id="container">    <ul>       <li> List Item         <ul>            <li> Child </li>         </ul>       </li>       <li> List Item </li>       <li> List Item </li>       <li> List Item </li>    </ul> </div> #container > ul只会选中id为&#8217;container&#8217;的div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。 由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在javascript中使用css选择器时候是强烈建议这么做的。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 9. X ~ Y ? 1 2 3 ul ~ p {   color: red; } 兄弟节点组合选择器跟X+Y很相似,然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 10. X[title] ? 1 2 3 a[title] {   color: green; } 这个叫属性选择器,上面的这个例子中,只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选?那&#8230; DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 11. X[href="foo"] ? 1 2 3 a[href="http://strongme.cn"] {   color: #1f6053; /* nettuts green */ } 上面这片代码将会把href属性值为http://strongme.cn的锚点标签设置为绿色,而其他标签则不受影响。 注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话,尽量使用标准的CSS3选择器。 这样可以用了,但是还是有点死,如果不是这个链接,而是类似的链接,那么这时就得用正则表达式了。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 12. X[href*="strongme"] ? 1 2 3 a[href*="strongme"] {   color: #1f6053; } Tada,正是我们需要的,这样,就指定了strongme这个值必须出现在锚点标签的href属性中,不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。 但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是strongme相关的站点,如果要更加具体的限制的话,那就使用^和$,分别表示字符串的开始和结束。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 13. X[href^="href"] ? 1 2 3 4 a[href^="http"] {    background: url(path/to/external/icon.png) no-repeat;    padding-left: 10px; } 大家肯定好奇过,有些站点的锚点标签旁边会有一个外链图标,我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。 用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性href中以http开头的标签,那我们就可以用与上面相似的代码。 注意我们没有搜索http://,那是没必要的,因为它都不包含https://。 那如果我们想找到所有指向一张图片的锚点标签呢?那我们来使用下&字符。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 14. X[href$=".jpg"] ? 1 2 3 a[href$=".jpg"] {   color: red; } 这次我们又使用了正则表达式$,表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接,或者其它链接是以.jpg结尾的。但是记住这种写法是不会对gifs和pngs起作用的。 DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 15. X[data-*="foo"] ? 1 2 3 a[data-filetype="image"] {    color: red; } 在回到第8条,我们如何把所有的图片类型都选中呢png,jpeg,&#8217;jpg&#8217;,’gif&#8217;?我们可以使用多选择器。看下面: ? 1 2 3 4 5 6 a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {    color: red; } 但是这样写着很蛋疼啊,而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性data-filetype指定这个链接指向的图片类型。 [html] Image Link </a[/html] 那有了这个钩子,我们就可以去用标准的办法只去选定文件类型为image的锚点了。 ? 1 2 3 a[data-filetype="image"] {    color: red; } DEMO 兼容性 IE7+ Firefox Chrome Safari Opera 16. X[foo~="bar"] ? 1 2 3 4 5 6 7 a[data-info~="external"] {    color: red; } a[data-info~="image"] {    border: 1px solid black; } 这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个~符号可以定位那些某属性值是空格分隔多值的标签。 继续使用第15条那个例子,我们可以设置一个data-info属性,它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。 ? 1 <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> 给这些元素设置了这个标志之后,我们就可以使用~来定位这些标签了。 ? 1 2 3 4 5 6 7 8 9 /* Target data-info attr that contains the value "external" */ a[data-info~="external"] {    color: red; } /* And which contain the value "image" */ a[data-info~="image"] {   border: 1px solid black; } ## 17. X:checked ? 1 2 3 input[type=radio]:checked {    border: 1px solid black; } 上面这个伪类写法可以定位那些被选中的单选框和多选框,就是这么简单。 DEMO 兼容性 IE9+ Firefox Chrome Safari Opera 18. X:after before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。 当使用.clear-fix技巧时许多属性都是第一次被使用到里面的。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 .clearfix:after {     content: "";     display: block;     clear: both;     visibility: hidden;     font-size: 0;     height: 0;   } .clearfix {     *display: inline-block;     _height: 1%; } 上面这段代码会在目标标签后面补上一段空白,然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当overflow:hidden方法不顶用的时候,这招就特别管用了。 还想看其他创造性的使用这个伪类,看[这里](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/)。 根据CSS3标准规定,可以使用两个冒号::。然后为了兼容性,浏览器也会接受一个双引号的写法。其实在这个情况下,用一个冒号还是比较明智的。 兼容性 IE8+ Firefox Chrome Safari Opera 19. X::hover ? 1 2 3 div:hover {   background: #e3e3e3; } 不用说,大家肯定知道它。官方的说法是user action pseudo class.听起来有点儿迷糊,其实还好。如果想在用户鼠标飘过的地方涂点儿彩,那这个伪类写法可以办到。 注意旧版本的IE只会对加在锚点a标签上的:hover伪类起作用。 通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。 ? 1 2 3 a:hover {  border-bottom: 1px solid black; } 专家提示:border-bottom:1px solid black;比text-decoration:underline;要好看很多。 兼容性 IE6+(IE6只能在锚点标签上起作用) Firefox Chrome Safari Opera 20. X:not(selector) ? 1 2 3 div:not(#container) {    color: blue; } 取反伪类是相当有用的,假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。 或者说我想选中所有出段落标签之外的所有标签。 ? 1 2 3 *:not(p) {   color: green; } DEMO 兼容性 IE9+ Firefox Chrome Safari Opera 21. […]