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

   QQ首页,大家都公认很漂亮,至少阿特看来,清新大方,布局合理,大家肯定很想知道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的按钮,效果如下图:


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


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

时间: 2024-11-08 19:54:17

用Fireworks 制作QQ首页之左栏样式的相关文章

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

QQ首页,大家都公认很漂亮,至少阿特看来,清新大方,布局合理,大家肯定很想知道QQ首页是怎么做出来的吧,现在就由我来给大家一层一层剖析开来. 我们先来看看原版, 第一步: 点击[文件(F)]- [新建(N)]新建一个宽:550pxX 高:550px的文档,画布颜色为白色.如图: (大小也不一定非要550看自己的习惯,做好后可以自己裁剪) 第二步: 用 "矩形"工具 拉出一个 宽:346px 高:25px的长条,命名为:长条1,颜色填充为:#EBF4FB,边框无.如图: 第三步: 在 长

用FIreworks制作QQ企鹅图

效果: 第一步:做身体:两个椭圆,左右各一个没有手指头的小手 手的部分这样处理: 路径联合后,效果如下:哈哈,真有成就感 第二步:眼睛:比较简单,两个立式椭圆,左眼仍是一个椭圆,右眼是个拱形. 第三步:小脚丫:注意给多画出一条线来表示有脚趾头,P.S.此乃左脚 第四步:嘴:花了很多次,最得这样处理比较合适:整体只留填充色,单画一条线作为嘴 第五步:围巾:调整起来比较麻烦,有点耐心就OK 第六步:哈哈,最好做的一步:大肚皮 第七步:把所有的东西放到一起,欣赏一下,哈哈 PNG源文件:

Fireworks制作钟摆式公告牌摇摆动画

今天我们用Fireworks制作一个钟摆式的公告牌. 先参阅一下效果图. 1.新建一个文件,画布背景颜色选取白色.同时将画布大小设置稍大些. 2.使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图. 3.输入文字. 4.在圆角矩形右.左上角绘制小圆形,如图所示. 5.添加辅助形,找到该圆角矩形的中心点位置,如图. 6.在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线.如图.

Fireworks 制作地球旋转动画

旋转 Fireworks 制作地球旋转动画.本教程主要练习蒙板与动画原件的应用.闲话少说,看实际效果: 具体步骤: 1.双击任务栏右下角的时间. 2.打开日期和时间属性对话框后,按ALT+PrintScreenSysRq键,将对话框屏幕复制到剪贴板中(呵呵,就地取材). 3.进入Fireworks,新建文件,粘贴.粘贴后利用裁剪工具将世界地图部分裁剪下来,裁剪时一定要放大比例进行裁剪,精确一些. 4.将裁剪好的世界地图克隆一份(CTRL+SHIFT+D),移动到画布右侧之外,空白处单击,选择属性

用Fireworks制作钟摆式公告牌效果

先参阅一下效果图: 1.新建一个文件,画布背景颜色选取白色.同时将画布大小设置稍大些: 2.使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图: 3.输入文字"织梦论坛": 4.在圆角矩形右.左上角绘制小圆形,如图所示: 5.添加辅助形,找到该圆角矩形的中心点位置,如图: 6.在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线.如图: 7.群组(Ctrl+A.Ctrl

Fireworks制作地球旋转动画

Fireworks 制作地球旋转动画.本教程主要练习蒙板与动画原件的应用.闲 话少说,看实际效果: 具体步骤: 1.双击任务栏右下角的时间. 2.打开日期和时间属性对话框后,按ALT+PrintScreenSysRq键,将对 话框屏幕复制到剪贴板中(呵呵,就地取材).

Fireworks制作文字探照灯效果实例教程

  我们经常可以看到一些用Flash做文字遮罩效果的教程文章,这种效果用Fireworks也同样可以做出来,并且可以生成GIF格式的小动画.下面,就让我引导大家一步步用Fireworks制作文字探照灯效果. 1.点击"File>New",建立一个新文件,将背景设置为黑色. 2.点击工具面版中的椭圆形工具,用鼠标在新画布上拖动一个椭圆,将椭圆的填充色设置为"None". 3.点选工具面版上的文字工具,在弹出的文字编辑对话框中输入文字,在此我们输入"ta

Fireworks制作打破玻璃的GIF动画效果

  本教程是向大家介绍如何利用Fireworks制作打破玻璃的GIF动画效果,制作方法并不是很难,效果非常不错,推荐过来,希望大家喜欢! 首先先看一下最终效果: 下面是具体的制作方法: 1.下载并安装滤镜插件Xenofex2到FW的Plug-in目录下(将解压出的文件复制进Plug-in文件夹即可),下载页面在这里(不是广告,我也不知道这是谁的BLOG). 2.运行FW,打开一张图片,我们可以适当缩小这张图片的尺寸,令周围留些空白,背景色设为白色.这样我们更能看清楚破碎扩散的效果.将这层命名为"

用Iframe实现框架的功能,并可以打开或关闭左栏

好几天没写了,凑一下热闹吧.在作项目的时候发现的,很久了:  <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml