本文作者:三岁教程网

用Photoshop制作960网格的网页模板

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

效果图


    
     用Photoshop制作960网格的网页模板

找一张960像素,12等份,每部分左右边距都是10px。这里缩小了图片,按照960像素去切割。


    
     用Photoshop制作960网格的网页模板

新建图层,大小为填充中间的10等份,并与左右剩余的两个“等份”相距5像素。填充为为黑色。


    
     用Photoshop制作960网格的网页模板

接着新建一个图层,为左右各添加白到黑色的渐变色。


    
     用Photoshop制作960网格的网页模板

删除中间的黑色图层。


    
     用Photoshop制作960网格的网页模板

接下来把中间的十等份全部删除。隐藏中间的十等份。


    
     用Photoshop制作960网格的网页模板

添加一条竖立的虚线,在网页制作的时候,这条虚线可以使用dashed border来制作。


    
     用Photoshop制作960网格的网页模板

完成文字和导航,导航的位置参考“十等份布局”的大约位置来布局。


    
     用Photoshop制作960网格的网页模板

把当前标签换一个颜色。


    
     用Photoshop制作960网格的网页模板

添加RSS阅读标签的图片。


    
     用Photoshop制作960网格的网页模板

插入头图、文字。


    
     用Photoshop制作960网格的网页模板


    
     用Photoshop制作960网格的网页模板


    
     用Photoshop制作960网格的网页模板

对应一下十等份的位置。


    
     用Photoshop制作960网格的网页模板

底色并复制。


    
     用Photoshop制作960网格的网页模板

右侧添加75*75像素的图片。


    
     用Photoshop制作960网格的网页模板

给这些图片加上一个像素天蓝色边框,在网页切割时候直接写CSS就可以。


    
     用Photoshop制作960网格的网页模板


    
     用Photoshop制作960网格的网页模板

加上其他文字。


    
     用Photoshop制作960网格的网页模板

文章版权及转载声明

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

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

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

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

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