Photoshop制作网站首页:首页内容的制作

因为相对于主体来说，内容部分并不是很轻易出彩，所以其设计比主体更加需要清楚的思路，并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在Dreamweaver 中，所以这里我们在Photoshop 中所设计的只是一个供参照的外观。

　　1. 在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图1-2-1 所示。

图1-2-1

　　2. 在文字的下面是播放在线视频的地方，我们这里插入一些图片进行占位。图片推荐在Adobe Stock Photos CS3 中进行查找，这是Adobe 提供的一个庞大的图片素材库，包含在Adobe Bridge CS3中，低质量的图片小样是完全免费的。因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。需要注重的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge”来下载一些关于桥的照片，如图1-2-2 所示。

图1-2-2

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

图1-2-3

　　4. 在下面绘制深灰色矩形，十六进制颜色值为“#2a2a2a”。输入文字“ShiQiao Garden”，字体为“Trajan Pro”，这些均是作为中间的隔断和装饰，如图1-2-4 所示。

 

图1-2-4

　　5. 在隔断下面再绘制一个较浅的灰色矩形，十六进制值为“#7a7a7a”。在该矩形上面再并排绘制两个颜色更浅的灰色矩形，十六进制值为“#efefef”。这些矩形的绘制主要是用来布局，频繁的使用灰色有两个原因，一是因为灰色通常在设计中表示高级，另外，网页的主体过于鲜艳，使用灰色可以平衡一下，以避免“抢了主角儿的戏”，如图1-2-5 所示。

图1-2-5

6. 在Adobe Stock Photos CS3 中搜索茶壶和棋子的图片，均在Photoshop 中处理为90 X 90 像素的大小。在茶壶层上右击，选择“混合选项”，设置“描边”的参数为大小“6”像素，位置为“内部”，“内部”描边可以保证四个角均为直角，描边的十六进制颜色值为“#067f18”，如图1-2-6 所示。

图1-2-6

　　7. 在茶壶层单击右键，选择“拷贝图层样式”，如图1-2-7 所示。接下来再选择棋子层, 单击右键选择“粘贴图层样式”，这样做可以保证两者的图层样式完全相同，并且更加快捷方便。

• 上一篇:Photoshop制作网站首页:切割网页图片
• 下一篇:photoshop制作一个网站的首页

相关Photoshop制作网站首页:首页内容的制作

• photoshop制作一个网站的首页 [2014-4-10]
• ASP.NET入门教程:Web表单 [2014-4-10]
• ASP.NET入门教程:Web表单维持对象的ViewState [2014-4-10]
• ASP.NET入门教程:TextBox控件 [2014-4-10]
• ASP.NET入门教程:Button控件 [2014-4-10]
• 微信公众平台开发教程第21篇-“可信网址”白名单 [2014-4-10]