3.8 使用切片工具制作网页 [原创Ps教程]


1. 本节课将为您演示[切片工具]的使用。此工具可以把图片切成若干个小图片并直接输出为网页格式，非常实用！首先长按[裁剪工具]，显示隐藏的工具列表。


2. 然后选择列表中的[切片工具]。


3. 根据工作需求，可以把图像切割成若干个区域，在左上方的圆点处按下鼠标，并滑动至右下方的圆点处，从而创建一个基于两点的切片区域。


4. 接着以同样的方式，创建第二个切片区域。


5. 您还可以给切片设置网址链接，这样当把所有切片输出为网页后，即可点击该切片访问对应的链接网址。鼠标长按[切片工具]，显示隐藏的工具列表。


6. 点击选择列表中的[切片选择工具]。


7. 然后鼠标双击第一个切片，弹出[切片选项]窗口。


8. 在弹出的[切片选项]窗口中，点击网址输入框，输入切片链接的网址。


9. 点击[目标]右侧的输入框，并输入网址打开的方式，设置在空白页面打开新的网址。


10. 接着点击[确定]按钮，完成切片选项的设置。


11. 现在把划分好的切片，输出为多张小图片和网页格式。依次点击[文件 > 存储为网页所用格式]命令。


12.


13. 在弹出的[存储]窗口中，保持窗口上方的图片输出格式为8位索引位图，即将小图输出为压缩后的图片，点击[存储]按钮，开始输出切片后的小图和网页。


14. 在弹出的[将优化结果存储为]窗口中，点击[文件名]右侧的输入框，输入网页的名称。


15. 点击[格式]右侧的下拉箭头。


16. 然后选择[网页和图像]选项，这样就可以同时输出切割后的小图和网页了。


17. 确认输出文件所在的文件夹，然后点击[保存]按钮，开始输出小图和网页。


18. 在弹出的警告窗口中，点击[确定]按钮。


19. 同时按下键盘上的快捷键，从操作界面切换出来，并打开输出文件所在的文件夹。


20. 文件夹下保存了所有输出的小图片，另一个文件则是输出后的网页，双击网页文件，使用浏览器打开该网页。


21. 网页中显示的画面，其实并不是一张大图，而是由输出的多张小图，按照原来的位置拼合而成的。点击此处的切片，查看网页链接效果，并结束本节课程。




本文整理自：《Photoshop CC互动教程》，真正的[手把手]教学模式，用最快的速度上手Photoshop，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id822431555，或扫描本页底部的二维码。课程配套素材下载地址：资料下载

0