【ps-course 网页设计】抠图

i/o

• 输入：设计稿 （psd文件）
• 输出：得到我们想要的产出物设计图（如.png,.jpg文件）给网页提供图片素材（HTML:img，CSS:background） 

步骤

• 打开psd文件，然后合并可见图像(无图层才可抠图)
• 选择魔棒工具，按住Alt+右键，点击所选的矩形框
• 点击之后的效果记得容差设置为0，默认为0
• 背景设置为透明，Ctrl+c，Ctrl+n，ctrl+v ok

选择

1.隐藏文字只保留背景
2.矩形选框工具选一块区域  自由变换 Ctrl+T  可拉伸
3.矩形选框工具选一块区域  使用移动工具+Alt  不可拉伸

图片格式

• 内容性的一般保存为.JPG，
• 修饰性的一般保存为.PNG8，.png24
• 修饰性的一般保存为.psd  (可保证图片质量)

常用规则

a，如果psd文件中图片颜色丰富没有透明要求使用jpg格式。
b，如果颜色不丰富，有透明要求的用png8。
c，被要求半透明，直接png24。

---

工具和操作详情

工作区
单位： 编辑-》首选项-》单位与标尺，选改为像素
面板：窗口/工作面板  工具 选项 图层 信息 历史记录 保存工作区
视图：标尺 Ctrl+R

切图常用工具
移动工具 ：将自动选择勾选，将组改为图层
矩形选框工具

• 添加到选区：按住Shift
• 从选区减去：按住Alt
• 与选区交叉：按住Shift+Alt

魔棒工具
渐变
裁剪工具+切片工具

• 产出：logo icon  button 背景图   banner  产品配图

缩放工具
放大：Ctrl+加号
缩小：Ctrl+减号
取色器

---

测量和取色

测量  矩形选框+信息面板

• 位置   定位 背景图片位置 
• 宽高  内外边距 
• 字体 行高

文字大小

• 选中图层，点击工具T，顶部选项区显示如下

取色 拾色器+吸管工具

• 背景颜色
• 字体颜色
• 边框颜色

 

---

参考链接

https://www.cnblogs.com/xiongmanli/p/6079172.html