为了账号安全,请及时绑定邮箱和手机立即绑定

前端工程师必备的PS技能——切图篇

  • 裁剪->切片工具:灰色代表被动切片,蓝色代表主动切片 裁剪图片->建立参考线->基于参考线的切片 导出切片:文件->存储为web所用格式->PNG-24->存储
    查看全部
    1 采集 收起 来源:PS传统切图

    2018-03-22

  • 视图->新建参考线:单位设置为像素 Ctrl+R:显示标尺->从标尺中可以拖出参考线->将参考线拖回标尺可以删除参考线 拉出水平参考线+Alt键:变成竖直参考线 将竖直参考线拉倒横向标尺处,也可以删除该竖直参考线 先按Alt 键:锁定到菜单->再按某菜单的快捷键:打开该菜单 Alt+V+E:新建参考线(+H水平,+V竖直) 选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格:作图中经常会用到 Ctrl+分号:显示/隐藏参考线 设计网页新建画布尺寸1920*1080
    查看全部
  • Alt+Delete:前景色填充 Ctrl+Delete:背景色填充 选区->右键点击选区->变换选区->Alt+Shift+鼠标左键:同圆心缩小->确定->Delete删掉小圆内部颜色 Ctrl+T:自由变换 移动+Alt+拖动:复制并且自动新建图层 移动工具:针对的是选中的图层 Ctrl+鼠标左键单击某图层:直接移动该图层 裁剪:按住Alt键,以图像为中心建立裁剪区域 建立选区->选中图层->减掉不需要删除的选区->Delete->删除该图层的选区部分->达到五环效果
    查看全部
  • 钢笔工具(可选路径/形状) 自由钢笔工具 文本工具:Windows LCD 可以让文字没有毛边 文字可以直接添加在路径上 蒙版文字:可以向文字填充渐变色 路径选择工具:移动路径 直接选择工具:改变路径形状 形状工具:绘制标准形状 抓手工具、旋转视图 选择工具+空格+鼠标左键:抓手工具 放大工具(松开Alt)、缩小工具(Atl) 快捷键H:可以放大和缩小
    查看全部
  • 橡皮擦:不擦掉背景 背景橡皮擦:擦成透明的,把背景也擦掉 魔术橡皮擦:魔棒+Delete 渐变:默认为前景色到背景色 模糊、锐化、涂抹 减淡、加深、海绵
    查看全部
  • 污点修复画笔工具:照片处理,抹掉不需要的地方 修复画笔工具:复用某个地方的文字或图片 修补工具:选中要抹掉的区域,按住鼠标左键,拖至要填补成的区域,可以融合图片盖掉涂抹区域 画笔工具:可调整画笔硬度和大小 铅笔工具:线条细且硬,也可调整画笔硬度和大小 仿制图章工具:与修复画笔工具区别是,前者松开鼠标左键时会羽化图片边缘,后者则完全恢复原图片样式 图案图章工具:取自PS库里面的图案 先模糊->记录模糊历史画笔->回到图片初始状态->用模糊历史画笔处理需要模糊的部分->完成
    查看全部
  • 选区(M):加(Shift)减(Alt)乘 按Shift键,可以绘制正圆正方形选区 按Ctrl键,以起始点为中心点绘制选区 Shift+M,切换选区形状 套索(L):磁性套索(智能识别颜色变化的边缘) 快速选择工具(W):可以自动选择颜色相同的一块区域 中括号大括号按键,可以改变画笔的大小 魔棒 选区->裁剪->回车->回车:自动识别最小长方形选区 Alt+需要图层的眼睛:隐藏其他图层,仅保留当前图层,可供导出 选区->邮件->填充->内容识别:隐藏选区,并补充图层背景 吸管:改变前景色
    查看全部
  • 图层、历史记录、信息、字符 信息图板显示:RGB模式 RGB模式 单位:像素 勾选文档大小、文档尺寸 编辑->首选项->单位与标尺:文字单位改为像素、标尺单位改为像素 窗口->工作区->新建工作区:可以保存在自己习惯使用的工作区样式
    查看全部
  • 视图->显示->参考线 视图->标尺 窗口:隐藏库和颜色
    查看全部
  • 自动选择(建议不勾选) 图层(建议选择图层,不选择组)
    查看全部
  • 新建网页 尺寸:1920*x px 分辨率:72dpi 背景色:透明
    查看全部
  • 太牛逼了,以前都不用这么多处理东西,只会拿来处理图片,都不做命名什么的。太强了
    查看全部
  • 1,自动切图 1)菜单栏--编辑--首选项--增效工具--生成器--启用 2)文件--生成--图像资源--勾选 3)图层(图层文件)重命名(格式:名称+.png24/.jpg8/.svg)苹果reatin切图 200%名称+空格@2x.png24/jpg8/svg 4)名字取消,电脑中文件夹中的图片自动会删除。 2,抽出资源 选中图层--文件--抽出资源 3,赋值css 图层--复制css
    查看全部
  • 标尺和智能参考线
    查看全部
  • 1,切片工具:灰色代表被动切片,蓝色代表主动切片 2,使用参考线切图 3,先使用裁剪工具---再使用参考线切图 4,切图完毕,导出步奏 文件---存储为web所用格式(快捷键:alt+shift+ctrl+s) 5,存储格式png-24 [ 查看全文 ]
    查看全部
    1 采集 收起 来源:PS传统切图

    2016-01-29

举报

0/150
提交
取消
课程须知
本课程适合对Photoshop有简单了解,希望学习前端开发切图方法的用户。
老师告诉你能学到什么?
使用Photoshop从网页设计师提供的psd中获取网页前端开发过程中所需要的资源,并进行简单的调整和处理。

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!