Photoshop网页制作教程
步骤 1
创建 750x500px 画布，并将前景色设为白色。
创建新的图层，利用矩形选框工具创建如下选区。
步骤 2
用白色填充选区。
图层 >> 图层样式 >> 投影。
设置如下：
描边：大小 1像素，颜色 #939393 不透明度 44%。
步骤 3
创建新图层，再次利用矩形选框工具在画布顶端建立如下矩形选框。
（注意：为了实现网页的层次感，这次的矩形边框与之前的矩形左右两边各空出2个像素）
步骤 4
为选区填充 #2061A8。
步骤 5
图层 >> 图层样式 >> 投影。
设置如下：
渐变叠加：
图案叠加：
步骤 6
为网站添加文字LOGO（点击查看本站文字特效相关教程）。
步骤 7
创建新的图层。
步骤 8
按照与步骤 3相同的方法在画布底部建立矩形。
步骤 9
填充颜色（#2061A8），并添加投影效果。
图层 >> 图层样式 >> 投影。
步骤 10
利用圆角矩形工具绘制如下形状。
步骤 11
图层 >> 图层样式 >> 投影。
渐变叠加：
步骤 12
为导航栏添加文字。
步骤 13
按照如上方法建立其余导航条。
步骤 14
现在我们开始制作内容框，利用圆角矩形绘制如下矩形框。
将图层面板的填充属性设为 0%。
图层 >> 图层样式 >> 渐变叠加。
步骤 15
按照之前的方法建立另一个内容框。
Photoshop绘制漂亮的商业类型网站模板
首先要感谢的是你能够访问这个教程。
在这个教程中我将创建一个商业网站布局。
如果你经常访问我的网站的话，你将会看到创建一个好看的网站是多么容易。
在这个博客里你会找到更多的布局教程。
你会好奇这是为什么吗?
我使用Photoshop已经很长时间了，从那个时候开始我就为客户创建网站，并因此挣了不少钱。
我想要教给你如何创建网站的原因是因为创建网站可比创建一个简单的Photoshop效果挣钱多了。
如果你想开始从网上挣钱的话，为你未来的客户创建网站正是时候。
我这里有一个例子，为一个logo或者一个照片效果你能付多少钱?也许是50美元至100美元?从我开始设计至今我创建过数目上千的logo，上百个大的网站，我的大部分收入都是从设计网站布局中获得的，这就是为什么我认为你应该开始创建网站的原因。
我将会尽可能的讲述的简单易懂，我敢肯定通过我的方法会创建出漂亮的网
站布局。
出自：飞鱼的声纳翻译
让我们开始我们的教程，在这个教程中，我将创建一个商业网站布局。
首先创建一个新的文档
请使用如下设置
设置前景色为：#2b2724
选择油漆桶工具，为画布上色，选择背景层
按住Ctrl+J(此快捷键将会复制选定图层)
选择“图层1”，然后选择“滤镜”>“杂色”>“添加杂色”
然后使用如下设置
选择圆角矩形工具，在显示器的上方，设置如下设置
在你的布局上为导航创建两个形状，改变前景色为#e84502，然后我会使用圆角矩形工具
复制这两个橙色的形状。
想要复制图层，首先你需要选定你想要复制的图层，然后按下CTRL+J键，在你复制完这两个橙色的形状之后，改变颜色为白色。
改变颜色的方法是在图层缩略图上双击，然后选择白色。
这是目前我所得到的结果
现在选择移动工具，将白色形状向上移动一点点
我会在这个布局上放置一些图片
使用文字工具，我会加上一些文字
使用相同的工具，在导航条上加上一些文字
选择线条工具，确保线条粗细为1个像素
在导航按钮之间创建一个垂直线条
现在最重要的是要栅格化图层，想要做到这一点，你需要在图层上点击右键选择“栅格化图层”
选择橡皮擦工具，改变画笔到 60 Soft Mechanical 60 pixels
然后试着删除线条的顶部和底部
复制这个图层(选择想要复制的图层，然后在键盘上按下CTRL+J 键)，选择移动工具，然后将复制好的线条放置在另外一
个导航按钮的右边。
在整个布局的上方，我会创建一个简单的文字logo，在以后的教程中我会向你展示如何创建漂亮的logo
在图层1的上方创建一个新的图层
选择画笔工具，改变 to Soft Mechanical 60 pixels，在文字logo下面创建一个简单的白色点
想要效果好一点的话，可以将此图层的透明度改变为25%
最后的结果如下
希望你能喜欢最终的设计，此设计的PSD文档只对VIP会员开放。
Photoshop设计制作华丽立体游戏网站模板
减小字体增大字体作者：佚名来源：本站整理发布时间：2009-03-29 17:05:52 先看看最终效果:
图片看不清楚？请点击这里查看原图（大图）。
新建950 x 1160 大小文件，填充背景颜色#161616，使用矩形工具制作宽900、高190的矩形，并添加如下图层样式
完成后的矩形效果
图片看不清楚？请点击这里查看原图（大图）。
导入LOGO文件
导入一张光晕图片
图片看不清楚？请点击这里查看原图（大图）。
将图片裁剪到适当尺寸，放入游戏网站的头部，调整图片的不透明度和颜色，使其与整个蓝色背景融合在一起
图片看不清楚？请点击这里查看原图（大图）。
为LOGO标志添加背景边框，并设置填充为8%
制作两条矩形条作为导航按钮的背景区域
图片看不清楚？请点击这里查看原图（大图）。
设置顶部的矩形条图层样式如下
设置底部的矩形条样式如下
为了突出立体质感，制作一个白色矩形条，高度为其一半，设置不透明度为4%
图片看不清楚？请点击这里查看原图（大图）。
为两条导航条添加文字，并且我们用两条1px高度的线条（一黑一白）来分割他们之前的区域
图片看不清楚？请点击这里查看原图（大图）。
制作一个圆角矩形，使用如下样式，当鼠标移动到按钮上时作为按钮的背景
如下图就是鼠标移动到NEWS按钮时的效果了
制作白色矩形
添加样式
将完成后的矩形复制一次放到底部，将游戏图片放入两者之间
为顶部矩形上部添加白色矩形（高度为矩形的一半），设置不透明度为3%，产生质感
添加文字与箭头
依照上面完成的区块样式制作网站的其他区块
图片看不清楚？请点击这里查看原图（大图）。
放入文字与图片
图片看不清楚？请点击这里查看原图（大图）。
完成后的游戏网站的整体效果如下图
30个Photoshop制作网站首页模板的教程
/发布时间：2010-01-25 01:00:24 来源:飞鱼的声纳
大部分的主题开发或者设计者都会使用photoshop来完成设计稿，然后将其切割，再用html和css 来完成剩下的工作。
这里，我收集了30个简单易学的Photoshop网页布局设计教程，你可以跟着这些教程一步一步的去学如何使用photoshop来创建一个网页布局模板。
1.碳素纤维布局
2.商业wordpress PSD布局
3.水彩画背景网页文件夹布局
4.干净、色彩丰富的网页布局
5.创意工作室网页布局
6.暗色组合像素布局
7.酷的组合布局
8.在photoshop中创建一个清爽的博客布局
9.设计一个富有创意的个性网页布局
10.在photoshop中创建一个非营利组织的网页布局
11.专业的设计工作室网页布局
12.图形设计工作室网页布局
13.用photoshop设计一个高端的wordpress博客
14.网站画廊布局设计
15.如何用photoshop创建一个“破损纸张”效果的网页布局
16.设计一个酷的色彩丰富的布局
17.设计工作室布局
18.自由组合设计
19.设计一个时尚行业、金融网站
20.GreenPress wordpress主题设计
21.使用“960网格系统”来设计一个网页模版
22.在photoshop中设计一个现实的网站布局
23.在photoshop创建一个让人印象深刻的现代博客
24.利用草图创建一个简洁、高端的网页设计
25.如何在photoshop中创建一个绘制的网页设计
26.如何创建一个极好的破旧风格的网页
27.如何设计一个销售模板的web2.0网站
28.巧克力风格的wordpress布局。