百丽服饰首页切片

2017-08-08 14:14:06
admin
584
最后编辑:admin 于 2017-08-15 14:53:18
本案例对百丽服饰首页进行切片。对制 作好的网页效果文件进行切片前,需要分析网 页中的元素哪些是静止不变的,哪些是共用元 素。对于共用元素,一般需要单独导出,导出时应该隐藏其他图层。百丽首页效果图如图 所示。

STEPI01

打开百丽首页效果文件,查看其内容和图层,如图所示。


STEPI02

根据查看,得知网页头部(页眉), 标志是独立的图,标题文字是标准字体;主体部分,背景是两张模特图,"城市触感"是共 用部分,悬浮于背景图上;底部(页脚),表 示图片切换的圆形图标是共用的,文字是标准 字体。图中红圈所指的就是需要独立输出 的共用图。

STEPI03

选择切片工具,首先从上到下将页面、主体、页脚切片,如图所示。

STEPI04

隐藏所有文字图层,隐藏共用图图层,如图所示。

STEPI05

执行【文件】I【存储为Web所用格 式】命令,打开图所示对话框。

STEPI06

分别选中切片1、2,设置优化格式为 JPEG,品质为60%,如图所示。

选中切片3,设置优化格式为GIF,设置颜色数为2,如图 所示。



STEPI07

单击【存储】按钮,选择百丽文件 夹,设置名称为baili (网页图片只能用数字、英文命令) ,【切片】选项设置为所有切片,然后 单击【保存】按钮,导出切片,如图所示。

STEPI08

显示出共用图所在图层,并隐藏整 个背景,同时选中图层2、3、4、5,执行【图层】I【新建基于图层的切片】命令,创建共用 部分的切片,如图所示。

STEPI09

执行【文件】I【存储为Web所用格 式】命令,打开【存储为Web所用格式】对话 框。首先选中切片8,设置格式为PNG-24,如 图所示;


然后分别选中切片3、13、15,设 置格式为GIF,设置颜色为8,如图所示。

STEPI10

按住shift键,使用对话框左侧的切 片选择工具,将切片3、8、13、15同时选中,

单击【存储】按钮,弹出存储对话框,按照图 所示进行设置,然后单击【保存】按钮, 完成切片导出。



STEPI11


打开百丽首页文件夹,可以看到其下 包括一个image文件夹,这是导出切片时程序自 动创建的文件夹。打开该文件夹,可以看到所 有导出的切片图像都在,如图所示。


如果在保存对话框中,设置【格式】选项为【HTML 和图像】,则可以同时导出切片图像和HTML文 件。本案例设置为【仅限图像】,因此只是导出 了切片图像。














  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227