手机
当前位置:查字典教程网 >ps >PS入门实例教程 >用PS制作绚丽多彩的商业网页设计
用PS制作绚丽多彩的商业网页设计
摘要:Hello,该教程将逐步教您如何制作一个华丽的Web网页。1、首先需要创建一个新文档,大小1200*1172px,背景设置为#efefef2...

用PS制作绚丽多彩的商业网页设计1

Hello,该教程将逐步教您如何制作一个华丽的Web网页。

用PS制作绚丽多彩的商业网页设计2

1、首先需要创建一个新文档,大小 1200*1172px,背景设置为#efefef

用PS制作绚丽多彩的商业网页设计3

2、使用矩形工具,在所创建新的图层内一个大的灰色矩形,命名“Grey”,大小1200*620px。

用PS制作绚丽多彩的商业网页设计4

3、为这个Grey矩形添加如下图层样式。

用PS制作绚丽多彩的商业网页设计5

用PS制作绚丽多彩的商业网页设计6

用PS制作绚丽多彩的商业网页设计7

4、在Grey图层上方再新建一个图层Image,再该层添加另一个形状,但这次我将使用圆角矩形工具。加入选择一张如下图漂亮的梦幻图片。

用PS制作绚丽多彩的商业网页设计8

5、对这张梦幻图片,添加一些图层样式,如下。

用PS制作绚丽多彩的商业网页设计9

用PS制作绚丽多彩的商业网页设计10

6、在大图片下面,继续创建4个小矩形。尝试使用不同的颜色。

我使用的尺寸是222*182px。颜色值分别是:#f15522、#66aa44、#eea411、#1188cc

用PS制作绚丽多彩的商业网页设计11

7、现在我们做一下小颜色块上的高光效果。

创建另一个层(按CTRL + SHIFT + ALT + N),在高光层内,添加白色到透明的径向渐变。

用PS制作绚丽多彩的商业网页设计12

8、调整该高光层的混合模式为叠加,同时改变不透明度为50%.

用PS制作绚丽多彩的商业网页设计13

9、复制该高光层到每个颜色图层上方。

用PS制作绚丽多彩的商业网页设计14

10、接下来做导航部分。

在网站布局的顶部,将创建一个新的矩形。

用PS制作绚丽多彩的商业网页设计15

11、对该层使用下面的图层样式。

用PS制作绚丽多彩的商业网页设计16

用PS制作绚丽多彩的商业网页设计17

用PS制作绚丽多彩的商业网页设计18

用PS制作绚丽多彩的商业网页设计19

12、创建一个小圆椭圆工具,直径22px。

用PS制作绚丽多彩的商业网页设计20

13、对这个小圆,添加下面的图层样式。

用PS制作绚丽多彩的商业网页设计21

用PS制作绚丽多彩的商业网页设计22

14、现在进行圆形的重要的调整,删除圆形下半部。有两种方法:

①、首先需要右键单击层在你的图层面板中,然后使用矩形选框工具选择的下半部分的圆圈,按键盘上按上删除。

②、另一种方式是栅格化的该圆形路径,使用橡皮擦。

用PS制作绚丽多彩的商业网页设计23

15、为导航添加Icon。

这个导航样式适合比较简约版Icon,并做出凹陷进去的图层质感。

用PS制作绚丽多彩的商业网页设计24

16、对于所有这些Icon,添加下面的图层样式。

用PS制作绚丽多彩的商业网页设计25

用PS制作绚丽多彩的商业网页设计26

用PS制作绚丽多彩的商业网页设计27

17、在Icon之间,加入一些垂直分割线。

用PS制作绚丽多彩的商业网页设计28

18、分割线设置如下的图层样式。

用PS制作绚丽多彩的商业网页设计29

19、下一步是为网页加入Logo。

用PS制作绚丽多彩的商业网页设计30

20、使用圆角矩形工具,在Image图层底部添加另一个的形状。

用PS制作绚丽多彩的商业网页设计31

21、为该矩形添加下面的图层样式。

用PS制作绚丽多彩的商业网页设计32

用PS制作绚丽多彩的商业网页设计33

用PS制作绚丽多彩的商业网页设计34

22、使用椭圆工具继续添加一些小圆形。

用PS制作绚丽多彩的商业网页设计35

23、在颜色矩形右上方,使用椭圆工具绘制一个圆形。

用PS制作绚丽多彩的商业网页设计36

24、选择圆形图层,创建剪切模板。

用PS制作绚丽多彩的商业网页设计37

用PS制作绚丽多彩的商业网页设计38

25、对于这个白色图形,添加下面的图层样式

用PS制作绚丽多彩的商业网页设计39

用PS制作绚丽多彩的商业网页设计40

用PS制作绚丽多彩的商业网页设计41

用PS制作绚丽多彩的商业网页设计42

26、复制该样式,到每个颜色框的右上方,并保持相同的空间比例。

用PS制作绚丽多彩的商业网页设计43

27、然后添加另一个图标,和一些标题文本。

用PS制作绚丽多彩的商业网页设计44

28、继续完善内容,注意正文内容较多时,要文字比例比较小,同时采用与标题字颜色反差,这样能突显出Title的醒目性,并在其间加入横向分割线。

用PS制作绚丽多彩的商业网页设计45

29、最后一个步骤,添加另一个文本与横排文字工具。

用PS制作绚丽多彩的商业网页设计46

30、这是最后的结果。希望你会喜欢它。

您可以使用该Web布局,加以细微的修改,使得它成为另一个Wordpress主题。

用PS制作绚丽多彩的商业网页设计47

注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:182958314欢迎你的加入

【用PS制作绚丽多彩的商业网页设计】相关文章:

Photoshop制作扫描动画效果的GIF动漫图

Photoshop制作立体阴影效果的心形背景

PS制作抽丝效果的教程

Photoshop制作精彩的相册翻页动画

PS制作抽象光的制作系列

PS绘制圣诞版按钮设计

利用PS图层样式制作清爽的播放器按钮

Photoshop制作绚丽的质感星光字体教程

Photoshop制作简洁的电商促销横幅

PS制作大雪纷飞的唯美电影画面

精品推荐
分类导航