admin 管理员组

文章数量: 887021


2024年2月19日发(作者:翻译represent)

网页编辑图片处理技巧[1]

如何切图-保存为html

概括:

【视图】菜单显示标尺——使用参考线(凭经验和需要)分割图片——基于参考线切片——合并或增加切片——保存web形式——设置质量,可以设置单个切片图片的属性——保存“html和图像”,或者其他。

图文演示:

一、标尺

—— 标尺二、参考线

(1)可以直接从边缘的标尺 可以用快捷键,ctrl+r 显示和隐藏标尺;

用工具拖移出水平或者垂直的参考线。

按住ctrl可以把水平变成垂直,或相反。

(2)固定位置建立参考线:从【视图】--【新建参考线】--【设置水平或者垂直,距离最左边的距离】

px(像素)可以手动改为厘米。

(3)

用拖移工具放在参考线上即可移动,保存图片是参考线会自动隐藏,可以在视图中隐藏掉参考线,或者把某个参考线拖到最左边或者最上边,就可以删掉那个参考线。

三、切片

参考线拉好后,用切片工具。

顶部这个工具的属性栏会显示为下图

点“基于参考线的切片”,自动根据你的参考线切图。

假若切片太多或者有的切片要调整,直接用切片工具对所需要调整的区域拖选就可以了。

如图,从01切片的左上角拖选到切片09的右下角,把1~9切片合并为一个切片了。

四、保存

·—— 菜单【文件】保存为【存储为web和设备所用格式】

·默认即可。

进入的页面右上角,可以预设整个图片的统一名字,也可以点击单个切片命名。存储格式可以为多种。品质一般为60左右足够网页需求。其他·在图片下方可以看到 是单个切片或者整个图片存储后的大小,可以根据需要调整上图的“品质”,使得大小也可以增大或减小。

·状态。

当点击左上角,即对整个图片进行设置。而则是可以对单个切片设置的·点击保存,和图像。

·table id__01就是切图部分的代码。

,“格式”选择为html· 将相关图片放入制作的web文件夹里的对应位置(例如:3G_web文档

/images文件夹下)复制table id=”__01”到即可。

结束。放入文件的需要位置,


本文标签: 参考 切片 图片 保存 需要