photoshop网页制作教程介绍

《photoshop网页制作教程介绍》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Photoshop网页制作教程步骤 1创建750x500px画布，并将前景色设为白色。创建新的图层，利用矩形选框工具创建如下选区。步骤 2用白色填充选区。图层>>图层样式>>投影。设置如下：描边：大小1像素，颜色#939393 不透明度44%。步骤 3创建新图层，再次利用矩形选框工具在画布顶端建立如下矩形选框。（注意：为了实现网页的层次感，这次的矩形边框与之前的矩形左右两边各空出2个像素）步骤 4为选区填充 #2061A8。步骤 5图层>>图层样式>>投影。设置如下：渐变叠加：图案叠加：步骤 6为网站添加文字LOGO（点击查看本站文字特效相关教程） 。步骤 7创建新的图层。步

2、骤 8按照与步骤3相同的方法在画布底部建立矩形。步骤 9填充颜色（#2061A8），并添加投影效果。图层>>图层样式>>投影。步骤 10利用圆角矩形工具绘制如下形状。步骤 11图层>>图层样式>>投影。 渐变叠加：步骤 12为导航栏添加文字。步骤 13按照如上方法建立其余导航条。步骤 14现在我们开始制作内容框，利用圆角矩形绘制如下矩形框。将图层面板的填充属性设为0%。图层>>图层样式>>渐变叠加。步骤 15按照之前的方法建立另一个内容框。 Photoshop绘制漂亮的商业类型网站模板首先要感谢的是你能够访问这个教程。在这个教程中我将创建一个商业网站布局。如果你经常访问我的网

3、站的话，你将会看到创建一个好看的网站是多么容易。在这个博客里你会找到更多的布局教程。你会好奇这是为什么吗?我使用Photoshop已经很长时间了，从那个时候开始我就为客户创建网站，并因此挣了不少钱。我想要教给你如何创建网站的原因是因为创建网站可比创建一个简单的Photoshop效果挣钱多了。如果你想开始从网上挣钱的话，为你未来的客户创建网站正是时候。我这里有一个例子，为一个logo或者一个照片效果你能付多少钱?也许是50美元至100美元?从我开始设计至今我创建过数目上千的logo，上百个大的网站，我的大部分收入都是从设计网站布局中获得的，这就是为什么我认为你应该开始创建网站的

4、原因。我将会尽可能的讲述的简单易懂，我敢肯定通过我的方法会创建出漂亮的网站布局。出自：飞鱼的声纳翻译让我们开始我们的教程，在这个教程中，我将创建一个商业网站布局。首先创建一个新的文档请使用如下设置设置前景色为：#2b2724选择油漆桶工具，为画布上色，选择背景层按住Ctrl+J(此快捷键将会复制选定图层)选择“图层1”，然后选择“滤镜”>“杂色”>“添加杂色”然后使用如下设置选择圆角矩形工具，在显示器的上方，设置如下设置在你的布局上为导航创建两个形状，改变前景色为#e84502，然后我会使用圆角矩形工具复制这两个橙色的形状。想要复制图层，首先你需要选定你想要复制的图层，然后按

5、下CTRL+J键，在你复制完这两个橙色的形状之后，改变颜色为白色。改变颜色的方法是在图层缩略图上双击，然后选择白色。这是目前我所得到的结果现在选择移动工具，将白色形状向上移动一点点我会在这个布局上放置一些图片使用文字工具，我会加上一些文字使用相同的工具，在导航条上加上一些文字选择线条工具，确保线条粗细为1个像素在导航按钮之间创建一个垂直线条现在最重要的是要栅格化图层，想要做到这一点，你需要在图层上点击右键选择“栅格化图层”选择橡皮擦工具，改变画笔到60SoftMechanical60pixels然后试着删除线条的顶部和底部复制这个图层(选择想要复制的图层，然后在键盘上按下CT

6、RL+J键)，选择移动工具，然后将复制好的线条放置在另外一个导航按钮的右边。在整个布局的上方，我会创建一个简单的文字logo，在以后的教程中我会向你展示如何创建漂亮的logo在图层1的上方创建一个新的图层选择画笔工具，改变toSoftMechanical60pixels，在文字logo下面创建一个简单的白色点想要效果好一点的话，可以将此图层的透明度改变为25%最后的结果如下希望你能喜欢最终的设计，此设计的PSD文档只对VIP会员开放。Photoshop设计制作华丽立体游戏网站模板减小字体增大字体作者：佚名  来源：本站整理  发布时间：2009-03-2917:05:52先看

7、看最终效果:　　图片看不清楚？请点击这里查看原图（大图）。　　新建950x1160大小文件，填充背景颜色#161616，使用矩形工具制作宽900、高190的矩形，并添加如下图层样式　　完成后的矩形效果　　图片看不清楚？请点击这里查看原图（大图）。　　导入LOGO文件导入一张光晕图片　　图片看不清楚？请点击这里查看原图（大图）。　　将图片裁剪到适当尺寸，放入游戏网站的头部，调整图片的不透明度和颜色，使其与整个蓝色背景融合在一起　　图片看不清楚？请点击这里查看原图（大图）。　　为LOGO标志添加背景边框，并