ps怎么做网站界面设计(ps网站页面设计)

本文主要介绍ps如何做网站界面设计(ps网站页面)，下面跟着东辰网详细了解一下吧。

作者:译者:纳卡尔兹:网站的开始印象非常重要！惊艳的、视觉上吸引人的作品是每个设计师追求的。今天，我们将演示如何在Photoshop中使用照片和画笔。纹理和3D对象来设计一个有创意的多媒体网站布局。让我们开始吧！

在本教程中，我们将使用以下资源:经典相机导演的椅子电视摄像机笔记本电脑麦克风热风气球1热风气球2小树城市景观刷由特弗克洛。uds画笔由JavierZhx抽象发光画笔由Rostock铁锈纹理由影后公主装甲金属纹理由温Jr渲染包纹理1由AngelusHellion渲染包纹理2由Xcellcior

步骤1在Photoshop中创建一个960px*620px的画布。这个尺寸适合大多数网站屏幕。

按CMDR添加标尺，画一些辅助线，标记主要内容区域的边界。这将有助于定位您的设计。

第2步现在主要区域已经被适当地定义了，让s调整画布，创建1224px*620px(图像画布大)的更大背景。这个溢出区将有利于大屏幕，并创造一个无国界视觉效果。

第三步写文档的最后一步是在中心加一条引导线。引导线将帮助您找到中间的设计元素。快速找到中心的方法是创建一个新层，然后按快捷键CMDT激活自由变换。

让s把主要元素放在云后台平台上。先做一个灰色渐变背景。转到图层，图层样式，渐变叠加。渐变颜色为#434344到#EAECEC。其他设置是默认设置。

创建一个新层云和。加载云笔刷云笔刷，用不同的形状、大小和透明度绘制一些白色的云，直到你得到一个类似于下图的效果:

步骤6创建第二层云2并在中心添加一些云。

创建第三层云3。这次用水泵。像辉光笔刷抽象辉光笔刷一样，使用第二个大小为420像素的笔刷。翻转它，按CMDT水平翻转。这使得云彩看起来更加虚幻。

现在，我们将创建一个大的M。你也可以在这里写公司的首字母(或者任何你喜欢的名)。

复制3DM，返回Photoshop并将其粘贴到您的文档中。将图层重命名为m。现在我们将应用一些效果和纹理，使它更加实用和有趣。首先将下面的图层样式应用到图层m。

步骤10创建一个名为m质地。使用魔棒工具选择字母m创建选区并将图层蒙版添加到文件夹中。在这个文件夹中，我们将把所有的3DM纹理。

使用纹理4.jpg来自铁锈纹理包。复制，粘贴，重命名层质地。复制它并缩小复制层纹理2和到12.5%。

步骤11调整图层的不透明度为40%，将两个纹理图层的混合模式改为颜色加深。

添加另一个纹理层纹理3和使用金属_斑块_凸起_接缝.装甲金属质地。将图层不透明度调整为26%，混合模式改为强光。调整图层，直到你得到满意的纹理。

第二部分。

使用不透明度为30%的软圆刷在M。使用涂抹工具调整并创建一个倾斜的阴影，如下所示。

复制层，并重新命名为多媒体的阴影。按CmdT使用变换工具，右键单击并选择垂直翻转。添加运动模糊。改变图层的不透明度为50%。添加图层蒙版，最后应用渐变淡出底部。

步骤15现在将为我们的多媒体世界创建一个城市外观。你可以用城市景观笔刷来建造建筑物。下载几个抽象纹理包:渲染包纹理1和渲染包纹理2。先用笔刷画一些建筑。在每个独立的层上画出每个建筑，并把它放在层与层之间云和和云2。

调整大小和位置。剪去建筑中你不喜欢的部分。;不需要。

步骤17为每个建筑创建一个有自己纹理的新文件夹。应用纹理的与添加M纹理，选择每个建筑，使用魔棒工具，在文件夹中的选区添加图层蒙版，将文件夹图层的混合模式设置为灯光。

步骤18现在应用下图所示的抽象纹理。移动、旋转和调整纹理大小，直到获得满意的效果。

这是一个好方法。来清理和整理这些层。虽然一开始有点繁琐，但这种做法实际上会节省你搜索文件的时间。把所有的建筑层放在一个新的文件夹中建筑与设计。将此文件夹放在云和和云2。

第20步使用云刷画一些小云彩在云2来覆盖建筑的地基。

第21步让加入一些道具:经典相机，导演椅子，电视摄像机，笔记本电脑，麦克风，热风气球1，热风气球2，小树。对于每个对象，使用魔棒工具从背景中提取，然后单击“调整边缘”按钮来调整边缘。要删除剩余的粗糙边缘，请使用橡皮擦工具中的小圆形笔刷来擦除它们。

步骤22调整大小，然后应用滤镜智能锐化(Cmd)到每个对象。它们的位置如下。

添加椅子、电视、笔记本电脑、麦克风、相机和汽车的阴影，使用和添加字母M。对于树，使用笔刷和涂抹工具来调整形状。

第24步It该打扫卫生了！将每个对象层与阴影层连接起来，使每个对象可以根据需要方便地打开和关闭。为此，请按住Shift键并单击这两个层。右键单击并选择链接层。然后把这些道具层放到一个新的文件夹中道具。

第25步如果你想设计一个网页，交互元素对网站的成功起着重要的作用。因此，我们应该让我们的主按钮具有吸引力和突出性，让用户想点击它们。我们将创建一个3D盒子，并用彩色电线将它与城市景观连接起来。它们将代表我们不同的网页。可以先预览一下:

步骤26返回Illustrator绘制3D盒子和彩色电线。使用矩形工具绘制六个不同宽度的文本框，其宽度取决于输入文本的长度。例如，W:译者:纳卡尔兹:网站的开始印象非常重要！惊艳的、视觉上吸引人的作品是每个设计师追求的。今天，我们将演示如何在Photoshop中使用照片和画笔。纹理和3D对象来设计一个有创意的多媒体网站布局。让我们开始吧！

在本教程中，我们将使用以下资源:经典相机导演的椅子电视摄像机笔记本电脑麦克风热风气球1热风气球2小树城市景观刷由特弗克洛。uds画笔由JavierZhx抽象发光画笔由Rostock铁锈纹理由影后公主装甲金属纹理由温Jr渲染包纹理1由AngelusHellion渲染包纹理2由Xcellcior

在Photoshop中创建一个960p。X*620px画布。这个尺寸适合大多数网站屏幕。

按CMDR添加标尺，画一些辅助线，标记主要内容区域的边界。这将有助于定位您的设计。

第2步现在主要区域已经被适当地定义了，让s调整画布，创建1224px*620px(图像画布大)的更大背景。这个溢出区将有利于大屏幕，并创造一个无国界视觉效果。

第三步写文档的最后一步是在中心加一条引导线。引导线将帮助您找到中间的设计元素。快速找到中心的方法是创建一个新层，然后按快捷键CMDT激活自由变换。

让s把主要元素放在云后台平台上。先做一个灰色渐变背景。转到图层，图层样式，渐变叠加。渐变颜色为#434344到#EAECEC。其他设置是默认设置。

创建一个新层云和。加载云笔刷云笔刷，用不同的形状、大小和透明度绘制一些白色的云，直到你得到一个类似于下图的效果:

步骤6创建第二层云2并在中心添加一些云。

创建第三层云3。这一次，使用抽象发光笔刷，使用第二个大小为420像素的笔刷。翻转它，按CMDT水平翻转。这使得云彩看起来更加虚幻。

现在，我们将创建一个大的M。你也可以在这里写公司的首字母(或者任何你喜欢的名)。

复制3DM，返回Photoshop并将其粘贴到您的文档中。将图层重命名为m。现在我们将应用一些效果和纹理，使它更加实用和有趣。首先将下面的图层样式应用到图层m。

步骤10创建一个名为m质地。使用魔棒工具选择字母m创建选区并将图层蒙版添加到文件夹中。在这个文件夹中，我们将把所有的3DM纹理。

使用纹理4.jpg来自铁锈纹理包。复制，粘贴，重命名层质地。复制它并缩小复制层纹理2和到12.5%。

步骤11调整图层的不透明度为40%，将两个纹理图层的混合模式改为颜色加深。

添加另一个纹理层纹理3和使用金属_斑块_凸起_接缝.装甲金属质地。将图层不透明度调整为26%，混合模式改为强光。调整图层，直到你得到满意的纹理。

第二部分。

使用不透明度为30%的软圆刷在M。使用涂抹器通过调整，创建一个倾斜的阴影，如下所示。

复制层，并重新命名为多媒体的阴影。按CmdT使用变换工具，右键单击并选择垂直翻转。添加运动模糊。改变图层的不透明度为50%。添加图层蒙版，最后应用渐变淡出底部。

步骤15现在将为我们的多媒体世界创建一个城市外观。你可以用城市景观笔刷来建造建筑物。下载几个抽象纹理包:渲染包纹理1和渲染包纹理2。先用笔刷画一些建筑。在每个独立的层上画出每个建筑，并把它放在层与层之间云和和云2。

调整大小和位置。剪去建筑中你不喜欢的部分。;不需要。

步骤17为每个建筑创建一个有自己纹理的新文件夹。应用纹理的与添加M纹理，选择每个建筑，使用魔棒工具，在文件夹中的选区添加图层蒙版，将文件夹图层的混合模式设置为灯光。

步骤18现在应用下图所示的抽象纹理。移动、旋转和调整纹理大小，直到获得满意的效果。

这是清理和整理图层的好方法。虽然一开始有点繁琐，但这种做法实际上会节省你搜索文件的时间。把所有的建筑层放在一个新的文件夹中建筑与设计。将此文件夹放在云和和云2。

第20步使用云刷画一些小云彩在云2来覆盖建筑的地基。

第21步让加入一些道具:经典相机，导演椅子，电视摄像机，笔记本电脑，麦克风，热风气球1，热风气球2，小树。对于每个对象，使用魔棒工具从背景中提取，然后单击“调整边缘”按钮来调整边缘。要删除剩余的粗糙边缘，请使用橡皮擦工具中的小圆形笔刷来擦除它们。

步骤22调整大小，然后应用滤镜智能锐化(Cmd)到每个对象。它们的位置如下。

添加椅子、电视、笔记本电脑、麦克风、相机和汽车的阴影，使用和添加字母M。对于树，使用笔刷和涂抹工具来调整形状。

第24步It该打扫卫生了！将每个对象层与阴影层连接起来，使每个对象可以根据需要方便地打开和关闭。为此，请按住Shift键并单击这两个层。右键单击并选择链接层。然后把这些道具层放到一个新的文件夹中道具。

第25步想要在设计网页时，交互元素对网站的成功起着重要的作用。因此，我们应该让我们的主按钮具有吸引力和突出性，让用户想点击它们。我们将创建一个3D盒子，并用彩色电线将它与城市景观连接起来。它们将代表我们不同的网页。可以先预览一下:

步骤26返回Illustrator绘制3D盒子和彩色电线。使用矩形工具绘制六个不同宽度的文本框，其宽度取决于输入文本的长度。例如，Web使用一个小盒子，和联系和有一个更宽的盒子。

步骤27应用3D拉伸和斜角效果到每个方块上。从左到右对每个方块使用下图所示的设置。

步骤28将所有创作好的作品复制到Photoshop中，粘贴到背景和层。使用钢笔工具或铅笔工具画一些线。

现在我们将制作一些彩虹笔刷。使用矩形工具画一个矩形。然后垂直复制粘贴4到5个矩形。改变它们的颜色。选择所有的矩形，并用左对齐。

第三十步:用不同的颜色做一些彩虹。这是一些样品。

步骤31制作画笔，选择一组彩虹矩形，拖动它们，放入你的画笔面板，选择新建艺术画笔。命名你的艺术画笔和彩虹1号并保持默认的水平设置。

第32步现在应用你的彩虹笔刷绘制不同的线条。

步骤33在Photoshop中分别复制粘贴每一条彩虹线。将它粘贴在建筑层的前面，但是在道具层和英文字母M层。应用图层蒙版到线层，用云刷把线的一些部分弄透明。

步骤34为了给线条一个3D的外观，让它更有光泽，应用图层样式的斜面和浮雕，如下图所示。每一行都需要一些细微的调整才能达到想要的效果。

步骤35从Illustrator中复制并粘贴3D盒子到一个单独的图层。

步骤36:应用纹理金属_斑块_凸起_接缝.从装甲金属纹理，使用与步骤10和步骤17相同的技术。设置纹理层的混合模式为强光，不透明度为26%。

步骤38清理你的图层，把这些盒子按钮放在一个文件夹里。

结论希望这篇教程对大家有帮助。请分享你的观点和想法，如果你有任何问题，我很乐意帮助你。勇于创新，探索你在这里学到的技术。我可以迫不及待想看到你的进步~

了解更多ps如何做网站界面设计(ps网站页面设)相关内容请关注东辰网。