Photoshop设计教程之制作WordPress新闻博客模

时间:2020-11-27 佚名　发布人气:0

通常在第一次制作新闻博客模板，很难把握方向。这篇教程将为你提供如何在Adobe Photoshop中制作WordPress新闻博客主题的参考。该主题包括页眉区，图片轮换区域（包含特色文章，最近消息，按照分类显示，侧边栏，widget）。如果你是初学者，跟着本教程一步一步来就可以。如果你有一定基础，亦可从本教程中获得新的收获。

点击图片，进行全屏预览。

本教程需用到的资源

· Search

· 社交图标

第1步：创建文档

在PS中创建一个1200像素 x 1700像素的文档

标尺工具在本教程中非常有用，使用之前要确保标尺和参考线已经显示

• 标尺快捷键：Ctrl+R

• 参考线快捷键：Ctrl +

使用标尺工具时，信息面板也非常重要，用标尺进行测量时，相关信息会先在在信息面板。如果没有显示，你可以到窗口（Windows）勾选上信息（Info）这一选项。

第2步：背景制作

用#081010颜色填充背景图层。接下来，创建一个网格图案。该图案的文档大小为20像素 x 20像素，背景为透明。

用铅笔工具填充#ffffff颜色，创建一个如图所示的图案。

进入编辑（Edit）-创建图案（Define Pattern）。打开油漆桶工具（Paint Bucket Tool），在下拉列表中选择“图案”（pattern），用之前创建好的图案填充画布上。要确保图案是放在一个新的图层。

填充图案之后，将图层模式修改为柔光（Soft Light），不透明度（Opacity）改为50%。

第3步：页眉制作

页眉（header）区域包含Logo，导航条，搜索栏。为了做到井然有序，分别创建3个文件用来放置logo，导航条和搜索栏的图层文件。制作一个基本形状容纳页眉里的所有元素。选用矩形工具（Rectangle Tool）创建一个960像素 x 50像素的矩形。可用任何颜色填充，因为稍后我们会对其应用图层样式。

应用图层样式

· 渐变叠加颜色：#353535， #505050

描边颜色： #081010

Logo

Logo字体选用Helvetica Black，大小为24pt。

应用图层样式

· 投影（颜色）： #000000

· 渐变叠加（颜色）： #92b4b5， #ffffff

导航条

导航条包含链接和分割线。各个链接与左右的分割线保持18像素的距离。导航条的位置离Logo标志距离为208像素，用标尺工具（Ruler Tool）进行定位。

用矩形选区工具（ Rectangular Marquee Tool ）在离Logo标志208 像素处创建1像素的矩形选区。接下来用渐变工具（Gradient Tool）选择从前景色渐变到透明，前景色为#4f4f4f，最后由下往上在该选区拉渐变色。

用直线工具（Line Tool）创建另外一条1像素的直线，填充颜色为#081010

链接与左右分割线的距离应为18像素，链接的文本内容选用大小为14pt的 Helvetica Roman字体。

在制作导航条时一定要注意链接与分割线之间的18像素的距离。导航条链接内容有world，business，sports，tech，web，science。完成上述操作之后，复制文本层，将文本颜色改为#1b1b1b，并上移1像素。

余下的空间用来放置搜索栏。

搜索栏

用圆角矩形工具（Rounded Rectangle Tool）创建一个半径为20像素的形状，颜色为#363636，放在图示位置。

应用图层样式

· 内阴影（颜色）： #4f4f4f

· 投影（颜色）： #000000

最后一步添加搜索图标，变换成合适大小放在图示位置。

第四步：图片轮换区域

图片轮换区域包含图像预览，缩略图，标题，内容，read more按钮以及轮换控制键。首先，创建一个大小为620像素 x 1305像素，颜色为#e1eaea的矩形，做安放内容之用。

在基本图层上添加噪点。进入滤镜-转换为智能滤镜，然后再进入滤镜-杂色-添加杂色-数量-1

在下图所示位置分别放上大小为300像素 x 200像素的预览样图和60像素 x 60像素的缩略样图。（图片的摆放距离如图上的红体字所示）

应用图层样式

· 描边（颜色）： #4e4e4e

接下来，我们为预览图和缩略图分别添加标题，内容以及read more 按钮。文字的字体参数参见下图的红体字部分。

制作一个80像素 x 25像素的矩形作为read more按钮，放在下图所示位置。

新建图层，用铅笔工具（Pencil Tool）在该图层上描出下图所示的箭头形状。

在上一步的箭头图层中使用蒙版工具，在箭头图层载入选区。然后适用快捷键Ctrl + Shift + I 进行反选（Inverse），选中矩形图层，然后点击下图中fx图标前的蒙版图标。完成之后，隐藏箭头图层或是删掉。

将矩形的颜色改为#fea702

应用图层样式

· 投影（颜色）： #000000

· 内阴影（颜色）： #ffffff

用文字工具在read more按钮的正中位置上添加文字，字体名为Helvetica Roman，字体大小12pt，字体颜色#fffffff。完成之后，复制该形状图层并上移1像素，将颜色修改为：#cb8500.

最后一项操作是添加分割线。选用文本工具，输入“--------”内容作为分割线，填充颜色为#4e4e4e，复制文本层（写了很多“-----”的这层），改变原始图层颜色为#ffffff。

第5步：Latest News区域制作

Latest news区域包含featured image，a categories，ribbon，post title，content和read more按钮。在分割线下方40像素处，写上Latest News，字体选用Helvetica Roman，大小18pt，颜色#141e1e。接着在下方的图片展示区域放上275像素 x 120像素的样图。

用矩形工具创建一个颜色为#fea702，100像素 x 15像素的形状，用文字工具在形状的中央位置写上文字BUSSINESS，字体为Helvetica Roman，大小8pt，颜色#ffffff。

应用图层样式

· 内阴影（颜色）：#ffffff

复制文本图层，并将原图层颜色改为#c88300。上移文字图层1像素。选中刚刚制作好的几个图层（矩形图层，两个business文字图层），按住快捷键Ctrl+T调出变换操作，如图旋转45°。

在预览图片中选定一个选区，选择矩形图层，应用图层蒙版。看起来如下图。

使用文字工具添加上下图的内容。相应内容的字体名，字体样式，字体大小及字体颜色见下面中的红色文字部分。

将本步骤制作好的图层进行分组，取名为post。复制该组，并整体右移30像素。将飘带的颜色修改为#8170e8，并修改文字内容。（译者注：其实这里的操作就是一个整体复制的过程，因为内容图示版面相同，所以创建文件夹，进行整体复制，然后进行局部修改）

第6步：文章分类

此处文字的参数与recent news的字体参数一样。在下图所示的展示区域放上60像素 x 60像素的样图，并为其添加上类别名。（注意下图所示的红色字体所显示的距离）

用文字工具添加下图所示的文字内容。文字的颜色和字体与latest news中保持一致。

将以上制作好的图层进行分组，复制该组，放在下图所示的相应位置。

将题目分类分组。复制3份，放在下图所示位置。

第7步：侧边栏制作

侧边栏包含社交网站链接，widget，tabs和广告。首先制作基本图层，用矩形工具创建一个颜色为#353535的矩形，重复在基本图层的内容区域使用智能滤镜和杂色。

社交网站链接

创建一个颜色为#4e4e4e，340像素 x 50像素的矩形。

使用直线工具创建1像素的直线，放在下图所示位置。

添加Follow us文本，字体选用Helvetica Roman，大小为18pt，颜色#ffffff。（添加1像素的投影，不透明度为75%）

打开事先准备好的社交网络图标，按照下图所示位置放置。使用快捷键Ctrl+T进行变换大小操作，直到大小合适为止，为各个图标添加1像素的投影。

About Us Widget

widget包括缩略图，页眉，内容，read more按钮。首先，创建一个颜色与放社交图标区域一样的基本图层，大小340像素 x 210像素。页眉的文本字体格式与社交图标区域不变。

创建大小为90像素 x 90像素，颜色为#121b1b的正方形。放在图示About Yana的下方。

用文字工具在之前的方形右边添加颜色为#cccccc的文字，并加上1像素的头像。另外，复制之前制作的read more按钮，将其颜色改为#616161，放在图示位置。

Tabs

tabs包含Most Recent posts和Most Popular两部分内容。创建一个125像素 x 50像素的矩形。在该矩形放上Most Recent的字样，字体为Helvetica Roman，大小14pt，颜色#fffffff，并添加1像素的投影。复制这两个图层，将文本改为Most Popular。