返回首页
当前位置: 主页 > 图形图像 > Photoshop教程 >

在Photoshop中创建时尚多彩的wordpress布局

时间:2014-06-07 22:25来源:电脑教程学习网 www.etwiki.cn 编辑:admin

作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。

本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教。

 

约定:

1、本文的软件是Photoshop CS5版本

2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图

3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数

例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77

例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定

4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。

 

接下来,就是该教程。采用逐句翻译。

 

Hello and welcome to another tutorial here on trendyTUTS.com. For today I will create a trendy and colorful wordpress layout in Photoshop. If you’re thinking to redesign your blog, you can follow this tutorial. I will try to explain step by step how you can create a similar wordpress layout in Photoshop.

大家好,欢迎来到trendyTUTS.com 访问本教程。今天我将用Photoshop创建时尚多彩的wordpress布局。如果您在想重新设计你的博客,您可以按照本教程。我将在Photoshop中一步一步讲解,您就可以据此创建一个类似的wordpress布局。

 

Please note that in this tutorial I will explain only how to design this layout in Photoshop but I will not cover the conversion PSD to XHTML.

请注意在本教程中,我只是讲解在Photoshop中如何设计此布局,但我不会讲解如何将该PSD转换为XHTML。

 

To create this tutorial I have used:

•The basic tools from Photoshop (Rectangle Tool – mostly)

•Some vector icons from our free pack

本教程我使用了:

Photoshop 的基本工具(大多是矩形工具)

我们的免费提供的一些矢量图标

 

Let’s start the tutorial. Open phootshop and create a new document. Dimensions: 1020 x 1710px

让我们开始教程吧。打开photoshop,并创建一个新文档。尺寸: 1020 x 1710px

image

 

Select paint Bucket Tool and fill your document with #d9cb9e.

选择油漆桶工具并使用 #d9cb9e 填充您的文档。

 

Step1 – Creating the top area

Select rectangle tool create this 2 rectangles. For the rectangle on the back I have used this color: #d9b94c and for the top one I have used this color: #fed95d, then with Type Tool I will write “trendyTUTS” and I will apply this layer styles:

步骤一——创建顶部区域

选择矩形工具创建2个矩形。后面的矩形(90,22,231,77),颜色: #d9b94c ;前面的矩形(74,38,231,77),颜色: #fed95d 。用文字工具写"trendyTUTS",然后应用如下图层样式:

image

 

Here’s my result for logo:

这是我做的logo的样子:

image

 

Next on the right side I will create the search bar. Select Rectangle Tool and create 2 similar shapes. Dimensions 324x24px. For the back one I have used this color: #455352 and for the top one, this color: #738483.

下一步我将在右边创建搜索栏。选择矩形工具,创建 2个矩形。尺寸 324x34px。后面的矩形(530,54),颜色: #455352 ;前面的矩形(526,60),颜色: #738483 。

 

Having Rectangle Tool selected I will create again 2 more shapes . Dimensions: 51x34px. For the back shape I have used this color: #962418 and for the top one, this color: #dc3522. With type tool I will add some text, and here is my result for the search bar

再用矩形工具创建2个矩形,尺寸:51x34px。后面的矩形(862,54),颜色: #962418 ;前面的矩形(856,60),颜色:#dc3522 。用文字工具添加一些文本,下面是我做的搜索栏的样子

image

 

Step 2 – Creating the navigation

First I select Rectangle Tool and I will create this 2 shapes. Dimensions: 949x54px. For the back shape I have used this color: #738483 and for the top one: #374140. For the top one I will apply this layer styles:

步骤 2——创建导航

首先我选择矩形工具,创建2个矩形。尺寸: 949x54px。后面的矩形(43,155),颜色: #738483  ;前面的矩形(36,162),颜色: #374140 。前面的矩形应用如下图层样式:图中的颜色: #858585 。

image

 

Next I will select Rectangle Tool and I will create this red shape: #dc3522

接下来我将选择矩形工具,创建红色的矩形(86,170,136,68),颜色:#dc3522。

 

Then I will select Pen Tool and I will create this triangle (in order to create a nice 3d effect for our red shape). Color use for this triangle: #962418

然后,选择钢笔工具用颜色: #962418 创建直角三角形 (以便使我们红色的矩形有好的 3d 效果)。

如下图所示:

image

 

With type tool I will add the links for navigation. Here is my final result:

用文字工具添加导航链接的文字。下图是最后的结果:

image

 

Step 3 - Creating the featured area

First I will select Rectangle Tool and I will create this 2 shapes. The first one (the bluish one) it will be used for Featured Area and the second one (white one) will be used later for the content area.

步骤 3-创建特色的区域

首先我将选择矩形工具,将创建2个矩形。第一个 (浅蓝(#3e5662)的那个) 将用于特色区(60,260,925,328),第二个(白色的(#dfdccd)那个) 稍后将用于内容区域(60,588,925,973)

 

Next on the top of our bluish shape I will create another one. Dimensions 925×328, color: #567989, I will apply this layer styles, also:

接下来,在顶部的浅蓝色的矩形上,我要创建另一个矩形(37,283),尺寸为925×328,颜色: #567989 ,我将添加如下的图层混合样式

image

image

 

You should have something like this:

你应该完成如下的样子:

image

 

Next on the left side I will add an image and with Ellipse Tool I will create 3 circles at the bottom. Basically we will integrate a jquery slideshow when we will code this template in XHTML. I remember you that you can download this template and you will be able to acces the PSD to XHTML tutorial only if you will become a premium member.

接下来在左侧添加图像并使用椭圆工具在底部创建3个圈。基本上,当我们编码此模板到XHTML时,我们将使用jquery进行幻灯片放映。我允许你下载此模板,当你将成为高级成员时,您能够获得该PSD模版转换到XHTML的教程。

image

 

Because this will be a wordpress blog, we will need to create a sidebar also. We will create them as usual, on the right side. Select Rectangle Tool and create a similar shape. Dimensions: 275x400px, color: # b1ac2a, then apply this layer styles:

因为这是一个 wordpress 博客,我们需要创建一个侧边栏。我们将在右侧和往常一样创建它们。选择矩形工具,创建一个矩形(665,226),尺寸: 275x400px,颜色: #b1ac2a 。然后应用此图层样式,图中的颜色: #e4e041 。

image

 

My result so far:

到目前为止的结果:

image

 

Next with Pen Tool I will create a triangle to have a nice 3d look. I have used this color: # 726f1b

下一步使用钢笔工具绘制一个三角形,为了有好的 3d 外观。颜色: #726f1b

image

 

I will select Rectangle Tool and I will create a yellow rectangle. Color: # fed95d

我用矩形工具,创建一个黄色的矩形(650,244,283,45),颜色: # fed95d

image

 

And again with Pen Tool I will make a triangle to create a nice 3d look. Color used: # 9d873e

并再次使用钢笔工具的绘制三角形,达到好的3d外观。用颜色: # 9d873e

image

 

With Type Tool I will add the text and some banner ads (because this area is for advertisment)

My final result for featured area:

用文字工具添加文本和一些横幅广告(因为这个区域是为广告)

最终的特色区域如下:

image

 

Step 4 – Creating the content area

First I will select Rectangle Tool and I will create this shape. Dimensions: 925X417px, color: # ece9df

步骤 4 – 创建内容区域

首先我将选择矩形工具,创建矩形(37,626)。尺寸: 925X417px、 颜色: # ece9df

image

 

------分隔线----------------------------
标签(Tag):photoshop photoshop源代码 photoshop技巧 photoshop实例教 photoshop基础教
------分隔线----------------------------
推荐内容
猜你感兴趣