Category Archives: Design

CSS颜色中英文对照表

颜色 英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #DC143C 220,20,60 LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245 PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,147 HotPink 热情的粉红 #FF69B4 255,105,180 DeepPink 深粉色 #FF1493 255,20,147 MediumVioletRed 适中的紫罗兰红色 #C71585 199,21,133 Orchid 兰花的紫色 #DA70D6 218,112,214 Thistle 蓟 #D8BFD8 216,191,216 plum 李子 #DDA0DD 221,160,221 Violet 紫罗兰 #EE82EE 238,130,238 Magenta 洋红 #FF00FF 255,0,255 Fuchsia 灯笼海棠(紫红色) #FF00FF 255,0,255 DarkMagenta 深洋红色 #8B008B 139,0,139 Purple 紫色 #800080 128,0,128 MediumOrchid 适中的兰花紫 #BA55D3 186,85,211 DarkVoilet 深紫罗兰色 #9400D3 148,0,211 DarkOrchid 深兰花紫 #9932CC 153,50,204 Indigo 靛青 #4B0082 75,0,130 BlueViolet 深紫罗兰的蓝色 #8A2BE2 […]

面向程序员的精品开源字体

在百花齐放的开源世界中，开源字体属于较为小众的一个分支。不过往往越是小众的领域，反而会诞生出更多惊艳的作品。本文将为大家介绍开源字体中或颇具特色，或制作精美，或独具匠心，或有深厚历史背景的作品。

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个平台各自的画布设置： […]

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。 […]

移动 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