網頁背景平鋪

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的書籍墻，知識共享。

翻譯自: https://www.howtogeek.com/112320/make-a-seamless-tiling-background-for-webpages-in-about-ten-seconds/

網頁背景平鋪

總結

以上是生活随笔為你收集整理的网页背景平铺_在大约十秒钟内为网页创建无缝平铺背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。