一切福田,不離方寸,從心而覓,感無不通。

Category Archives: Design

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

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

龙生   21 Apr 2022
View Details

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

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

龙生   19 May 2021
View Details

字体图标 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

龙生   09 May 2016
View Details

图文介绍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

龙生   21 Mar 2016
View Details

移动端尺寸基础知识

初涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白,感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起,理清关于尺寸的所有细节。由于是写给初学者的,所以不要嫌我啰嗦。 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是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个平台各自的画布设置: […]

龙生   08 Mar 2016
View Details

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

龙生   03 Nov 2015
View Details

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

龙生   11 Oct 2015
View Details

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

龙生   28 Jul 2015
View Details
1 2 9