This post is about " COVER IMAGE ", Maybe you have added a cover image, so big size image. but many friends don't have the skill to design pictures,of course, they include me. Then i found “background-repeat” is a good way. You just need a small pic or icon, then repeat it.

But if we use tools like photoshop, it will be so diffcult. I found 3 websites that can help us.(http://www.bgpatterns.com/ https://patterninja.com/ http://thepatternlibrary.com/ ), the size of cover image maybe 1900*195 or 1800*255, you can create a pic by these website,to capture a screenshot that the size you want. i show some pics at the end of article. Try it!

封面图片，这个功能在稍早之前就已经有了，社区里面也有很多朋友使用了。不过想制作一个自己喜欢且符合尺寸的封面图，实在是太费事了。尤其是不太具备ps等技巧的朋友，于是乎上传的图片会变形模糊。但，其实一个1900*200的大图最适合的展示方式我觉得却是平铺图。

什么是平铺图？

简单来说就是用重复的元素填充整个图片区域。就好像铺瓷砖一样，一块一块的构成了整个平面。大图设计难，小图却很简单。只要掌握好平铺的技巧，一样可以很不错。就如右侧的图，它是由一个个长颈鹿构成。

多大尺寸比较合适？

电脑分辨缘故，所以会出现一些差异，比如我的适合 1900*195 ,而我老婆电脑适合1800*255 。并且根据自己的介绍的行数，适当增加20，比如介绍是1行，就是1900*175 如果是2行就是1900*195,以此类推。

我在不同的电脑上看过，会有些缩放显示，不过因为是平铺图，没什么影响，只不过是多显示或者少显示的区别。

怎么制作平铺图？

比如使用代码，平铺后截个图，又或者使用PS工具制作。

……
background: url("xxx.png");
background-size: 100% 100%;
background-repeat: repeat;
……

但是呢，我们都不是专业的设计师（向 @nicolemoker 大漂亮学习！），所以什么ps啊我们就不用了，借助于现成的工具或者网站。

http://www.bgpatterns.com/
https://patterninja.com/
http://thepatternlibrary.com/

这三个是比较不错的平铺图生成网站，花样很多，怎么使用呢？了解我的朋友都知道，我从来不详细说的，哈哈！自己摸索才是正途！

下面是一些平铺图截图，欢迎欣赏：

平铺图作为封面,还挺不错！👉 How to create a cover image by repeat a image！[look at my cover!]

什么是平铺图？

多大尺寸比较合适？

怎么制作平铺图？

Recent Posts