PS学习记录2--PS网页设计教程XII——在PS中创建专业的web2.0的网页布局 第一章
作为编码者,美工基础是偏弱的。我们可以参考一些成熟的网页PS教程,提高自身的设计能力。套用一句话,“熟读唐诗三百首,不会作诗也会吟”。
本系列的教程来源于网上的PS教程,都是国外的,全英文的。本人尝试翻译这些优秀的教程。因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教。
约定:
1、本文的软件是Photoshop CS5版本
2、原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图
3、原文中有些操作没有给出参数。本人在反复测试的情况下测定了一些参数,以红色的文字显示。有些错误的参数,直接以红色文字显示正确的参数
例如:(90,22,231,77),表示矩形的左上角的坐标是(90,22),宽231,高77
例如:(90,22),表示矩形的左上角的坐标是(90,22),矩形的其他两个参数教程里已经指定
4、在教程的最后会附上本人的心得。有些是对教程中的一些步骤的优化等。
In this Photoshop tutorial we’re going to learn how to create a web 2.0 layout, As we go through the tutorial we’ll deal with so many Photoshop techniques. Seems kind of long? that’s because it’s very detailed. I assure you’ll find easy to follow and to get done, just give it a try!
在本PS教程中,我们将学习如何创建web 2.0的布局,随着我们通过本教程我们会学习很多PS技巧。似乎太长了吗?这是因为它非常详细。我保证你照着做会发现很容易,试试看!
Step 1
To keep everything aligned we’re going to use 960s Grid System (Get it from here) once downloaded open up the file “960_grid_24_col.psd”.
We’ll start by creating layer from background, right-click on the layer “Background”, then choose Layer From Background. and call it “bg”.
步骤1
为了对齐元素,我们打算用960s Grid System(从这获得),下载后打开960_grid_24_col.psd文件
一开始从背景创建图层,在Background上右键,选择背景图层,命名为bg
由于本翻译不使用960s Grid System,故本步改为新建文档,尺寸:1020px*1800px
Step 2
As we’ll use guides so much, we need to view our Rulers. In order to do that go to View > Rulers.
步骤2
我们需要参考线,我们需要显示我们的标尺。为此,点击:视图 > 标尺
Step 3
We need to set lower borders for the header area, therefore we’ll drag a new horizontal guide after 100px. go to View > New Guide, Position: 100.
步骤3
我们需要设定头部区域的边框,为此在100px的位置拖动一条水平的参考线。点击:视图 > 新建参考线,位置:100
Step 4
Let’s create our header. we’ll start by creating a selection of 1020x100px. then click Shift+Backspace to fill it (with any color just for now).
步骤4
现在创建头部区域。我们首先创建一个1020px*100px的选区。然后按Shift+Backspace填充(用当前的前景色填充)
建议:不太常见的做法,一般用矩形工具创建一个矩形(0,0,1020,100),区别是矩形工具会新建一个图层
Give it a Gradient Overlay according to the following image:
按照下图设置矩形的渐变叠加的图层样式
渐变编辑器的颜色:#161616,#202020,#131313
Now call this layer: “header_bg”.
命名此图层为header_bg
Step 5
Write your Web site title with these settings:
- Font Family: Rockwell (get it from here)
- Font size: 30px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: Won’t matter, cause we’re gonna give it a Gradient Overlay
步骤5
按照下面的设置,用文字工具添加网站的标题
- 字体:Rockwell
- 字体大小:30px
- 字体样式:Regular
- 消除锯齿方式:平滑
- Color: 不需设置,因为我们要添加渐变叠加
Now add a Gradient Overlay to your text with the following settings:
现在按照下面的设置对你的文字添加渐变叠加
渐变编辑器的颜色:#528037,#84ac49
To align your Web site title with the header background; Select your title layer and “header_bg” layer then click on Align vertical centers.
为了对齐网站的标题在头部的背景,选择你的标题图层和header_bg图层,然后点击垂直居中对齐(点击:图层 > 对齐 > 垂直居中)
Step 6
Write your navigation text with these settings:
- Font Family: Arial
- Font size: 20px
- Font weight: Regular
- Anti-aliasing setting: Smooth
- Color: #ffffff
步骤6
按照下面的设置添加导航文字:
- 字体: Arial
- 字体大小: 20px
- 字体样式: Regular
- 消除锯齿样式:平滑
- 颜色: #ffffff
Create a rounded rectangle which will represent a hovered link. it should be about 65x35px size – 5px radius, (fill it with any color for now).
对悬停的链接添加一个圆角矩形(551,33)。尺寸:65px*35px,半径5px,(填充任意颜色)
Give it a Stroke and Gradient Overlay according to the following image:
按照下图对圆角矩形设置描边和渐变叠加的图层样式:
描边的颜色: #9dca5d
渐变编辑器的颜色:#528037,#84ac49
Before we move to the next step, just make sure to keep your layers well-organized, Here’s how mine looks!
在做下一步之前,要确保图层的组织严密(将这些图层归并到header组),这里是我做的样子 !
Step 7
It’s time to create the featured designs area. we’ll start by setting our lower borders by adding a new horizontal guide after 430px.
步骤7
该创建特色区域了。为了设置边框,在之前的水平参考线下方的430px处添加一条水平参考线。
Create a selection of 1020x430px as a background for the featured designs area. and fill it with any color.
给特色区域添加背景,创建一个1020px*430px的选区。用任意颜色填充。
建议:用矩形工具新建一个矩形(0,100,1020,430)
Then give it a Gradient Overlay with the following settings:
然后按照下图设置渐变叠加:
渐变编辑器的颜色:#528037,#84ac49
Now let’s create the glaze effect! create a selection of 1020x120px, fill it with any color.
现在创建亮釉效果!创建一个选区1020px*120px,用任意颜色填充。
建议:用矩形工具新建矩形(0,410,1020,120)
And then add a Gradient Overlay. use the image below for reference.
然后按照下图设置渐变叠加
渐变编辑器的颜色: #81aa48,#84ac49
Now reduce this layer opacity to 40%
调整该图层的不透明度为40%
Step 8
Let’s add some touches! with the Single Row Marquee Tool create a 1px selection and align it like the following:
现在添加一些润色!用单行选择工具创建一个1px的选区,如下对齐
Set your foreground color to #acd86e then click on Shift+Backspace to fill it; make sure to use foreground color as a filling option.
设置你的前景色为#acd86e,然后按Shift+Backspace填充选区;确保填充模式是前景色。
建议:用直线工具创建一条直线(0,100,1020,1),颜色: #acd86e。
I guarantee you’ll have perfect pixel details
我保证你会有完美的单像素元件
We’re done creating the background elements. so make sure to give them ideal names, organize them, and group them together.
我们完成背景元素。一定要给他们理想的名称,组织他们,把他们归并到一组。
Step 9
Let us be more accurate! drag two new guides according to the following image
步骤9
为了更精确的定位!如下图拖动两条参考线(分别在之前的两条参考线的内侧50px处)
Write some welcoming words with these settings:
- Font Family: Rockwell
- Font size: 40px
- Font weight: Regular
- Anti-aliasing setting: Sharp
- Color: #f4f4f4
按照下面的设置添加欢迎文字:
- 字体: Rockwell
- 字体大小: 40px
- 字体样式: Regular
- 消除锯齿样式:锐利
- 颜色: #f4f4f4
I personally have written: “Here’s our brand new work. Oops Welcome!” ;) but we need to emphasize the word “Welcome!” in somehow. so basically we’ll give it a Gradient Overlay. follow up with the image
我们写好:Here’s our brand new work. Oops Welcome!。;)。 但我们需要以某种方式强调Welcome一词。因此,我们会按照下图给它添加渐变叠加。
为了完美的解决此步,用文字工具分别写出Here’s our brand new work.和Oops和Welcome!,然后对Welcome!添加渐变叠加的图层样式
渐变编辑器的颜色: #2f3032,#2f3336
Now drag two new horizontal guides according to the following image
现在按照下图拖动两条新的水平参考线(一条和文字的底部对齐,另一条在之前的参考线下方50px处),通过计算两条参考线的位置大致是220px和270px
Before we say goodbye to this step, just make sure to organize your text layers.
在和本步骤说拜拜之前,组织你的文字图层(归并到一组)
Step 10
Start by creating a selection of 250x150px (fill it with any color), this will be our image holder.
Call this layer “pic_holder” and try aligning it like the image above.And give it a Stroke
步骤10
创建一个选区,尺寸:250px*150px(任意色填充),这将是我们的图片块
命名此图层为pic_holder,按照下图移到合适的位置,并按照下图添加描边
建议:用矩形工具新建一个矩形(100,299),并按照下图添加描边的图层样式
描边的颜色:#496d23
Let’s add an image of a featured design, to do so go to File > Place and select an image. call its layer “pic”, and make sure to put it right above the layer “pic_holder”.
Right-click on “pic” layer and choose Create Clipping Mask.
在特色区域添加一个图片,为此,点击:文件 > 置入,选择一个文件。命名此图层为pic,确保pic图层在pic_holder图层的上方。
右键pic图层,并选择创建剪贴蒙版