前端切图

HTML 专栏收录该内容
2 篇文章 0 订阅

前端切图(PS)
1.缓存盘路径更改:(默认暂存盘为C盘)
编辑–首选项–性能
在这里插入图片描述选择除了C盘之外的盘,确定。
2.默认单位的修改:
编辑–首选项–单位和标尺
在这里插入图片描述修改标尺与文字的单位为像素,确定
3.新建图层:
文件–新建–创建
4.工具的预设及常用操作(窗口,视图)
1)工具
2)标尺
3)图层
4)信息
选区工具:选择一个区域后,在信息区域还会出现选区的宽高信息
拖拽工具:自供选择图层/组,需要勾选 操作完成以后Ctrl+Z退出
裁切工具:
吸管工具:吸取元素颜色
文字工具:选择某一文字后,在字符区域会显示该文字的基本信息(字体,大小)
在这里插入图片描述
Ctrl+Z撤销
Alt+鼠标滚轮键 放大缩小
通过调整图层顺序,可以更改图层显示的位置
5.借助辅助线切图
将辅助线(上方,左侧)拉到期望图层位置,然后利用裁剪工具可以依附辅助线的特性进行裁剪。
在这里插入图片描述

选择图层,利用移动工具移动到新建的透明图层上,

在这里插入图片描述

图像–裁切–基于透明像素裁切–确定 效果图如下
在这里插入图片描述

撤销操作动作Ctrl+Alt+Z
6.利用切片工具切图(可以选择多个区域,一键生成)—切片工具不能解决更细节的图片,不是最优解。
在这里插入图片描述

文件–导出–存储为Web所用格式(保存为png透明,jpg图片)
像一些小的背景图宽度设置为1就好了,不占网页
在这里插入图片描述

7.雪碧图(把多个图片集合在一个图层内,在网页中根据需求选择显示区域)
Ctrl+E合并图层
8.切banner图时
利用辅助线和裁剪工具选择裁剪区域–回车–文件–导出–存储为web所用格式
9.图片阴影部分(清掉背景,存储为png)–也可以使用css3进行设置阴影
10.切图的优化:
颜色代替图片–更小的内存代替大图片
雪碧图的制作
字体图标
11.工具箱快捷键(多种工具共用一个快捷键的可同时按【Shift】加此快捷键选取)
矩形、椭圆选框工具【M】
移动工具【V】
套索、多边形套索、磁性套索【L】
魔棒工具【w】
裁剪工具【C】
切片工具、切片选择工具【K】
喷枪工具【J】
画笔工具、铅笔工具【B】
橡皮图章、图案图章【S】

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值