美文网首页干货从零开始学前端sen
前端必备:PS切图小技能

前端必备:PS切图小技能

作者: 越IT | 来源:发表于2017-01-15 02:50 被阅读69次

一、准备工作:工作区设置

1.新建图层的参数设置:


宽度一般是:1920px;
颜色:RGB;
背景内容:透明;
可以存储为预设,方便以后直接使用

2.参考线

调出参考线:视图——显示——智能参考线勾选上
只能用V移动工具拖出参考线。
参考线横变竖,按Alt。

新建参考线:视图——新建参考线
快捷键:Alt+V+E

【备注】当选中一个图层的时候,参考线会自动吸附到该选中图层的边缘。

3.右侧工具栏仅需保留4项:

图层、历史记录、信息、字符

其中,“信息”——设置——“信息黑板选项”设置如下图

4.统一单位像素

编辑——“首选项”设置如下

★上述操作完成后,“窗口”——“工作区”——“新建工作区”设置如下图:


方便以后直接调用。

二、常见切图方式

精准选中要切的图片方法:

V移动工具下。


自动选择勾选框可以不勾选,选择为图层。
选中需要的图片事点下Ctrl。即可选中对应图层。

1、传统切图方式:

方式1.切片工具直接选取切图

方式2.基于参考线切图

用参考线选取- 在切片工具下-找到“基于参考线切图”


方式3.裁剪工具

先用矩形选框选中——“图像“-裁剪——存储为web格式

方式4.转为智能对象

在V移动工具状态下,选中要切的图层——转化为智能对象;
用M矩形选框工具,大致选中智能转化的图,Ctrl+C复制,ctrl+N新建后,Ctrl+V粘贴;
图层中的背景图层,取消勾选——存储为web格式

2、精准切图

利用Photoshop的脚本切图

自动化切图,省时省力
计算机自动计算,尺寸更精准
命名依据PSD图层

第一步:


第二步:


相关文章

  • 前端必备:PS切图小技能

    一、准备工作:工作区设置 1.新建图层的参数设置: 宽度一般是:1920px;颜色:RGB;背景内容:透明;可以存...

  • 技术文章地址

    Web前端开发CSS、JS 廖雪峰的JS教程 JQuery基础 前端工程师必备的PS技能—切图篇 前端入门方法 A...

  • 17个前端切图快捷键,你知道几个?

    都说前端切图很简单,好吧, 那起码我比你快! 相对于设计,web前端切图用到的PS技能较少,在切图过程中掌握一些必...

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

    最近,许多小伙伴出去找工作,有的面试官给了一份psd图,让面试人员当场花一个小时还原静态页面等。拿到psd图,却不...

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

    新建界面设置:宽度1920px,高度不确定,分辨率为72 前端开发的ps四大窗口 单位标尺设置为px 把常用的窗口...

  • 前端小技能:切图小技巧

    一名web前端工程师,在工作中都要接触到切图这一方面,那么我们如何提升切图的能力呢? 我相信很多人都是先把图片图片...

  • ps技能——切图篇

    一:两种切片方法 第一种: 1.使用切片工具划分好你要切的模块2.点击'存储为web所有格式',在存储之前可以修改...

  • coder技能-ps切图

    可以使用裁剪工具中的切片工具来逐一裁剪想要的图,然后批量生成图片 可以使用参考线来切图,然后使用基于参考线来切图,...

  • PS切图工具——蓝湖

    PS切图工具——蓝湖 产品,设计一体化的前端开发工具,切图神器 https://lanhuapp.com

  • 《前端工程师必备技能Vue移动开发实战技巧》——读后感

    《前端工程师必备技能Vue移动开发实战技巧》——读后感 前端工程师必备技能:Vue移动开发实战技巧 Kindle电...

网友评论

    本文标题:前端必备:PS切图小技能

    本文链接:https://www.haomeiwen.com/subject/rojybttx.html