ps网页设计教程

有时候我们会需要一个网页，那么怎么用ps设计呢？下面我就介绍一下。

操作方法

（01）创建新的 Photoshop文档。

（02）点击单位和标尺，进行设置。

（03）激活photoshop的标尺,从查看 > 标尺里头。按下"Ctrl/Cmd + R"固定标尺的可见度。按下M字键, 选择矩形选区工具在画布的左上角绘制出一个120px宽的小盒子。

（04）移动选区到画布的右边缘，分配另外一条参考线到选区左侧。

（05）创建logo创建新的组 (图层> 新建 >组)并且命名为logo。进入字符面板, 设置字体为Arial, 样式为粗体,大小为 42pt。 设置反锯齿选项为锐利颜色为#101112。

（06）双击打开图层面板对话框. 选择图层渐变, 点击渐变设置如图。

（07）选择水平排版工具在logo下面增加口号。

（08）logo效果。

（09）创建导航栏创建新组命名为navigation,置于 logo"组上方。 从顶部标尺拖出一条参考线, 直到距离画布顶端150px 的地方. 选择矩形工具(U)画出一直宽度为4px 的水平线,颜色为#e3ab27, 贯穿画布。增加导航链接文字,距离水平线 12px高距离左侧参考线 20px。 选择椭圆形工具画一个宽高分别为 72px *35px的矩形。 移动此图层到 "hover"下面. 使用转换点工具拉直底部圆角.。双击"hover"图层按钮打开图层样式对话框增加渐变颜色(左: #e5ad27, 右: #b27625)。选择横向排版工具(T), 选中文字, "Home" 更改颜色#ffffff (白色)。

（10）创建联系我们选项将电话图标 置在接近右侧参考线的地方。图层命名为phone icon。 选择水平排版工具， 在图标左侧增加一个电话号码字体 Arial, 大小20pt 颜色#292929。　

（11）新建页眉新建一个组,命名为header。选择矩形工具 (U) 新建矩形宽和高分别为1200px *440px。 移动此图行到矩形,导航栏1px的地方命名为header bg。 双击 header bg层, 选择渐变图层样式增加渐变颜色(左: #2e2226, 右: #7a7556)。

（12）使用矩形工具新建一个新的矩形 (U) 大小为960px * 360px。移动到距离header bg层顶端40px,距离左边参考线0px的地方. 命名图层为header container。

（13）创建特色项目选区。在header 组里面创建新组,命名为fp。选择矩形工具(U)创建大小为630px 乘以 340px , 距离header容器顶部和左侧10px的地方。给图层的颜色赋值为#000000 并命名为fp container。

（14）从你的ps里导入一张图片放置在特色区域上面.，按选择 >全部 (Ctrl/Cmd + A), 然后 编辑 > 复制(Ctrl/Cmd + C)。 回到的网页设计。在fp container层上面新建图层,点 编辑> 粘贴 (Ctrl/Cmd + V) 粘贴你的特色项目图片。重命名为fp image ，右击fp image层选择剪切蒙版，现在图片只有在矩形区域可见。

（15）进入 编辑> 变形>角度(Ctrl/Cmd + T).，从选项条, 点击旋转框,键入-4按下两次调整图层。 继续选择该图层。设置图层样式为亮度。

（16）选择矩形工具(U)创建矩形大小为630px乘以 90px,颜色为#161718。改变图层不透明度为90% 命名为title bg。

（17）标题设置字体: Arial, 颜色: #ffffff, 大小: 25pt自动反锯齿选项: 锐利描述设置:字体: Arial, 颜色: #a4a4a4, 大小: 12pt自动反锯齿选项: None

（18）创建快速引用部分。 创建另外一个组在 header组内,并且命名为quick quote。选择椭圆形工具新建300px 乘以340px像素的矩形.。放置这个矩形到特色项目选区10px 的地方命名为qq container。复制之前制作的另外一个图层的样式.进入navigation"组, 右击hover层, 选择复制图层样式, 回到qq container"层,右击选择粘贴图层样式。

（19）选择水平排版工具， 键入 Quick Quote在qq container"距离内容层顶部和左边 20px的地方。设置字体为Trebuchet MS 颜色为白色(#ffffff) 反锯齿选项设置为锐利。 使用椭圆形工具创建表单，选择椭圆形工具,设置半径为 3px。然后新建两个矩形大小为260px乘以 35px 颜色为白色 (#ffffff)。分别命名为 field1和field2，创建第三个矩形,大小为260px 乘以 75px 颜色为白色(#ffffff)命名为field3 ，使用文字工具分别写上各自标签。

（20）选择椭圆形工具创建方型大小80px乘以35px命名为submit btn。双击图层打开图层样式对话框 ,勾选左边的渐变叠加对话框， 点击渐变编辑按照如下变更颜色 。

（21）选择文字工具,键入Submit"使用字体Arial, 粗体样式 大小为13pt 选择submit 按钮 和 Submit 文字。在工具面板选择移动工具 在选项条设置水平居中和垂直居中。

（22）创建新组命名为content， 选择椭圆形工具(U)。新建300px 乘以 175px 命名为c01。放置此层在距离头部30px 以下 距离左边参考线0px。双击层,设置如下样式。

（23）选择文字工具增加文字, About SmashingDzine， 使用文章工具选择About文字,改变颜色为#b47825。选择Smashing文字,改变颜色为#2f2f2f， 增加简短描述和文字连接，参考以下设置。

（24）增加多一个正方形， 选择矩形工具,颜色 #ffffff, 按住Shift键,维持比例绘制矩形,大小为88px 乘以88px。移动该矩形到距离左边矩形c01，10px 的地方,命名为border 设置描边如下。

（25）创建另一个盒子,大小为82px 乘以 82px放置在border层中央 。命名为box 颜色改变为 #d5d5d5。选择content组的所有图层,进入图层> 新建> 创建组(Ctrl/Cmd + G) 命名为about。

（26）复制about组 命名为services，再重新复制一组命名为portfopo，移动最后的组portfopo到右侧的参考线。

（27）在面板选中三个组,点击图层>分布> 水平中心分布。

（28）变更 services 组和portfopo组 如下。

（29）新建组命名为footer 选择矩形工具(U)然后创建矩形大小为1200px 乘以100px 在我们布局的底部。命名为 footer bg，复制 header bg层的图层样式并且应用。

（30）选择文字工具,写上版权声明文字,和链接,样式为Arial, 大小为12pt ,灰色(#dddddd)。

（31）创建新组在footer层,命名为 subscribe。选择圆角椭圆形工具(U) 创建矩形大小85px 乘以 35px.图层命名为subscribe btn。选择文字工具,拼写Subscribe样式Arial,Bold大小13pt， 选择所有层。选择椭圆矩形工具 (U)设置半径为3px。创建椭圆矩形为210px 乘以35px 应用白色为主(#ffffff)命名该层为email field。完成。