欢迎来到山村网

用Fireworks 制作QQ首页之左栏样式

2019-03-31 05:25:04浏览:569 来源:山村网   
核心摘要:  QQ首页,大家都公认很漂亮,至少阿特看来,清新大方,布局合理,大家肯定很想知道QQ首页是怎么做出来的吧,现在就由我来给大

  QQ首页,大家都公认很漂亮,至少阿特看来,清新大方,布局合理,大家肯定很想知道QQ首页是怎么做出来的吧,现在就由我来给大家一层一层剖析开来。

  我们先来看看原版,

用Fireworks 制作QQ首页之左栏样式  山村

  第一步:

  点击【文件(F)】- 【新建(N)】新建一个宽:550pxX 高:550px的文档,画布颜色为白色。如图:

  (大小也不一定非要550看自己的习惯,做好后可以自己裁剪)

  第二步:

  用 “矩形”工具 拉出一个 宽:346px 高:25px的长条,命名为:长条1,颜色填充为:#EBF4FB,边框无。如图:

  第三步:

  在 长条1 上 用 “矩形”工具 拉出一个 宽:165px 高:25px的长条,命名为:长条2 ,填充类别为:渐变》线性, 颜色填充为:左:#EBF4FB 右:#C3DFF5,用 “指针”工具 反复调整渐变样式,最终达到如图效果:

  到此为止这个BOX的标题背景已经出来了,当然没有原版的漂亮,这是因为咱们还没有对细节进行处理,下一步我们来给他加上高光。

  第四步:

  因为这一步比较复杂大家耐心反复调整哦:

  用 “矩形”工具 拉出一个 宽:10px 高:35px的长条,命名为:高光1 ,填充类别为:渐变》线性, 颜色填充为:左:#FFFFFF 右:#FFFFFF 透明,用 “指针”工具 反复调整渐变样式,再用 Ctrl+T 调整高光1的角度,调整透明度为85%,最终达到如图效果:

  重复上面步骤制作出一个 宽:7px 高:35px的长条,命名为:高光2 ,调整到如下效果:

  重复上面步骤制作出一个 宽:25px 高:45px的长条,命名为:高光3 ,调整到如下效果:

  用 “椭圆”工具 绘制出一个椭圆:大小颜色根据实际自定义,颜色无所谓方便区分就行。然后同时选中这个椭圆和高光3,点击【修改】-【组合路径】-【交集】得到一个新的路径命名为高光4,

  最后用 “矩形”工具 拉出一个 宽:1px 高:15px的长条;点击【滤镜】- 【模糊】- 【缩放模糊】再点击【滤镜】- 【模糊】- 【高斯模糊】参数如图;然后经透明度设置为65%

  到此我们的BOX标题背景制作完毕,接下来继续。

  第五步:

  新建一个层,命名为 边框。

  用 “矩形”工具 拉出一个 宽:346px 高:275px的长条,命名为:外层边框 ,填充类别为:实心, 颜色填充为:白色,边框大小为1颜色为#AACBEE,圆度为3px,描边内部对齐 如图:

  第六步:

  用 “矩形”工具 拉出一个 矩形,填充类别为:实心, 颜色填充为:白色,边框大小为1颜色为#AACBEE如下图,图A,

  选取这个矩形,点击鼠标右键-【平面化所选】将这个矩形转化成位图,然后用 “选取框”工具 裁掉这个矩形的右边和底边,得到图B效果。

  第七步:

  用 “矩形”工具 拉出一个 宽:70px 高:40px的矩形,填充类别为:实心, 颜色填充为:白色,边框大小为1颜色为#AACBEE,圆度为3px;如图

  选取这个矩形,点击鼠标右键-【平面化所选】将这个矩形转化成位图,然后用 “选取框”工具 裁掉这个矩形的底边,如图。

  在这个矩形内部,填充一个渐变,如图

  这样看起来就有层次,细腻多了。

  用上边同样的方法绘制样式2的按钮,效果如下图:

  到此已经基本完成,把内容安排进去就可以了,最终效果如下:

  这个教程的难点在于第四步的高光制作,请参照源文件进行对照练习,本教程针对不是入门教程,更不是高手提高教程,知识给刚入门的新手一个设计思路,起到抛砖引玉的作用。

(责任编辑:豆豆)
下一篇:

Fireworks巧用批处理命令快速制作缩略图

上一篇:

Fireworks制作3D质感球体教程

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com