前端PS切图技巧(二)

之前介绍了传统的切图技巧,主要用于切多张图片的时候,但很多时候我们可能只需要切一两张图标,如果还用传统的方法就会很繁琐,所以这次分享一种导出单个图标的方法。

没有psd文件的,我这里准备了一份,需要的可以去下载

psd练习文件 (和之前的一样)

http://pan.baidu.com/s/1pL2dwL1
  • 1

工具:一、二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法两个版本的软件都可以实现,三中的方法cc才能实现,所以建议大家下载photoshop cc 2015

没有photoshop,这里准备了photoshop cc 2015的安装包和破解工具,具体安装和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT
  • 1

切单个图标的方法

1.还是之前的文件,这次我们就切一个图标 

2.选择移动工具,并在选项中选中“自动选择”和“图层” 

3.点击我们要切的图标,这里是点击中间的笔,然后右边的图层面板就会自动聚焦到对应的图层,通过点击左边的小眼睛来确定是不是我们想要的图层。 

4.这里我们找到了我们需要的图标有两部分组成,里面的笔和外面的圆,两个图层被放在了一个组里面 

5.在icon文件上右键,选择“转换为智能对象” 

6.然后,我们会发现,两个图层合并为了一个图层,这个就是我们需要的图标 

7.在icon图层上右键,选择“编辑内容”,出现提示框的话直接点击“确定”即可 

8.然后,我们的图标就被单独提取出来了 

9.选择“文件”=》“存储为”,将我们的图标保存为PNG格式就大功告成了! 



photoshop cc之后添加了很多高级的切图方法,下一节给大家分享几个和前端相关的自动化切图方式

原文地址:https://www.cnblogs.com/CaseyWei/p/9383203.html

时间: 2024-10-13 18:36:35

前端PS切图技巧(二)的相关文章

前端PS切图技巧(一)

UI给我们设计图的时候都会有一份设计原稿psd文件,有的公司可能UI会把需要的图标给切好,更多时候是需要我们自己来切的.而且,有的时候可能需要的东西UI没有切出来,你就要去是去找UI切好了再发给我们,这个过程就变得很麻烦,所以不如自己学一些切图方法  没有psd文件的,我这里准备了一份,需要的可以去下载 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:一.二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法

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

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

前端PS切图小技巧

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

前端PS切图(笔记)

一 界面设置 预设WEB 1920*1080 自定义    *2000   72  RGB  背景:透明 自动选择图层  Ctrl+单击 视图>显示>智能参考线>标尺(Ctrl+R) 窗口   图层,历史记录,信息,字符 信息面板中  单位:像素    一.二颜色:RGB  文档尺寸 编辑>首选项>单位与标尺  单位:像素 保存  窗口>工作区>新建工作区>WEB切图 二 PS基本操作 1.简单工具 选区  单击选择   双选区,单击同时,shift加选区

前端开发切图技巧总结

1.固定宽度切图:对于有一些宽高都一样的元素需要切出来的话,就可以使用固定宽度切图,非常方便. 2.这种方法我认为是最简便的一种方法,需要切哪个元素,直接把周围的底色去掉,一定要是透明状态,然后用刀子框选这个元素,再按一下ctrl+c复制,ctrl+n新建文件(要是透明的底色,图片大小自动生成和你要切的图的大小是一样的),最后一步就是粘贴,最后就是ctrl+shift+alt+s保存就行了,非常方便.快捷. 3.当我们在需要切一段文字的时候,比如下面这段文字,需要一个字一个字切出来,这样做的一个

ps切图技巧

获取图片 step1   ctrl+E 合并图层 step2  ctrl+点击  选中图层 step3  ctrl+C 复制图层 step4  ctrl+N 新建视图 step5  ctrl+V 粘贴图层 显示当前层,隐藏其他层  alt+点击眼睛

前端PS常用切图技巧

前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就是用选区工具选中我们要的切图区域,复制到新文件,然后整个保存下来,这样的切图方法几乎没有可取之处,不过我最初确实就是这样干的... 2. 传统切图 02 这种效率要高一些,可以同时切多个图片,用切片工具选中多张我们需要的图片区域,点击文件->保存为 web 所用格式,这种方法的缺点是默认会保存多张图

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选