Photoshop CS3实例教程:网站首页之主体的制作

2016-01-29 19:43 64 1 收藏

Photoshop CS3实例教程:网站首页之主体的制作,本系列教程介绍了使用PS CS3来制作网站首页,早先的网页页面设计一般是以Dreamweaver 为中心,由Photoshop 或Flash 等软件来提供各种素材,如图片、动画、文字等。自从Photoshop 出现了“切图”等专为网页设计所定制的功能后,设计的中心已慢慢转向了Photoshop。因为Photoshop 本身以图像为基础的特性,决定了他能对版面施以更精确的控制,使网页的页面能够更加灵活和生动的布局,这几乎完全解放了网页设计师的创作灵感,不再受方方正正的网页表格所约束。

【 tulaoshi.com - PS 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)


  课程总览

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

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

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

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

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

  •• 在Dreamweaver CS3 中使用Spry 选项卡构件

  •• Photoshop、Flash、Dreamweaver 的协同工作
[next]   第1 讲 制作首页的主体部分

  本文以石桥花园的网站首页为例,来演示页面创作的整个过程。其实石桥花园是不存在的,笔者虚构出来也并非只为完成本例,我一直向往生活在幽静、闲雅之所,虽然石桥花园离我的初衷有很多差异,但也多少能表达我的一些想法吧。

  书归正传,早先的网页页面设计一般是以Dreamweaver 为中心,由Photoshop 或Flash 等软件来提供各种素材,如图片、动画、文字等。自从Photoshop 出现了切图等专为网页设计所定制的功能后,设计的中心已慢慢转向了Photoshop。因为Photoshop 本身以图像为基础的特性,决定了他能对版面施以更精确的控制,使网页的页面能够更加灵活和生动的布局,这几乎完全解放了网页设计师的创作灵感,不再受方方正正的网页表格所约束。现在我们要制作的是石桥花园首页的主体部分,主体部分包括标题、主展示图片和导航条。

  1. 打开Photoshop CS3, 执行菜单文件 新建。在新建对话框中设置名称为石桥花园,宽度为777、高度为800,这个数字并不官方,只是我在平时工作当中测试出来的而已。对于网页来说,一般只用于屏幕显示,所以分辨率为72、颜色模式为RGB 颜色,其它参数保持默认。

  2. 按下Ctrl+A 全选页面,执行菜单编辑 填充将页面填为纯黑色。在工具箱中选择矢量的矩形工具,绘制一个如图1-1-1 所示长方形A。然后使用白色的直接选择工具将该矢量形状扭曲成如图1-1-1 中B 所示外观,该形状的十六进制颜色值为#246b34,一种厚重的深绿色。


图1-1-1

[next]

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

3. 使用横排文字工具,输入石桥花园字样,字体为方正流行体简体。再输入ShiQiaoGarden,字体为Bickham Script Pro,字号均为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

[next]

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

6. 现在有网格、花卉和马赛克三层图片,网格放在最上层,将图层的混合模式设为颜色加深,不透明度设为68%。花卉层的混合模式设为强光,马赛克图层不变,三者的合成效果如图1-1-6所示。


图1-1-6


  7. 下面要制作的是首页的导航条部分,使用矢量的矩形工具绘制一个长方形,注意该长方形不要画满,留一些黑边在周围,黑边上窄下粗,使其具有一定的层次感。十六进制颜色值为#c8fcc5,一种清淡的绿色,如图1-1-7 所示。


图1-1-7


  8. 使用横排文字工具输入导航条上的文字,使用大括号{}进行装饰,字体为方正小标宋_GBK, 消除锯齿的方法为浑厚,如图1-1-8 所示。这里所制作的导航只起到占位作用,后面的教程中将设置导航条按钮的翻转效果。


图1-1-8


  举一反三:

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

  未完待续

下一篇:Photoshop CS3实例教程:版面元素的设计和方法

来源:http://www.tulaoshi.com/n/20160129/1509990.html

延伸阅读
标签: Web开发
接下来我们要为网页添加Flash 视频内容,如今的Photoshop 和Flash 已成为一家,因此兼容性大大提高。Flash 已经可以直接导入Photoshop PSD 的分层文件了,这对长期受不同厂商兼容性困扰的设计师来说无疑是个好消息。 1. 将我们制作的Photoshop 网页的PSD 源文件另存一个版本,然后将原来Flash 的占位图片的区域裁切出来,并把多余的...
标签: FLASH flash教程
poluoluo核心提示:本例为Flash CS3仿真艺术设计系列教程,有兴趣的朋友请关注本系列教程,本文我们将通过为一只卡通青蛙添加材质来了解在Flash cs3中添加材质的方法。 本例为Flash CS3仿真艺术设计系列教程,有兴趣的朋友请关注本系列TuLaoShi.com教程,本文我们将通过为一只卡通青蛙添加材质来了解在Flash cs3中添加材质的方法。 添加材...
在学习中遇到问题可以到 论坛 发贴交流! 本例向朋友介绍运用Fireworks合成设计制作一个化妆品网站首页,在本例中我们将学习到Fireworks位图工具的应用、合理运用素材设计网页设计稿的方法,希望能给朋友们带来帮助~~ 本例是一个以女性化妆品为主打产品的企业宣传网站的形象页面效果图设计。该公司一直致力于结合科技和自然的化妆品产品...
标签: PS PS教程
背景图片自己做,可以用于海报和一些排版设计中,本教程主要介绍像素化-彩色半调的应用,处理得好还是能做出很好的背景效果,通过下面的简单例子,大家来认识下。   效果图 [next] 1、新建文件Ctrl+N,宽度高度分布设置为:500 像素,颜色模式:灰度,完成设置后按确定按钮,新建一个图像文件。 图1 2、设置前景色为黑...
标签: PS PS教程
在学习中遇到问题可以到 论坛 发贴交流! 本例为Photoshop基础系列教程,在教程中作者将通过实例来讲解运用快速选择工具创建优质选区的方法以及以及配合调整边缘选项的应用技巧,适合PS初学者学习~~ 本系列教程由中国互助课堂专为PS新手制作,更多教程和练习请 点击这里 ,在这里有系列的教程、练习,并有老师对练习进行点评与指导,欢迎朋...

经验教程

170

收藏

13
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部