网页的切图及切片的属性设置(全)

《网页的切图及切片的属性设置(全)》由会员分享，可在线阅读，更多相关《网页的切图及切片的属性设置(全)（36页珍藏版）》请在金锄头文库上搜索。

1、Photoshop CS3实例教程：网站首页之主体的制作 (1)2008-08-04 09:07:34 作者：薛欣 来源： 浏览次数：8550 评论课程总览 在本课程中，朋友们将学习到以下内容： 如何通过 Photoshop CS3 进行网站首页的版面设计 各种网页版面元素的设计技巧和方法 如何进行网页的切图以及切片的属性设置 如何创建与 Flash 整合的 FLV 视频 在 Dreamweaver CS3 中使用“Spry 选项卡”构件 Photoshop、Flash、Dreamweaver 的协同工作 Photoshop CS3实例教程：网站首页之主体的制作 (2)2008-08-04 0

2、9:07:34 作者：薛欣 来源： 浏览次数：8551 评论第 1 讲 制作首页的主体部分 本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。 书归正传，早先的网页页面设计一般是以 Dreamweaver 为中心，由 Photoshop 或Flash 等软件来提供各种素材，如图片、动画、文字等。自从 Photoshop 出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了 Photoshop。因为 Photosh

3、op 本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。 1. 打开 Photoshop CS3, 执行菜单“文件 新建”。在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB 颜色”，其它参数保持默认。 2. 按下 Ctrl+A 全选页面，执行

4、菜单“编辑 填充”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”，绘制一个如图 1-1-1 所示长方形 A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图 1-1-1 中 B 所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。 图 1-1-1Photoshop CS3实例教程：网站首页之主体的制作 (3)2008-08-04 09:07:34 作者：薛欣 来源： 浏览次数：8552 评论3. 使用横排文字工具，输入“石桥花园”字样，字体为“方正流行体简体”。再输入“ShiQiaoGarden”，字体为“Bickham Script Pro”，字号均为“30 点”

5、，文字如图 1-1-2 所示布局。 图 1-1-24. 这是一张拍摄自龙亭的花卉原始素材，采用了微距加上 2.8 的大光圈，实现了浅景深的背景模糊效果，读者可以使用模糊工具或镜头模糊滤镜实现类似的效果，如图 1-1-3 所示。 图 1-1-35. 我们对图片进行简单的处理，执行菜单“图像 调整 色阶”，从两侧向中间调整黑色和白色滑块的位置以使图片主体更加突出，更富有感染力。原素材本身是 16:9 宽屏的，我们使用选区工具加删除键进行适当的裁切，如图 1-1-4 所示。 图 1-1-45. 为了增加花卉的现代感和时尚感，我们进一步对图片进行加工，随意找一张图片，执行菜单“滤镜 像素化 马赛克”，

6、数值调大，产生大色块的马赛克效果。然后通过素材或自己制作一张扭曲后的网格，这些都是待合成的素材，如图 1-1-5 所示。 图 1-1-5Photoshop CS3实例教程：网站首页之主体的制作 (4)2008-08-04 09:07:34 作者：薛欣 来源： 浏览次数：8553 评论6. 现在有网格、花卉和马赛克三层图片，网格放在最上层，将图层的混合模式设为“颜色加深”，不透明度设为“68%”。花卉层的混合模式设为“强光”，马赛克图层不变，三者的合成效果如图 1-1-6所示。 图 1-1-6 7. 下面要制作的是首页的导航条部分，使用矢量的“矩形工具”绘制一个长方形，注意该长方形不要画满，留一

7、些黑边在周围，黑边上窄下粗，使其具有一定的层次感。十六进制颜色值为“#c8fcc5”，一种清淡的绿色，如图 1-1-7 所示。 图 1-1-78. 使用横排文字工具输入导航条上的文字，使用大括号“”进行装饰，字体为“方正小标宋_GBK”, 消除锯齿的方法为“浑厚”，如图 1-1-8 所示。这里所制作的导航只起到占位作用，后面的教程中将设置导航条按钮的翻转效果。 图 1-1-8举一反三： 尝试用类似的方法设计个人主页的标题和导航条等部分。 Photoshop CS3实例教程：版面元素的设计和方法 (1)2008-08-04 09:19:50 作者：薛欣 来源： 浏览次数：5691 评论上一篇：

8、Photoshop CS3实例教程：网站首页之主体的制作因为相对于主体来说，内容部分并不是很容易出彩，所以其设计比主体更加需要清晰的思路，并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在 Dreamweaver 中，所以这里我们在 Photoshop 中所设计的只是一个供参照的外观。1. 在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图 1-2-1 所示。图 1-2-12. 在文字的下面是播放在线视频的地方，我们这

9、里插入一些图片进行占位。图片推荐在 Adobe Stock Photos CS3 中进行查找，这是 Adobe 提供的一个庞大的图片素材库，包含在 Adobe Bridge CS3中，低质量的图片小样是完全免费的。因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。需要注意的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge”来下载一些关于桥的照片，如图 1-2-2 所示。图 1-2-23. 我们用多张“桥”和“花园”的图片合成了这部分的图像内容，这里使用的石桥剪影字体为“方正古隶简体”，合成的方法因为非常简单，这里就不再赘述，如图 1-2-3 所示。图 1-2-34

10、. 在下面绘制深灰色矩形，十六进制颜色值为“#2a2a2a”。输入文字“ShiQiao Garden”，字体为“Trajan Pro”，这些均是作为中间的隔断和装饰，如图 1-2-4 所示。图 1-2-45. 在隔断下面再绘制一个较浅的灰色矩形，十六进制值为“#7a7a7a”。在该矩形上面再并排绘制两个颜色更浅的灰色矩形，十六进制值为 “#efefef”。这些矩形的绘制主要是用来布局，频繁的使用灰色有两个原因，一是因为灰色通常在设计中表示高级，另外，网页的主体过于鲜艳，使用灰色可以平衡一下，以避免“抢了主角儿的戏”，如图 1-2-5 所示。图 1-2-56. 在 Adobe Stock Pho

11、tos CS3 中搜索茶壶和棋子的图片，均在 Photoshop 中处理为 90 X 90 像素的大小。在茶壶层上右击，选择“混合选项”，设置“描边”的参数为大小“6”像素，位置为“内部”，“内部”描边可以保证四个角均为直角，描边的十六进制颜色值为“#067f18”，如图 1-2-6 所示。图 1-2-67. 在茶壶层单击右键，选择“拷贝图层样式”，如图 1-2-7 所示。接下来再选择棋子层, 单击右键选择“粘贴图层样式”，这样做可以保证两者的图层样式完全相同，并且更加快捷方便。图 1-2-78. 在添加文字“石桥茶舍”和“石桥棋坊”，字体为“方正古隶简体”，颜色值为“#646464”。介绍文

12、字为“宋体”，大小“12 点”，消除锯齿的方法为“无”，这样设置可以保证非常清晰的小字，这类的清晰小字普便应用于网页设计中，如图 1-2-8 所示。图 1-2-89. 在页面的左侧位置，是用来放“Spry 选项卡式面板”的，这里我同样是做了一个外观占位，具体的操作会在后面的教程中详述，如图 1-2-9 所示。图 1-2-910. 在页面的最下放，我们绘制一个深灰色的矩形，起图层名为“灰色长条”，十六进制颜色值为“#2a2a2a”，上面输入版权信息、地址、管理员和联系人的姓名，联系人是我刚出生的女儿，估计你联系她，她也不会理你，哈哈，如图 1-2-10 所示。图 1-2-1011. 在我们为这个

13、矩形描个边儿，同样是右键选择“混合选项”，在描边中设置大小为“3”像素，位置同样的内部，颜色为较浅的灰色，十六进制颜色值为“#7a7a7a”，如图 1-2-11 所示。图 1-2-1112. 因为是内部描边，在描过边后，您也许会发现较粗的描边已过多占用了本来就不富裕的“灰色长条”。为了增大一些空间，也为了这个描边更具有装饰性，这里需要把上边缘的描边去掉。不过我们知道，Photoshop 的描边设置中没有直接对单独边缘的设置方法，因此我们需要有一个小弯路。选择“灰色长条”层，执行菜单“图层 图层样式 创建图层”，这样可以使样式从图层中分离而成为一个单独的普通图层，如图 1-2-12 所示。图 1

14、-2-1213. 我们可以注意一下图层面板中“灰色长条”层和其样式的变化。现在选择“灰色长条”的内描边层，然后使用选区工具把上边缘的描边删除，看不清可以放到足够大，如图 1-2-13 所示。说到这里，可能很多读者会觉得为了这一点儿差别大动干戈没什么必要，其实不然，网页设计其实就种很琐碎的工作，只有在细节中才能表现出精致的页面，成功的页面设计永远都是由无数个精雕细刻的“小零件”组成的。至此我们首页的图样就已经制作完成了。图 1-2-13举一反三：尝试按照自己的思路来设计内容部分的网页布局。下一篇： Photoshop CS3实例教程：网页的切图及切片的属性设置Photoshop CS3实例教程：

15、网页的切图及切片的属性设置 (1)2008-08-04 09:24:45 作者：薛欣 来源： 浏览次数：18373 评论上一篇： Photoshop CS3实例教程：版面元素的设计和方法第 3讲 切割网页图片 切图是网页设计中非常重要的一环，它可以很方便的为我们标明哪些是图片区域，哪些是文本区域。另外，合理的切图还有利于加快网页的下载速度、设计复杂造型的网页以及对不同特点的图片进行分格式压缩等优点。 1. 使用工具箱中的“切片工具”在标题部分的左右各切一刀，使用“切片选择工具”双击右侧部分，在弹出的面板中设置切片类型为无图像。因为该部分是纯色，为了在网页中显示效果相同，设切片背景为黑色，这样该部分输出成网页后将由透明占位符和黑色背景色代替，如图 1-3-1 所示。 图 1-3-12. 使用切片的固定大小，设置宽度为“68”，高度为“40”，这次是切割的导航条按钮，将切片和被切对象对齐，切的时候要小心，避免切片之间重叠，如图 1-3-2 所示。 图 1-3-23. 使用同样的方法将其它导航条按钮切割，注意最后一个“管委会”按钮是三个字，因此设置的切片宽度要大，如图 1-3-3 所示。需要注意的是，切割的时候要注意平衡，比如右侧切割了，那么左侧也要等高的切一刀，这样输出成网页的时候不容易乱。 图 1-3-34. 切割方法同上，注意切片左上角的编号。下一行切片 14 和 15 共