ps设计商业web页面

本次教大家用PhotoShop设计制作一款淡灰色调为主的绚丽商业web页面效果,该教程将逐步教您如何制作一个华丽的Web网页,喜欢的同学可以学习一下!

Photoshop CS5快速入门教程

复制下面链接,用迅雷或者电驴下载 [Adobe.photo-shop.CS5快速入门教程].QuickStart.Adobe.photo-shop.CS5.Tutorials-iRONiSO.bin 226MB [Adobe.photo-shop.CS5快速入门教程].QuickStart.Adobe.photo-shop.CS5.Tutor

简介:本次教大家用PhotoShop设计制作一款淡灰色调为主的绚丽商业web页面效果,该教程将逐步教您如何制作一个华丽的Web网页,喜欢的同学可以学习一下!

效果图:

ps设计商业web页面插图

ps设计商业web页面插图(1)

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

ps设计商业web页面插图(2)

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

ps设计商业web页面插图(3)

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

ps设计商业web页面插图(4)

ps设计商业web页面插图(5)

ps设计商业web页面插图(6)

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

ps设计商业web页面插图(7)

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

ps设计商业web页面插图(8)

ps设计商业web页面插图(9)

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

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

ps设计商业web页面插图(10)

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

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

ps设计商业web页面插图(11)

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

ps设计商业web页面插图(12)

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

ps设计商业web页面插图(13)

10、接下来做导航部分。

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

ps设计商业web页面插图(14)

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

ps设计商业web页面插图(15)

ps设计商业web页面插图(16)

ps设计商业web页面插图(17)

ps设计商业web页面插图(18)

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

ps设计商业web页面插图(19)

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

ps设计商业web页面插图(20)

ps设计商业web页面插图(21)

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

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

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

ps设计商业web页面插图(22)

15、为导航添加Icon。

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

ps设计商业web页面插图(23)

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

ps设计商业web页面插图(24)

ps设计商业web页面插图(25)

ps设计商业web页面插图(26)

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

ps设计商业web页面插图(27)

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

ps设计商业web页面插图(28)

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

ps设计商业web页面插图(29)

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

ps设计商业web页面插图(30)

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

ps设计商业web页面插图(31)

ps设计商业web页面插图(32)

ps设计商业web页面插图(33)

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

ps设计商业web页面插图(34)

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

ps设计商业web页面插图(35)

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

ps设计商业web页面插图(36)

ps设计商业web页面插图(37)

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

ps设计商业web页面插图(38)

ps设计商业web页面插图(39)

ps设计商业web页面插图(40)

ps设计商业web页面插图(41)

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

ps设计商业web页面插图(42)

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

ps设计商业web页面插图(43)

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

ps设计商业web页面插图(44)

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

ps设计商业web页面插图(45)

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

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

ps设计商业web页面插图(46)

简介:本次教大家用PhotoShop设计制作一款淡灰色调为主的绚丽商业web页面效果,该教程将逐步教您如何制作一个华丽的Web网页,喜欢的同学可以学习一下!

效果图:

ps设计商业web页面插图

ps设计商业web页面插图(1)

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

ps设计商业web页面插图(2)

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

ps设计商业web页面插图(3)

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

ps设计商业web页面插图(4)

ps设计商业web页面插图(5)

ps设计商业web页面插图(6)

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

ps设计商业web页面插图(7)

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

ps设计商业web页面插图(8)

ps设计商业web页面插图(9)

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

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

ps设计商业web页面插图(10)

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

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

ps设计商业web页面插图(11)

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

ps设计商业web页面插图(12)

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

ps设计商业web页面插图(13)

10、接下来做导航部分。

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

ps设计商业web页面插图(14)

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

ps设计商业web页面插图(15)

ps设计商业web页面插图(16)

ps设计商业web页面插图(17)

ps设计商业web页面插图(18)

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

ps设计商业web页面插图(19)

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

ps设计商业web页面插图(20)

ps设计商业web页面插图(21)

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

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

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

ps设计商业web页面插图(22)

15、为导航添加Icon。

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

ps设计商业web页面插图(23)

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

ps设计商业web页面插图(24)

ps设计商业web页面插图(25)

ps设计商业web页面插图(26)

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

ps设计商业web页面插图(27)

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

ps设计商业web页面插图(28)

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

ps设计商业web页面插图(29)

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

ps设计商业web页面插图(30)

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

ps设计商业web页面插图(31)

ps设计商业web页面插图(32)

ps设计商业web页面插图(33)

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

ps设计商业web页面插图(34)

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

ps设计商业web页面插图(35)

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

ps设计商业web页面插图(36)

ps设计商业web页面插图(37)

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

ps设计商业web页面插图(38)

ps设计商业web页面插图(39)

ps设计商业web页面插图(40)

ps设计商业web页面插图(41)

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

ps设计商业web页面插图(42)

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

ps设计商业web页面插图(43)

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

ps设计商业web页面插图(44)

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

ps设计商业web页面插图(45)

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

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

ps设计商业web页面插图(46)

作者: 791650988

为您推荐