DIY a logo for Dark theme
如果你没有使用LEMONed同学的WordPressDark主题,可以不用往下看了。如果是的话,继续吧。他在这里说了,不会帮忙做logo的。
Q: I want a customized header image, can you make one for me?
A: Can you do the graduation thesis for me? lol, sorry.
人家有自己的事做,能给我们如此精致的主题,已经该偷乐了,下面就发扬我们的DIY精神吧。
首先你从这里下载我已经处理好的空白PSD模板。过程省略,主要是我的方法比较傻,而且比较繁琐,不具有可复制性。如果你有什么好的方法制作这样的拼合图片的话,欢迎告知。

在打开的PSD文件中,添加上你的文字或图片,我这里先加一个Y型的图片。如果你自己不会处理的话,可以在网上搜索下,找到自己满意的,不过注意版权哦
![]()
为刚加的图片加上图片样式,偷懒下,用了前段时间很流行的Web2.0的图层样式。只是调整了描边的宽度

再加上别的文字,我这里加上三个文字图层:g,thilay,’s Blog,直接就用默认的名字了

复制上面的g,thialy和Y的那个图片图层,Ctrl+E合并,Ctrl+[移动到背景层上面一层,命名为gythialy,Ctrl+T,旋转成倒影

为gythialy图层添加快速蒙版,使用渐变工具,在蒙版上按住Shift之上往下拉

在根据自己的情况调整下gythialy图层的不透明度,我这里设为50%,自己认为满意就好
然后就是保存为gif图片了,命名为logo.gif,当然了,名字你自己确定,这里只是以这个为例。图片至此已经搞定。把刚做好的logo图片拷到Dark的images目录下。
下面修改header.php和css文件。
打开Dark目录下的style.css,把#header img.logo的css定义改为
position: absolute;
left: 33px;
top: 30px;
border: none;
}
打开header.php,找到
<!-- img class="logo" src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="" / -->
替换为
恩,这样就完成了所有的工作,上传文件到WordPress的主题目录下,刷新,看看是不是可以了。体验DIY的乐趣吧。提供我现在logo的PSD参考,不要和偶一样哦,要不然我会郁闷的。
update @ 2007/05/21
刚在柠檬那里看到Bartelme Design也写了篇如何做Dark主题logo的文章,早知道就不写了,班门弄斧了。
update @ 2007/07/23
增加一种方法,感谢Donson同学提供
保持原来的header.php不变,只是修改css文件。未测试,有需要的自己研究。
#header img.logo {
position: absolute;
left: 48px;
top: 68px;
border: none;
}
#header h1 {
font-size: 200%;
text-indent:-1000px;/*将文字左移1000px(即隐藏,呵呵)*/
background:url(images/logo.gif) no-repeat;/*将LOGO作为背景*/
width:333px;
height:93px;
}
#header h1 a {
color: #fff;
display:block;
width:333px;
height:93px;
}/*这里如果不设定,就不能点击*/












谢谢这篇教程,但是提示一下,有个语句写的有点小错误
“>/images/logo.gif” alt=”" />
嗯…这句有什么问题?
我执行和W3C验证都没问题啊
我比较喜欢你些的这篇,哈哈。 :)
站长,根据你的教程,我已经换上了logo,很开心的说~~
不过,总觉得就这样把BLOG的名字直接换成图片,这样有些不好吧,起码对搜索引擎有点。。。
之前看过一本书,它是这样用图片替换文字的(我的BLOG是这样做的):
1.header.php文件不动,这样更符合W3C的想法吧,不修改结构文件,修改CSS。
2.在style.css上,将原有的重新定义为:
position: absolute;
left: 48px;
top: 68px;
border: none;
}/*这是浮动,按LOGO的样式*/
#header h1 {
font-size: 200%;
text-indent:-1000px;/*将文字左移1000px(即隐藏,呵呵)*/
background:url(images/logo.gif) no-repeat;/*将LOGO作为背景*/
width:333px;
height:93px;
}
#header h1 a {
color: #fff;
display:block;
width:333px;
height:93px;
}/*这里如果不设定,就不能点击*/
漏了,第一个定义是这样的“#header h1,#header img.logo”,theme原本是这样。。。
#header img.logo {
position: absolute;
left: 48px;
top: 68px;
border: none;
}
这样做,在去掉CSS文件时也能显示BLOG的Name,呵呵 ^-^。
不好意思,来你这说了这么多废话~~
呵呵,博客本来就是用来交流的
我对SEO不是很感兴趣,写博客也纯粹是自娱自乐-_-||
不过谢谢你提供的方法