开启辅助访问勋章商城切换到宽版

o(￣ヘ￣o＃) 任务菌(`へ´*)ノ懒人通道_(:3」∠)_签到领奖官方微博紧急反馈中心

有爱，有技术，有你^_^)y

技术宅社区 | Z站»家 › 设创区 › Photoshop › 非原创教程 › 【搬运】Photoshop设计一个简单的个人博客模板 ...

12 3 / 3 页下一页

发新帖

查看: 3966|回复: 32

收起左侧

[网页设计] 【搬运】Photoshop设计一个简单的个人博客模板

吃货呐冒个泡

签到天数: 3 天

连续签到: 1 天

[LV.2]偶尔看看I

1126 主题	319 好友	5万积分

❤~(｀･ω･´) 保【FSC】姆 (´･ω･｀)~❤

积分: 50565

发表于 2012-6-17 18:17:30 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要登录才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

x

本帖最后由绯色の胖子于 2015-2-24 08:49 编辑

在这一篇文章中，我们将展示给大家如何用Photoshop设计一个简单的个人博客模板。如果你也有兴趣，不妨跟着我们的步骤，一步一步的来完成看看。
最终效果：

登录/注册后可看大图

第一步:
创建一个新文件：1024像素*1200像素的文件。

登录/注册后可看大图

第二步：虚化背景效果：
你可以在这里下载这个图片或者是根据这个教程自己设计一张背景。

登录/注册后可看大图

第三步：设计好一个布局：

登录/注册后可看大图

选择[圆角矩形工具]半径为5像素，在中间位置画一个825x940大小的形状，不透明度改为60%。

登录/注册后可看大图

之后选择[横排文字工具]打上你的标题（例如：我的个人博客）。
再次选择[圆角矩形工具]半径为5像素，在画布的中间画一个626x418 大小的形状，不透明度设置改为75%。
添加一个图层蒙板，选择[渐变工具]，将其设置为黑色到白色，从底部向顶部拉一个渐变。

登录/注册后可看大图

再次选择半径为5像素的[圆角矩形工具]，在左上角画一个81x39像素大小的形状，不透明度调到50%。
添加一些icons（像RSS或Twitter之类的）。不透明度设置为80%。

登录/注册后可看大图

第四步：设计内容区：
我们首先从文章的日期开始，选择半径为5像素的[圆角矩形工具]，将其设置为76x29像素固定大小，画一个形状，不透明度设置为40%。[图层混合选项]，设置[投影]、[颜色渐变]，参数如下图：

登录/注册后可看大图

登录/注册后可看大图

渐变颜色从#ffffff – #d4d4d4
添加月份和日期（字体为：Antipasto）
按U（选择半径为5像素的[圆角矩形工具]），固定大小值为504x38像素，距文章日期160像素下面画一个圆角矩形。
图层混合选项[投影]，参数如下图：

登录/注册后可看大图

（字体：Verdana）
选择[横排文字工具]，在这个圆角矩形工具里添加一些文字（如归类，作者，评论），给这些字体设置颜色为#ffa200。

登录/注册后可看大图

最后，选择[横排文字工具]，添加标题和内容（我用斜体字作为装饰）。

登录/注册后可看大图

第五步：加上最近的文章和旧文章的链接：
最后一步，你需要在所有文章下面添加“<<近期文章”和“旧文章>>”。

登录/注册后可看大图

我的最终效果：

登录/注册后可看大图

登录/注册后可看大图
屠版组

我们有神一般的手速
刷帖是我们毁灭世界的利器
签章 = ω =

评分

参与人数 2	宅魂 +1	宅币 +33	贡献 +4	收起理由
夕。浅	+ 1	+ 3		o(￣▽￣)ブ发糖
銀琉迦		+ 30	+ 4	o(￣▽￣)ブ发糖

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复

使用道具举报

丹姬之逃之夭夭

该用户从未签到

6 主题	33 好友	1万积分

积分: 14048

发表于 2012-6-22 18:26:27 | 显示全部楼层

这学期的网页课结课了哦。。。还是想来看看。。

天文地理---->メ大象蚂蚁---->メ四书五经---->メ▍没有蜡笔的小新---->メ。。。

回复支持反对

使用道具举报

该用户从未签到

2 主题	10 好友	1908 积分

积分: 1908

发表于 2012-9-23 15:33:57 | 显示全部楼层

导航栏君呢？

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

65 主题	132 好友	3万积分

喵呜喵呜汪！

积分: 37066

发表于 2012-11-6 20:25:13 | 显示全部楼层

感覺字體略微有些不對勁的樣子……話說這裏有誰是研究字體設計的……

点评

比如說標題用斜體就會顯得不協調发表于 2012-11-6 20:25

喵~！

回复支持反对

使用道具举报

该用户从未签到

3 主题	23 好友	4723 积分

积分: 4723

发表于 2012-12-5 11:13:16 | 显示全部楼层

楼主赞我觉得颜色可以换一种会漂亮的感觉~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

签到天数: 2 天

连续签到: 2 天

[LV.1]初来乍到

200 主题	134 好友	16万积分

请叫我千酱

积分: 163917

发表于 2012-12-8 16:15:40 | 显示全部楼层

0 0果然很麻烦的样子（喂

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

2 主题	14 好友	8394 积分

积分: 8394

发表于 2012-12-15 22:46:58 | 显示全部楼层

学习学习！

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

2 主题	18 好友	6246 积分

积分: 6246

发表于 2013-1-6 15:53:16 | 显示全部楼层

学习了~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

3 主题	14 好友	7638 积分

积分: 7638

发表于 2013-1-18 16:14:10 | 显示全部楼层

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

_四爷配小四_

该用户从未签到

5 主题	14 好友	3614 积分

积分: 3614

发表于 2013-1-26 15:31:54 | 显示全部楼层

连看两篇强大的贴子啊~~~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

銀兎小朋友

该用户从未签到

16 主题	66 好友	2万积分

积分: 24381

发表于 2013-2-2 17:12:21 | 显示全部楼层

这个好棒

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

仿佛不是梦般的

该用户从未签到

4 主题	11 好友	4836 积分

积分: 4836

发表于 2013-2-3 12:31:03 | 显示全部楼层

不错不错，知识抱走

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

40 主题	49 好友	1万积分

积分: 11191

发表于 2013-2-7 16:52:52 | 显示全部楼层

俺们不做页面，俺们做不要脸的名片和个人简历……幽默感在哪里，在哪里

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

4 主题	9 好友	7141 积分

积分: 7141

发表于 2013-2-8 00:09:06 | 显示全部楼层

简单！我稀饭╮(￣▽￣")╭

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

5 主题	16 好友	5809 积分

积分: 5809

发表于 2013-2-10 13:23:31 | 显示全部楼层

收藏~抱走~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

12 3 / 3 页下一页

发新帖

小黑屋|手机版|技术宅（基宅） ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-4-29 11:14 , Processed in 3.428477 second(s), 50 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表