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

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

  • 套索工具,不规则选区的选择
    查看全部
  • ctrl + + 放大 ctrl + - 缩小
    查看全部
  • shift + M 轮流切换 不同的选区选项
    查看全部
  • alt+shift 圆心居中
    查看全部
  • 先放开鼠标左键,在松开快捷键!
    查看全部
  • 0723
    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • [以下技巧为新版PS CC2014功能,有助于前端开发] 自动切图: 【配置】配置完成后,PSD 文件所在路径会出现 对应文件名-assets 的文件夹 1、编辑--首选项--增效工具--这里对『启动生成器』打勾√ (注意,更改在下一次启动 PS 后生效) 2、文件--生成--图像资源(将其打勾√ ) 【使用】 1、在 PSD 内将图层或图层组的名称修改为.png 或.jpg 结尾,则在assets文件夹内自动生成导出图片(以图层名称及其约定的文件后缀名命名)。 2、Retina优化: 如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 3、如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在assets文件夹内消失。 4、还可以通过图层和图层组的文件后缀名来控制导出图片质量,例如『.jpg8』则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 5、SVG生成:改后缀名可自动生成SVG 6、SVG导出:选中资源-文件-抽出资源,抽出SVG图片 7、复制CSS:选中资源-图层-复制CSS 8、图层管理:图层下方可选择类型,进行图层筛选
    查看全部
  • Photoshop精准切图 改进切图流程 利用Ps的脚本,进行一种更加快捷精准的切图方法 自动化切图,省时(由于图片可能很大,省时不敢保证)省力 计算机自动计算,尺寸更精确 ----------- 单击文件-脚本-将图层导出到文件(Alt+F+E) 文件类型:png-24 透明区域,交错,裁剪图层勾选 注意:比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本 当中引入堆栈,那是非常炫的一个功能 1、有阴影会保留下来。 2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    0 采集 收起 来源:PS精准切图

    2016-07-22

  • 传统的快速切片方式:先将图片根据不同的区块裁剪出来(为了便于参考线不太混乱),然后再拖动参考线去将图片进行一个大概的标块,标块之后在软件上方选择【将参考线转化为切片】这样的选项即可完成大致的切图,之后我们可以在不需要细致的切图区右击选择【删除切片】将不需要的切片删掉合并,最后一步到【文件】-【存储为WEB格式】
    查看全部
    0 采集 收起 来源:PS传统切图

    2016-07-22

  • 1,切片工具:灰色代表被动切片,蓝色代表主动切片 2,使用参考线切图 3,先使用裁剪工具---再使用参考线切图 4,切图完毕,导出步奏 文件---存储为web所用格式(快捷键:alt+shift+ctrl+s) 5,存储格式png-24
    查看全部
    0 采集 收起 来源:PS传统切图

    2016-07-22

  • 视图->新建参考线:单位设置为像素 Ctrl+R:显示标尺->从标尺中可以拖出参考线->将参考线拖回标尺可以删除参考线 拉出水平参考线+Alt键:变成竖直参考线 将竖直参考线拉倒横向标尺处,也可以删除该竖直参考线 先按Alt 键:锁定到菜单->再按某菜单的快捷键:打开该菜单 Alt+V+E:新建参考线(+H水平,+V竖直) 选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格:作图中经常会用到 Ctrl+分号:显示/隐藏参考线 设计网页新建画布尺寸1920*1080,中间内容部分是1200px,两边360px的参考线通常用新建参考线来设置。
    查看全部
  • 自动切片 酷。。。
    查看全部
  • 画圆环:<br><br><br> 新建文件-白色背景 新建图层<br><br> 1.椭圆工具 按住shift 画一个圆 (这里我用椭圆工具画圆之后 ,后面删不掉小圆,所以直接用椭圆选择工具框了一个圆出来,然后填充颜色,就成功了) 2.ALT+delete背景填充 (control+delete前景填充)<br><br><br> 3.切换到选区工具 在刚才画的圆上右击--变换选区--Alt+shift+鼠标左键:同心圆缩小--确定-delete删掉小同心圆内部颜色<br><br> 4.调整大小:control+t 自由变换选区 按住shift拖住右下角的控制按钮 缩小或放大<br><br> 5.复制图层 在移动工具 按住alt键拖动<br><br> 6.填充颜色 选中图层的缩略图 按住control单击图层 会选中图层中的像素 可以对图层中的形状填充颜色 7.复制四份并填充形影颜色值,调成五环的位置 8.删掉压住的部分,使其呈现出一环扣一环的效果:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • 钢笔工具(可选路径/形状) 自由钢笔工具 文本工具:Windows LCD 可以让文字没有毛边。 文字可以直接添加在路径上。 蒙版文字:可以向文字填充渐变色。 路径选择工具:移动路径。 直接选择工具:改变路径形状。 形状工具:绘制标准形状。 抓手工具、旋转视图。 选择工具+空格+鼠标左键:抓手工具 放大工具(松开Alt)、缩小工具(Atl) 快捷键H:可以放大和缩小。
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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