切图仔入门教程

作者: 西柚子啊喂 | 来源:发表于2018-04-25 15:56 被阅读85次

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

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

选择PSD文件打开

 打开后 会提示:

一定要保留图层哦。因为每个文件里都是有各个小图层组成的 打开了。右边各个都是图层。中间是页面。左边是工具栏。

2、开始切图

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

在这里,是这个图层

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

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

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

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

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

可以了 这个图合并完了

3、切图走起

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

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

这时 新建一个,如图

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

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

好了。切出来了

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

存储。。

接着  保存、、搞定。。

over over。。

相关文章

  • 切图仔入门教程

    对于大前端来说,首先入门的是切图,那我给大家来说说怎么做吧! 1、打开一个PSD文件先(要先安装PS啊 大哥们。。...

  • 切图仔

    也是蛮无聊的。 最近在学前端开发的东西,想着山寨一个豆瓣页面。HTML+CSS,是说我根本不会用JS。QAQ 花了...

  • 001-BFC实现常见的oa后台页面布局

    作为一个高级切图仔,在日常工作中,我们的任务是什么?切图!切图!切图!······ 没错,除了切图,还会接受来自产...

  • 我用了imgcook,感受一言难尽

    title: imgcook的出现,让切图仔何去何从?category: Webtag: imgcookdate:...

  • 移动端UI切图

    在App设计的最后阶段——切图。下面给大家带来有关切图的入门教程,讲讲切图的一些原理、手机大小尺寸,快一起来瞧瞧吧...

  • 切图仔的页面魔法秀

    早上微信收到好友发来的一个github链接 https://github.com/unclehking/bdAdf...

  • Zigbee-资源-教程

    【Zigbee技术入门教程-01】Zigbee无线组网技术入门的学习路线 【Zigbee技术入门教程-02】一图读...

  • 前端工程——基础篇

    喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧。你好,切图仔。 不知道你的团队如何定义前端开发,据我所知,...

  • 前端工程化:从切图仔到前端 Leader,如何跨越式成长

    前端工程化:从切图仔到前端 Leader,如何跨越式成长https://blog.csdn.net/valada/...

  • 近期外包总结

    以前总是在各个地方水自己是切图仔,在这次自己接了个外包之后,才知道怎么切图。。。当PSD文件给到我的时候,我是一脸...

网友评论

本文标题:切图仔入门教程

本文链接:https://www.haomeiwen.com/subject/yfrylftx.html