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,顶部选项区显示如下
取色 拾色器+吸管工具
- 背景颜色
- 字体颜色
- 边框颜色
参考链接