Photoshop网页制作教程

Photoshop网页制作教程效果图:步骤 1创建 750x500px 画布,并将前景色设为白色。创建新的图层,利用矩形选框工具创建如下选区。 步骤 2用白色填充选区。图层 图层样式

利用PS制作激光效果导航条

利用PS制作激光效果导航条步骤 1创建画布,并用#B80027填充 步骤 2绘制两个长条,分别用 #760019 和 #4D0010填充。步骤 3新建图层,并绘制两条白线。图层不透明度设为 26%。步骤 4利用矩

Photoshop网页制作教程效果图:

Photoshop网页制作教程插图

步骤 1

创建 750x500px 画布,并将前景色设为白色。

创建新的图层,利用矩形选框工具创建如下选区。

Photoshop网页制作教程插图(1)

步骤 2

用白色填充选区。图层 >> 图层样式 >> 投影。设置如下:

Photoshop网页制作教程插图(2)

描边:大小 1像素,颜色 #939393 不透明度 44%。

步骤 3

创建新图层,再次利用矩形选框工具在画布顶端建立如下矩形选框。(注意:为了实现网页的层次感,这次的矩形边框与之前的矩形左右两边各空出2个像素)

Photoshop网页制作教程插图(3)

步骤 4

为选区填充 #2061A8。

步骤 5

图层 >> 图层样式 >> 投影。设置如下:

Photoshop网页制作教程插图(4)

渐变叠加:

Photoshop网页制作教程插图(5)

图案叠加:

Photoshop网页制作教程插图(6)

步骤 6

为网站添加文字LOGO 。

Photoshop网页制作教程插图(7)

步骤 7

创建新的图层。

步骤 8

按照与步骤 3相同的方法在画布底部建立矩形。

步骤 9

填充颜色(#2061A8),并添加投影效果。

Photoshop网页制作教程插图(8)

图层 >> 图层样式 >> 投影。

Photoshop网页制作教程插图(9)

步骤 10

利用圆角矩形工具绘制如下形状。

Photoshop网页制作教程插图(10)

步骤 11

图层 >> 图层样式 >> 投影。

Photoshop网页制作教程插图(11)

渐变叠加:

Photoshop网页制作教程插图(12)

步骤 12

为导航栏添加文字。

Photoshop网页制作教程插图(13)

步骤 13

按照如上方法建立其余导航条。

Photoshop网页制作教程插图(14)

步骤 14

现在我们开始制作内容框,利用圆角矩形绘制如下矩形框。

Photoshop网页制作教程插图(15)

将图层面板的填充属性设为 0%。

Photoshop网页制作教程插图(16)

图层 >> 图层样式 >> 渐变叠加。

Photoshop网页制作教程插图(17)

步骤 15

按照之前的方法建立另一个内容框。

Photoshop网页制作教程插图(18)

搜索更多相关主题的帖子:网页制作 Photoshop 教程 选区 投影

Photoshop网页制作教程插图(19)

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部