Photoshop制作网站导航教程

2016-02-16 06:00 8 1 收藏

下面是个简单易学的Photoshop制作网站导航教程教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - PS 】

先看效果图。

Photoshop制作网站导航教程,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

新建文档560x300像素,背景黑色,建新层,画一白色圆角矩形。

Photoshop制作网站导航教程,PS教程,图老师教程网

添加图层样式。

Photoshop制作网站导航教程,PS教程,图老师教程网

Photoshop制作网站导航教程,PS教程,图老师教程网

Photoshop制作网站导航教程,PS教程,图老师教程网

颜色请采样我的截图,效果如下(局部)

Photoshop制作网站导航教程,PS教程,图老师教程网

新建图层1,调出圆角矩形选区,填充白色,把选区左挪2像素。(最后的效果里我修改了一下,挪了1像素)

Photoshop制作网站导航教程,PS教程,图老师教程网

删除,图层模式改为叠加,重复这个步骤,做出导航2端的亮边。

Photoshop制作网站导航教程,PS教程,图老师教程网

输入一些白色文字,比如关于我们 联系方式博客等等,添加图层样式。

Photoshop制作网站导航教程,PS教程,图老师教程网

Photoshop制作网站导航教程,PS教程,图老师教程网

下面制作鼠标悬浮框,就是鼠标移到文字上面时,会有不同的视觉样式呈现,一般用CSS来完成,建新层,做一矩形选区,透明到黑径向渐变。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop制作网站导航教程,PS教程,图老师教程网

图层模式柔光,不透明度90%。

Photoshop制作网站导航教程,PS教程,图老师教程网

建新层,做如下矩形选区,填充白色。

Photoshop制作网站导航教程,PS教程,图老师教程网

添加蒙版,黑白对称渐变,图层不透明度90%,可能会有超界的白边,用笔刷涂抹掉即可。

Photoshop制作网站导航教程,PS教程,图老师教程网

这样,一个简单的网站导航就制作完成了,本ps教程到此结束。

Photoshop制作网站导航教程,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

来源:http://www.tulaoshi.com/n/20160216/1568904.html

延伸阅读
标签: 电脑入门
有很多朋友问我怎么样做一个仿网站类型的PPT,为了方便大家学习,今天就做一个这样的PPT教程。而对于仿网站类型的PPT所遇到的最大难题就是导航栏的制作,今天我们就从最难的地方来开始吧。(提供PPT源文件下载) PPT教程一、首先画一个矩形框,设置其大小为:高6.2厘米,宽5.2厘米。 PPT教程二、再画一个矩形框,设置其大小为:高6厘米,宽5厘...
效果图 1、 打开photoshop,新建空白文档,文档大小为800*1200; 2、 打开素材图片1,按Ctrl+Alt+T调整大小为800*1200; 3、 给背景填加烧坏效果。设置前景色为黑色。选择渐变工具选择的前景色到透明,混合模式为软柔光与不透明度:30%。 4、 打开素材图片2,按Ctrl+Alt+T调整合适大小; 5、 打开素材图片3,按Ctrl+Alt+T调...
透明物体是通过背景进行参照,体现出质感。而本例里是讲解白色透明背景,如果背景太亮,会导致对比不明显。 最终效果 1、打开下图所示的背景素材,选择菜单:滤镜 模糊 高斯模糊,数值稍微大一点,效果如下图。 2、把前景色设置为绿色,用圆角矩形工具拉一个合适的圆角矩形,然后选择钢笔工具,在属性栏选择“合并形状”,勾...
标签: PS PS教程
本教程是本人设计的一个网站形象首页的作品,现在拿出来做教程。制作的方法非常简单,重点在背景及色彩部分的制作。颜色需要根据实际产品的颜色去定! 最终效果 [next] 1、新建一个650 * 400像素的文件,背景填充颜色:#F9D2C1,然后用套索工具勾出图1所示的选区,按Ctrl + Alt + D羽化,数值为45,然后按Ctrl + L调亮,调亮以后用...
标签: PS PS教程
1.规划:不管是乔客,还是用动易、风讯,我们都应该考虑两个问题: a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况,一是两栏(乔客左窄右宽,动易左宽右窄),二是一栏,两种情况显示不能变形。有些朋友想每个板块的头部不一样,这也是可以的,你可以在程序代码中做文章,那是编程的问题,按下不表。 如果我看到别人的版...

经验教程

211

收藏

100
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部