切图

两种Ps切图方法 一． 基础操作： a) Ctrl++ 放大图片，ctrl - -缩小图片 b) 按住空格键space+，点击鼠标左键，拖动图片。 c) 修改单位，点击编辑->首选项-> 单位与标尺，将厘米修改为像素px。 d) 点击视图，选择标尺（ctrl+R），清除默认参考线(ctrl+;)，清除切片(ctrl+,)。 e) 点击编辑->设置快捷键，将常用操作设置为我们熟悉的键。 f) 移动（V），选区（M），切片（C），将v图层转换成智能对象（ctrl+/）. 二． 切图过程： 1、 打开psd图，先浏览整个页面，哪些是能用css实现，哪些是用图片实现的，能用css代码实现的尽量用代码实现； 2、 页面中需要切成图片的，看是背景图还是内容图，背景图保存为png,内容图保存为jpg,页面中不是从后台获取的图片一般为背景图(png)，后台获取的一般为内容图（jpg）； 3、 形状不均匀的背景图片使用图层切图，形状均匀的内容图用切片切图。具体切图方式按实际情况而定，切片切图与图层切图相结合。如果规则图片多的使用切片切图，其他的图片使用图层切图； 4、 使用切片切图保存图片时，图片的格式视情况而定，可以自己为选中切片中的图片设置格式，若需要全部选中为同一种格式，全选中整个页面再选图片的格式。 5、 最后保存时要注意，一定要选中所有用户切片； 6、 命名时注意，（内容图

各位朋友大家好，我是相信神话，从今天开始，我把最近开发的一个网页播放器，开发过程记录下来，希望与此感兴趣的朋友一起学习研究。也请大家多帮忙指教。 一、写在前面 有些东西写在前面，一边大家总体掌握开发的情况。这个播放器的从开始的美工，切图，开发全部是，我自己一个人开发的，虽然软件不大，但是麻雀虽小五脏俱全，对于刚学前台开发的人，是个思路，条条大路通罗马，也许这就是适合你的一条路。 1.开发用到的语言 这个网页播放器的开发，主要是基于 html5，Javascript、css进行开发的。 2.开发工具 开发这个网页播放器主要用到如下软件： Photoshop(以下简称PS) 进行设计，并切图；HBuilderX主要编写HTML5代码，主要展示播放器界面；CSS是web页面美化语言，主要对播放器进行美化；Javscript是网页播放器核心代码，主要用于播放器的逻辑交互等功能。 二、开发过程记录 再我们开发播放器之前，应该对需要的播放器功能，开发流程要做详细的规划记录，每一个点的样式、功能，都要规划设计好，然后在一步一步开发实现。这样才能按时、按需开发，不至于开发过程中丢三落四，然后再补充，这样会很麻烦，增加开发难度。 这个播放器的功能主要由以下几点功能：一是顺序播放；二是单曲循环；三是随机播放；四是播放进度条显示及调节；五是音量显示及调节；六是播放列表功能；七是歌曲切换、播放、暂停功能。

今天是来到新公司的第五天，开始看手中的项目，做的东西是类似网易一元购这样的产品，有安卓ios平台还有H5网站，总共三个渠道。首先代码里，头部head引入的flexible.js。（ps：感觉是什么鬼，不晓得是干嘛的。作为一个工作快一年的半的前端小白，除了做过响应式页面，还没做过真正的移动H5页面，表示很焦灼2333333。）ok，废话不多说，let's get into the business。 比如今天接到一个ui妹子的一张设计图，对于手机尺寸的各种规范我也不是很清楚。一般据我所知，宽一般是750px的。如何进行切片以及编写css呢？具体详情可以访问（ http://www.jb51.net/article/7... ，以下内容由此处转载）。iphone6宽是375pt，由于retina屏，所以切片和平时web端切片不太一样。 解决retina屏问题的可行方案是（以750px*1334px的设计稿为例）： 1）在devicePixelRatio<=2时，图片统一使用750设计稿的切图 2）在devicePixelRatio>=2时，图片统一使用750*1.5=1125，也就是所谓@3x设计稿的切图。 把美工按照750*1334的设计稿下的切图都放在img/@2x 这个文件夹下。 然后让美工把750的设计稿矢量放大1.5倍，再按照同样的切图要求提供@3x的切图，并放在了img/

一，设置PS 使用PS进行切图前的设置： 1，打开PS----打开PSD图片----点击窗口-----分别把：历史记录，信息，图层，三个打勾。 历史记录：可以回到之前想要的步骤，特别是不小心把图层的文字或者图层删除了，进行恢复。 信息：可以获得框选部分的：rgb ，XY轴的起始位置，还有宽高。 图层：PSD图片，是通过很多图层叠加起来才变成视觉上为一个页面的效果。 2，设置自动选择图层：点击窗口----选项打勾----即显示顶部的选项，选项中的：自动选择：图层。自动选择打勾，并且把组改为图层。 　　此时随便点击PSD文件的任何一个地方，图层都会显示该图层。 3，设置标尺：点击是图----标尺打勾。 　　按键盘M(矩形框选工具) ，如果有该选取，那么标尺移动到该处时，会自动吸附。很好用 二，测量 　　1，测量时注意，不要把边框算进去。 　　2，在使用选取工具时，选区左边 与 图层左边对齐时，选区可以从右边向左边画选区，这样比较好对齐，不会跑动。 　　　　因为鼠标点击时很难确定哪里开始画。 　　方法一：比较简单，推荐使用： 　　1，打开PS ----打开PSD文件 　　2，按快捷键M 画矩形选区 ------- 选区左边 与 图层 左边对齐。 　　3，按住Shift ------ 画矩形选区 ------- 选区右边 与 图层 右边对齐。 　　4，查看信息，这时的 W 就是

网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里使用PS进行网页切图。 我们通过设计稿，得到我们想要的产出物（如.png,.jpg文件），给网页提供图片素材（HTML:img，CSS:background）。 一.使用PS工具 1.1 PS首选项设置 编辑-》首选项-》单位与标尺，选改为像素。 1.2 面板 在“窗口”菜单下开启： 工具（默认已开启） 选项（默认已开启） 图层（默认已开启） 信息（手动开启） 历史记录（手动开启） 关闭其他不需要的功能，将以上功能放置在合适的区域，窗口-》工作区-》保存工作区，设置后的工作区如下： 1.3 切图常用工具 ▪移动工具 将自动选择勾选，将组改为图层 ▪矩形选框工具 ▪魔棒工具 ▪裁剪工具+切片工具 ▪缩放工具 -放大：Ctrl+加号 -缩小：Ctrl+减号 ▪取色器 1.4 辅助视图 在“视图”菜单下开启： ▪对齐（默认开启）（遇到参考线、边界有一个吸附力） ▪标尺 Ctrl+R ▪显示->参考线 Ctrl+;（需要显示额外内容） 二.获取信息 打开设计稿，获取信息： ▪尺寸信息：测量 ▪颜色信息：取色 获取信息最重要的是将画布拉的尽量大，尽量减小误差。 测量 2.1所有数字都要测量 工具： 矩形选框工具+信息面板 测量内容： 宽度、高度 内边距、外边距

页面制作部分之PS切图 <--本标签下，通过页面制作、页面架构、javascript程序设计、DOM编程艺术、产品前端架构五部分来分享总结笔记，总结笔记会陆续分享--> 转载于http://www.cnblogs.com/jingwhale/p/4396235.html 网易云课堂教程笔记 网页设计在技术层面上，第一步是美工做出网页效果图，第二步就是网页前端进行网页切图。网页切图工具常用的有fireworks、PS，这里使用PS进行网页切图。 我们通过设计稿，得到我们想要的产出物（如.png,.jpg文件），给网页提供图片素材（HTML:img，CSS:background）。 一.使用PS工具 1.1 PS首选项设置 编辑-》首选项-》单位与标尺，选改为像素。 1.2 面板 在“窗口”菜单下开启： 工具（默认已开启） 选项（默认已开启） 图层（默认已开启） 信息（手动开启） 历史记录（手动开启） 关闭其他不需要的功能，将以上功能放置在合适的区域，窗口-》工作区-》保存工作区，设置后的工作区如下： 1.3 切图常用工具 ▪移动工具 将自动选择勾选，将组改为图层 ▪矩形选框工具 ▪魔棒工具 ▪裁剪工具+切片工具 ▪缩放工具 -放大：Ctrl+加号 -缩小：Ctrl+减号 ▪取色器 1.4 辅助视图 在“视图”菜单下开启： ▪对齐（默认开启）（遇到参考线、边界有一个吸附力） ▪标尺

很酷的前端切图 | Sunny Day 盒子 盒子 大专栏 很酷的前端切图 "item-toolbox"> 博客 文章目录 很酷的前端切图 今天介绍一种前端切图很实用的方式：ps（我觉得好赞啊，相比之前的切图方法，超级酷，哈哈。） 1，新建一个透明背景的psd，一般设置画布大小：800*800. 2，把需要切的图层，右击选择复制图层，选择复制到刚才新建的psd。 （把需要切图的所有组成图层合并成一个图层，快捷键Ctr+e,其中形状的图层被合并后会不显示，可以选中所有的形状图层，右击建立图层组，然后再合并图层组就ok了） 3，将所有需要被切出来的图层放置到步骤一新建的psd，然后选择文件->脚本->将图层导出到文件。 4，在弹出来的设置对话框中设置： 目标：需要将图片输入的文件夹。 文件前缀：任意，自己取一个。 勾选仅限可见图层 文件类型：png-24 勾选透明区域和裁切图层 （ps:mac可以使用slicy切图） 关闭 来源： https://www.cnblogs.com/lijianming180/p/12302670.html

好几天没有写博客了，最近在学习 backbone 为下一个项目做准备。 想想我从.net转向 前端工作已经有半年了（2014-3月份开始），我对 javascript这门语言本身是非常喜爱的，而且我也对 APP开发比较感兴趣，所以也不知道是因为巧合还是怎么的我就稀里糊涂的进入了 webApp 前端的开发工作！ 想想在从事此工作之前我也很彷徨过，有一度的时间，我想放弃过从事IT行业的工作，但是始终自己没有那个勇气。 再说说目前我看过的一篇报道，2017年，穿戴式设备将会普及全世界 70%，想想到那时候，人民全是带着手表，不再玩手机，那 webApp还存在吗？毕竟一个穿戴设备可不会支持浏览器。 好了，说的太多的废话，下面讲讲我从事半年 web 前端所终结的经验。 记得，从来公司那会，公司一个项目说直接给我做，当时真是一头雾水，而且感觉压力很大啊，比较从未有过这方面的经验，就赶鸭子上架了，当时我们的项目经理做技术选型的时候说用JQM框架，还好，在2013年的时候，我特地买过一本书了解过前端的框架，书中主要讲的是：Jquery Mobile和senche touche 还有phonegap打包。 从UI那边接过来 PSD图之后，就让我切图，当时就泪流满面了，我哪会切图啊。%>_<%，经过一番讨教和学习终于学会了前端最基本的技能---切图。 然后我就开始做了，因为要做手机端啊

缓存设置： 编辑-首选项-暂存盘 改完除了C盘之外的其他盘 单位设置： 编辑-首选项-单位与标尺 将单位修改成像素 PS预设： 工具 （窗口-工具） 标尺 （视图-标尺） 图层 （窗口-图层） 信息 （窗口-信息） 字符 （窗口-段落） 框选一块区域后，可以在信息里查看尺寸相关 借助辅助线切图：拉好辅助线，使用裁剪工具框选住，裁剪出来 一个裁剪png图片的好方法： 文件新建创建一个透明图层 选择工具，选中所需要的图层，拖拽到新文件的透明图层上 图像-裁切-基于透明图像裁切 成功裁剪出一个最小范围的完整的png图片 切片工具可以一次完成所有需要的图片的裁切，但是效率不高，不推荐使用 图片存储中：PNG8和PNG24的区别 低版本IE不支持PNG24，会出现模糊的情况，并且背景会填充颜色 PNG8颜色饱和度不如PNG24 一般还是建议使用PNG24 统一色块的一块区域，只需要设置宽度或者高度为1像素即可，在代码中设置重复平铺即可 图片越多，网页加载越慢 可以将很多小图标放置在一张图片上：雪碧图 切图的优化 颜色代替图片 雪碧图的制作 字体图标的使用 切图常用快捷键 删除图层 delete 合并图层 ctrl+e 切图辅助工具 Markman （便于测量颜色、间距等） Tinypng （用于压缩图片） 前端自动化 来源： https://www.cnblogs.com

CSS的一些心得 在实现当删除某个div块后，后续的div块能自动补位的效果时，可以不用JS的效果，直接把div设置成float属性，利用浮动的特性来完成这种效果。不过这个效果在正式的应用里用的不多，因为应用里都是直接抽数据，然后把数据循环填充进去。 如果一个元素同时需要浮动和弹性布局的话，有时候可以不妨创建两个div，父div设置浮动，子div设置弹性布局，切记顺序不能相反，因为在弹性布局中子div的浮动是无效的。 在做切图时切记不能傻切，现在的切图一般都是一套一起切的，往往有很多切图都是有着相同的格式或者是元素(比如说搜索框往往是多个切图都会用到的)。所以在遇到这种元素时可以把这几个元素的CSS样式单独拉出来放在CSS文件的头部或者是尾部(甚至是放在一个单独的公共文件夹中)。还有像浮动、多文字省略这种元素样式也是可以提前写好的。到时候直接引用就好 现在来看移动端的布局里居中效果用弹性布局来解决是很好的选择。 有些时候图片不一定就要用img标签，也可以直接放在div里当背景图片 有些时候一个div里并排多个元素时往往元素的间距不好把控，例如一个姓名文本加一个姓名输入框，文本宽度是固定的，输入框的宽度是自适应的，这时候可以用cala来解决。如果还有多个的话可以再往里面套div。 还有class的书写时个人是感觉不要写链式的，因为到后期修改时或者是复用，这种class会很恐怖