网页背景平铺_在大约十秒钟内为网页创建无缝平铺背景

网页背景平铺

Creating a background image for your webpage (or desktop background) isn’t challenging at all. In fact, even a newbie Photoshop user can bash one out in about ten seconds. Here’s the simplest of simple methods with surprising, great results.

为网页(或桌面背景)创建背景图片完全没有挑战。实际上，即使是新手Photoshop用户也可以在大约十秒钟之内将其扑灭。这是最简单的简单方法，具有令人惊讶的出色效果。

偏移图像 (Offsetting the Image)

Find an appropriate image, like this one from Flickr. You can use any image at all, but some images will work better than others as a repeating background.

找到合适的图像，例如Flickr的图像。您可以使用任何图像，但是某些图像作为重复的背景会比其他图像更好。

Break out Photoshop. If you’re a GIMP user, you can install the Offset filter similar to the one we’re going to be using and follow right along with us.

突破Photoshop。如果您是GIMP用户，则可以安装与我们将要使用的偏移过滤器类似的偏移过滤器，并与我们一起关注。

The “hard” work can be done in an instant with this “offset” filter. Find it by navigating to Filter > Other > Offset, as shown.

使用此“偏移”滤波器可以立即完成“艰巨”的工作。通过导航到“过滤器”>“其他”>“偏移”来找到它，如图所示。

If you’re using an image with only a background layer, the offset filter will slide your image around, wrapping the image around in a tiling motion. Make sure “Wrap Around” is selected in “Undefined Areas” to tile the image properly. This is most of the work already, and we’ve barely begun. Let’s see how we can make this repeating photograph a little bit more seamless.

如果您使用的图像只有背景图层，则偏移滤镜会滑动您的图像，并以平铺运动的方式环绕图像。确保在“未定义区域”中选择“环绕”以正确平铺图像。这是大部分工作，而我们才刚刚开始。让我们看看如何使这张重复的照片更加无缝。

无缝边缘模糊 (Seamless Edges With A Blur)

Here’s a (somewhat crude) method that doesn’t really work well for this image, but may work for yours. We’ll create a blur layer by duplicating our background (Right Click > Duplicate Layer).

这是一种(有点粗糙)的方法，对于该图像而言效果并不理想，但可能对您有用。我们将通过复制背景来创建模糊层(右键单击>复制层)。

With this layer selected, perform a Gaussian Blur by navigating to Filter > Blur > Gaussian Blur. Use any setting that makes sense to you.

选择此层后，通过导航到滤镜>模糊>高斯模糊来执行高斯模糊。使用对您有意义的任何设置。

Create a blacked out layer mask by pressing + Left Mouse Button on the icon in the layers panel.

通过在图层面板中的图标上按+鼠标左键创建涂黑的图层蒙版。

Then simply use a soft brush with white as a foreground color to soften the edges where the tiling is very obvious. This might work very well for some photos, but ours is not an amazing result, so we’ll try a second technique.

然后只需使用白色的软笔刷作为前景色来柔化平铺非常明显的边缘。对于某些照片来说，这可能效果很好，但我们的效果并不理想，因此我们将尝试第二种技术。

Alternatively, you can also find the “Blur Tool” in the toolbox. It can give you a very similar result to this one, selectively blurring parts of the image.

或者，您也可以在工具箱中找到“模糊工具”。它可以为您提供与此非常相似的结果，有选择地使图像的某些部分模糊。

内容感知混合效果惊人 (Content Aware Blending For AMAZING Results)

In situations like this, content aware tools look like they’re working miracles. The “Spot Healing Brush” can make quick work out of removing the hard, obvious lines in the tiling and give you a much more seamless look. When you select the Spot Healing Brush, make sure you use a soft edged brush.

在这种情况下，内容感知工具看起来像是在创造奇迹。 “ Spot Healing Brush”(斑点修复刷)可以快速去除瓷砖上的硬而明显的线条，并为您带来更加无缝的外观。选择“斑点修复刷”时，请确保使用软边刷。

After four quick brush strokes, the image is startlingly convincing. It’s hard to believe it took so little work.

经过四个快速的笔触，图像令人吃惊。很难相信它花了这么少的工作。

在浏览器中测试 (Testing It In a Browser)

Save your image to your desktop as repeat.jpg, then download this file to your desktop and open it in your browser of choice. This will load whatever you created as a repeating background, just as you would see it on a remote webpage. If you know HTML (many of you will, I’m sure) you can edit this file in a notepad to use a different filename, if you prefer.

将图像作为repeat.jpg保存到桌面，然后将该文件下载到桌面并在您选择的浏览器中打开它。这将加载您作为重复背景创建的内容，就像在远程网页上看到的一样。如果您知道HTML(肯定会很多)，则可以根据需要在记事本中编辑此文件以使用其他文件名。

Thoughts or criticism on our method today? Got some tricks that work even better than this? Tell us about it in the comments, or simply email us your questions at ericgoodnight@howtogeek.com, and we may feature them in a future How To Geek graphics article.

对我们今天的方法有想法或批评吗？有一些比这更好的技巧吗？在评论中告诉我们，或通过ericgoodnight@howtogeek.com将您的问题通过电子邮件发送给我们，我们可能会在以后的How To Geek图形文章中介绍它们。

Image Credits: Wall of Books by benuski, Creative Commons.

图片来源： benuski的书籍墙，知识共享。