PS网页设计教程VIII——在Photoshop中设计不同寻常布局

  • A+
所属分类:Photoshop笔记

在本教程中我将向您展示如何巧妙处理一些简单的形状,以获取一个精彩的布局。您已经看到我试图创建非同寻常的布局。我想要告诉你它是可能还创建另一种类型的布局 (不是通常的那种)。

 

 

一开始创建新文档(Ctrl N),尺寸:960px*900px,背景颜色: #5c7a02

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

Select Rounded Rectangle Tool, and set your corner radius to 50 Pixels

选择圆角矩形工具,设置半径为50px

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

在页面的中部创建一个圆角矩形,然后按Ctrl T自由变换,按住Shift键,旋转圆角矩形。现在还没告诉你要用哪种颜色。我将用不同的颜色创建一些圆角矩形,因为我要展示给你我如何摆放这些圆角矩形。现在我要更改这些矩形颜色为#3c3427。在网页的顶部我将添加一个矩形,这次用的是矩形工具。我给这个矩形还是用颜色#3c3427,在布局的右下角我将添加另一个圆角矩形

 

感觉原教程的操作比较繁琐,于是自己更改了操作步骤,但是最终的效果是一样的。

创建一个圆角矩形(432,29,480,644),颜色:#3c3427

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

创建一个圆角矩形(0,0,485,485),题外话,(644-50*2)/1.414 50*2≈485

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

按Ctrl T,自由变换,旋转45度,按回车确定退出自由变换

再次按Ctrl T,自由变换,调整参数为(153,29,644,644),按回车确定退出自由变换

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

按Ctrl G将两个圆角矩形归并为一组。

复制该组,顺时针旋转90度,调整组到合适的位置(-190,375)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

在布局的右下角创建一个圆角矩形(457,677,450,500),颜色还是#3c3427

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

用圆角矩形画两个圆角矩形

选中这两个图层,按Ctrl T,用鼠标旋转你的矩形。按照下图布置矩形,在绿色的上方我将添加一些文本按钮

 

还是按照自己的思路制作

首先设置圆角矩形的半径为70,新建一个圆角矩形,宽970px,高154px,颜色: #c7da8b。按Ctrl T,旋转-45度,按回车确定。再按Ctrl T,调整到圆角矩形位置到(-428,59)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

复制该图层,按Ctrl T,调整大小为原来的70%,位置在(-216,96)。颜色更改为#a8ca01

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

.

在所有的层上面新建一个层,用画笔工具,调整画笔为巨大的光滑的画笔(颜色为白色,画笔的大小为600px,硬度:10%),在图层上添加一些点(三个点)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

更改该图层的混合模式为叠加

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

这是我的结果

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

现在用水平文字工具添加一些文本,字体用Bookman Old Style. Italic。

顶部的文字Welcome to our web site和底部的文字Services用如下的字体设置

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

左侧绿色块里的标题文字Grafpedia,用如下的字体设置,并添加图层样式

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

左侧的绿色块里的菜单文字Home、Products、Portfolio、Contact,用如下的文字设置:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

两个栏目倾斜的文字Portfolio、Latest News,用如下的文字设置:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

右侧的菜单栏的文字,Company、Products、Program、Contact Us,颜色:黑色。文字设置如下:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

Welcome to our web site下的一段文字的文字设置如下:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

其余的段落文字,文字设置如下:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

最终的结果如下:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

Now I will add some images from my last tutorials in the middle part of my layout. I will cut some round images from my previous tutorials.

我将在页面布局的中部添加一些之前的教程的图片,我将从之前的教程中切一些圆的图片

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

On the top of the website I will add another rounded shape.

在网站的顶部,添加另一个圆角矩形(361,142,524,40),半径为20px,颜色为白色

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

选择直线工具设置粗细为1px,在文本按钮之间创建两条直线(一条黑色、一条白色)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

我将选择这两条直线的图层,按Ctrl E(合并图层),选择橡皮擦工具,选择一个柔边圆,尺寸在200到300px之间(选择250比较合适),我将删除直线的右半部

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

我同样的要删除左半部分,然后复制该图层。用移动工具移动这些图层到合适的位置

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

With the same technique as above I will add some lines also on other parts of the layout. You can change the blending mode for this layer to overlay.

用同样的技术在布局的其他部分添加直线。更改这些直线图层的混合模式为叠加

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

新建一个图层在圆的图片的下方。选择画笔工具,选择一个柔边圆工具,按照下图添加一个大点(半径设置为360px,硬度20%)。前景色选择黑色。

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

选择矩形选择工具,创建如下的一个矩形选框

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

你的选择区域在之前做好的两条水平线之间,选择之前的黑色的大点图层,按Ctrl I,或点击:图像 > 调整 > 反相,你的布局看起来像如下:

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

按Ctrl D取消选择,更改该图层的混合模式为叠加,不透明度为40%

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

这是我的图片滑动栏的效果

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

我将在左右两边添加圆按钮(左侧的按钮添加内发光的图层样式,右侧的按钮添加内发光和描边的图层样式)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

描边的颜色: #4e4c48

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

 

在布局的中部,添加一个圆(带描边,填充颜色:#5a4d3a,描边颜色: #b9f308)

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

这是我最终的结果

PS网页设计教程VIII——在Photoshop中设计不同寻常布局

 

后记:

这样的布局的确是不常见的

本教程的亮点有:

1、利用橡皮擦的工具实现渐变效果

2、利用图层混合选项为叠加实现高光

3、尤其是教程中的反相的效果,令人叫绝。

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: