当前位置: 主页 > 平面设计 > PS教程 > 制作实例 > 网页制作 > 使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

  • 2021-11-15
  • 来源/作者: ps.onegreen.org    / 佚名    
  • 10 次浏览

  今天我们来练习使用Photoshop设计一个简单而专业的网站版面,这是一个名为“DesignStudio”的工作室的网站。

  先看一下最终效果。

使用Photoshop设计一个简单而专业的网站版面

  具体操作步骤如下。

  1.按Ctrl+N打开“新建”对话框,将文档大小设置为766x700像素,其它采用默认设置,完毕后单击“确定”按钮。选择工具箱中“矩形工具”,绘制一个满画布的矩形,然后我们将要使用图层样式制作出如图1所示的背景效果。

使用Photoshop设计一个简单而专业的网站版面

  2.选择菜单命令“图层 图层样式 渐变叠加”,打开“图层样式”对话框,按如图2所示设置渐变叠加选项。

使用Photoshop设计一个简单而专业的网站版面

  3.其中渐变色的具体设置如图所示。

使用Photoshop设计一个简单而专业的网站版面

  4.选择工具箱中的“钢笔工具”,确认选项栏中按下的是“形状图层”按钮,按如图所示绘制20条三角形的光线形状。

使用Photoshop设计一个简单而专业的网站版面

  5.取消选择路径后的效果如图所示。

使用Photoshop设计一个简单而专业的网站版面

  6.所有这些光线形状都具有以下相同的设置。先在“图层样式”对话框中设置颜色叠加选项,如图所示。

使用Photoshop设计一个简单而专业的网站版面

  7.为了方便,我们将所有这些光线形状图层合并为一个组,然后将该组的混合模式修改为“柔光”,效果如图所示。

使用Photoshop设计一个简单而专业的网站版面

  8.从http://www.deviantart.com下载evil_bloodsplat笔刷,然后将它放置到目录Program FilesAdobeAdobe Photoshop CS2 PresetsBrushes。选择工具箱中的“画笔工具”,然后在“画笔”面板中单击右上角小箭头,在弹出菜单中选择命令“载入画笔”,如图所示。

使用Photoshop设计一个简单而专业的网站版面

  9.载入画笔后,创建一个新的图层,将前景色设置为白色,使用合适大小的画笔在该图层中绘制出如图所示的形状。

使用Photoshop设计一个简单而专业的网站版面

  10.使用“矩形工具”,画出如图所示的白色网站面板。

使用Photoshop设计一个简单而专业的网站版面

  11.并为该图层应用如图11所示的“投影”图层样式。

使用Photoshop设计一个简单而专业的网站版面

  12.仍使用“矩形工具”,再创建一个新的形状图层,如图所示,颜色值为4A4A4A。

使用Photoshop设计一个简单而专业的网站版面

  13.再次使用“矩形工具”,绘制出如图13所示的形状图层。图中所法的两种颜色稍后通过设置渐变叠加来实现。

使用Photoshop设计一个简单而专业的网站版面

  14.“渐变叠加”图层样式的选项如图14所示。

使用Photoshop设计一个简单而专业的网站版面

  15.其中渐变色的具体设置如图15所示。

使用Photoshop设计一个简单而专业的网站版面

  16.用“画笔工具”在画布上画出一些不同大小的点,颜色值分别是C34713和BAE1FC,如图16所示。

使用Photoshop设计一个简单而专业的网站版面

  17.选择工具箱中的“直线工具”,按如图17所示画出一条垂直的分隔线,颜色值为646464。

使用Photoshop设计一个简单而专业的网站版面

  18.整体效果如图18所示。

使用Photoshop设计一个简单而专业的网站版面

  19.然后将分隔线复制出三个副本,并改变它们的位置,得到如图19所示的效果。

使用Photoshop设计一个简单而专业的网站版面

  20.现在按哪图20所示的字符设置输入网站的按钮文字。

使用Photoshop设计一个简单而专业的网站版面

  21.具体文字效果如图21所示。

使用Photoshop设计一个简单而专业的网站版面

  22.选择工具箱中的“自定形状工具”,在选项栏中单击“形状”右侧的向下小箭头,在弹出窗口中单击右上角的向右小箭头,然后选择命令“全部”,当出现提示对话框时,单击“追加”按钮,然后从形状列表中选择如图22所示的“靶心”形状。

使用Photoshop设计一个简单而专业的网站版面

  23.并将其颜色值设置为01C2EE,如图23所示。

使用Photoshop设计一个简单而专业的网站版面

  24.如图24所示是整体效果。

使用Photoshop设计一个简单而专业的网站版面

  25.下面要添中网站的名称了。按如图所示设置这些文字的选项。

使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

  26.完成文字设置后的整体效果如图26所示。

使用Photoshop设计一个简单而专业的网站版面

  27.再输入网站版面中的其它文字。这些文字都具有如图所示相同的投影效果。

使用Photoshop设计一个简单而专业的网站版面

  28.分别按如图所示设置字符选项。

使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

  29.文字设置完成后的效果如图33所示。

使用Photoshop设计一个简单而专业的网站版面

  30.下面添加其它大段文本。这些文本都设置如图30所示的“投影”图层样式。

使用Photoshop设计一个简单而专业的网站版面

  31.然后按如图所示分别设置这些字符的格式。

使用Photoshop设计一个简单而专业的网站版面

使用Photoshop设计一个简单而专业的网站版面

  32.设置完成后的效果如图32所示。

使用Photoshop设计一个简单而专业的网站版面

  33.使用“矩形工具”画出如图33所示的两个矩形,用于放置日期,其颜色值为00A1DC。

使用Photoshop设计一个简单而专业的网站版面

  34.下面要添加日期。其字符选项如图所示。

使用Photoshop设计一个简单而专业的网站版面

  添加完日期后,网站版面就设计完成了。最终效果如图所示。

使用Photoshop设计一个简单而专业的网站版面