以后地位: 首页 > 设计教程 > 网页设计教程 > Photoshop设计移动APP应用范例网站

Photoshop设计移动APP应用范例网站

最终效果

Photoshop设计移动APP应用范例网站

教程所需素材

统统素材打包下载:http://urlxf.qq.com/?JRbqE37

第一步

新建(Ctrl + N)一个 1200 x 1150 px,配景为:#FFFFFF的文档。应用“矩形抉择对象”(M)画一个 1200 x 220px的矩形框,然后填充色彩(此色彩不做固定请求)。

Photoshop设计移动APP应用范例网站

接下来,咱咱咱们把刚刚创建的图层定名为“header”。应用“圆角矩形对象”(U)并设置半径为20px。

Photoshop设计移动APP应用范例网站

画一个950 x 60px 的圆角矩形

Photoshop设计移动APP应用范例网站

定名圆角矩形图层“Navigation“。从新抉择圆角矩形对象(U)然后在“Navigation“右上方再次拖出一个圆角矩形作为搜索框。把该层定名为 “Search”。

Photoshop设计移动APP应用范例网站

第二步

抉择 “Header” 图层 按照如下设置添加”图层样式“

投影设置:不透明度:34%;角度:90度;距离:5px; 大小:5px;

Photoshop设计移动APP应用范例网站

渐变叠加

Photoshop设计移动APP应用范例网站

在“Header”图层上方树立一个发光图层并定名为“Header Glow”. 抉择 “Header”图层并履行命令 “图层 >载被选区”抉择 “渐变对象” (G) “镜像渐变”. 如图所示。

Photoshop设计移动APP应用范例网站

然后把刚刚设置的图层透明度低落为“15%”

Photoshop设计移动APP应用范例网站

分享到: 
Photoshop设计透明质感的产品介绍页面
Photoshop设计简洁慷慨的网页UI
友情链接:房地产新闻网  武汉市汉南教育信息网  华夏夜读网  中国工程建筑网  孝感纪检监察网  家具定制网  商职财经  亚海展会网  苗木花卉网  大众健康网