PS5 切图积累

前些日子仿了优酷的首页,中间遇到一些问题,积累了点经验,做个总结. 1. 需要最先明白的两点 不要只是无脑的切图,要去体会设计师的意图,不仅仅是还原设计稿,而且要尽可能去还原设计师的设计理念. 切图的时候就提前想好需求可能会有变化,这要求我们提前做点工作,减少需求变化时的工作量,一般是提取页面中的公共组件.如何提取公共组件,可以参考<编写高质量代码>. 2. 流程 仔细看PSD文件!!!!复杂些的PSD图,起码先看3个小时吧.看不好的话,后面推倒重来简直麻烦死!看PSD的时候主要是注意三个地方

一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 <img src="images/avatar.jpg" alt="头像"> 在CSS里面通过background属性引入图片资源 .icon { background-image:url(../images/avtar.jpg); background-posi

一点题外话: 提到切图,让我想起曾经有好几个月的时间,我每天的主要工作就是切图,或者说切片了. 要制作语文课本中每篇课文的朗读卡拉OK效果,其中一道工序,就是要把文章中的每个字连同上面的拼音,切成单独的一张小图. 一张图上,文字数百上千,纯粹的体力活. 不过这是用fireworks切的片. 今天要说的是用photoshop来切片. 要做一个拼图的小游戏,需要用ps把原图切成长宽一致的15张小图. 1,用ps打开图片 2,在图片上点右键,调出菜单 3,设置水平划分为3,垂直划分为5,则自动划分为1

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用上图中的复位,或者在下图中选择工作区: 4.切图常用工具 注意:在工具菜单栏中右击会出现同组备选工具: 5.放大缩小画布: 1).点击缩放工具 2).ctrl  + 加号/减号 3).alt  + 鼠标滚轮 6.辅助视图 标尺快捷键:ctrl + r 7.获取文字大小和行高 1).文字是单独图层,使

切图,重要的是找精确像素!不要在用传统的切刀进行切割啦,拿到一副PSd图形的,可以使用这样两种方式: (1)如果你的图层很多,你可以用“ctrl+点击想要的图片“直接选中你想要图片的图层,简单到位,然后将图层转化为智能对象(当然可以几个图层拼到一起),然后双击弹出点击确定,就ok了: (2)对于大图,这个时候就有很多的东西存在,这里就使用,选区先选中你要切的图形,然后”编辑-合并拷贝-新建-拷贝“,就能建立一个完成整的图片切图的样子了,就ok了. 注意:这里的有几点说明: (1)切图要拉好参考线

APP切图流程和APP切图命名规范详细完整版 http://www.25xt.com/appdesign/7339.html Marketch

/******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的PSD文件中提取素材 2.对PS有一定的了解 3.对审美有一定的提高 *******************************************/ 学习内容: 1.网页设计中初始化尺寸参数和一些快捷键. 2.选择和移动元素. 3.常见的Web切图界面设置.

我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具.左边有个小按钮,你按住它这三个选项就会显示出来. 2.这是我等下用做示范的图片. 3.在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线.在PS上方的菜单栏,你可以在视图里找到新建参考线选项.如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置. 4.好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色. 5.我继续用切图