乱翻乱教 – 时尚导航设计 – 傻瓜版教程

步骤6 添加文字和间隔效果

导航基本效果做好后我们得添加文字效果,如下图:
(注意图中红色部分的设置,很多人都不知道这个细节的,将文字的平滑去掉,就显示成跟网页上的文字一样的效果。)
时尚网站头部设计_006_1

制作文字间的间隔效果
这里我也给出一个非常简单的制作方法,就是新建一个图层(||)使用铅笔画两条线,一条黑的一条白。效果如下。
时尚网站头部设计_006_2
然后修改图层模式为”柔光“,透明度为:70%,就可以了
时尚网站头部设计_006_3

步骤7 制作标签效果

标签效果就是表现当前所处的页面是那个页面。这部分是这个教程里难度最大的。但也是挺简单的,不过要仔细。
新建一图层(btn),使用圆角矩形工具,在导航上绘制白色的标签,圆角度为3px,背景白色,然后添加描边效果,边框色跟导航的边框一样。
注意:有些人会发现话矩形的时候不能对齐到像素,画出来的矩形有的时候变框会发糊,那是因为没有勾选上下图中的”对齐像素“选项。
飞鱼:下图中红色部分可以对照一下
时尚网站头部设计_007_1
这个时候标签的上半部分 做好了,接下来做下半部分。
如下图,先点击(1)图层的形状部分,然后点击(2),再选择(3)切换为矩形,再(4)标签的下半部分添加矩形。注意:两个形状都是在同一层上。
这一部分需要非常注意,对形状工具不熟练的这一步很容易操作失误。
时尚网站头部设计_007_2
接下来同样的步骤 在同一个形状图层上,切去两个圆角形状,如下图:
时尚网站头部设计_007_3

Pages: 1 2 3 4 5 6
哟?不错哎 订阅飞鱼的RSS Feeds 回去慢慢看^_^

您可能还对这些日志感兴趣

该文章已经被摸了1,067次。 共有 10 条评论

  1. 1. Anonymous 2009年11月6日 at 15:25

    学习

    回复

  2. 2. seri 2009年11月10日 at 20:40

    学习了,嘿嘿 =v= 最近忙的好充实啊

    回复

  3. 3. 葉子 2009年11月25日 at 19:22

    图片直接服务器上了???我的相册最近不知道发什么疯,很多图片看不见了

    回复

    飞鱼 Reply:

    yupoo 快挂掉了 = = 太少人付钱给yupoo了,还有就是 yupoo经常挂掉····
    囧死了。

    回复

  4. 4. 小豪 2009年12月7日 at 14:44

    看完了。。消化下。。

    回复

    飞鱼 Reply:

    hoho~· 这个教程也做得我泪流满面

    回复

    小豪 Reply:

    不过挺好的

    回复

  5. 5. 弃儿 2009年12月12日 at 7:59

    大叔,你那个文章内的分页是什么插件呀?

    回复

    飞鱼 Reply:

    不是 插件的說·~~ 添加文章的時候 點more 然後 吧more改成 nextpage 就可以了

    回复

    弃儿 Reply:

    噢~这么YD

    回复

发表评论

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签

Who am I ?

飞鱼,男,浙江人士。
非专业前端、交互设计师。
目前在 企鹅村 通宵 打酱油

最新在啃

php和mysql web开发(原书第4版) javascript

新鲜的肉

最新评论

  • 小元: 啊!我会弄了!
  • 小元: 请问多窗口并显怎么设置?看了文章还是不会呢! “打开html页面,点击多窗口panel,然后从左侧目录中将css文件拖动到右侧panel就可以实现了。”...
  • vilppu: http://foxsp.com/t/125 这有下载,也有安装说明
  • James: 请问能否分享配色方案?
  • Aric: 代码快 来一份 谢谢楼主了 新年快乐

订阅-rss-永久链接

MT
备案号:浙ICP备09020026 号