切图仔入门教程

对于大前端来说,首先入门的是切图,那我给大家来说说怎么做吧!

1、打开一个PSD文件先(要先安装PS啊 大哥们。。。)


选择PSD文件打开

 打开后 会提示:


一定要保留图层哦。因为每个文件里都是有各个小图层组成的



打开了。右边各个都是图层。中间是页面。左边是工具栏。

2、开始切图

我首先想切下这个图片的底图,我要再右边的图层里找到这层先


在这里,是这个图层

  我们需要切的是一整张图,那么,我们就把其他的合并起来。但是我们看到了这几个图层后面有小锁,有小锁的图层是不能改变的。所以,不要慌,我们先把这些锁解除掉,

对了 上面这个按一下就解锁了。

解完锁后,开始把这些图层选中合并起来。


选中后,右击鼠标,合并图层


此时图层以变成如下样子:

可以了 这个图合并完了

3、切图走起

选中这个图层 ,然后在左侧的工具栏里,找到


这个框选工具,选中这个图层,然后ctrl+c(复制)

这时 新建一个,如图


什么也不用管,直接新建就好

然后 到页面 ctrl+v 复制过来,


好了。切出来了

最后一步,进行保存,要选择web格式保存,这样在网站的图片可以进行一步压缩(特殊图片要求除外哦)


存储。。

接着  保存、、搞定。。


over over。。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...
    LuckyPandaLee阅读 2,268评论 0 14
  • 开始之前…… 这篇文章并不是教你如何美化图片的,它针对前端开发的图片操作。 这篇文章注重细节,像是工具类文章。所以...
    黑白度阅读 7,645评论 4 39
  • 以PhotoshopCS6为例,共包括以下六个方面详细笔记一、PhotoshopCS6的安装二、色彩模式及其像素概...
    委婉的鱼阅读 16,813评论 63 352
  • 官网中文版 1 简易天空替换## 技能:线性擦除,追踪运动,用颜色键K出人物,用色彩曲线调色。(1)天空图片素材放...
    朱细细阅读 10,922评论 4 82
  • 为了改善生活质量,为了子女教育,为了父母颐养天年,你、我,还有他,都在奔波。老板也好,打工仔也罢,此刻,估...
    米果甜心阅读 336评论 4 0