甲虫课堂 > PS教程 >

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

阅读
2021-03-19 10:07:32

效果图

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

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

用Photoshop制作960网格的网页模板(1)

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

用Photoshop制作960网格的网页模板(2)

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

用Photoshop制作960网格的网页模板(3)

删除中间的黑色图层。

用Photoshop制作960网格的网页模板(4)

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

用Photoshop制作960网格的网页模板(5)

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

用Photoshop制作960网格的网页模板(6)

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

用Photoshop制作960网格的网页模板(7)

把当前标签换一个颜色。

用Photoshop制作960网格的网页模板(8)

添加RSS阅读标签的图片。

用Photoshop制作960网格的网页模板(9)

插入头图、文字。

用Photoshop制作960网格的网页模板(10)

用Photoshop制作960网格的网页模板(11)

用Photoshop制作960网格的网页模板(12)

对应一下十等份的位置。

用Photoshop制作960网格的网页模板(13)

底色并复制。

用Photoshop制作960网格的网页模板(14)

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

用Photoshop制作960网格的网页模板(15)

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

用Photoshop制作960网格的网页模板(16)

用Photoshop制作960网格的网页模板(17)

加上其他文字。

用Photoshop制作960网格的网页模板(18)

相关搜索
淘宝美工磨皮教程ps皮肤质感古风人像创意设计旧照翻新夜景分辨率七夕情人节海报
相关教程
相关评论
X
0条回复

全部回复

回复...
X
X
写评论...
0
更多
X