网页的切图及切片的属性设置 全.docx

网页的切图及切片的属性设置 全.docx

《网页的切图及切片的属性设置 全.docx》由会员分享，可在线阅读，更多相关《网页的切图及切片的属性设置 全.docx（32页珍藏版）》请在冰豆网上搜索。

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

PhotoshopCS3实例教程：

网站首页之主体的制作

（1）

2008-08-0409:

07:

34  作者：

薛欣  来源：

  浏览次数：

8550   评论

　　课程总览 

　　在本课程中，朋友们将学习到以下内容：

　　••如何通过PhotoshopCS3进行网站首页的版面设计 

　　••各种网页版面元素的设计技巧和方法 

　　••如何进行网页的切图以及切片的属性设置 

　　••如何创建与Flash整合的FLV视频 

　　••在DreamweaverCS3中使用“Spry选项卡”构件 

　　••Photoshop、Flash、Dreamweaver的协同工作 

PhotoshopCS3实例教程：

网站首页之主体的制作

（2）

2008-08-0409:

07:

34  作者：

薛欣  来源：

  浏览次数：

8551   评论

　　第1讲制作首页的主体部分 

　　本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。

其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。

　　书归正传，早先的网页页面设计一般是以Dreamweaver为中心，由Photoshop或Flash等软件来提供各种素材，如图片、动画、文字等。

自从Photoshop出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了Photoshop。

因为Photoshop本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。

现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。

　　1.打开PhotoshopCS3,执行菜单“文件>新建”。

在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。

对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB颜色”，其它参数保持默认。

　　2.按下Ctrl+A全选页面，执行菜单“编辑>填充”将页面填为纯黑色。

在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1所示长方形A。

然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1中B所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。

图1-1-1

PhotoshopCS3实例教程：

网站首页之主体的制作（3）

2008-08-0409:

07:

34  作者：

薛欣  来源：

  浏览次数：

8552   评论

3.使用横排文字工具，输入“石桥花园”字样，字体为“方正流行体简体”。

再输入“ShiQiaoGarden”，字体为“BickhamScriptPro”，字号均为“30点”，文字如图1-1-2所示布局。

图1-1-2

　　4.这是一张拍摄自龙亭的花卉原始素材，采用了微距加上2.8的大光圈，实现了浅景深的背景模糊效果，读者可以使用模糊工具或镜头模糊滤镜实现类似的效果，如图1-1-3所示。

图1-1-3

　　5.我们对图片进行简单的处理，执行菜单“图像>调整>色阶”，从两侧向中间调整黑色和白色滑块的位置以使图片主体更加突出，更富有感染力。

原素材本身是16:

9宽屏的，我们使用选区工具加删除键进行适当的裁切，如图1-1-4所示。

图1-1-4

　　5.为了增加花卉的现代感和时尚感，我们进一步对图片进行加工，随意找一张图片，执行菜单“滤镜>像素化>马赛克”，数值调大，产生大色块的马赛克效果。

然后通过素材或自己制作一张扭曲后的网格，这些都是待合成的素材，如图1-1-5所示。

图1-1-5

PhotoshopCS3实例教程：

网站首页之主体的制作（4）

2008-08-0409:

07:

34  作者：

薛欣  来源：

  浏览次数：

8553   评论

6.现在有网格、花卉和马赛克三层图片，网格放在最上层，将图层的混合模式设为“颜色加深”，不透明度设为“68%”。

花卉层的混合模式设为“强光”，马赛克图层不变，三者的合成效果如图1-1-6所示。

图1-1-6 

　　7.下面要制作的是首页的导航条部分，使用矢量的“矩形工具”绘制一个长方形，注意该长方形不要画满，留一些黑边在周围，黑边上窄下粗，使其具有一定的层次感。

十六进制颜色值为“#c8fcc5”，一种清淡的绿色，如图1-1-7所示。

图1-1-7

　　8.使用横排文字工具输入导航条上的文字，使用大括号“{}”进行装饰，字体为“方正小标宋_GBK”,消除锯齿的方法为“浑厚”，如图1-1-8所示。

这里所制作的导航只起到占位作用，后面的教程中将设置导航条按钮的翻转效果。

图1-1-8

　　举一反三：

　　尝试用类似的方法设计个人主页的标题和导航条等部分。

PhotoshopCS3实例教程：

版面元素的设计和方法

（1）

2008-08-0409:

19:

50  作者：

薛欣  来源：

  浏览次数：

5691   评论

上一篇：

PhotoshopCS3实例教程：

网站首页之主体的制作

因为相对于主体来说，内容部分并不是很容易出彩，所以其设计比主体更加需要清晰的思路，并非常考验制作者的耐心。

通常情况下内容部分的主要工作都是在Dreamweaver中，所以这里我们在Photoshop中所设计的只是一个供参照的外观。

　　1.在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。

这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图1-2-1所示。

图1-2-1

　　2.在文字的下面是播放在线视频的地方，我们这里插入一些图片进行占位。

图片推荐在AdobeStockPhotosCS3中进行查找，这是Adobe提供的一个庞大的图片素材库，包含在AdobeBridgeCS3中，低质量的图片小样是完全免费的。

因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。

需要注意的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge”来下载一些关于桥的照片，如图1-2-2所示。

图1-2-2

　　3.我们用多张“桥”和“花园”的图片合成了这部分的图像内容，这里使用的石桥剪影字体为“方正古隶简体”，合成的方法因为非常简单，这里就不再赘述，如图1-2-3所示。

图1-2-3

　　4.在下面绘制深灰色矩形，十六进制颜色值为“#2a2a2a”。

输入文字“ShiQiaoGarden”，字体为“TrajanPro”，这些均是作为中间的隔断和装饰，如图1-2-4所示。

图1-2-4

　　5.在隔断下面再绘制一个较浅的灰色矩形，十六进制值为“#7a7a7a”。

在该矩形上面再并排绘制两个颜色更浅的灰色矩形，十六进制值为“#efefef”。

这些矩形的绘制主要是用来布局，频繁的使用灰色有两个原因，一是因为灰色通常在设计中表示高级，另外，网页的主体过于鲜艳，使用灰色可以平衡一下，以避免“抢了主角儿的戏”，如图1-2-5所示。

图1-2-5

6.在AdobeStockPhotosCS3中搜索茶壶和棋子的图片，均在Photoshop中处理为90X90像素的大小。

在茶壶层上右击，选择“混合选项”，设置“描边”的参数为大小“6”像素，位置为“内部”，“内部”描边可以保证四个角均为直角，描边的十六进制颜色值为“#067f18”，如图1-2-6所示。

图1-2-6

　　7.在茶壶层单击右键，选择“拷贝图层样式”，如图1-2-7所示。

接下来再选择棋子层,单击右键选择“粘贴图层样式”，这样做可以保证两者的图层样式完全相同，并且更加快捷方便。

图1-2-7

　　8.在添加文字“石桥茶舍”和“石桥棋坊”，字体为“方正古隶简体”，颜色值为“#646464”。

介绍文字为“宋体”，大小“12点”，消除锯齿的方法为“无”，这样设置可以保证非常清晰的小字，这类的清晰小字普便应用于网页设计中，如图1-2-8所示。

图1-2-8

　　9.在页面的左侧位置，是用来放“Spry选项卡式面板”的，这里我同样是做了一个外观占位，具体的操作会在后面的教程中详述，如图1-2-9所示。

图1-2-9

　　10.在页面的最下放，我们绘制一个深灰色的矩形，起图层名为“灰色长条”，十六进制颜色值为“#2a2a2a”，上面输入版权信息、地址、管理员和联系人的姓名，联系人是我刚出生的女儿，估计你联系她，她也不会理你，哈哈，如图1-2-10所示。

图1-2-10

　　11.在我们为这个矩形描个边儿，同样是右键选择“混合选项”，在描边中设置大小为“3”像素，位置同样的内部，颜色为较浅的灰色，十六进制颜色值为“#7a7a7a”，如图1-2-11所示。

图1-2-11

12.因为是内部描边，在描过边后，您也许会发现较粗的描边已过多占用了本来就不富裕的“灰色长条”。

为了增大一些空间，也为了这个描边更具有装饰性，这里需要把上边缘的描边去掉。

不过我们知道，Photoshop的描边设置中没有直接对单独边缘的设置方法，因此我们需要有一个小弯路。

　　选择“灰色长条”层，执行菜单“图层>图层样式>创建图层”，这样可以使样式从图层中分离而成为一个单独的普通图层，如图1-2-12所示。

图1-2-12

　　13.我们可以注意一下图层面板中“灰色长条”层和其样式的变化。

现在选择“灰色长条”的内描边层，然后使用选区工具把上边缘的描边删除，看不清可以放到足够大，如图1-2-13所示。

说到这里，可能很多读者会觉得为了这一点儿差别大动干戈没什么必要，其实不然，网页设计其实就种很琐碎的工作，只有在细节中才能表现出精致的页面，成功的页面设计永远都是由无数个精雕细刻的“小零件”组成的。

至此我们首页的图样就已经制作完成了。

图1-2-13

　　举一反三：

　　尝试按照自己的思路来设计内容部分的网页布局。

下一篇：

PhotoshopCS3实例教程：

网页的切图及切片的属性设置

PhotoshopCS3实例教程：

网页的切图及切片的属性设置

（1）

2008-08-0409:

24:

45  作者：

薛欣  来源：

  浏览次数：

18373   评论

上一篇：

PhotoshopCS3实例教程：

版面元素的设计和方法

第3讲切割网页图片 

　　切图是网页设计中非常重要的一环，它可以很方便的为我们标明哪些是图片区域，哪些是文本区域。

另外，合理的切图还有利于加快网页的下载速度、设计复杂造型的网页以及对不同特点的图片进行分格式压缩等优点。

　　1.使用工具箱中的“切片工具”在标题部分的左右各切一刀，使用“切片选择工具”双击右侧部分，在弹出的面板中设置切片类型为无图像。

因为该部分是纯色，为了在网页中显示效果相同，设切片背景为黑色，这样该部分输出成网页后将由透明占位符和黑色背景色代替，如图1-3-1所示。

图1-3-1

　　2.使用切片的固定大小，设置宽度为“68”，高度为“40”，这次是切割的导航条按钮，将切片和被切对象对齐，切的时候要小心，避免切片之间重叠，如图1-3-2所示。

图1-3-2

　　3.使用同样的方法将其它导航条按钮切割，注意最后一个“管委会”按钮是三个字，因此设置的切片宽度要大，如图1-3-3所示。

需要注意的是，切割的时候要注意平衡，比如右侧切割了，那么左侧也要等高的切一刀，这样输出成网页的时候不容易乱。

图1-3-3

4.切割方法同上，注意切片左上角的编号。

下一行切片14和15共两刀，再往下16、17、18共三刀，其中17为纯色，因此设为无图像，并用相应的颜色标识，如图1-3-4所示。

后面的方法基本相同，需要把在Dreamweaver中处理的纯色背景部分设为无图像，并以相应的切片背景色填充。

如果某个图层的范围正好是要切割的大小，可以直接使用“基于图层的切片”功能。

图1-3-4

　　5.执行菜单“存储为Web和设备所用格式”，该命令用于将PSD源文件输出成网页或是手机等设备所使用的格式。

在对话框中进行简单的优化设置，确定后设置输出类型为“HTML和图像”，并且要输出所有的切片，如图1-3-5所示。

图1-3-5

　　举一反三：

　　尝试使用切图工具对已有的版面进行切割，并注意切割的技巧。

PhotoshopCS3实例教程：

制作导航菜单

（1）

2008-08-0409:

28:

26  作者：

薛欣  来源：

  浏览次数：

5393   评论

上一篇：

PhotoshopCS3实例教程：

网页的切图及切片的属性设置

第4讲制作导航菜单 

　　导航菜单在首页中占有非常重要的地位，它用于引领访问者找到需要的页面。

所以一般来说，网页设计师通常将大量的精力用在导航菜单的设计上，而这里我们只是举个简单的例子来说明。

　　1.用Dreamweaver打开网页，当鼠标单击后，您可以看到导航栏已经完成的切片，我们现在要制作的是鼠标移上时的翻转效果，如图1-4-1所示。

图1-4-1 

　　2.找到您存储切片图像的目录，一般是网页当前目录或是名为“images”的目录。

复制一个“娱乐”切片，并用Photoshop打开，如图1-4-2所示。

图1-4-2

3.用“移动工具”选中括号，分别向左或向右移动，使括号离文字的距离变大。

这样的操作可实现鼠标移到按钮上时，括号自动左右撑开的效果，如图1-4-3所示。

图1-4-3

　　4.打开Dreamweaver，在我们设计的导航栏上选择“娱乐”切片并删除，执行插入“鼠标经过图像”命令，如图1-4-4所示。

图1-4-4

　　5.在该对话框中设置原始图像为原来的“娱乐”切片图像，而鼠标经过图像为复制并修改括号后的“娱乐”切片图像，当然您也可以加入自己的链接，如图1-4-5所示。

图1-4-5

PhotoshopCS3实例教程：

创建与Flash整合的flv视频

（1）

2008-08-0409:

31:

20  作者：

薛欣  来源：

  浏览次数：

5474   评论

上一篇：

PhotoshopCS3实例教程：

制作导航菜单

接下来我们要为网页添加Flash视频内容，如今的Photoshop和Flash已成为一家，因此兼容性大大提高。

Flash已经可以直接导入PhotoshopPSD的分层文件了，这对长期受不同厂商兼容性困扰的设计师来说无疑是个好消息。

　　1.将我们制作的Photoshop网页的PSD源文件另存一个版本，然后将原来Flash的占位图片的区域裁切出来，并把多余的图层删除，如图1-5-1所示。

图1-5-1

　　2.直接导入这个另存后的新PSD文件，我们可以在导入对话框中看到，不但可以确定需要导入哪些图层，还可以使文字可编辑，并将Flash舞台设为该PSD在Photoshop中的画布大小等等，有非常多的选项值得我们去探索，如图1-5-2所示。

图1-5-2 

　　3.这是在Flash中打开后的Photoshop分层文件，你可以看到，原来的图层直接变成了相应的Flash层，我们可以直接基于这些图层来制作动画，是不是非常方便？

如图1-5-3所示。

图1-5-3

4.在接下来就是视频的导入，Flash提供了专门的视频导入命令，并优化了整个的视频导入流程，如图1-5-4所示为视频导入的基本流程。

通常情况下都是“傻瓜式操作”，选择文件后一直单击下一步即可，分别是选择视频、部署、编码和选择皮肤，因为在本教程中这不是重点，因此不再赘述。

图1-5-4

　　5.选择后的播放器皮肤，也就是视频播放器的外观是可以在组件检查器中重新更换的，包括颜色和外形等，如图1-5-5所示。

图1-5-5

　　6.视频文件和Flash的播放互不影响，可以自然、无缝的整合到一起。

为了说明这一点，这里为“石桥剪影”这四个字制作了一个非常简单的动画，如图1-5-6所示。

图1-5-6

7.打开Dreamweaver并添加一个表格，设置表格行数为“2”，列数为“2”，表格宽度为百分比形式，也就是说可以自行伸缩。

边框粗细、单元格边距和单元格间距均为“0”，如图1-5-7所示。

图1-5-7 

　　8.把文字和Flash分别插入到刚才表格的两行中，可以看到，当前的网页还有点儿乱，图片被撑开，文字没有样式化，视频的位置也不对，如图1-5-8所示，因此我们还需要在下一讲中设置。

PhotoshopCS3实例教程：

控制版面与插入Spry对象

（1）

2008-08-0409:

46:

41  作者：

薛欣  来源：

  浏览次数：

8726   评论

上一篇：

PhotoshopCS3实例教程：

创建与Flash整合的flv视频

第6讲控制版面与插入Spry对象 

　　现在我们进行了网页设计的最后环节，需要对页面进行真正的排版。

使用到CSS以及其它的一些常用技巧。

在CS3版本中Photoshop和Dreamweaver的结合也更加紧密了。

Spry构件作为DreamweaverCS3全新的理念，给用户带来耳目一新的视觉体验。

在该部分当中，我们就涉及到这些方面的知识。

　　1.打开Photoshop，直接拷贝一部分图片，如框选“石桥茶舍”区域并拷贝。

当然因为是多层，你需要使用合并拷贝功能，如图1-6-1所示。

图1-6-1

　　2.切换到Dreamweaver中，我们只需要简单的Ctrl+V粘贴，你会看到出现了图像预览对话框，您可以直接在这里设置图片的压缩值和格式等，如图1-6-2所示。

图1-6-2

　　3.用同样的方法把“石桥茶舍”和“石桥棋坊”两张图片都直接拷贝到Dreamweaver中，当然Dreamweaver会提示您存储这些图像文件。

完成后，我们再把文字拷贝到Dreamweaver中,不过如今的文字看起来会比较乱，这是没有用CSS样式化的缘故，如图1-6-3所示。

图1-6-3

4.打开CSS样式面板，为标签“body,td,th”新建一个CSS规则，选择“仅对该文档”，这个CSS是针对当前页面全局的，如图1-6-4所示。

图1-6-4

5.在类型中，设置字体为“宋体”，大小为“9pt”，行高为“16px”，颜色为绿色，修饰为“无”，如图1-6-5所示。

图1-6-5

　　6.接下来设置图片的文字环绕效果，使文字都围绕在图片的右侧，也就是文字左对齐。

选择“石桥茶舍”的图片，为其添加一个CSS规则，如图1-6-6所示。

图1-6-6

7.选择方框标签页，将浮动设置为“左对齐”，即实现的文字对图片的环绕，如图1-6-7所示。

其它页面元素的CSS设置方法类似，比如关于“石桥花园”的介绍文字，因文字的粗细不同，可在CSS中设置两个类规则来进行样式化，这里就不再赘述了。

图1-6-7

　　8.Spry构件是DreamweaverCS3新增的用户界面对象，包括XML驱动的列表和表格、折叠构件、选项卡式面板等元素。

在Spry工具组中选择插入Spry选项卡式面板，每一个选项卡都可以直接输入标签的名称和该选项卡的内容，这里我们输入“菊花”，如图1-6-8所示。

图1-6-8 

　　9.在编辑环境中选择Spry选项卡式面板，可以在下方的属性面板中能够添加更多的选项卡标签，这里我们又添加了“玫瑰”、“月季”、“美人蕉”、“牡丹”等，如图1-6-9所示。

图1-6-9 

　　10.在选项卡标签名称的旁边有一个小眼晴，单击后可以编辑该标签所包含的内容，比如这里我们添加了菊花和美人蕉的内容。

包括表格、图片和文字都可以放在里面，当然我们仍需要使用CSS对格式进行基本的排版，如图1-6-10所示。

图1-6-10

　　11.至此我们这个“石桥花园”的首页就设计完成了，通过Dreamweaver和Flash的多道工序，我们仍然能够原汁原味的体现原始稿的设计初衷，可见AdobeCS3软件之间的协作和兼容性是如此的完美。

关于网页设计的话题还有很多，比如Gif动画、弹出式菜单、更多的CSS控制和链接控制，有机会我们再详细讲解。

写到这里，我仿佛有所感悟，其实找到一个像“石桥花园”这样的所在并不难，难的是那份闲暇、平和的心境。

另外，不能忘记编辑这篇文章的幕后英雄，也是这套AdobeCS3协同工作稿件的全程参与者-AdobeInDesignCS3。