网页切图

59 阅读1分钟
PS学习
界面设置
简单工具操作
图层操作
参考线及其辅助
传统切图
精确切图

先说现在吧,页面中常见的icon图标的矢量文件制作为字体文件或svg格式的文件,直接在页面中引入,兼容不同分辨率。

web前端切图,是将PSD等UI设计稿使用前端技术转为HTML+CSS的前端页面,成为可在浏览器中打开,并可供其他人浏览访问的页面。

矢量图是由路径和锚点组成的(数学公式构成),无论放大多少倍,图片边线仍然清晰光滑。比如AI矢量图创作软件,用于矢量图制作,图形对象,主要是企业VI制作、矢量插画绘制、文字排版、手册、宣传页、海报。

像素图是由每一个像素组成,放大到最大后,会看到一个一个纯色的小格子(像素)。比如PS图像处理软件,处理位图,用于像素图(照片、图片)编辑,平面广告、插画、后期处理。

用PS(Adobe Photoshop)工具

用ps打开保存的网页图片.png,工具栏-切片工具,用ctrl + 空格键图片放大模式,Alt + 空格图片缩小模式,配合用鼠标点选,全部切图完毕后,保存时选文件-存储为Web所用格式,在下方存储时,选择切片的类型为 所有用户切片,可把已切的部分都保留下来。

image.png image.png

image.png