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

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

约定:

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

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

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

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

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

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

This is an intermediate level tutorial and some may seem to be tricky, but why not have a try? Let's get the ball rolling

这是一个中级水平的教程和看起来可能是棘手的,但为什么不试试呢?让我们滚动我们的鼠标滚轮

Step 1

步骤1

Let's start at the beginning. Just fire up your Photoshop and create a new document (CTRL+N). See the parameters below.

让我么开始教程。打开你的PS并按照下图的参数创建新文档(Ctrl + N)

Step 2

步骤2

Now you should add some pattern to your background.

现在给你的背景添加一些图案

新建4px*4px的文档,如下图所示

按照下图用铅笔工具着色,左上到右下的对角线的颜色: #efeeef;右上到左下对角线的颜色,上: #dfdddf,下: #e7e6e7

点击:编辑 > 定义图案,定义成图案

矩形工具新建一个矩形(0,0,1000,1170)

Layer Style -> Blending options-> Pattern Overlay. Look at the screenshots below:

点击:图层 > 图层样式 > 混合选项 > 图案叠加。按照下面的截图设置

Step 3

步骤3

We want to create an awesome design, yeah? That's why we should use a grid system for designing. You can easily create a solid visual and structural balance of websites with grid-based designs.

我们将创建一个很棒的设计,不是吗?这就是为什么我们要使用网格系统设计。您可以轻松地创建基于网格的设计的结构平衡和实在的视角的网站。

Put some grids to your design with intervals of 60px and 20px.

在你的设计中添加一些参考线,间隔60px和20px

垂直参考线的坐标分别是20、30、90、110、170、190、250、270、330、350、410、430、490、500、510、570、590、650、670、730、750、810、830、890、910、970、980

Step 4

步骤4

So... now it is time to design the menu of your future website. Use the Rounded Rectangle tool to create it (radius - 3px). The width of your menu is 940px, the height is 34px.

那么……现在是设计你的未来的网页的菜单的时候了。用圆角矩形工具创建一个圆角矩形(30,53,940,34)(半径—3px)。你的菜单的宽度是940px,高度34px

I think that it is an easy task to create a website's menu. To be sure, look at the images below:

我想这是非常简单的过程去创建一个网页的菜单。请相信,参看下图:

To make this menu more eye-candy, go to the Blending Options -> Drop Shadow. Use the settings that you can see on the screenshots:

让我们的菜单看起来更养眼,点击:混合选项 > 投影。按照下面的截图设置参数,投影的颜色: #47493c

Blending options-> Inner Shadow

混合选项 > 内阴影

I chose the #6bafff color for this menu bar.

我给这个菜单选择的颜色: #6bafff

Step 5

步骤5

Let's add some text to our menu. Use the Horizontal Type Tool for it.

让我们用水平文字工具添加菜单上的文字(分别是HOME、ABOUT、CONTACT、BLOG、PORTFOLIO)

You can create your design with any font you like. I used the Aller [bold] font. The size is 14px.

你可以在你的设计中使用任何你喜欢的字体。这儿我用的是字体是Aller、粗体。字号:14px

给菜单文字添加如下的图层样式,投影的颜色: #010101

Step 6

步骤6

All the menu buttons are links and the designer should show how their hover state looks like. So, create are rectangle (the color that I've used for it is #5a90e5).

所有的菜单按钮都是链接,设计者要展示菜单悬浮状态的样子。所以,创建矩形(281,53,68,34)(我用的颜色: #5a90e5)

并添加如下的图层样式,内阴影的颜色: #312d20

Our result:

我们的成果:

Step 7

步骤7

Every decent website has a search form. Let's create it too :)

每个得体的网页都有一个搜索表单。我们也创建一个

Use the Rounded Rectangle tool (radius - 3px) to create a search form with the following dimensions: 124px and 26px

用圆角矩形工具(半径:3px)创建一个搜索表单(808,17,124,26),尺寸:124px*26px

添加投影的图层样式

Add some inner shadow: Blending Options-> Inner Shadow

添加一些内阴影:混合选项 > 内阴影

Blending Options-> Color Overlay, color- #5a90e5

混合选项 > 颜色叠加,颜色: #5a90e5

Use our favorite Photoshop tool one more time :) Create one rectangle with dimensions 41px and 32px

再次使用PS中的历史工具,创建一个圆角矩形(929,14,41,32),尺寸:41px*32px

Blending Options -> Drop Shadow

混合选项 > 投影,颜色: #47493c

Blending Options -> Inner Shadow

混合选项 > 内阴影

Blending Options -> Color Overlay (color - #6bafff)

混合选项 > 颜色叠加(颜色: #6bafff)

Now it is time to use icons that we've downloaded at the beginning of this tutorial. Open the "Linecons Free - Vector Icons Pack and find the search icon there. Just apply some bells and whistles to it.

现在是用之前下载的图标了。打开Linecons Free - Vector Icons Pack,找到search图标并添加一些花里胡哨的样式

Here is our final result for the search form:

这是搜索表单的最终结果:

Step 8

步骤8

Social media connections are very useful and important for every website. That's why today we'll also learn how to create a simple Facebook button. Again with the help of the Rounded Rectangle tool (radius - 3px), we'll create a button

对于每一个网站来说,社会媒体链接是非常有用和重要的。这就是为什么今天我们还将学习如何创建一个简单的 Facebook 按钮。再次用圆角矩形工具(半径:3px) ,创建一个按钮(40,16,86,26)

Then use the Rectangle tool (rounded) to create a square (holding the Shift button) with the following size – 16px

然后用矩形工具(或者是圆角矩形工具)创建一个正方形(按住Shift键),尺寸:16px

Choose the Pen Tool and cut off half of this square.

选择钢笔工具然后切掉这个正方形的一半。注:这一步用直接选择工具比较简单,用直接选择工具选择正方形的右下角的点,按Delete键删除,就得到一个三角形

Edit-> Transform->Rotate to move this triangle and place it on the left side of the rectangle

点击:编辑 > 变换 > 旋转,旋转这个三角形,并移动它到矩形的左侧

Select all your "Facebook" layers and merge them (Ctrl+E).

选择所有的Facebook图层,并合并它们(Ctrl + E)

给它添加投影的图层样式

Blending Options-> Inner Shadow:

混合选项 > 内阴影

Blending Options-> Color Overlay (#c1cac5 )

混合选项 > 颜色叠加(#c1cac5)

Now add the "follow" text to our Facebook button and play with its blending options.

现在在Facebook按钮上添加follow文字,并添加如下的图层样式。字体:Aller 粗体,字号:14px

Try to create your Facebook logo for this button. For example, you can create the "F" letter, decorate it with a blue color (#5a90e5).

给你的按钮添加Facebook LOGO。举例来说,你可以创建字母F,给它上一个蓝色(#5a90e5)

Play with Blending options (add a white shadow)

添加如下的图层样式(添加一个白色的阴影)

WOW! We did it :) Look at the final result of our menu bar:

喔!我们做完了。看看我们最终完成的按钮栏

Step 9

步骤9

Create a new shape: width 940px, height 372px

创建一个新的形状(圆角矩形,半径:3px,(30,102,940,372)):宽940px,高372px

As always, add some shadow:

同样,添加一些投影,投影的颜色: #47493c

And a border: Blending Options-> Stroke (20px, color- #6bafff)

并添加一个边:混合选项 > 描边(20px,颜色: #6bafff)

Step 10

步骤10

To create nice slider, we should add some images to it. With the help of the Ctrl+Alt+G shortcut,create a clipping mask.

为了创建漂亮的滑动栏,我们要添加一些图片。用快捷键Ctrl + Alt + G,我们创建一个剪贴蒙版

Step 11

步骤11

Use a bunch of free icons again. I've selected the following icons: "settings","bubble", "photo","world"

再次使用那一堆的免费图标。我选择的是下面这些图标:settings,bubble,photo,world

Add them to our design (don't forget to use the grid), distance – 180px

把他们添加到我们的设计中(别忘了用参考线),距离:180px

Step 12

步骤12

Add some text. You should use the same font that you used for your menu bar. Set the font size to 30px.

添加一些文字。你可以使用和菜单栏同样的字体。设置字号为30px

Play with Blending Options: add a white shadow, color overlay ( #6aaefd) and an inner shadow.

给它添加混合选项:添加白色的投影,颜色叠加( #6aaefd)和一个内阴影

Copy the styles of this layer and add it to all your icons:

复制该图层样式并添加到所有的图标和文字

WOW! Look at this amazing result!

喔!看看这个疯狂的结果

Step 13

步骤13

Fill these four columns (width of each - 240px) with some "loremipsum" text. It is better to add a different text to every column.

给这些四列(每列宽240px)添加一些loremipsum文字。最好每列的文字都不一样。文字的颜色: #4c1b33,并添加投影的图层样式

Step 14

步骤14

Create a Read More button with the help of the tools that we've used before.

用之前使用过的工具(圆角矩形工具)创建一个Read More按钮(30,692,125,35)

Blending options-> Inner Shadow, Drop Shadow, Color Overlay (#919392).

混合选项 > 内阴影,投影,颜色叠加(#919392)

同样的,添加另三个按钮,分别是(240,692,125,35)、(510,692,125,35)、(750,692,125,35)

Step 15

步骤15

Add the "Read more" text to our button.

给我们的按钮添加Read more文字,并添加投影和颜色叠加的图层样式

Step 16

步骤16

Now we should separate the main content of our future website. Create a 1px line and add styles of your "read more" layout to it.

现在我们应该把我们未来的网站的主要内容分开。创建一个 1px 的直线(30,747,940,1),并将您的Read more图层的图层样式添加到它(粘贴图层样式)。

为了让分割线更加明显一点,还要添加内阴影的图层样式

Step 17

步骤17

Your next block can be a section entitled "Partners" or you may want to showcase your latest blog posts.

你下一个部分可以是一段题为Partners的内容或可能想要展示的最新的博客文章。

Use the Rounded Rectangle tool to create a square (hold down the Shift button).

用圆角矩形工具创建一个正方形(按住Shift键)(30,768)

Radius - 3px, width and height - 138px.

半径:3px,宽和高:138px

Go to Blending options -> Stroke to create a border with the settings below: Size- 20px, color #919392

点击:混合选项 > 描边,按照后面的参数设置描边:尺寸:20px,颜色: #919392。再添加投影样式。

Copy and paste this element 5 times :) Place these squares with the interval of 20px.

复制粘贴这个对象5次,利用间隔20px的参考线摆放这些正方形

Step 18

步骤18

With the help of a clipping mask, insert the image into the square.

为了创建剪贴蒙版,把图片插入到正方形的地方

As you can see, you really can use this block for all sorts of purposes. Result:

如你所见,你可以尽情的使用这个区块。结果:

Step 19

步骤19

The footer of the website is as important as the header, if not more so. Ask yourself, "What do you want your visitors to do when they reach the bottom of the page?" The answer you come up with will be a great starting point for designing your website footer.

网页的页脚和头部区域同样重要,就是如此。问问自己,“你希望当你的访问者到达页面的底部的时候做什么?”。你的答案就是你设计页脚的伟大起点。

Now it is time to design a cool footer for our cute website layout. Let's make it bright :)

是时候来设计我们可爱的网站布局的很酷的页脚。让我们使它明亮。

Add some gradient, for example #3a8df1 - #6bafff, and inner shadow

添加一些渐变,例如: #3a8df1 - #6bafff,和内阴影

Step 20

步骤20

We'll add three blocks into our footer: Quick links, About Us and Follow Us

我们将要在页脚添加三个区块:Quick links,About Us和Follow Us

Use the Arial Regular font for titles (30px) and add styles as on the screenshots below:

给标题用Arial Regular字体(字号:30px),并按照截屏添加图层样式(颜色:白色)

Use the Arial Regular font for the text in the About Us section (12px).

给About Us部分用Arial Regular字体(字号:12px)添加文字

The text for the Quick Links section - 22px.

Quick Links部分的文字(字号:22px)

Put some standard icons into the Follow section - RSS, Google Plus+ and Twitter

在Follow部分添加一些标准图标:RSS、Google Plus+和Twitter

Woohoo! We did it! The final result of our tutorial:

喔!我们完成啦!这是我们教程的最终效果

后记:

这个网页的风格是清爽,没有采用什么特殊的技术,仅仅是用了一些基本的技术(图层样式、剪贴蒙版等)。但就是这些简单的搭配,搭出了不一样的清爽。在翻译的过程中,对某些参数也进行了一些的修正,使其看起来更加合适整体风格。

PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局的更多相关文章

  1. PS网页设计教程XXIX——如何在PS中设计一个画廊布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  2. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  3. 如何在HoloLens中创建一个2D的Hello World程序

    注:本文提及到的代码示例下载地址 > How to build an "Hello World" 2D app in HololLens. HoloLens 是微软的一款MR ...

  4. JavaWeb学习(三) : 如何在 Eclipse 中创建一个Web 项目并成功运行?

    前置条件 : 1.确保已安装 Eclipse.Tomcat 服务器安装包 2.jdk.环境变量都已配置成功. 3.注意在安装 Eclipse 时一定要选择第二个有 Web 项目的进行安装, 不然安装成 ...

  5. PS网页设计教程——30个优秀的PS网页设计教程的中文翻译教程

    PS网页设计教程--30个优秀的PS网页设计教程的中文翻译教程   作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作 ...

  6. 22个Photoshop网页设计教程网站推荐

    这些网站都会经常更新一些优秀且高质量的Web界面设计教程.如果你热爱网页设计并且经常搜集各种界面设计教程,那么你一定要把下面这些网站收藏起来. 您还可以参考以下网页设计相关教程及资源:<Web ...

  7. (转)如何在Linux中统计一个进程的线程数

    如何在Linux中统计一个进程的线程数 原文:http://os.51cto.com/art/201509/491728.htm 我正在运行一个程序,它在运行时会派生出多个线程.我想知道程序在运行时会 ...

  8. Android DevArt5:如何在Android中创建多线程?

    本篇内容: 如何在Android中创建多进程?查看进程的三种方式有哪些? 多进程模式的运行机制?- 演示了多进程出现问题中的两种情况: 静态成员失效 Application多次创建 IPC基础概念介绍 ...

  9. sitecore系统教程之体验编辑器中创建一个项目

    您可以使用体验编辑器创建新项目并将其直接插入网页. 注意 如何在Sitecore中创建项目可能会有所不同,具体取决于您拥有的安全角色以及网站的设置方式. 要插入新项目: 在体验编辑器中,导航到要添加新 ...

随机推荐

  1. Mysql学习笔记(十)存储过程与函数 + 知识点补充(having与where的区别)

    学习内容:存储程序与函数...这一章学的我是云里雾里的... 1.存储过程...   Mysql存储过程是从mysql 5.0开始增加的一个新功能.存储过程的优点其实有很多,不过我觉得存储过程最重要的 ...

  2. [Tool] 源代码管理之Git

    本节目录 什么是Git 什么是GitHub 安装Git GitHub之Repository GitHub之托管页面 常用Git 命令 什么是Git 由于现在的开发多人协同办公,因此出现源代码管理工具 ...

  3. 数据库表被锁表,select会等待。

    SELECT * FROM dbo.Table_1 WITH(NOLOCK) 这样就可以不用等待,但数据读的是被锁之前的数据,表被锁了,肯定会有对表的update,delete操作. 如果对数据的准确 ...

  4. 从零开始学习Linux (cd命令)

    上一篇博客中提到,我们学习命令大多都要参考 --help 这个选项.但是cd命令并没有这个选项. 我们可以通过 help cd 来查看cd的使用方式.其实cd命令挺简单的,它的作用是进入文件夹,也就是 ...

  5. 为什么不推崇复杂的ORM

    上一篇文章写完,回复的人很多,有的说的很中肯,有的貌似只是看到文章的标题就进来写评论的!还有人问为什么我要屏蔽掉[反对]按钮,因为谁写文章都是为了分享,都在说出自己的心得体会.不过由于大家遇到的项目, ...

  6. Android Studio使用教程(一)(转)

    今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...

  7. NullPointerException at android.widget.AbsListView.obtainView at android.widget.ListView.makeAndAddView

    使用ExpandableListView的时候,报如下错.网上搜索发现原来是在CommonNumberQueryAdapter的getGroupView()方法里返回的是null,注意细节哦!!! 1 ...

  8. [ASP.NET MVC] Model Binding With NameValueCollectionValueProvider

    [ASP.NET MVC] Model Binding With NameValueCollectionValueProvider 范例下载 范例程序代码:点此下载 问题情景 一般Web网站,都是以H ...

  9. asp.net mvc Html.BeginForm()方法

    Html.BeginForm()方法将会输出<form>标签,而且必须以using包起来,如此便可在using程序代码最后退出时,让asp.net mvc帮你补上<form>标 ...

  10. 对getElementsByTagName("*")获取全部元素的总结

    var all=document.getElementsByTagName("*")      //获取整个页面的标签元素 alert(all.length);           ...