用ps做网页效果图教程(ps做简单网页)

本文主要介绍用ps制作网页效果图教程(ps制作简单)，下面跟着东辰网详细了解一下吧。

在本教程中，我将教你如何在photoshop中制作简单干净的网页效果图。最初的效果是由Th:叶材料像素化蓝色矩形步骤1:新文件在photoshop中，按住(Ctrl)创建一个新的文件。将尺寸设置为1200像素*750像素。然后用渐变工具从上到下拉出一个渐变，颜色从#792700到#000000。

步骤2:添加了一些颜色的背景，以创建一个新的层，并命名为颜色。用笔刷工具，他选择了直径300px左右的软笔刷。我的颜色是红色、蓝色和橙色，我在这层上加了几笔。

3:，给背景添加一些纹理。现在我们需要给背景添加一些纹理效果。打开我们刚刚下载的叶子的材料图片，并使用移动工具将此图片移动到我们的文档中。右键单击图层的缩略图(在“图层”面)，然后选择“组合成新的智能对象土壤图层”。然后选择过滤器艺术电影粒子，并按照上述设置。然后选择滤镜对马赛克进行像素化，并按照图中的设置进行操作。将该层的渲染模式设置为差异与，设置透明度为30%，命名土层质地。

步骤4:在内容区新建一个黑色背景的图层，选择圆角矩形工具，设置圆角角度为3像素，创建一个黑色圆角矩形。然后双击图层面板中的图层，弹出图层样式面板，按照图中的设置为图层设置阴影。设置该层的透明度为70%，然后命名为黑色的形状和颜色。

步骤5:使用组(文件)来组织您的图层。按住ctrl键，选择您刚刚创建的所有层，然后单击CtrlG将它们分组。命名这个新组(文件)和背景和。

步骤6:创建更多的组(文件)创建一个新的组，层创建一个新的组，然后命名为家庭与娱乐。然后在这个组下创建另一个组，命名为标志。

开始步7:创造了一个标志和口号。在徽标组中，创建一个新层。使用文本工具，输入网站的logo文字，应用颜色为#f4f4f4。双击图层打开图层属性面板。按照上面的设置。然后再新建一层，输入广告语。申请颜色为#:注册和和登录按钮好了，现在我们需要在布局的右上角制作两个按钮。创建一个新组，并命名为注册|登录。然后选择圆角矩形，创建一个小矩形，就像我一样。双击图层打开图层样式面板，按照上面显示的设置。设置前景色为白色，并使用文本工具写注册|登录在你的按钮上。将这一层文字的透明度设置为75%。

步骤9:创建一个蓝线一个像素高，以创建一个新的组，命名为导航。创建一个新层，命名为线与线。选择单线选框工具，然后点按以在画布中创建像素高的选区。填充颜色#406f94，然后删除内容区域以外的部分。将该层的透明度设置为40%。

步骤10:添加了一个梯度效果的导航栏，以创建一个新的层。使用矩形选择工具创建一个选区，就像我一样。注意:您可以使用标尺来帮助您创建这个选区。然后使用渐变工具设置渐变为#35423e透明。从下往上填充渐变。按Ctrl+D清除选择。然后，过滤噪声添加噪声。遵循上图中的设置。命名这个层梯度和。请记住，在线条和渐变之间留出1个像素的高度。

11:编写的导航文字选择工具，并写下你的导航文字。然后双击打开图层样式面板。根据上图设定。我给文本添加了一个基本的渐变/阴影效果。

步骤12:创建导航文本之间的装饰性分段。现在我们需要创建一些分割线。创建一个新层，选择单列选框工具，并创建一个宽度为1像素的选区。然后，用矩形选择工具，单击交叉选择按钮(状态栏上有一个按)来操作选择，如上所示。用白色填充选区。然后ctrl+D删除选择。

步骤13双击图层打开图层样式面板，创建渐变叠加。这一层被命名为开始行。

步骤14:CtrlJ复制图层开始行然后将新层命名为第二行。使用移动工具将该层向右移动。然后双击图层打开图层样式面板，并按以上设置进行操作。

步骤15:转换层和一号线和2号线智能图层。按下Ctrl键并选择层一号线和2号线。然后右键单击并选择“转换为智能对象图层”。将这个智能层设置为分隔符。

步骤16:创建一个蓝色的亮点，并创建一个新的层下层分隔符。使用矩形选区工具创建一个选区(设置)，然后填充颜色#35423:创建一个图层蒙版分隔符。点击层分隔符在图层面板中，点击图层蒙版来显示所有图层。选择渐变工具，在蒙版中，从分割线的顶部到中间，画一个从黑色到透明的渐变。

18:复制分割线并按住Ctrl键。在“图层”面板中，单击“图层分隔符和亮点。然后使用移动工具，按住Alt和Shift键并拖动。此时的效果是复制移动两层。向右移动到右边。重复上述操作。

步骤19:组所有的分割线选择所有的分隔符和亮点层，按住Ctrl+G组合键。命名这个组分隔符和。

步骤20:添加按钮效果到活动页面。现在，我们需要为当前(活)页面的导航文本添加不同的背景，以区别于其他页面的导航文本。使用选择工具创建一个像我一样的矩形选区。将这一层放在文字层下面。双击图层打开图层面板，如上图设置，添加渐变叠加。命名这个层活动菜单并将图层透明度设置为50%。

步骤21:创建一个新的搜索栏组(新层)并命名为搜索和搜索。把它放在组的顶部导航。使用圆角选择工具，设置圆角为3px，创建一个圆角矩形，设置颜色为#104f59。命名这个层文本字段并将透明度设置为80%。

步骤22:创建搜索按钮使用矩形选择工具创建一个矩形选择，如上所示。把它放在搜索栏的右边。双击图层打开图层样式面板。添加渐变叠加。然后为这个图层创建一个蒙版。

步骤23:写搜索和搜索按钮上写着搜索和搜索白色的。设置这一层的透明度为75%。

步骤24:为搜索栏创建一条宽度为1像素的细线，并使用单列框选择工具创建所需的选择。然后用颜色#123036填充。命名这个层线与线并把它放在层按钮。

步骤25:创建一个蓝色的矩形来创建一个新的组，命名为展示。在其中创建另一个组，命名为背景和。用矩形选择工具，创建一个新的矩形，填充颜色#219aad。我的矩形宽983px，高273px(可以在创建之前打开信息面板窗口信息，这样可以看到具体的大)。设置图层透明度为55%，命名为bg4”。

步骤26:添加一个纹理效果到这个蓝色的矩形，打开材质文件像素化蓝色矩形，并将材料移动到我们的文件中。把它放在蓝色矩形的上面。设置该层的透明度为55%，然后命名为bg3”。

步骤27:添加一个蓝色的矩形渐变。按住Ctrl并点击图层的蒙版bg4”。此时，将创建一个选择。新建一个图层，使用渐变工具从#56b8e5到透明从选中的底部到顶部绘制渐变。然后Ctrl+D删除选择。

步骤28:创建一个蓝色的小矩形创建一个新的层。使用矩形选择工具创建一个选区(如上所)。使用渐变工具，将#0f2b42到#2a607f的渐变从选区底部拖到头部。ctrl+D删除选择。命名层bg1”。

步29:注册和按钮来创建一个名为注册按钮和。使用圆角矩形工具，设置圆角为2px，创建一个圆角矩形(如上)。双击图层打开图层样式面板。如上设置，并添加效果。然后使用文本工具写注册和并将文本设置为白色。

步30:了解更多按钮重复上述操作，创建另一个按钮。但是这一次白色的文字这个词是了解更多然后创建一个新层，使用用户定义的形状，并选择一个白色箭头。

步骤31:在矩形的左边创建一个按钮来创建一个名为向左箭头。使用椭圆工具l创建一个圆形，填充颜色#406f94。双击图层打开图层样式面板，如上图设置。

步骤32:创建一个蓝色圆圈箭头创建一个新的层，并使用用户定义的图形创建一个白色箭头。双击打开图层样式面板，按照上图设置。将图层透明度设置为50%。

33:在右边制造了另一个箭头。重复上述步骤，在矩形的右侧创建一个对称的圆和箭头。

步骤34:创造特片和创造新的群体。说出它的名字图像与图像。放置一个小图片在这个组中，并命名这个层图像与图像。双击打开图层样式面板。根据上图设定。

步骤35:添加一个阴影到你的图片，点击图层样式创建一个新的图层，并在原来的图层上创建一个新的图层。打开图层图层显示如梦，设置渐变，画一个从黑色到透明的渐变，从小图底部到中间。命名这个层影子。

步骤36:添加文本创建一个新的组。用文本工具添加一些文字，并将这个组命名为文本。

步骤37:创建了一个白色矩形的新组，并命名为内容，然后创建一个名为影子。用矩形工具，创建一个新的矩形，填充白色，就像上面的图片。命名这个层白色形状并将图层的透明度设置为90%。

步骤38:添加顶部阴影按住Ctrl键，并单击层的小缩略图白色形状在图层面板上创建一个选区。新建一个图层，使用渐变工具绘制从#8f8f8f到透明的渐变。参考上图。设置该层的透明度为50%,命名为顶影。然后使用移动工具向下移动2个像素。

步骤39:创建一个水平阴影创建一个新的层，并使用矩形工具创建一个选区，如上图所示。用渐变工具从#8f8f8f到透明绘制渐变。为该层创建一个蒙版，使用大直径的软笔刷创建一个阴影。将图层的透明度设置为30%，并将图层命名为垂直sha道指1英寸.复制这一层(Ctr)，命名新层垂直阴影2把它移到右边。

步骤40:创建一条水平线使用线条工具创建一条水平线，如上图所示，高度为1px，颜色为#aebcc7。说出它的名字线与线

步骤41:增加了一个文本选择工具，并添加了一些文字。还可以加一些图片。

步骤42:为底部创建一个渐变新组，命名为页脚和。在里面新建一层，用选区工具创建选区，如上图。将前景色设置为#555555，用直径比较大的软刷在选中的顶部位置涂抹。设置层的透明度为50%,命名为梯度和。

步骤43:在底部，添加一条线1像素高，创建一个新的层。按照之前的做法，创建一条高度为1px的线，填充黑色，图层透明度设置为15%，命名为线与线。

步骤44:添加文本到底部区域，并在底部添加一些文本。

最终结果在本教程中，我将教你如何在photoshop中制作一个简单干净的网页效果。最初的效果是由Th:叶材料像素化蓝色矩形步骤1:新文件在photoshop中，按住(Ctrl)创建一个新的文件。将尺寸设置为1200像素*750像素。然后用渐变工具从上到下拉出一个渐变，颜色从#792700到#000000。

步骤2:添加了一些颜色的背景，以创建一个新的层，并命名为颜色。用笔刷工具，他选择了直径300px左右的软笔刷。我的颜色是红色、蓝色和橙色，我在这层上加了几笔。

3:，给背景添加一些纹理。现在我们需要给背景添加一些纹理效果。打开我们刚刚下载的叶子的材料图片，并使用移动工具将此图片移动到我们的文档中。右键单击图层的缩略图(在“图层”面)，然后选择“组合成新的智能对象土壤图层”。然后选择过滤器艺术电影粒子，并按照上述设置。然后选择一个滤镜对马赛克进行像素化，同样遵循图中的设置。将该层的渲染模式设置为差异与，设置透明度为30%，命名土层质地。

步骤4:在内容区新建一个黑色背景的图层，选择圆角矩形工具，设置圆角角度为3像素，创建一个黑色圆角矩形。然后双击图层面板中的图层，弹出图层样式面板，按照图中的设置为图层设置阴影。设置该层的透明度为70%，然后命名为黑色的形状和颜色。

步骤5:使用组(文件)来组织您的图层。按住ctrl键，选择您刚刚创建的所有层，然后单击CtrlG将它们分组。命名这个新组(文件)和背景和。

步骤6:创建更多的组(文件)创建一个新的组，层创建一个新的组，然后命名为家庭与娱乐。然后在这个组下创建另一个组，命名为标志。

开始步7:创造了一个标志和口号。在徽标组中，创建一个新层。用文字工具输入网站的logo文字，应用颜色为#f4f4f4。双击图层打开图层属性面板。按照上面的设置。然后再新建一层，输入广告语。申请颜色为#:注册和和登录按钮好了，现在我们需要在布局的右上角制作两个按钮。创建一个新组，并命名为注册|登录。然后选择圆角矩形，创建一个小矩形，就像我一样。双击图层打开图层样式面板，按照上面显示的设置。设置前景色为白色，并使用文本工具写注册|登录在你的按钮上。将这一层文字的透明度设置为75%。

步骤9:创建一个蓝线一个像素高，以创建一个新的组，命名为导航。创建一个新层，命名为线与线。选择单线选框工具，然后点按以在画布中创建像素高的选区。填充颜色#406f94，然后删除内容区域以外的部分。将该层的透明度设置为40%。

步骤10:添加了一个梯度效果的导航栏，以创建一个新的层。使用矩形选择工具创建一个选区，就像我一样。注意:您可以使用标尺来帮助您创建这个选区。然后使用渐变工具设置渐变为#35423e透明。从下往上填充渐变。按Ctrl+D清除选择。然后，过滤噪声添加噪声。遵循上图中的设置。命名这个层梯度和。请记住，在线条和渐变之间留出1个像素的高度。

11:编写的导航文字选择工具，并写下你的导航文字。然后双击打开图层样式面板。根据上图设定。我给文本添加了一个基本的渐变/阴影效果。

步骤12:创建导航文本之间的装饰性分段。现在我们需要创建一些分割线。创建一个新层，选择单列选框工具，并创建一个宽度为1像素的选区。然后，用矩形选择工具，单击交叉选择按钮(状态栏上有一个按)来操作选择，如上所示。用白色填充选区。然后ctrl+D删除选择。

步骤13双击图层打开图层样式面板，创建渐变叠加。这一层被命名为开始行。

步骤14:CtrlJ复制图层开始行然后将新层命名为第二行。使用移动工具将该层向右移动。然后双击图层打开图层样式面板，按照上面的设置。

步骤15:转换层和一号线和2号线智能图层。按下Ctrl键并选择层一号线和2号线。然后右键单击并选择“转换为智能对象图层”。将这个智能层设置为分隔符。

步骤16:创建一个蓝色的亮点，并创建一个新的层下层分隔符。使用矩形选区工具创建一个选区(设置)，然后填充颜色#35423:创建一个图层蒙版分隔符。点击层分隔符在图层面板中，点击图层蒙版来显示所有图层。选择渐变工具，在蒙版中，从分割线的顶部到中间，画一个从黑色到透明的渐变。

18:复制分割线并按住Ctrl键。在“图层”面板中，单击“图层分隔符和亮点。然后使用移动工具，按住Alt和Shift键并拖动。此时的效果是复制和移动这个两层。向右移动到右边。重复上述操作。

步骤19:组所有的分割线选择所有的分隔符和亮点层，按住Ctrl+G组合键。命名这个组分隔符和。

步骤20:添加按钮效果到活动页面。现在，我们需要为当前(活)页面的导航文本添加不同的背景，以区别于其他页面的导航文本。使用选择工具创建一个像我一样的矩形选区。将这一层放在文字层下面。双击图层打开图层面板，如上图设置，添加渐变叠加。命名这个层活动菜单并将图层透明度设置为50%。

步骤21:创建一个新的搜索栏组(新层)并命名为搜索和搜索。把它放在组的顶部导航。使用圆角选择工具，设置圆角为3px，创建一个圆角矩形，设置颜色为#104f59。命名这个层文本字段并将透明度设置为80%。

步骤22:创建搜索按钮使用矩形选择工具创建一个矩形选择，如上所示。把它放在搜索栏的右边。双击图层打开图层样式面板。添加渐变叠加。然后为这个图层创建一个蒙版。

步骤23:写搜索和搜索按钮上写着搜索和搜索白色的。设置这一层的透明度为75%。

步骤24:为搜索栏创建一条宽度为1像素的细线，并使用单列框选择工具创建所需的选择。然后用颜色#123036填充。命名这个层线与线并把它放在层按钮。

步骤25:创建一个蓝色的矩形来创建一个新的组，命名为展示。在其中创建另一个组，命名为背景和。用矩形选择工具，创建一个新的矩形，填充颜色#219aad。我的矩形宽983px，高273px(可以在创建之前打开信息面板窗口信息，这样可以看到具体的大)。设置图层透明度为55%，命名为bg4”。

步骤26:添加一个纹理效果到这个蓝色的矩形，打开材质文件像素化蓝色矩形，并将材料移动到我们的文件中。把它放在蓝色矩形的上面。将这个图层的透明度设置为55%，然后命名。这层是bg3”。

步骤27:添加一个蓝色的矩形渐变。按住Ctrl并点击图层的蒙版bg4”。此时，将创建一个选择。新建一个图层，使用渐变工具从#56b8e5到透明从选中的底部到顶部绘制渐变。然后Ctrl+D删除选择。

步骤28:创建一个蓝色的小矩形创建一个新的层。使用矩形选择工具创建一个选区(如上所)。使用渐变工具，将#0f2b42到#2a607f的渐变从选区底部拖到头部。ctrl+D删除选择。命名层bg1”。

步29:注册和按钮来创建一个名为注册按钮和。使用圆角矩形工具，设置圆角为2px，创建一个圆角矩形(如上)。双击图层打开图层样式面板。如上设置，并添加效果。然后使用文本工具写注册和并将文本设置为白色。

步30:了解更多按钮重复上述操作，创建另一个按钮。但是这一次白色的文本是了解更多。然后创建一个新层，使用用户定义的形状，并选择一个白色箭头。

步骤31:在矩形的左边创建一个按钮来创建一个名为向左箭头。使用椭圆工具l创建一个圆形，填充颜色#406f94。双击图层打开图层样式面板，如上图设置。

步骤32:创建一个蓝色圆圈箭头创建一个新的层，并使用用户定义的图形创建一个白色箭头。双击打开图层样式面板，按照上图设置。将图层透明度设置为50%。

33:在右边制造了另一个箭头。重复上述步骤，在矩形的右侧创建一个对称的圆和箭头。

步骤34:创造特片和创造新的群体。说出它的名字图像与图像。放置一个小图片在这个组中，并命名这个层图像与图像。双击打开图层样式面板。根据上图设定。

步骤35:添加一个阴影到你的图片，点击图层样式创建一个新的图层，并在原来的图层上创建一个新的图层。打开图层图层显示如梦，设置渐变，画一个从黑色到透明的渐变，从小图底部到中间。命名这个层影子。

步骤36:添加文本新组。用文本工具添加一些文字，并将这个组命名为文本。

步骤37:创建了一个白色矩形的新组，并命名为内容，然后创建一个名为影子。用矩形工具，创建一个新的矩形，填充白色，就像上面的图片。命名这个层白色形状并将图层的透明度设置为90%。

步骤38:添加顶部阴影按住Ctrl键，并单击层的小缩略图白色形状在图层面板上创建一个选区。新建一个图层，使用渐变工具绘制从#8f8f8f到透明的渐变。参考上图。设置该层的透明度为50%,命名为顶影。然后使用移动工具向下移动2个像素。

步骤39:创建一个水平阴影创建一个新的层，并使用矩形工具创建一个选区，如上图所示。用渐变工具从#8f8f8f到透明绘制渐变。为该层创建一个蒙版，使用大直径的软笔刷创建一个阴影。设置层的透明度为30%,命名为垂直阴影1。复制这一层(Ctr)，命名新层垂直阴影2把它移到右边。

步骤40:创建一条水平线使用线条工具创建一条水平线，如上图所示，高度为1px，颜色为#aebcc7。说出它的名字线与线

步骤41:增加了一个文本选择工具，并添加了一些文字。还可以加一些图片。

步骤42:为底部创建一个渐变新组，命名为页脚和。在里面新建一层，用选区工具创建选区，如上图。将前景色设置为#555555，用直径比较大的软刷在选中的顶部位置涂抹。设置层的透明度为50%,命名为梯度和。

步骤43:在底部，添加一条线1像素高，创建一个新的层。按照之前的做法，创建一条高度为1px的线，填充黑色，图层透明度设置为15%，命名为线与线。

步骤44:添加文本到底部区域，并在底部添加一些文本。

决赛成绩

了解更多用ps制作网页效果图教程(ps制作简单网)相关内容请关注东辰网。