必威体育Betway必威体育官网
当前位置:首页 > IT技术

web前端人员自行切图教程

时间:2019-08-13 03:44:21来源:IT技术作者:seo实验室小编阅读:75次「手机版」
 

网页切图

Web前端切图总结: 

  • 前期资料准备阶段:

    1. 获取最终版 PSD格式文件。
    2. 安装PS软件,并打开该PSD文件。

    1. 获取页面设计需求文档或工单文件,了解需求后,开始准备进行切图。
  • 用到的快捷键总结及常识知识:

2.1.复制图层:CTRL+J。

2.2.取消选择:CTRL+P。

2.3.新建PSD图层:CTRL+N。

2.4.合并图层:CTRL+E。

2.5.显示/隐藏蒙版:CTRL+ALT+G。

2.6.图层上移:CTRL+}。

2.7.图层下移:CTRL+{。

2.8.自由变换:CTRL+T。

2.9.存储为web所用格式:CTRL+SHIFT+ALT+S。

2.10.快速切到移动工具:V。

2.11.快速切到选框工具:M。

2.12.快速切到裁剪切片工具:C。

2.13.矢量图:无论图片放到多大,精度都不会变。

2.14.智能对象:在一定范围内,精度不会变化。

2.15.位图:图片放大,图片模糊,精度变化。

2.16.PNG格式图片:为透明图片,不会影响下方图片或背景的颜色。不适合保存大图。因为PNG图片 占用空间相对JPEG格式较大。太多会影响页面加载效率。

2.17.JPG格式图片:为不透明图片,会遮挡下方图片或背景图。适合保存大图,常用来当背景图。其它图片如果不怕被遮挡下方图片,也可以用JPG格式图片。

  • 切背景图片:

3.1.在移动工具下,勾选状态栏中自动选择按钮;根据个人需要选择 图层或组。

3.2.点击要隐藏的目标(此时会自动跳到右侧图层位置,并显示在图层中所在位置,被选中状态),此时看看是否需要隐藏整个组,如果不许要,隐藏自身即可。隐藏图层,点击前面的小眼睛。小眼睛消失图层关闭。

图层显示

  

仅隐藏目标对象

隐藏目标对象所在的群组。

3.3.当页面内所有需要隐藏的内容全部隐藏后,就可以切背景图。选择切片工具。按照需求尺寸去划切片范围。当然如果需要精细切图,可以启动标尺,作为辅助工具(视图/标尺,选中)。将标尺横向或纵向拖动到目标位置。然后按照标尺的位置去裁剪。

3.4.当该页面所有背景图都切完后,就可以进行保存了。保存为web所用格式。CTRL+SHIFT+ALT+S。保存为JPEG格式。图片品质自己选择。根据需要将元数据选择 无(可忽略此步)。然后选择保存路径即可。

3.4.保存完成后,去目录下查看。到此,切背景图完成。提示:有交互的,有动态的,一定不要保留在背景图上。背景图上只留UI要展示的纯静态的图片或文字等等。

  • 大图切小图:

4.1.确定要裁切的大图一定是智能对象或矢量图。位图会令图片变形。

4.2.明确要切小图的宽高。并在PS里新建PSD图层(CTRL+N)。然后根据小图新建画布模板

4.3.进入画布后,将所有要切的图片拖动到这里(如果电脑性能不佳,可分批拖动,否则会很卡)。然后按回车键,拖动几张图片就按几次回车,确保图片都被加载进来。

4.4.有些时候,图片大小是不一样,容易造成视觉混淆,所以,要关闭非目标图片。

4.5.操作图片,CTRL+T,令图片产生形变。建议,缩放图片时,按住shift,这样图片中心点不会变,缩放的图片不会变形,此过程中一定不要移动图片(移动图片会令图片中心点位置发生变化,同样会令图片变形)。提示,放大后的图片一定要和先关人员确定,得到认可方能保存。同样保存为web所用格式。

4.6.保存为web所用格式即可。到此为止,大图切小图完成。提示:大图切小图时,一定要考虑到目标元素的保护,千万不要将要展示的主要内容坏了。

  • 切模块图片:

5.1.捞记移动工具状态栏的自动选择的勾选和图层/组的选择。

5.2.选中要切到目标图片,跳到对应的图层位置后,先隐藏一下试试,看看是否影响其它图片元素。看看是否有智能对象,如果有需要一起选中。看看知否需要整组切下来。

5.3.选中该组,在该组上右键,选择复制组。然后在 弹出框里的 目标区域下的文档处选择新建。然后确定,该组内容就会进入到新的PSD里。这样做的好处是:目标图片会在原PSD位置,大小也不会发生变化。

5.4.进入新的psd后,你会看到背景是透明的。此时,你需要用裁剪工具进行裁剪(不是切片工具)。进行精细裁剪。

5.5.裁剪后会进入裁剪预览,此时你可以微调。然后回车确认或在裁剪区域内部双击鼠标确认。

5.6.到此为止,在原PSD中切某个图片元素就完成了。同样存储为web所用格式即可。提示:在裁剪时,可以按住ALT不断放大,来控制精度。

  • 更换背景图:

6.1.找到原背景图,确定其宽高。

6.2.打开新的PSD文件,然后CTRL+E合并图层。按照原背景图的宽高进行裁剪。如果高度不同,需要到CSS文件中进行调整。

提示:本教程仅为初级前端人员提供参考,文中的问题可能有更好更多的更快速的实现方法。如果更好的方法十分感谢指点一二。谢谢。

相关阅读

tornado 简易教程

引言 回想Django的部署方式 以Django为代表的python web应用部署时采用wsgi协议与服务器对接(被服务器托管),而这类服务器通常都是

《C程序设计教程(第二版)谭浩强》pdf 附下载链接

链接:https://pan.baidu.com/s/12k6EENwrnDo2n_B6NvPFAg 密码:wzy9 本书为完整版,以下为内容截图:

美图淘淘怎么加文字?最详细的图文教程

美图淘淘怎么加文字?美图淘淘是一款很好用的图片处理软件,但是很多朋友被美图淘淘怎么加文字?的问题所困扰着,今天小编就来跟大家分

荒野行动教程_如何在PC上用模拟器玩(而且匹配的是手机

荒野行动PC上匹配手机服教程 1. 第一步:下载安装网易的mumu模拟器,并设置显卡渲染模式只能使用网易的mumu模拟器,而且模拟器的设置

MentoHUST的使用教程

本文是MentoHUST的使用教程,旨在介绍MentoHUST怎么用,MentoHUST是一个支持Windows、Linux、Mac OS下锐捷认证的程序(附带支持赛尔认

分享到:

栏目导航

推荐阅读

热门阅读