当前位置: 首页 > 设计教程 > 网页设计教程 > 用Photoshop设计艺术类网站设计

用Photoshop设计艺术类网站设计

本文制作的网站很有设计感,作为艺术与设计类网站来说,传统的用户体验与网站内容可能并不是首要考虑的内容,而更多得要让整个网站在视觉上跟人以吸引力

先看看效果图:

Photoshop设计艺术类网站设计过程

我们使用950 x 1130px作为网页设计文件尺寸,背景为黑色,用圆角矩形制作白色图形,半径设置为15px

Photoshop设计艺术类网站设计过程

如下图我们完成的形状是用于网站的头部,放Logo与导航文字的地方

Photoshop设计艺术类网站设计过程

现在为其添加图层样式

Photoshop设计艺术类网站设计过程
Photoshop设计艺术类网站设计过程

完成后的头部形状样式如下

Photoshop设计艺术类网站设计过程

加入网站的域名文字与导航按钮文字

Photoshop设计艺术类网站设计过程

我们只在右边加入三个导航文字,为了使它们看上去不单调,我们为每个导航文字前添加发光小图标,先制作一个3px的长线,随后为其添加下面样式,完成后复制三次

Photoshop设计艺术类网站设计过程

完成后如图

Photoshop设计艺术类网站设计过程

用选区工具绘制选区

Photoshop设计艺术类网站设计过程

随后新建图层,填充白色,并设置不透明度为2%

在头部区块下再制作一个白色圆角矩形作为主要内容的导航文字区域

Photoshop设计艺术类网站设计过程

添加样式

Photoshop设计艺术类网站设计过程
Photoshop设计艺术类网站设计过程
Photoshop设计艺术类网站设计过程
Photoshop设计艺术类网站设计过程

完成如图

Photoshop设计艺术类网站设计过程

Photoshop制作网页模板中的玻璃按钮
Photoshop设计网站头部导航效果