Photoshop设计一个简单的个人博客模板

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

最终效果:

Photoshop设计一个简单的个人博客模板
第一步: 
创建一个新文件:1024像素*1200像素的文件。

Photoshop设计一个简单的个人博客模板
第二步:虚化背景效果:
你可以在这里下载这个图片或者是根据这个教程自己设计一张背景。

Photoshop设计一个简单的个人博客模板
第三步:设计好一个布局:

Photoshop设计一个简单的个人博客模板
选择[圆角矩形工具]半径为5像素,在中间位置画一个825×940大小的形状,不透明度改为60%。

Photoshop设计一个简单的个人博客模板
之后选择[横排文字工具]打上你的标题(例如:我的个人博客)。
再次选择[圆角矩形工具]半径为5像素,在画布的中间画一个626×418 大小的形状,不透明度设置改为75%。

添加一个图层蒙板,选择[渐变工具],将其设置为黑色到白色,从底部向顶部拉一个渐变。

Photoshop设计一个简单的个人博客模板
再次选择半径为5像素的[圆角矩形工具],在左上角画一个81×39像素大小的形状,不透明度调到50%。
添加一些icons(像RSS或Twitter之类的)。不透明度设置为80%。

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

Photoshop设计一个简单的个人博客模板

Photoshop设计一个简单的个人博客模板
渐变颜色从#ffffff – #d4d4d4
添加月份和日期(字体为:Antipasto
按U(选择半径为5像素的[圆角矩形工具]),固定大小值为504×38像素,距文章日期160像素下面画一个圆角矩形。
图层混合选项[投影],参数如下图:

Photoshop设计一个简单的个人博客模板
(字体:Verdana
选择[横排文字工具],在这个圆角矩形工具里添加一些文字(如归类,作者,评论),给这些字体设置颜色为#ffa200。

Photoshop设计一个简单的个人博客模板
最后,选择[横排文字工具],添加标题和内容(我用斜体字作为装饰)。

Photoshop设计一个简单的个人博客模板
第五步:加上最近的文章和旧文章的链接:
最后一步,你需要在所有文章下面添加“<<近期文章”和“旧文章>>”。

Photoshop设计一个简单的个人博客模板

我的最终效果:

Photoshop设计一个简单的个人博客模板

翻译:语言设计

原文链接:How to design a Minimalistic Blog Theme

0

橘子酱
编辑大人

编辑大人,宝娘。提供wordpress主题设计修改。

发表评论




  • 点赞最多的文章

  • NGX潮牌双肩背包

    NGX潮牌双肩背包
  • 标签

  • 微信公众平台

    贩卖优质设计素材