photoshop做网页实例.docx
《photoshop做网页实例.docx》由会员分享，可在线阅读，更多相关《photoshop做网页实例.docx（16页珍藏版）》请在冰豆网上搜索。
photoshop做网页实例
【PConline教程】本PS教程将介绍使用Photoshop制作非常简洁的网页。
作者重点介绍顶部及导航栏的制作。
打造过程：
首先是渲染背景和底纹，然后再制作顶部装饰和文字。
可以根据实际需要加入自己喜欢的图案或素材。
最终效果图
图00
1、创建一个1000×750像素大小的文件，双击背景图层将其变为可编辑的图层，并打开图层样式>颜色叠加，用#47382e叠加。
图01
2、打开标尺（视图>标尺），按下图添加一些参考线。
图02
3、用矩形工具创建一个矩形，将该图层命名为header.
图03
4、将前景色设为黑色，选择椭圆工具创建一个阴影区域，大小要高于白色的矩形。
将椭圆形图层命名为shadow，并将其置于header图层下面。
然后打开滤镜>转换智能滤镜，之后滤镜>模糊>高斯模糊，半径为10像素，并把不透明度设为60%，得到下图效果：
图04
图05
5、选中header图层，双击打开图层样式，选择渐变叠加，按照下图参数设置。
图06
6、使用直线工具画一条亮红色直线，然后再用黑色画另外一条直线（1像素），之后将红线和黑线图层编组，组命名为vDivider。
打开图层>图层蒙版>现实全部。
使用径向渐变工具，从黑色到白色，自上而下拉去，在组上添加渐变效果。
图07
7、使用文字工具创建导航栏（字体白色）。
然后将所有标签编组，命名为WhiteLinks。
复制这个组，将其置于whitelinks组下面，将字体颜色设为黑色，然后将其向上和向左移动1像素大小的位置。
这样是为了制作3D效果。
图08
8、按照第六步的方法制作分栏线。
图09
9、选择所有分栏线图层将其编组，并命名为hDividers，然后打开图层>图层蒙版>显示全部。
使用线性渐变（黑-白）在蒙版做渐变效果。
图10
-----------------------------------------------------------------------------
10、保存下面的纹理图片，然后用ps打开，选择编辑>定义图案，将其命名为webPattern。
复制header图层，命名为pattern。
然后双击打开图层样式，取消渐变叠加，打开图案叠加，选择之前我们创建的webpattern图案叠加，然在pattern图层上添加图层蒙版，在图层蒙版创建径向渐变效果。
图11
图12
图13
图14
11、现在来添加LOGO和勺子。
敲入C，其中Chinavisual使用粗一些的字体。
然后添加图层样式。
图15
图16
图17
图18
12、下载勺子图片，然后添加图层样式。
图19
图20
图21
最终效果图
【PConline教程】相信不少网友在浏览网页的时候，都会遇到网速不够、想要看的图片迟迟不能读出的情况。
而且网页设计员在放高分辨率的清晰图片时，也会顾虑浏览器下载图片的漫长等待消磨网友的耐心。
这次的PS教程将为大家带来有效的解决办法——利用Photoshop切片工具将图片分割。
这样的好处在于，从网页中显示的图片是由几个小图构成，当浏览网速不畅的时候，网友将会先看到一些小图，从而避免因为图片庞大，而匆匆将网页关掉。
这个方法对于想要改善网店浏览体验的，增加顾客量的店长来说可是不得不学。
下面马上开始这次PS教程！
1.打开要分割的图片，点击工具栏的切片工具。
图01
2.在要切片的图片上切一个框，如图所示。
图02
3.点击鼠标右键，选择划分切片。
图03
4.设置如图，水平划分为4，垂直划分为3。
图04
5.效果如图所示。
图05
6.将图片划分好后，我们点击工具栏下面的ImageReady键计入IR状态下编辑图片。
图06
7.点击文件，将优化结果存储为HTML格式。
图07
8.命名为秘密花园，如图所示。
图08
9.存在电脑桌面或其他文件夹，会出现一个HTML格式的网页，我们打开另一个文件名为Image的文件包，里面就是我们刚才分割好的小图片。
图09
10.如图所示，就是我们刚才分割好的12张Gif格式图片。
图10
11.我们打开这些小图片时会返现默认为索引颜色。
这时选择图像>模式>RGB颜色，就可以对这些小图片进行处理了。
图11
12.我们在做网页的时候，使用分割好的小图片有利于网页的浏览速度。
升级会员 