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

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

  • 从一端拉参考线,按住ALT键,即可变换竖直或平行参考线。
    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • SVG 自适应
    查看全部
  • photoshop界面设置
    查看全部
  • 新建文件,然后右下角创建新图层
    查看全部
  • 画圆环: 1.新建文件——椭圆选框工具——按住shift 画一个圆; 2.切换到原图——选择吸管工具——点击原图颜色; 3.Alt+delete前景填充,control+delete背景填充; 3.切换到选区工具——右键--变换选区--Alt+shift+鼠标左键——同心圆缩小--确定-delete删掉小同心圆内部颜色; 4.调整大小:control+t 自由变换选区 按住shift拖住右下角的控制按钮 缩小或放大<br><br> 5.复制图层 在移动工具 按住alt键拖动<br><br> 6.填充颜色 选中图层的缩略图 按住control单击图层 会选中图层中的像素 可以对图层中的形状填充颜色 7.复制四份并填充形影颜色值,调成五环的位置 8.删掉压住的部分,使其呈现出一环扣一环的效果:CTRL+在图层缩览图中单击蓝色环,再选中黄色环图层,矩形选框->摁住alt减去黄色环要保留的部分,最后delete,可以去掉黄色部分被选中的小块,如此形成手拉手
    查看全部
  • #3.5参考线及辅助# 作图时挺重要的 1.ctrl+R 标尺快捷键 2.用鼠标左键从标尺拖动到图片,可以出现参考线 3.横向参考线按住 alt 键变成纵向参考线 4.删除参考线将其拖回到标尺位置即可 5.新建参考线 按Alt\ V 后 E 6.隐藏\出现参考线 ctrl+; 网页标准:1920X1080 选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字的边缘时会自动过滤掉虚化的部分 视图->显示->网格:作图中经常会用到
    查看全部
  • 放大:ctrl+加号 缩小:ctrl+减号
    查看全部
  • 自动选择:ctrl+鼠标单击图层
    查看全部
  • alt+鼠标滚轮放大缩小,或者sh + ct + 空格 + 鼠标移动放大缩小
    查看全部
  • 课程目标
    查看全部
  • 扩展知识介绍 一.自动切图 1. 编辑一一>首选项(Ctrl+K)一一>增效工具一一>这里对“启动生成器”打勾√ (更改在下一次启动 PS 后生效) 2. 文件--生成--图像资源(将其打勾√ )勾选后PSD 文件所在路径会出现对应文件名“-assets”的文件夹。 3. 对文件所在图层进行重命名,比如要导出.png图片,命名后再对应的-assets文件夹中会出现命名的图片。 4. 如果不想要导出的图片资源了,可以取消图层和图层组的文件后缀名,则导出的图片自动在-assets文件夹内消失。 5. 可以通过图层和图层组的文件后缀名来控制导出图片质量,例如“.jpg8”则为 导出为80%品质的 jpg文件,如果不设置则默认为最佳品质。 6. Retian优化 @如果需要适配 retina 显示器,可以将图层命名为『200% 图层名字 @2x.后缀名』(注意需要添加空格,如:200% button @2x.jpg)自动导出的文件名不会出现200%的字样,但是文件尺寸变为2倍大小。 7. SVG(矢量图格式)(同WebP格式) @SVG生成:改后缀名可自动生成SVG。 @SVG导出:选中资源-文件-抽出资源,抽出SVG图片。 8. 复制CSS:选中资源-图层-复制CSS ,单击右键在DW编辑器中,直接出现代码。 @这里将图层默认识别为类。 9. 图层管理:图层下方可选择类型(各属性),进行图层筛选。
    查看全部
  • Photoshop精准切图             1.利用脚本,自动切图,计算             2.文件——>脚本——>将图层导出到文件(Alt+F+E)—>png24,勾选透明,交错和裁剪——>运行             3.比如说要做一个gif动画,如果是ps导出,半透明效果出不来,我们用ps导出一个一个png序列帧,由于命名是很顺的,我们可以在脚本当中引入堆栈,那是非常炫的一个功能1、有阴影会保留下来。2、命名刚好是图层的名字,如果做网页设计把每个图层命名使用网页中合法的命名,就可以不需要导出后再调整名称。
    查看全部
    0 采集 收起 来源:PS精准切图

    2016-08-04

  • Photoshop传统切图            1.裁剪工具下的切片工具              灰色:被动切片,白色:主动切片            2.切图选择工具:属性面板有隐藏和显示自动切片,显示后能看到灰色的自动切片,利用切片选择工具来进行一些调试            3.传统切图方式:将需要的图片一个个都切上            4.简单切图方式:使用参考线,参考线就是在左面或上面的标尺上拖下来就是一根参考线,根据自己需要的图片,使用参考线将它框起来!            5.切片工具+属性栏中基于参考线的切片!            6.不需要的切片右击将其删除!            7.分开切,将每一部分裁剪使相互部分间不受影响,再进行切片。            8.切好后导出:文件——>存储为Web所用格式(Alt+Shift+Ctrl+S)——>png24
    查看全部
    0 采集 收起 来源:PS传统切图

    2016-08-04

  • 参考线及其辅助线         1.Ctrl+R:标尺,在移动下拖动形成参考线,拖动回水平或竖直标尺内即删除         2.按住Alt,拖动水平标尺——>变为竖直参考线         3.web切图中1920里只有1200的内容,剩余720左右两侧各360的留白,参考线标出         4.视图——>新建参考线——>单位不能少(建立参考线)         5.新建参考线快捷键:Alt+V(水平)/H(竖直)+E:弹出界面         6.选中当前图层,拖动参考线,在图层图像某一边界处附近固定不动(自动吸附)/选中图层,再新建参考线时,参考线会被吸附到图层边缘,但吸附到文字图层的边缘时会自动过滤掉虚化的部分         7.视图——>显示——>网格(便于作图)         8.对参考线进行隐藏:Ctrl+;(隐藏或打开)         9.先按Alt 键:锁定到菜单——>再按某菜单的快捷键:打开该菜单
    查看全部

举报

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

微信扫码,参与3人拼团

微信客服

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

帮助反馈 APP下载

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

公众号

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

友情提示:

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