PS切片(选择)工具介绍与网页切图应用实操

小七 发表于:2017-06-14 18:35 复制链接 ?提问题 +写文章
阅读数:2044
裁剪工具里面第三个选项是“切片工具”,这个工具是非常重要的,特别是网页设计的时候,可以用来对设计好的原始效果图进行分解,按照自己的需求切成多个小图片,并可以对切出来的小图片分别进行编辑,同时可以直接输出网页格式,“切片工具”对单页面网页设计是非常实用的,下面我们通过一个案例来加深对切片工具的理解。

这一节我们的演示素材还是会议的背景墙,跟上一节的“透视裁剪工具”的素材用的是同一个,这一节我们对素材进行分解,把素材当做一个效果图,把会议标题“第十六届国际科技博览会”当做Logo并配上超链接,一共切成5个小块,并输出网页格式,制作成一个单页面的网页。

第一步:选择“裁剪工具”里面的第三个选项“切片工具”。



第二步:打开素材,鼠标左键按照需求画出5个选区,也就是切成5个小块。



第三步:对第三个切片(编号为03)双击进行属性编辑,选中“裁剪工具”里面的第四项“切片选择工具”,给指定的切片增加超链接等属性,被编辑的切片边框是橙色的,未被编辑的切片是蓝色的。





第四步:保存格式选择“HTML和图像”,就可以看到刚才切片的效果,图片单独在一个文件夹,html是另外一个文件,双击打开可以在浏览器看到网页版的效果图。










通过查看源代码,我们可以看到刚才输出的静态html代码部分,如果要对页面进行修饰,改变相应的标签样式css即可实现,css在另外一个教程有介绍,这里就不重复了。



返回列表 使用道具 举报
16 条评论
您需要登录后才可以回帖 登录 | 注册
高级
yaozhong6625 yaozhong6625 发表于 2017-06-14 21:47 | 阅读全部
不错不错,支持了。感谢楼主分享
使用道具 举报
回复
金光遮阳 金光遮阳 发表于 2017-06-15 05:51 | 阅读全部
这个很实用啊
使用道具 举报
回复
小七 小七 发表于 2017-06-15 11:26 | 阅读全部

能用的才是有价值的,特别是seo相关知识
使用道具 举报
回复
肖大胖学seo 肖大胖学seo 发表于 2017-06-15 11:44 | 阅读全部
不管是收录还是外链,都应该遵循一个原则,那就是围绕着用户去展开,只有用户信任你的站你才能够获得更好的发展。
使用道具 举报
回复
zjlixing zjlixing 发表于 2017-06-15 12:12 | 阅读全部
很不错的实用技巧 必须来学习学习
使用道具 举报
回复
Foreverfight Foreverfight 发表于 2017-06-15 17:20 | 阅读全部
回帖是一种美德 关键还是非常有用的帖子
使用道具 举报
回复
rg96899 rg96899 发表于 2017-06-15 17:43 | 阅读全部
只要精益求精,不断上进.
使用道具 举报
回复
落痕思 落痕思 发表于 2017-06-16 09:30 | 阅读全部
选中“裁剪工具”里面的第四项“切片选择工具”,给指定的切片增加超链接等属性,被编辑的切片边框是橙色的,未被编辑的切片是蓝色的。
使用道具 举报
回复
dcllj dcllj 发表于 2017-06-16 09:30 | 阅读全部
只要精益求精,不断上进.
使用道具 举报
回复
12下一页

您的等级不够,“初级及以上会员” 开启

您的等级不够,“中级会员”开启