PS网页设计教程IX——巧用大括号设计惊艳的咨询页面

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

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

约定:

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

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

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

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

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

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

 

With this layout you will be able to easily build a web site dedicated to teaching and learning, or a business layout, as well as management or marketing layouts. This layout can be transformed also in a WordPress theme.

致力于教学和学习,此布局使能您将能够轻松地构建 web 站点,或业务布局,以及管理或市场营销布局。这种布局可以转换成一个 WordPress 主题。

 

I will use my default document size: 960 x 900 pixels.
我将新建一个文档,文档默认大小为:960*900px

 

Feel free to use any size you want.

你也可以使用其他的尺寸

Set your foreground color to #1f0f0e and then with Paint Bucket Tool press one time on your canvas. This will be the background of our consulting layout.
设置前景色为 #1f0f0e,用油漆桶工具在你的画布上喷涂一下。这是我们的咨询页面的背景。

 

Select you Horizontal Type Tool, and type a brace. I have used the following font, and size:

选择水平文字工具,输入一个大括号,我将如下图设置字体、尺寸等

注:关于字体的方式是“锐利”还是“柔和”,要亲自实验才行,笔者做了两次,分别得用不同的方式,才有本教程下面的样子,也不知为何。

 

Right click on the layer in your layer palette, and choose Convert to shape

在图层面板上右键文字图层,选择转换为形状

 

Rotate this shape until you have something like this. To rotate a shape you can select the shape, then press on CTRL+T, and then with mouse too rotate the shape. Another way to rotate a shape is to go to Edit > transform > rotate….

旋转该形状如下图。旋转该形状,你可以选择该形状,然后按Ctrl+T,用鼠标去旋转该形状。另一个办法是,点击:编辑 > 变换 > 旋转...

经测算,该形状的位置点为(43,296,260,84)

 

Duplicate the shape a few times and with Move Tool, place them like in the following image

复制该形状多次(三次),用移动工具,摆放如下图所示:

自下而上的四个形状分别为

(43,296),颜色: #483d3c

(43,285),颜色: #ff2609

(43,275),颜色: #ffffff

(43,265),颜色: #ded3d1

 

I will change the foreground color to #3d302f, and I will create a rectangle with Rounded Rectangle Tool. I will place this layer under the previous ones.

将前景色更改为 #3d302f,用圆角矩形工具创建一个圆角矩形(43,225,260,650),将该图层移到刚刚四个形状的下方

 

With Rectangle Tool I will create another shape on the top. The color used to create this shape is: #ded3d1

用矩形工具在顶部创建一个新的矩形。该矩形的颜色为: #ded3d1

建议是圆角矩形,半径为50px,位置(43,-50,250,400)

 

On top of the layout I will add another shape

在页面的顶部,还是要新建另一个矩形

注:为了后续的操作方便,在此步的矩形的高度调的大一点,矩形为(0,0,960,90)

 

With Pen Tool I will create a shape like in the following image. I want to create a round corner.

I will duplicate this shape (press CTRL+J), and I will place it on the other side of the layout.

I will go to Edit > Transform > Flip Horizontal. If this option is not enabled, then you need to select the layer in your layer palette. The next step is to align this layer. This is my result.

用钢笔工具创建如下图所示的形状。我创建了一个圆角

复制这个形状(按Ctrl+J),移动该形状到页面的另一边

点击:编辑 > 变形 > 水平翻转。如果该选项没有激活,你需要在图层面板选中该图层,接下来就是对齐该图层

 

还是不擅长钢笔工具的使用,于是换了一个思路,选中圆角矩形工具,半径设置为10px,新建一个圆角矩形(-37,72,80,40),颜色为: #1f0f0e

再用同样的颜色新建另一个圆角矩形(303,72,700,40)

 

On the right side I will create 2 shapes with Rounded Rectangle Tool.

在右侧用圆角矩形工具创建两个圆角矩形。分别是(328,96,593,242),颜色: #ded3d1;和(328,370,593,500),颜色: #aea2a2

For both layer I will add the following layer styles

对这两个图层添加如下的图层样式:

 

This is my result

这是我的结果

 

On the top I will create a button with Rounded Rectangle Tool.

在顶部用圆角矩形工具创建一个按钮(325,35,118,118),由于后面还要切除按钮的一部分,所以制作正方形的按钮比较容易

 

I will right click on the layer in my layer palette, and I will choose rasterize layer. With Rectangular Marquee Tool, draw a selection on the bottom of the shape

在图层面板上右键,选择栅格化图层。用矩形选择工具,在按钮的底部画一个选区。

 

Be sure you have the layer with the button selected, then hit delete key from your keyboard and press on CTRL+D to deselect. After I will apply a nice gradient from this set: 27.000 Photoshop gradients my button looks like this:

保证按钮的图层被选中,然后按键盘上的delete键,然后按Ctrl+D取消选择。接下来我要从27.000 Photoshop gradients添加一个漂亮的渐变,我的按钮如下图所示:由于没有注册为会员,故手动添加渐变,如下图所示,

左边的颜色: #5a4f4d,右边的颜色: #3e3331

 

I will duplicate this button and with Move Tool I will place it near this one.

复制该按钮,用移动工具移到合适的位置

对第二个的按钮添加合适的渐变,如下图所示:

左边的颜色: #ff4a2b,右边的颜色: #ff2000

对五个按钮分别添加文字:ABOUT US、SERVICES、PORTFOLIO、BLOG、CONTACT。文字的式样设置如下:

 

You will notice a red button. I have used another gradient from our huge gradient set.

你注意到那个红色的按钮。我从our huge gradient set添加另一个渐变。(还是自己设置渐变,设置如上)

 

In the middle of my business consulting layout I will create three shapes, and three brace.

在我的商业咨询布局的中间,我要创建三个圆角矩形,和三个大括号

I will change the color of the round shapes to white, and I will select all 6 layers in my layer palette. Then I will press on CTRL+E to merge all the layers into a single one.  With Brush Tool I will draw over the empty spot. This is my result so far.

将圆角矩形的颜色改为白色。选择这6个图层。然后按Ctrl+E合并图层到一个图层。用画笔工具填充空白部分。这是我的结果

 

我的做法是:

1、新建一个圆角矩形(338,377,184,159),颜色为白色

2、用文字工具输入右大括号,字号为194,字体为Book Antiqua,旋转90度。然后移到合适的位置

3、再用矩形工具填充空白部分

4、合并刚才的三个图层,然后复制两次,移到合适的位置

 

For this layer I will add the following layer styles.

对这些图层添加如下的图层样式

 

 

After I will add some icons this is my result

接下来添加一些图标,和一些文字

 

With Rectangle Tool, I will create a shape on the bottom of the layout

用矩形工具,在布局的底部添加一个白色的矩形(324,696,600,144)

 

It is time to add some text with Horizontal Type Tool. Please click on the image to see how I placed the text.

用文字工具添加一些文字。对照图片摆放文字,并且添加一张图片

 

Right under the logo I will create some shapes with Rounded Rectangle Tool. I will use a white color for all these shapes, and I will lover the fill value for each layer to 40 %.

在LOGO的下方添加一些圆角矩形。颜色:白色。对这些图层设置填充为40%

 

I will place some text over the buttons.

我要在按钮上添加一些文字

 

This is my final consulting layout. I hope you like it, and if you want to use it for your website please let me know. I really want to see how it looks.

这是我最终的咨询布局。我希望你会喜欢它,并且让我知道你会用在你的网站布局中。我真的想知道你的作品。

 

后记:

利用大括号巧妙的实现布局。有时候看起来惊艳的效果,其实也就是一些小小的技巧。

时间: 2024-07-31 19:51:14

PS网页设计教程IX——巧用大括号设计惊艳的咨询页面的相关文章

PS宣传画册教程-书法国画内页设计

本例PS教程继上一教程"PS宣传画册教程:封面与封底设计 "进行内页设计,宣传画册重点突出你想表达的内容,文字不一定要多,适当点缀即可,本内页以福建理工学校在实施综合教程管理工程中的个性化课程"书法.国画"为主题进行设计,有兴趣的朋友可以看一下! 福建理工学校三节合一综合展示"书法.国画"内页装帧后的效果图 福建理工学校三节合一综合展示"书法.国画"内页印刷后带折痕,效果图 福建理工学校三节合一综合展示"书法.国画&

PS宣传画册教程:封面与封底设计

2012年5月18日,是福建理工学校一年一度的"三节合一"(文体艺术节.技能节和综合教育管理工程展)的综合展示之日,展示内容五花八门,看了不少学生的作品,青出于蓝胜于蓝.作为理工的一分子,借此综合展示前夕,尖尖将制作一系列宣传画册的PS教程,这一系列教程也是本校平面设计专业学生的必修课程,对宣传画册制作有兴趣的朋友可以看看,同时也可以欣赏一下我们理校学生的综合才艺哦^_^! photoshop教程 福建理工学校"5.18综合展示"宣传画册装帧后的效果图 福建理工学校

Photoshop设计教程:变形金刚2电影海报设计

在此大家也可以跟着教程,用Photoshop制作变形金刚2海报,彰显个性!先看看效果图.下面变形金刚2电影海报设计主要应用了Photoshop的文字工具.渐变.蒙板等,希望大家喜欢. 先看效果图 图0 素材收集与PS手法以及创意说明: A:变形金刚2电影海报有一股强悍力在召唤,能让人并狂热起来,另外又是一个对抗性很强的,很能激发和释放的战斗力. B:本次变形金刚2选用了擎天柱,这张素材为威震天主题为"变形金刚2电影"的照片中挑选出来的:第2张素材为背景辅助素材. 点击这里下载:素材1.

用户体验设计教程:平面设计中的标题设计技巧

网页制作Webjx文章简介:视觉设计中的标题文字设计. 之前我把平面设计的视觉呈现分为:构图,调子,元素和内容四大部分组成,所以我分四部曲来讲,其中元素部分又分为标题,主体和大场景三部分,今天讲的就是标题部分.在讲标题设计之前,先说说这四部曲的基本前提: 序 目标我们做设计究竟是为了什么?公司请视觉设计师做美术包装广告究竟是为了什么? 赚钱! 宗旨我们公司是上市运营公司,公司存在是为了盈利为了赚钱,我们视觉设计师是包装,我们目的是把公司产品美术包装做好,让用户有视觉享受,更好的引导去花费,赚用户

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

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 下面是本系列的30个优秀PS网页设计教程的翻译教程,本人历时一年有余,翻译了这些教程.在翻译的过程中,重新截了中文版的图,也修正了一些参数,并给出了一些更好的技法的建议,更加适合新手上手练习,适合初学者临摹学习,也可以给有一定基础的设计者做个参考. 在这儿和广大网友交流,大家互相学习,互相提高.      PS网页设计教程I--在Photoshop中创

PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS设计制作清爽的蓝色海洋风格网页模板教程

教程中,木木和童学们分享:使用photoshop设计一个非常清爽的网站主页,特色是网站的配色非常的不错,童学们好好学习一下. 效果图: 1.在这个网页设计教程中,使用的是960网格,所以童学们得先下载一个960网络,然后导入到photoshop软件中.通过编辑>画布大小,改变文件的大小为:1600x1500px. (注:宽度可以自由更改,但为了能在宽屏的显示器中也能更好的显示,建议大家还是用1600px) 三联推荐:photoshop7.0迷你版免费下载    |  Photoshop CS5

PS网页设计教程XVI——在PS中创建一个摩登实验室风格的网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程VI——在Photoshop中创建一个食物博客布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的