※当前位置※ 主页 > 网站设计 > 网页制作 > 文章内容
返回首页

虎年第一款商务网站布局设计教程

时间:2010-03-23 00:00来源:未知 我要投稿 浏览:

  今天的布局设计是以黑色为主菜,配菜是红与白,听起来是不是有些纳闷,那么请往下看,作者是如何打造的。

  

商务布局最终效果图

 

  准备就绪

  新建文档:大小1200px*1200px.设置前景色#505050,背景色#2d2d2d,选择”渐变工具”,并改渐变类型为”径向渐变”。此径向渐变大概是位于画布中间上方一点,因此渐变起点和终点要有一定长度。如下所示:

  

 

  接下来,新建图层,命名为”header”,选择”矩形选框工具”或”矩形工具”沿左上角拖出高为300px的矩形,以任何颜色填充。如下所示:

  

 

  给”header”添加以下图层样式:

  内阴影

  

 

  渐变叠加

  

 

  这时的效果图为:

  

 

  创建TopBar

  选择”钢笔工具”,像下图一样描绘头部形状:(提示:借助网格线或标尺)

  

 

  接着用黑色填充,如下所示:

  

 

  此图层设置如下样式

  1)内阴影

  

 

  2)渐变叠加

  

 

  3)描边

  

 

  在topbar突出的空间里添加白色文字”contact us”,字体是Arial,右边带一个小三角形(可使用多边形套索工具创造)。

  

 

  创建导航和网站标题

  使用”圆角矩形工具”,半径为10px,拖出一般按钮大小的圆角矩形作为导航链接。

  

 

  不管用什么颜色填充,然后与”topbar”图层合并,得到的效果如下:(我按照作者说的操作,没有得到下图效果,只是把圆角矩形的图层样式改为”topbar”的图层样式)

  

顶一下
(0)
0%
踩一下
(0)
0%
文章评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片