小试牛刀之三 - 顶部图片细节及页面视觉修饰
作者:admin
来源:未知
日期:2012-01-09
点击:0
本节是关于素材设计的最后一部分了,设计工作完成后将会开始讲解如何切片以及在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.
在教程的前两部分中,提到过导航按钮的颜色选择,现在我们来看一下如何处理一张花卉图像的色调,使其与页面的风格达到统一。在用到的花卉图像素材中,大家可以发现它上面也有红和绿两种色调,我要做的事情就是把其中的颜色调制成粉红和暗绿,就好似导航菜单中使用的色调一样: