本文作者:三岁教程网

photoshop制作博客网站模板教程

三岁教程网 2022-11-07 00:00:00 96 抢沙发

效果图


    
     photoshop制作博客网站模板教程


    
     photoshop制作博客网站模板教程

打开PS,然后创建一个空白文档,使用RGB色彩模式以及设置为72DPI。


    
     photoshop制作博客网站模板教程

处理页面的背景,给背景选择一个素色,然后从上面使用蓝绿色的放射性渐变工具一直拖到中间。


    
     photoshop制作博客网站模板教程

打开一个牛皮纸素材, 为背景增加一些有趣的材质效果。


    
     photoshop制作博客网站模板教程

将材质去色 (CTRL+SHIFT+U),然后选择高斯模糊,用大一点的像素来抹掉牛皮纸上面的一些细节。


    
     photoshop制作博客网站模板教程

将修改过的牛皮纸材质放在渐变的背景色上面,然后选择混合模式的叠加选项,再修改透明度为90%。


    
     photoshop制作博客网站模板教程

将分辨率调整到1024×768,将参考线设置为960px宽,两边空白处各有20px宽。


    
     photoshop制作博客网站模板教程

使用圆角矩形工具画一个内容区域,颜色为浅灰色(#eeeeee),圆角半径为20px。


    
     photoshop制作博客网站模板教程

双击圆角矩形图层然后添加8白色描边,宽度为8px,混合模式为叠加然后调整透明度为30%。


    
     photoshop制作博客网站模板教程

再次为这个圆角矩形兄添加一个内发光,白色的5像素即可。


    
     photoshop制作博客网站模板教程

最后添加一个外发光,黑色的15%透明度的,于是一个淡淡的内容区的阴影就这样出现了。


    
     photoshop制作博客网站模板教程

新建一层,再画一个圆角矩形宽度一样,但这次要改改圆角半径,10px足矣。在下面给这个灰色区域添加一点点渐变让他有一种倾斜度。


    
     photoshop制作博客网站模板教程

复制一个之前的内容区域,然后用橡皮工具从中间将两侧的边线擦出一个渐变来。


    
     photoshop制作博客网站模板教程


    
     photoshop制作博客网站模板教程

在整个边线上再用铅笔工具画1px的垂线。这里可以按住shift来保持角度和垂直。

还是要慢慢擦出来渐变。


    
     photoshop制作博客网站模板教程


    
     photoshop制作博客网站模板教程

将一个纸张的材质盖住内容区头部的一部分,可以用色相/饱和度(ctrl+U)将其调整为蓝绿色。


    
     photoshop制作博客网站模板教程

按住CTRl然后点右边图层中内容区的缩略图,可以创建一个选框,然后反选(CTRL+ALT+I)然后删除多于的部分,然后还是擦出一条渐变来。


    
     photoshop制作博客网站模板教程

用铅笔工具在头部的下面画一条1px的横线。


    
     photoshop制作博客网站模板教程

选择内容图层,然后用上面的方法建立一个选取,按住ALT键来缩小选区。然后新建一个图层在这个选区内填充上白色并且改变透明度为90%,然后略微做一下渐变,这样就在头部添加了一点高光。


    
     photoshop制作博客网站模板教程

继续用矩形选框工具在内容区域上面画一个侧边栏。依旧填充灰色背景(#eeeeee)


    
     photoshop制作博客网站模板教程

添加一个透明的边框,选择描边选项即可。


    
     photoshop制作博客网站模板教程

继续用外发光来添加一个浅灰色的边,调整扩展值到最大,得到一个双边线效果。


    
     photoshop制作博客网站模板教程

再用内发光工具给侧边栏添加一个白色的边线效果,调整阻塞选项到最大值,可以让光出现的比较柔和。


    
     photoshop制作博客网站模板教程

最后在侧边栏上添加一个从白色到灰色的渐变来增加些细节和层次。


    
     photoshop制作博客网站模板教程

将侧边栏裁开,因为之前计划的是每一个菜单目录都是一个单独的区域。


    
     photoshop制作博客网站模板教程

画一个矩形来模拟封闭区域。


    
     photoshop制作博客网站模板教程

填充上白色,然后右键点击侧边栏将图层样式拷贝走,然后粘贴到这个日志区域图层上。


    
     photoshop制作博客网站模板教程

创建一个导航区域,注意要有渐变,输入导航文字。


    
     photoshop制作博客网站模板教程


    
     photoshop制作博客网站模板教程

调整颜色和大小和行间距。


    
     photoshop制作博客网站模板教程

在内容区域底部画一个浅色矩形。


    
     photoshop制作博客网站模板教程

设置一些函数,添加一些次级信息。


    
     photoshop制作博客网站模板教程


    
     photoshop制作博客网站模板教程

最后添加写其他页面。


    
     photoshop制作博客网站模板教程

文章版权及转载声明

作者:三岁教程网本文地址:http://ssjcw.com/?id=61679发布于 2022-11-07 00:00:00
文章转载或复制请以超链接形式并注明出处三岁教程网

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,96人围观)参与讨论

还没有评论,来说两句吧...