web前端切图ps简单设置+工具介绍+以及切图方法

一,ps的基本设置

1*将点选上的拖动到右侧工具栏中进行调整以及待用

2*视图(下的)

---显示---智能参考线打开

----标尺

将库 / 颜色 / 通道 /路径*********关闭

3*窗口

---信息 {

右侧单击-----面板选项的设置^颜色改为RGB颜色^单位改为像素^文档尺寸选上+++++单击确定

可以看到位置以及选区的大小

}

------字符{可以看当前文字的字体,大小}

4*选择

---导航栏第二排有组/图层-----选图层,自动选择可不选

5*编辑

----首选项----单位与标尺+++++++++单位改成像素

6*前面都设置好了之后点击---窗口---

--------工作区---新建工作区-------(最好取名为+++web切图)

二*常用工具的介绍(左侧工具栏)

*1---选区(快捷键M)

1.1点选上导航栏第二排羽化前面有四个方框,表示{选区,选区叠加(也可以shift键),选区裁剪(alt键),选区的交集}

1.2右键单击选区工具---会出现四个功能{注*++椭圆选区和矩形选区在选圆和正方形时===可按住shift键/+alt键+再画++++++要先放鼠标后方按键}

1.3按住空格键就可以转换成----抓手工具(随意移动图片)

*2套索

2.1套索选上后:按住shift为加;按住alt键为减>>>选中区域

2.2当还剩一部分没有闭合时可双击鼠标快速闭合

2.3不规则图形时,可用磁性套索--化好选区后在用多边形套索+shift键进行微调选择

*3快速选择

也有加有键----在选区加减的位置

调整大小快捷键要在英文输入状态下按:{--小 +++++ }--大

*4裁剪

可以按住alt键定位住中央然后调整选区

4.1可以先用移动工具选择上需要裁剪的图形(按住ctrl+单击右侧图形:快速选上),再单击-裁剪++就会裁剪出选好的区域,在保存就好了

4.2选区选好后单击裁剪++裁剪完成++保留图层+(按alt+单击右侧图层中当前裁剪下来图层(组)的眼睛:隐藏其他图层成透明背景)

4.3污点修复画笔---放大缩小要在英文输入状态下按{/[++++]}

*5钢笔工具

可以添加删除锚点,

*6参考线+标尺

ctrl+r快速打开标尺

参考线的方向变换---拉出来参考线后不要放手+++再按alt键

在选择工具下,在标尺寸按住左键拖动就可以建立参考线,删除也是如此按住参考线往左侧/上方标尺上拖就删除了.(哪里来哪里去)

三*切图部分方法

*1合并所有图层快捷键:ctrl + shift + alt + E

*2颜色叠加:ctrl + K

*3将图片背景改为透明背景的方法:魔术棒 选中背景后-- 点击 Delete ---(背景透明后) ---将蚂蚁线取消选择(ctrl+d) ----图像 ---裁切 ----透明

*4切图时保存透明背景的方法:选区选好后单击裁剪++裁剪完成++保留图层+(按alt+单击右侧图层中当前裁剪下来图层(组)的眼睛:将其他图层隐藏成透明背景)

*5每一个部分最好分开来切,这样参考线不会相互影响

*6传统切图:

用切片工具结合参考线(基于参考线的切片)将图片切好后------保存方法:

文件---存储为web所用格式-----右边有图片格式..质量...--------存储----保存---确定

{弊端:会切出不需要的图片而且删除切片还麻烦}

*7精准切图(计算机自动切图):

将需要切图的图片导入----文件-----脚本----将图层导出到文件---文件类型(例如:png-24----将下面的透明区域/交错/裁剪图层都勾选上)-------运行

*8部分切图快捷方法:

8.1自动切图:

编辑 ---- 首选项 ---增效工具---*启用生成器勾上--确定----然后----文件----生成----图像资源勾选上(就会多出一个文件夹)---给要导出的图层/组重命名一下(双击图层/组的名字即可eg---logo.png)加上图片的后缀名

*9图片的svg格式

*10复制css:

图层------复制css------打开一个文档-------粘贴

*11图层管理

猜你喜欢

转载自blog.csdn.net/weixin_42805130/article/details/81480619
今日推荐