psw模版(ps模版网站)

本文主要介绍psw模板(ps模板)，下面跟着东辰网详细了解一下吧。

在这个photoshop网页设计课程中，我们将学习如何制作一个整洁简单的WordPress网页模板。我们将使用960网格系统作为模板，使网页上的设计元素更容易对齐。

预览(在创作前预览我们将要完成的作品的效果，点击图片可以放大)

创建新的psd文件

我们将使用960网格系统作为初始模板。下载名为960_grid_12_col.psd的文件，隐藏名为12_col_grid的组。

创建背景

步骤1:在图层面板中选择背景图层，右键单击重命名。这将解锁层，使其可编辑。在这里，我将背景层命名为bg。

3.选择渐变工具，设置前景色为:#efeef，背景色为#cacaca。在选项栏中选择“径向渐变”。在绘图步骤上打开一个类似这样的渐变。

设计顶部区域

拖动一条水平参考线到50px的位置作为页眉的边界线，这也是网页页眉区域位置的标志。

5添加标题和口号；选择水平文本工具，并键入网站的名称和口号。这里你可以参考我用的:风格。

“你的名字”

反走样设置:蓬勃发展。

彩色:#525252

“一些很棒的口号”

反走样设置:蓬勃发展。

彩色:#207687

创建导航

7选择水平文本工具，并根据以下设置键入导航文本(主页、关于我们、服务、投资组合和contac):。

反走样设置:蓬勃发展。

彩色:#525252

8根据下图将导航链接的文本:与文件的参考线对齐。

创建搜索框

9.现在它是时候创建一个搜索框，并把它放在导航链接的右边了。选择圆角矩形工具，半径设置为5px，然后在屏幕上画一个宽155px，高20px的图形。最后，把它放在导航链接的右边。

选择图层面板，双击圆角矩形图层，弹出图层样式对话框，添加内阴影。设置如下。

创建go按钮，创建一个新的圆角矩形，半径5px，高20px，宽30px。

12应用图层样式在go按钮作为角度为90的渐变叠加，左侧颜色为#2fa。9c1。右边的颜色#207687。

13.写一些像搜索和搜索搜索框上的白色(#fffff)。

使用自定义工具图形创建一个白色箭头，并将其居中对齐。我使用的自定义模式是箭头2，标准photoshop版本。

我们的搜索框应该是这样的，:。

在开始下一步之前，首先确保我们文件中的所有内容都井然有序。以下是我制作过程中图层面板的截图。

创建分隔线

使用线条工具，根据下面的颜色在顶部创建两条相邻的:线。

注意，在:有很多方法可以给线条添加颜色。开始种方法是可以先选好颜色再画线。另一方面，如果你已经画了线，你可以在图层样式中使用颜色叠加。你可以自己选择。

加上辅助导航

根据以下设置，使用水平文本工具键入辅助导航文本。

word:arial

文本大小:17pt

抗锯齿设置:强

彩色:#787878

确保你的分隔线在主栏和次导航的中间，如图.:。

创建焦点区域

我们将开始创建图片的焦点区域，选择圆角矩形工具创建一个宽带为335px，高度为128px，圆角半径为5px的矩形。

在图层属性中应用描边，并将填充属性设置为渐变。将渐变颜色从#31aca修改为#2b9ab2。

将新创建的层命名为photo_holder。

好吧，让我们让我们选择文件位置并添加图片。这将弹出一个对话框，让您选择将哪张图片导入画布。选择图片后，按OK。

确保你放的图片在photo_holder图层上面；如果没有，请移动它。右键单击图片并选择创建剪切模板。

将您的图片修改到合适的大小；您可以使用自由变换工具(Ctrl)。当你对尺寸满意时，确保你的图像对齐。根据上图对齐右边的布局设计。

添加设计内容

向我们的设计中添加内容，但在此之前，我们必须为我们的内容页面设置边界。如图所示拉两条水平参考线，:。

添加标题和类别。

对标题和分类使用下列设置。

标题(在我的情况下，它叫做倒立！&)

文本重量:常规

抗锯齿:斯特朗

彩色:#2197B1

目录(在我的例子中称为Photoshop设计与制):

文本大小:17pt

文本重量:常规

抗锯齿:强

彩色:#313131

段落内容

添加您的段落文本和下面的图片以供参考。

在工具面板中选择移动工具，然后选择我们的三个文本层(按住Ctrl并单击全)。

选择垂直分布选项以确保它们具有相同的间距。

创建滑动控件

It是时候创建我们的滑块了。复制我们上面为导航创建的两行，并更改它们的大小(您可以使用自由格式工)。我们把暗线做的更深，颜色改成#777575。

然后使用矩形工具创建一个小正方形(15px宽)，并应用如下渐变叠加图层样式。

在开始下一步之前，组织我们的层。参考图片，以确保各层的顺序正确。

创建内容框

33.开始时，我们需要创建边界线。将水平参考线拖动到滑移线的上边缘，留出50px的间隙，然后添加另一条参考线。

现在选择圆角矩形工具创建一个矩形，宽度为260px，高度为170px，颜色为#d0d0d0，命名为bg_1。

安装下面的图片，并将其与矩形对齐。使用移动工具将其放置在准确的位置。

右键单击bg_1图层创建图层蒙版。

选择渐变工具，将前景色和背景色分别设置为黑色和白色(或者按D键自动重置颜)。选择线性渐变，从上到下拖动，直到你对效果满意为止。

现在，创建一个阴影，复制bg_1层。重命名为阴影。放在bg_1层下面。应用颜色叠加图层样式叠加一个深灰色(#3e3e3)。

选择阴影层，选择滤镜模糊高斯模糊，设置模糊半径为5px。

使用渐变工具，调整图层蒙版如下。

向框中添加文本，您将看到我最终得到的结果。

创建一个新组，将文本拖入其中，并将其命名为content。

现在我们将对齐它。按住ctrl键，选择内容组合的bg_1图层。单击“水平居中”选项和“垂直居中”选项来定位。

现在复制两份我们刚刚制作的原始内容框。对齐它们，改变文本内容，不要别忘了在底部加一个。水平参考线。

再次检查以确保我们的层是有组织的。请参考我的图片。

创建主要内容区域

保持50px的间隔，拖动新的水平参考线。开始添加您的内容，并根据下图对齐。

让让他看起来更好。选择一个矩形选框工具。在样式选项中，选择宽度为15px、高度为30px的固定大小。设置前景色为#12197b，填充矩形(按住ctrl空格键填)。

使用相同的设置，并在页面右侧添加相同的内容。

在底部拖动一条新的水平线。添加分割线，如下图所示。

再次检查层组织结构。请参考以下内容。

创建底部区域

我们开始通过创建一条新的参考线来创建底部区域，在上部参考线下方留出50px的间隙，并重建一条水平参考线。

选择矩形选择工具。将前景色设置为白色。在屏幕上打开一个矩形选区。按ctrl键进行填充。将图层命名为1px_upp:。

你可以从d:的导航链接文本。

写下版权声明，将其向右对齐，并添加最后一条水平参考线。

调整画布大小

最后，我们需要在底部导航中留出50px的空间。只需调整画布的大小。

结束

那个这就是我们所做的。我们创造了一个干净简单的设计。

在这个photoshop网页设计课程中，我们将学习如何制作一个整洁简单的WordPress网页模板。我们将使用960网格系统作为模板，使网页上的设计元素更容易对齐。

预览(在创作前预览我们将要完成的作品的效果，点击图片可以放大)

创建新的psd文件

我们将使用960网格系统作为初始模板。下载名为960_grid_12_col.psd的文件，隐藏名为12_col_grid的组。

创建背景

步骤1:在图层面板中选择背景图层，右键单击。名称，这将解锁层并使其可编辑。这里我把背景层命名为bg。

3.选择渐变工具，设置前景色为:#efeef，背景色为#cacaca。在选项栏中选择“径向渐变”。在绘图步骤上打开一个类似这样的渐变。

设计顶部区域

拖动一条水平参考线到50px的位置作为页眉的边界线，这也是网页页眉区域位置的标志。

5添加标题和口号；选择水平文本工具，并键入网站的名称和口号。这里你可以参考我用的:风格。

“你的名字”

反走样设置:蓬勃发展。

彩色:#525252

“一些很棒的口号”

反走样设置:蓬勃发展。

彩色:#207687

创建导航

7选择水平文本工具，并根据以下设置键入导航文本(主页、关于我们、服务、投资组合和contac):。

反走样设置:蓬勃发展。

彩色:#525252

8根据下图将导航链接的文本:与文件的参考线对齐。

创建搜索框

9.现在它是时候创建一个搜索框，并把它放在导航链接的右边了。选择圆角矩形工具，半径设置为5px，然后在屏幕上画一个宽155px，高20px的图形。最后，把它放在导航链接的右边。

选择图层面板，双击圆角矩形图层，弹出图层样式对话框，添加内阴影。设置如下。

创建go按钮，创建一个新的圆角矩形，半径5px，高20px，宽30px。

在图层上应用渐变叠加的图层样式go角度为90的按钮，左边颜色为#2fa9c1。右边的颜色是#207687。

13.写一些像搜索和搜索搜索框上的白色(#fffff)。

使用自定义工具图形创建一个白色箭头，并将其居中对齐。我使用的自定义模式是箭头2，标准photoshop版本。

我们的搜索框应该是这样的，:。

在开始下一步之前，首先确保我们文件中的所有内容都井然有序。以下是我制作过程中图层面板的截图。

创建分隔线

使用线条工具，根据下面的颜色在顶部创建两条相邻的:线。

注意:，有很多方法可以给线条增添色彩。开始种，画线之前可以先选好颜色。另一方面，如果你已经画了线，使用图层样式中的颜色来覆盖它们。你可以自己选择。

加上辅助导航

根据以下设置，使用水平文本工具键入辅助导航文本。

word:arial

文本大小:17pt

抗锯齿设置:强

彩色:#787878

确保你的分隔线在主栏和次导航的中间，如图.:。

创建焦点区域

我们将开始创建图片的焦点区域，选择圆角矩形工具创建一个宽带为335px，高度为128px，圆角半径为5px的矩形。

在图层属性中应用描边，并将填充属性设置为渐变。将渐变颜色从#31aca修改为#2b9ab2。

将新创建的层命名为photo_holder。

好吧，让我们让我们选择文件位置并添加图片。这将弹出一个对话框，让您选择将哪张图片导入画布。选择图片后，按OK。

确保你放的图片在photo_holder图层上面；如果没有，请移动它。右键单击图片并选择创建剪切模板。

将您的图片修改到合适的大小；您可以使用自由变换工具(Ctrl)。当你对尺寸满意时，确保你的图像对齐。根据上图对齐右边的布局设计。

添加设计内容

向我们的设计中添加内容，但在此之前，我们必须为我们的内容页面设置边界。如图所示拉两条水平参考线，:。

添加标题和类别。

对标题和分类使用下列设置。

标题(在我的情况下，它叫做倒立！&)

文本重量:常规

抗锯齿:强

彩色:#2197B1

目录(在我的例子中称为Photoshop设计与制):

文本大小:17pt

文本重量:常规

抗锯齿:强

彩色:#313131

段落内容

添加您的段落文本和下面的图片以供参考。

28在工具面板中选择移动工具，然后选择我们的三个文本层(按住Ctrl并点)全)。

选择垂直分布选项以确保它们具有相同的间距。

创建滑动控件

It是时候创建我们的滑块了。复制我们上面为导航创建的两行，并更改它们的大小(您可以使用自由格式工)。我们把暗线做的更深，颜色改成#777575。

然后使用矩形工具创建一个小正方形(15px宽)，并应用如下渐变叠加图层样式。

在开始下一步之前，组织我们的层。参考图片，以确保各层的顺序正确。

创建内容框

33.开始时，我们需要创建边界线。将水平参考线拖动到滑移线的上边缘，留出50px的间隙，然后添加另一条参考线。

现在选择圆角矩形工具创建一个矩形，宽度为260px，高度为170px，颜色为#d0d0d0，命名为bg_1。

安装下面的图片，并将其与矩形对齐。使用移动工具将其放置在准确的位置。

右键单击bg_1图层创建图层蒙版。

选择渐变工具，将前景色和背景色分别设置为黑色和白色(或者按D键自动重置颜)。选择线性渐变，从上到下拖动，直到你对效果满意为止。

现在，创建一个阴影，复制bg_1层。重命名为阴影。放在bg_1层下面。应用颜色叠加图层样式叠加一个深灰色(#3e3e3)。

选择阴影层，选择滤镜模糊高斯模糊，设置模糊半径为5px。

使用渐变工具，调整图层蒙版如下。

向框中添加文本，您将看到我最终得到的结果。

创建一个新组，将文本拖入其中，并将其命名为content。

现在我们将对齐它。按住ctrl键，选择内容组合的bg_1图层。单击“水平居中”选项和“垂直居中”选项来定位。

现在复制两份我们刚刚制作的原始内容框。对齐它们，改变文本内容，不要别忘了在底部加一条水平参考线。

再次检查以确保我们的层是有组织的。请参考我的图片。

创建主要内容区域

保持50px的间隔，拖动新的水平参考线。开始添加您的内容，并根据下图对齐。

让让他看起来更好。选择一个矩形选框工具。在样式选项中，选择宽度为15px、高度为30px的固定大小。设置前景色为#12197b，填充矩形(按住ctrl空格键填)。

使用相同的设置，并在页面右侧添加相同的内容。

在底部拖动一条新的水平线。添加分割线，如下图所示。

再次检查层组织结构。请参考以下内容。

创建底部区域我们开始通过创建一条新的参考线来创建底部区域，在上部参考线下方留出50px的间隙，并重建一条水平参考线。

选择矩形选择工具。将前景色设置为白色。在屏幕上打开一个矩形选区。按ctrl键进行填充。将图层命名为1px_upp:。

你可以从d:的导航链接文本。

写下版权声明，将其向右对齐，并添加最后一条水平参考线。

调整画布大小

最后，我们需要在底部导航中留出50px的空间。只需调整画布的大小。

结束

那个这就是我们所做的。我们创造了一个干净简单的设计。

了解更多psw模板(ps模板网)相关内容请关注东辰网。