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

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

  • 选择选区之后,

    右键,填充,内容识别(或者按删除键)即可扣掉

    Ctrl+J,扣出选区并新建图层

    简单工具操作:

    1、移动工具V

    按住Ctrl键,同时选择两个图层,则会出现居中对齐等新的属性。

    2、选区工具M

    操作前要选择相应的图层!!

    属性二,可画多个选区,可重叠(按住Shift键自动可以增加选区)

    属性三,可以减去选区(按住ALT也可以减去)

    属性四,可在原选区中框选

    按住shift,可以划出正方形和圆形,要先放开鼠标,再放开shift

    按住Alt定住圆心,同时按住Shift即可画出圆

    3、套索工具L(选区的另一种)

    (1)Ctrl+/-进行放大缩小

    按住ctrl键可以变成小手进去拖动

    按住shift,选择多个选区

    按住ctrl,切割掉多余的选区

    (2)多边形套索工具

    最后双击,即可形成封闭选区

    (3)磁性套索工具

    会根据颜色做一定的判断

    尖锐的地方可以配合,多边形套索工具+Shift进行补充

    4、快速选择工具W

    有添加和删减,调整工具大小的属性

    5、裁剪工具

    小技巧1:

    在选择图层后(在相应图层小图标上,CTRL+单击,此图层就可以变成选区),单击裁剪工具,按ENTER键即可

    小技巧2:

    画出一个不规则选区,点击裁剪,则会裁剪出能包围此选区的最小矩形框。

    6、取色器

















    查看全部
  • 窗口-工作区-新建工作区:可以在该工作区内对该面板设置界面
    查看全部
  • ps学习第四课:

    椭圆工具,按住shift键,去到另外一个图层取色,前景色填充,点击图片,右键选择“变换选区”,按住alt键和shift键,同心圆等比缩小放大,选择里面蓝色,按住delete键,删除蓝色,选择移动工具,按住shift键,统一缩小放大

    复制图层,移动工具,按住alt键复制图层

    按住复制出来的图层,control单击,会出现选中图层

    多个图层,要在移动目标对应图层移动

    多个图层整体移动,按住contrl键可单选/选第一个,按住shift键,选最后一个,全选,整体移动。

    裁剪工具,alt中央,中心调整

    选住蓝色图层,选区工具,然后将黄色部分去掉




    查看全部
  • ps学习第三课:

    ps简单工具操作

    五点修复画笔工具、修复画笔工具(选中一个点、按住alt键、找地方扫描出来)、修补工具(描选好选区,然后左键移动填补地方,填充左键移动到地方)、内容感知移动工具和红眼工具 用于图片修复。

    仿制图章工具(在要仿制图层中间点住,然后按住鼠标左键涂画)

    实操图片祛斑:

    图片滤镜 模糊  高斯模糊    历史记录  画笔圆  再回到历史图片

    可再学习该节课程







    查看全部
  • PS扩展功能:

       1)自动切图:

     案例:切出整个大的Logo

     1.编辑-首选项-增效工具-勾选启用生成器(更改将在下一次启动Ps时启用)

     2.文件-生成勾选图像资源

     3.在Ps中将logo所在的文件夹重命名

         要导出Png格式,命名为xx.png

         要导出jpg格式,命名为xx.jpg

     200%xx.jpg8表示:放大两倍,品质为原来80%

    注:要哪个部分图片,就重命名这个图层

       2)SVG和WebP格式导出:方法和上边一样,只是重命名后缀不同

       3)抽出资源:另一种导出SVG的方法

     选中要抽出的文件夹(图层)-文件-抽出资源-找到所需图层-选择抽出的格式:png、gif、svg-单击抽出-确定

       4)复制CSS:自动生成CSS(代码形式)

    菜单栏图层-复制CSS-打开写代码软件复制

       5)图层管理:对psd中大量图层进行分类管理


    查看全部
  • 图层中alt+眼睛隐藏其他图层,用于png
    查看全部
  • 网页设计的分辨率现在比较流行的是72像素/英寸。

    查看全部
  • 新建:文件->新建->Web(像素1920*2000,背景透明)

    设置:视图->勾选标尺,视图->显示->勾选智能参考线,编辑->首选项->单位与标尺->单位改为像素

    切图四大面板窗口(右侧):信息、字符,图层、历史记录

    保存工作区:窗口->工作区->新建工作区

    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上;
         2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消;
         3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定;
         4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】
        这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。
         5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。

    查看全部
  • 1.编辑>首选项>增效工具>勾上启动生成器 2.文件>生成>勾上图像资源>把要到呕出图层文件(夹),重命名为xxx.png/jpg  (这个时候之前用脚本到处图层的那个文件夹就多了一个assets文件夹,还有文件了)  去了后缀的话就不导出了 3.命名如果是 200% xxx @2x.jpg 可以放大200%道出了

    查看全部
  • 导出SVG格式:

    1、选择对应的图层或图层文件夹

    2、选择 文件->抽出资源,然后选择SVG格式

    3、SVG是矢量图,具有自适应性

    查看全部
  • 工具栏基本操作小技巧:

    1、选区工具:shift键添加选区、alt键减少选区、按shift键画正圆(方)、按shift+alt已当前像素点为圆心画正圆(方);

    2、裁剪工具:先建立选区再点裁剪工具,可以直接裁剪当前选区内的内容,裁剪比较精确;

    3、shift+工具快捷键,比如shift+m可以切换矩形选区工具和圆形选区工具;

    4、按住alt单击眼睛,可隐藏其他图层,按住ctrl可根据图层内容建立选区

    5、盖印图层:快捷键Ctrl + Alt + Shift + E,新建一个图层,包含所有图层的内容。

    查看全部
  • 网页设计需要重新定义ps界面,这样有利于工作的展开;

    1、设置移动工具:取消“自动选择”,切换选择范围“组”为“图层”,(工具栏中的快捷方式就是工具提示符后面的英文字母)

    2、自定义操作面板:仅保留“信息”、“字符”、“图层”、“历史记录”,开启“智能参考线”和“标尺”,将标尺单位设为“像素”,在“信息”面板选项里将“第一颜色”、“第二颜色”都设置为“RGB”、“鼠标坐标”设置为“像素”、勾选“文档大小”和“文档尺寸”

    3、首选项里“单位与标尺”设置单位为像素

    查看全部
  • 步骤:1.视图/显示/智能参考线以及视图/字符,这两个都要选上; 2.窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消; 3.点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色;文档尺寸选上,然后确定; 4.编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】 这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息。 5.窗口/工作区/新建工作区/名称:web切除,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。
    查看全部
  • ps界面设置: 1.新建设置:web或自定义,宽1920,高2000像素,背景透明,分辨率72,RGB颜色。 2.移动工具设置:改各个标尺像素。视图-显示-智能参考线-标尺Ctrl+R,窗口-信息和字符。 Ctrl+鼠标左键,不选自动选择,默认选图层,自由移动,右侧显示信息和想要的字符。信息面板,改为RGB颜色,像素,打开文档尺寸。 3.图层,信息,字符,历史记录。这是四大面板。 4.编辑-首选项-单位和标尺,单位都改为像素。 5.窗口-工作区-新建工作区-web切图。下面框快捷键都可以打勾选。 保存设置是为了下次快速调用此设置。
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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