使用Photoshop设计Web版头一例
日期:2006-07-14 21:19:46 作者:笨笨 点击: 来源:非常牛论坛
这是我刚作完的一个web,我想利用这个东东,展示一下利用ps构思制作版头的常见方法,素材组织,ps制作等技术的运用。
这个小教程作为论坛内部交流,构思想法还太简单,也希望和大家交流看法~~~~

首先是整体构思,为了配合引导页延续效果,所以决定在栏目页延续了紫色基调,单也作了相应调整……摆脱调引导页紫色带来的过分压抑负面效果,在栏目页主体配色使用浅紫色(突出色),黄色(辅助色)和白色(主体色)。并决定在头部使用能够体现紫霞夕照,紫气东来的效果……

接下来是图片的素材准备:
基本要求是云彩效果、北京城市的地标建筑最好是夜景或傍晚景观~~~
以下是两个要用到的素材:


备注:由于上传限制所以北京夜景图作了相应修改缩小了,实际使用的图片是了4000px的扫描图片。
准备工作完成以后,开始正式在ps中制作了:
1.首先将图一导入设计稿,并作变形缩小处理。

请大家注意压缩后的图片被圈红的地方。在这个局部形成了一个紫色白色黄色的渐变。(我不得不承认这是动手设计前没有想到的),我感觉如果能够很好运用这个渐变将会为版头的整体基调打下一个好基础(这样避免就避免使用全部面积使用紫色带来的压抑感觉,又能很好的过渡到web中间正文的白底上去)

有了上面的想法,就可以制作版头的渐变背景了,但是单纯使用ps渐变,还不足以实现这种紫霞效果,所以我保留了图一素材中的云彩效果,将原图中的多余元素扣掉……

制作晚这个图层(图层名称:紫霞)后,在紫霞图层下面新建一个图层用来制作紫霞下面夕阳的光晕,ps制作可以采用使用渐变工具或者是将图1金黄色区域选择后作变形处理~~~,版头背景最终效果……
(备注:至于左边的logo背景由于设计时已经扣掉了,这里没办法弥合,所以相应的logo效果处理这里略过,logo效果使用了ps羽化效果)

2.下面的工作就简单的多了,将图二导入设计稿中,并做变形……快速蒙板,使用快速蒙板时在图片的上方(为了实现整体的紫霞效果),左斜边(留有一下空间为添加其他元素如动画留下空间),正下方(将版头和下面正文用黄色隔离开)

最后是以下收尾工作,比如将紫霞下面的国贸大厦重新置于幕前,左侧立交桥体的延伸处理等……………………
基本上构思制作就这么多,感觉在ps制作方面没有使用太多的效果(自己ps水平有限),但构思过程颇有收获,没有一个好的构思出发点就很有一个好的作品,同时也不得不提到设计过程中和我共同讨论研究的朋友同事,的确激发了不少灵感~~~
