现在前端项目中碰到越来越多的图片处理问题,虽然找自己公司UI小哥哥小姐姐可以解决,但是每次都找不仅要看别人有没有时间,更得看人家脸色

唉,自己摸索着来吧(多图,流量党请注意切换WiFi):

通常切图的时候要分为两种情况:

1. 来图为PNG图片,PNG图片没有图层,需求是将图中所需的按钮Btn切出,然后切出之后再将图片中原来的按钮位置给清除掉。



操作:首先选择切片工具选中你需要切出的按钮大小





然后再使用矩形选框工具,使用矩形工具包住你的切片图片,



接下来新建一个窗口(Ctrl+ N),用来接收你的切片图片,

最后选择移动工具,拖动你切片工具切中的图片,这样你切好的的按钮就能移动了,

将其移到你的新建窗口中,最后右击保存为PNG;



但是这样操作原图是不会有所变化的,切出去的图片只是移动复制了一份,还需要再将原图中的按钮清除掉

操作:矩形工具选中你要清除的地方,右击选择填充,让矩形内的图片根据背景自适应背景色,重复操作几次,使矩形框中的内容消失达到预期效果。



最后就ok了



当然也可以使用橡皮擦或者仿制图章工具,根据情景选择。

2. 来图是PSD格式的,PSD就比较好办,PSD图片是有图层的,这样就不需要切图操作,只需要操作图层就可以拿到你想要的按钮,或者隐藏掉你的按钮

        操作:图层操作在PS栏右下方,每个图层前方有个控制显示与隐藏的check框,隐藏掉遮挡部分,露出你想要的图层,然后右击导出为PNG就可以了。

        是可以隐藏的只剩下按钮,也可以将按钮单独隐藏掉。(由于之前的项目刚过去,PSD文件都删掉了,所以关于PSD的细节没有图解后续会慢慢更上,有需要的小伙伴可以提前私聊我~)

关于PS切图的更多相关文章

  1. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

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

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  3. 前端技术-PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  4. 学习笔记2:前端PS切图

    前端PS切图 一.Photoshop的界面设置 二.Photoshop的基本操作 三.Photoshop的传统切图 四.Photoshop的精准切图 五.Photoshop的扩展知识 视频学习:htt ...

  5. PS切图保存后的背景图为透明

    1.若想PS切图保存后的背景图为透明,那么则需要在如下图中所示的修改即可,切图后[文件]——>[存储为web格式]——>[PNG-24]: 2.要想在css中的背景图片为相通,则先剪切一个 ...

  6. 前端PS切图

    http://www.imooc.com/learn/506    慕课网地址 Tools Tools  Photoshop 快捷键 l  移动工具 V l  选取工具 M l  套索工具 L l  ...

  7. ps切图插件

    ps切图工具插件 下载网址:http://www.cutterman.cn/zh/cutterman 安装完插件,关闭ps,重新打开,窗口- 扩展,即可使用

  8. 两种ps切图方法(图层/切片)

    两种Ps切图方法 一.      基础操作: a)    Ctrl++ 放大图片,ctrl - -缩小图片 b)    按住空格键space+,点击鼠标左键,拖动图片. c)    修改单位,点击编辑 ...

  9. 2018年设计师都在用的PS切图插件--摹客iDoc

    终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

  10. 前端菜鸟起飞之学会ps切图

    由于之前只顾着追求效率,没有学习过PS,但其实这是前端开发人员需要学会的技能之一,曾经看过一个大佬的前端经验分享说他在招聘时遇到不会切图的会直接pass掉,可见前端开发人员学会切图是多么重要.通过观看 ...

随机推荐

  1. LG承认手机业务遭到中国厂商碾压!这是输得心服口服的节奏?

    近日,关于LG手机业退出中国市场的消息传的沸沸洋洋.不少相关媒体也对此事向LG北京办事处求证,得到的结果确实是手机业务退出中国市场.并且据韩媒报道,LG还将会逐渐取消高端手机业务,也就是说未来V系列和 ...

  2. ubuntu 16 下安装 Ubuntu Make

    第一步:下载安装包 地址:http://ftp.gnu.org/gnu/make/ 第二步:解压 先进入存放文件目录,图示: 进行解压,图示: 解压并copy到安装目录 第三步:编译 1.查看目录, ...

  3. Android studio常用快捷键与设置

    1.格式化代码: 命令 快捷键 将代码合并成一行 Ctrl + Shift + J 格式化 Ctrl+Alt+L 2.API函数参数提示:双击选中所要提示的函数,再按F2即可显示函数的使用方法. 3. ...

  4. Django 学习笔记1-- URLconf

    今天好像巴黎有点乱,希望明天太阳还会照常升起. 简介 Django 是一个由 Python 编写.开源并采用经典的 MVC 设计模式的 Web Full Stack 应用框架. 在 Django 中, ...

  5. SecureCRT语法高亮设置

    因为默认情况下,SecureCRT不能显示语法高亮特性,整个界面颜色单一,看起来不爽,也没有效率,所有通过设置一下语法高亮还是很有必要的, 默认字体也看着不是很清晰,还是更改为我比较喜欢的Courie ...

  6. JavaScript是如何工作的(一)

    简评:JavaScript 是越来越受欢迎了,很多团队都在采用这些语言工作.前端.后端.嵌入式设备等等,都可以看见它的身影.虽然我们知其然,但又知其所以然吗? 大家应该都知道 JavaScript 是 ...

  7. 你会选永生吗?NASA实验为火星宇航员提供年龄逆转药

    ​​宇宙辐射不仅是宇航员面临的问题.在乘坐飞机的过程中,我们所有人都会暴露在宇宙辐射中.一趟从伦敦到新加坡再到墨尔本的飞行中,人体受到的辐射量就相当于进行一次胸部X射线透视. ​在去年12月NASA举 ...

  8. Kali系统中20个超好用黑客渗透工具,你知道几个?

    1. Aircrack-ng Aircrack-ng是用来破解WEP/WAP/WPA 2无线密码最佳的黑客工具之一! 它通过接收网络的数据包来工作,并通过恢复的密码进行分析.它还拥有一个控制台接口.除 ...

  9. .Net Core 使用jenkins 部署到远程服务器docker

    最近一直在研究docker和kubernetes,小型的项目其实也用不到k8s,本文就是描述如何用jenkins 进行构建asp.net core 3.1项目并且发布到远程服务器docker容器中.本 ...

  10. 位运算基础(Uva 1590,Uva 509题解)

    逻辑运算 规则 符号 与 只有1 and 1 = 1,其他均为0 & 或 只有0 or 0 = 0,其他均为1 | 非 也就是取反 ~ 异或 相异为1相同为0 ^ 同或 相同为1相异为0,c中 ...