当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop设计移动APP应用类型网站(2)

Photoshop设计移动APP应用类型网站(2)

导航制作

选择 “Navigation”然后添加下面的图层样式使用以下设置。

Photoshop设计移动APP应用类型网站
Photoshop设计移动APP应用类型网站
Photoshop设计移动APP应用类型网站

在内部导航栏中使用文字工具(T)添加一些文本链接

Photoshop设计移动APP应用类型网站

在每一个导航项之间,创建两个像素的线条 一条黑、一条白。如下图所示

Photoshop设计移动APP应用类型网站

然后把刚刚的线条的混合模式设置为“叠加”。

Photoshop设计移动APP应用类型网站

接下来,我们将创建一个悬停状态的导航项(即选中状态)。选择缩放工具(Z)然后缩放到一个导航,画一条白色#ffffff的线条。如下图所示

Photoshop设计移动APP应用类型网站

设置该线条的图层样式,如下图所示。

Photoshop设计移动APP应用类型网站

设置完成后的效果如下图所示。

Photoshop设计移动APP应用类型网站

选择搜索图层按照下图所示的设置为其添加图层样式。

Photoshop设计移动APP应用类型网站
Photoshop设计移动APP应用类型网站
Photoshop设计移动APP应用类型网站

样式设置完后,利用“自定义形状工具”(U)添加一个搜索图标,并在左边用文本工具(T)输入“Search...”.

Photoshop设计移动APP应用类型网站

Photoshop设计透明质感的产品介绍页面
Photoshop设计简洁大方的网页UI