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

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/

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

下面是一些平铺图截图,欢迎欣赏:

Recent Posts

第十期“谷哥点名”活动结束 & 第十一期开始 #11 角色主题:角色  10月18日截止

If you like @jubi ,please follow\reply .hope to make friends with you!   

感谢您阅读 @jubi 的帖子 希望得到您的follow、upvote和reply ,对我最重要的是reply,期待和您的每次对话    

H2
H3
H4
3 columns
2 columns
1 column
11 Comments