在 photoshop 中切片图像,以便以后在 html 和 css 中不显示重复

在 photoshop 中切片图像,以便以后在 html 和 css 中不显示重复

不确定这是否是 SU 主题,但在哪里问呢?设计师创建了某些元素的此类设计:

在此处输入图片描述

这是真的吗?如何对元素进行切片,例如 20px,然后重复它们?我无法正常执行此操作:如果我对这张图片进行切片,然后重复它,那么我就没有一个每个人都能看到的美丽背景 - 它是重复的,那么我可以对它进行切片吗?这样,将来,当我将其作为 css 中的背景时,它看起来就像是一张巨大的图像,没有任何重复?我该怎么做?

答案1

创建无缝可重复的图案可能比较棘手,但完全可行。

根据我的经验,使用尺寸小于 150px 的图形补丁很难制作出可重复的图案,因此请尝试至少使用这个尺寸。

当你选择一个好看的补丁时,你需要查看补丁的边缘,并将相对的边对齐。在我看来,你可以让设计师为你做这件事,因为这确实是一项设计任务。

为了让边缘看起来更美观,一个技巧是将您选择的补丁放入新的 ps 文档中,将其放在另一个补丁旁边,这样您就会看到该补丁重复了,然后在选择其中一个补丁时,您可以使用仿制图章工具或修复画笔工具借用下一个补丁中的图形,使它们完美地融合在一起。完成一些克隆后,删除多余的补丁,并将原始补丁复制到其旁边,看看它看起来怎么样。根据需要重复。

您可能需要一些 PS 经验才能完成这项工作,这就是我认为这是设计师的工作的原因。

这里有一个关于创建无缝图案的好文章并通过一些插图解释了该过程。

相关内容