您现在的位置:主页 > CSS实例 > 文章内容

小试牛刀之三 - 顶部图片细节及页面视觉修饰

作者:admin     来源:未知     日期:2012-01-09    点击:0
  Finally we’re off for the third part of our CSS tutorial. Lesson 1, 2 are still available on my blog for those who haven’t been following from the beginning. This will be our last design part, after this it will be “slice and dice” time and the beginning of the XHTML and CSS conversion. Here are some details of the final result: 
  本节是关于素材设计的最后一部分了,设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图:

◆ 返回 小试牛刀系列 CSS实例教程目录 ←←


点击这里查看大图

  I chose for the pink green buttons, maybe a bit girly I know but I like the combination of the prink with the green.
  Today we will create the entire template design. You'll get some tips and advice on how to create a header background, how add a finishing touch like ornaments, and a few resources on where to find those special Dingbats or ornamental fonts.
  在制作按钮时,我用了粉红和暗绿两种色调,可能看起来有点怪,但个人很钟意这个组合。在设计网页整体界面的过程中,我会给出一些意见和建议,重点是顶部的图片,如何增加一些细节,让它看起来更加的美观、精致。

  Creating the header background
  顶部图片视觉处理

  In part I and II we created our buttons and chose our colors. Now it's time to look for a picture that contains the colors of your preferred color pallet to create the header background. If you look at my color pallet you see that we have green and pink. I decide to use only the very flashy fluorescent pink for the little accents (like the bullets in the navigation) and a darker cherry for my banner combined with pink and a little green accent in our icon.
  在教程的前两部分中,提到过导航按钮的颜色选择,现在我们来看一下如何处理一张花卉图像的色调,使其与页面的风格达到统一。在用到的花卉图像素材中,大家可以发现它上面也有红和绿两种色调,我要做的事情就是把其中的颜色调制成粉红和暗绿,就好似导航菜单中使用的色调一样:
   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:(评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。)

精彩广告

    精彩推荐


      Copyright © 2011-2013 CSS教程网 版权所有