Photoshop设计网站头部导航效果

这小子真倔

这小子真倔

2016-02-19 18:53

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Photoshop设计网站头部导航效果懂设计的网友们快点来了解吧!

设计背景

先看看最终效果图

Photoshop设计网站头部导航效果

第一步建立新文件,设置如下图

Photoshop设计网站头部导航效果

下一步设置前景色为#e6e0d5,背景色为#cec5af

Photoshop设计网站头部导航效果

Photoshop设计网站头部导航效果

制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩!

Photoshop设计网站头部导航效果

开始设计导航按钮,新建图层,使用矩形工具,制作如下图形

Photoshop设计网站头部导航效果

Photoshop设计网站头部导航效果

再次新建图层,制作#ac2a2a颜色矩形

Photoshop设计网站头部导航效果

再用单行选区工具制作按钮鼠标移动上后的黄色滑杆

Photoshop设计网站头部导航效果

为滑杆添加渐变样式

Photoshop设计网站头部导航效果

Photoshop设计网站头部导航效果

新建图层,使用椭圆选区工具,羽化设置20px,这样之后填充的黑色将会出现羽化的效果

Photoshop设计网站头部导航效果

Photoshop设计网站头部导航效果

Photoshop设计网站头部导航效果

为之前的椭圆选区填充黑色,然后设置图层为"正片叠底",使用矩形选区工具删除右边区域,这样看上去红色的导航条上就出现了阴影分割效果

Photoshop设计网站头部导航效果

复制之前做的椭圆阴影

Photoshop设计网站头部导航效果

制作RSS破损纸张效果,制作2个图层,用选区勾画出纸张的轮廓,一个大的为白色,小的红色,如果觉得效果过于平滑,可以使用滤镜来让其看上去更自然

Photoshop设计网站头部导航效果

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/wysj/)

为白色的轮廓添加内阴影样式

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/wysj/)

Photoshop设计网站头部导航效果

完成后的效果图

Photoshop设计网站头部导航效果

现在进行最后的修饰,使用单行选区工具

Photoshop设计网站头部导航效果

填充颜色#e6e0d5

Photoshop设计网站头部导航效果

复制图层,并将它移动到如下箭头位置,设置不透明度为20%

Photoshop设计网站头部导航效果

最后将Logo标志放入,一个完整的网站头部导航设计就完成了

Photoshop设计网站头部导航效果

展开更多 50%)
分享

猜你喜欢

Photoshop设计网站头部导航效果

网页设计 设计教程
Photoshop设计网站头部导航效果

如何快速合理的设计网站导航系统?

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
如何快速合理的设计网站导航系统?

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Photoshop设计制作网页头部导航条

PS PS基础
Photoshop设计制作网页头部导航条

CSS设计网页头部的写法

Web开发
CSS设计网页头部的写法

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

photoshop设计网页:多媒体网站布局

PS PS基础 ps平面设计教程 ps去水印教程
photoshop设计网页:多媒体网站布局

Photoshop制作立体效果的网站导航教程

PS PS基础
Photoshop制作立体效果的网站导航教程

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

50款咖啡杯和咖啡包装设计

50款咖啡杯和咖啡包装设计

值得一看的夜景摄影欣赏三

值得一看的夜景摄影欣赏三
下拉加载更多内容 ↓