tutorial: making a big background image and/or seamless tiling

Note:  I found out since I wrote this post that pixlr (a free online editor) also has layer masks. Which means  that you can do the exact same thing that I am describing below over there as well. True, the mask works a bit differently, but it will take you no time at all to figure it all out. 

Photoshop tutorial only I'm afraid... :-\. I really tried to find a way of doing this which does not involve buying software but couldn't. The only good news is that photoshop elements, the vastly cheaper 'lite' version of photoshop, lets you use layer masks also it seems...

OK, so you found an image but it is smaller than 1920x1200. Here is what you do (and please click on the images to see all the instructions nice and large):


Open the image in photoshop. Double click on the image icon that you see on the layer palette. This will turn the background into a layer.


Next step: From the top menu, go to Image > Canvas Size. Make sure you place the little anchor square on the top left and then change the canvas size values to 1920 and 1200. Once you have done this you will see that the image is now sitting on the top left and you have a transparent background to the bottom and to the right. These transparent areas are what you need to fill.


Once you have the canvas size in place, drag the layer onto the little page icon at the bottom of the Layer palette and duplicate it. Next, go to the top menu Edit > Transform > Flip Horizontal. Then, holding down the shift key (very important this!) drag the top layer to the right. Photoshop will give you a tiny 'stop' when you hit the document border and this is exactly where you stop if you want an image is perfectly symmetrical and can also be tiled.

Next, you go back to the top menu and go to Layer > Add Layer Mask > Reveal All and add a layer mask. (You will see the layer mask icon appear next to the image icon on the layer palette after you have done this). Then you go to the gradient tool in the tool box. Make sure from the tool options palette that you have the linear gradient, going from black to transparent. Then, again holding down the shift key, give the layer a few soft horizontal strokes, until everything is nicely blended.


Remove the layer mask by going back to the top menu, Layer > Remove Layer Mask > Apply.

Merge the two layers into one by using the layer palette (tiny arrow on the top right will take you there). However, do not Flatten Image, but Merge Visible!

Then duplicate the merged layer (again) and this time flip it vertically by going (again) to Edit > Transform > Flip Vertical. Move the layer down, until you get the tiny 'stop'. Repeat all steps above with the layer mask, except that this time you stroke vertically, still holding down the shift key.


And there you have it. This is now exactly the right size and is also tile-able, since it is symmetrical as well. All you need to do now is to save it in a web format. File > Save for Web > Jpeg or whatever and you are done! 

 (Tip:  If you upload a background image into blogspot via the template editor, it has to be below 300KB. So, check this as you are saving from photoshop.  ) 

................................................................................................................................
Powered by Blogger.