重构切图相关

很久不做设计,貌似对设计相关的事了解少了许多,之前做H5时需要频繁切图,本来准备自己写个小工具来计算切图位置,后来了解到CC版本的PS有一些新增的功能(例如复制CSS),另外也有国人写了更方便的切图扩展工具,但是PS版本什么的一直安装上总是各种问题,但却总是因为各种事情一直搁置,今天耐下心来都安装完毕,以自己WIN7为例介绍一下。

1.清除注册表信息 - A - AdobeCreativeCloudCleanerTool.exe

因为需要安装扩展,扩展器总是各种安装不成功,原因是安装过Adobe的软件(包括绿色),需要先进行清除,按照提示进行命令行操作即可。

2.安装官方扩展管理工具 - B - AdobeExtensionManagerCCAll.zip

这里提供的版本为CC(本来就是冲着CC新版本功能才更新的),此软件版本必须和要装的诸如PS等版本保持一致。

其他版本:http://www.adobe.com/exchange/em_download/

3.安装PS CC - C - Photoshop CC_14.2_CHS_lite_201402.exe

因为想要的功能都在14.2以后版本才有,找了好久才找的一个包,不过现在又发布CS15了。

4.切图辅助 D - Cutterman.2.2.0.zxp    

http://www.cutterman.cn/v2/cutterman

这里是2.2.0的版本配合上面的PS安装没问题,反而官网提供的最新版无法正常使用。

PS启用生成器也可直接输出图像资源(首选项里开启并修改图层命名即可)

5.其他辅助工具 E - FastStoneCapture_8.0_PortableSoft.7z

斌哥推荐的,标尺放大镜嘛的小功能挺实用,关键是轻巧,这是一个绿色免安装中文版。

6.贴个文

http://isux.tencent.com/ps-photoshop-cc-fd.html

以上下载地址:

http://pan.baidu.com/s/16TMMU

按以上字母顺序安装。

时间: 2024-08-07 21:19:49

重构切图相关的相关文章

前端页面重构切图优化

定义 CSS: 初始化样式: 公共样式: 切图方式:打开PSD文件,点击选择按钮,选中自动选择,下拉选择图层,然后点击要选择的图层(特殊的转换为智能对象),然后用虚线框选出来,复制粘贴到一个空白文件. 点击直接拨号<a href="tel:123-456789">123-456789</a>

切图相关记录

问题如图片一,还原设计图时,出现空隙 解决方案:思路,div和img去掉border,然后对应的边距都设置为0,图片设置为块级元素,会自动沾满div的空间. .fgw-p-m-0{ padding: 0!important; margin:0 !important; img{ display: block; } } <div> <div className="fgw-p-m-0"> <img src="/static/image/heard.pn

UI切图相关文章

http://www.25xt.com/allcode/6941.html http://www.25xt.com/appdesign/7587.html http://www.25xt.com/appdesign/7339.html

【学习笔记】前端开发调试工具与PS切图技巧

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

页面制作学习笔记:D2.Photoshop切图

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

切图与设计相关

设计稿尽量提供偶数 切图之前预先定义好标准(常用标签的样式,公用样式) 上下文元素之间尽量保持同级 更新不频繁的使用背景图片(logo) 先做需求确定部分内容(头/尾部) 设置颜色尽量不使用英文,使用色码时多用3位,少用6位

前端必备技能之Photosh切图

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

前端开发之用工作中的实例来教你切图

下面就来说说切图这点事儿吧. 一:图片怎么切? 1.切片: 先啰嗦一下几个基础概念.切片:制图软件或网页制作软件中,把图像切成几部分,一片一片晚上传,这样上传的速度比较快.切片工具主要是用来将大图片分解为几张小图片,这个功能用在网页中比较多,因为现在的网页中图文并茂,也正因如此打开一个网页所须的时间就比较长,为了不让浏览网页的人等等时间太长,所以他们将图片切为几个小的来组成. 切图原则: a.先总体,再局部.即先划分模块,再把大切片划分成小切片. a.从大小来说,如果背景图比较大,那么尽量把背景

ps切图详解-web前端(转)

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)