前端photoshop基础知识之切图

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端photoshop基础知识之切图相关的知识,希望对你有一定的参考价值。

  工作中需要应用到的ps知识多半是切图以及一些图片的微调。学习ps的一些基础知识,熟练掌握切图技术有助于更高效的完成工作任务以及达到更高的目标

  首先需要对新建(ctrl+n)的文件进行环境的设置,包括网页宽度(一般设为1920px)、背景颜色(设为透明)、移动工具(自动选择设为图层)、视图(勾选智能参考线及标尺)、窗口(关闭不需要的工具,勾选信息、字符选项,各个部分单位均改成像素)、编辑(选项中的标尺与单位均改成像素)的设置,最后存储工作区,以便下次继续使用。

  环境设置之后开始ps基本操作。移动工具(v)基本都会使用;选区工具(m)加上三种快捷键(shift alt ctrl)选取不同区域;其他的基础不做赘述,主要看切图和裁剪工具。

  切图:传统切图和精准切图两种方式。

  传统切图主要是依靠切片工具进行切片再在文件中存储为web形式,一般导出png24格式。缺点是不精确,切图慢而且容易产生多片不需要的切片并且切图速度缓慢,效率不高。还有一种方法是利用参考线+切片工具结合使用,缺点同上。可以先把各个部分裁剪好再利用参考线进行切图,准确性会高很多而且方便一些。

  精准切图就是利用phtoshop自带的脚本进行计算后切图,切图速度快,自动化智能切图,一般使用这种方法。点击文件,选择脚本,三个选项全部勾上,选择png-24导出,存储到目标文件夹。这个方法自动化智能计算并剪切图层,调整到适合的大小,包括图片细节也会自动处理,非常强大。还会自动命名,在我们使用过程中非常方便!

以上是关于前端photoshop基础知识之切图的主要内容,如果未能解决你的问题,请参考以下文章

第二节:谱聚类算法之切图聚类算法流程及其实现

前端开发使用Photoshop切图详细步骤

前端学习第一步----切图仔的诞生

前端之PS切图

5分钟学编程:前端工程师必备的开发工具—Photoshop篇

根据photoshop来完成前端页面的实现