Request: modify image to make it suitable for background on website

[krneki]

Hello,

I was wondering if you could modify attached background image so it would be more suitable for a repeating background image for a website? I have been already trying to do that by myself for hours (duplicating layers, flipping them horizontally/vertically, offset...), but I clearly have no idea how to realize that well. The main problem is that gradients and textures on borders are way to rough and it is really noticeable when so small background gets repeated for many times. On top of that, corners have dark shadows which make everything even more noticeable. Please note that attached image should be resized for about 3 times, I'm just posting original image which I have to work with.


Could you please help me out with that request?


Thank you very much in advance!
Best regards,
krneki

 

[ALB68]

You image is 20kb and you want to increase the size by 300%? Good luck. I'm just saying your asking to improve this, not further degrade it..that's what that will do.

 

[krneki]

I'm sorry for indistinctness , I wasn't clear enough in my previous post. Size should be decreased by about 300 %, which means that the final dimensions should be about 500x400 px.

 

[ALB68]

I just looked at it in Bridge, I'll open it in PS. Let me look again.

Edit: It is 700 x 525 at 240 ppi as shown in the screen shot.

If you want the pixel dimensions to change you will have to resample it.

 

[ExProsiveGaming]

Alright well maby I got it wrong but you basically wanted that image to be 3x bigger.. I tried it.
This is a 2500x1875. I tried to keep the quality. Again, I'm not sure for what you asked

Here's the link for the full image: http://img10.imageshack.us/img10/1439/zlata2500x1875.jpg

And here's a 5000x3750 version. You can even zoom in after the actual pixels and it's still not pixelated. http://www.mediafire.com/view/?ew9rbd12etsnt62

 

[ibclare]

I'm not certain of the OPs question, but it sounds like he wants this to tile and not look like the edges are all different, which of course they are. All different. If that's the case, just masking and blending out the edges should help, but frankly, I would just recreate the texture or tile itself.

I don't think the issue here is the size as much as it is making the square into a suitable repeating tile and the currrent image is just wrong for the purpose. My advice, find or create a different one. Use elements from this if you like it that much, cut, paste, clone, blend. Try to make the whole thing more homogeneous in texture and color, only have any large variables in the middle ground of the square, and your edges will fit together much more like they belong as one image.

 

[krneki]

Thanks for help, I really appreciate it!

Ibclare in fact got me right, "tile" is correct word, I just couldn't remember it. I also found one tutorial for similar problem, but I don't think it's applicable in my case: psd.tutsplus.com/articles/how-a-turn-a-texture-into-a-seamlessly-tiled-background/

My image is just so inhomogeneous that it exceeds my PS knowledge if I want to make seamless, infinite texture with it.

 

[Tom Mann]

"I don't think the issue here is the size as much as it is making the square into a suitable repeating tile and the currrent image is just wrong for the purpose."

Clair immediately identified the main problem: There is just so much variation in color, brightness, contrast and everything else as you from the center out to the edges of this image that it makes it very difficult to use as the starting point for a seamless tiling.

However, it's not impossible to get a tolerable result (if you have the right tools / techniques).

My 1st step was bring the size down to what the OP requested (ie, around 500 px wide).

My next step was to minimize the variations listed above. I started by using a combination of Topaz Details (with the amplitude of the lowest spatial frequencies set to zero), and Topaz Adjust (set to further minimize large scale variations).

Next, I made a circular, strongly feathered selection of the center of the image, inverted it, and then used that as a mask for adjustments to the contrast, brightness and saturation of the edges of the image. This still didn't yield an acceptable level of evenness, so I then sampled the color in the center of the image and applied it (separate layer set to color blend mode) to the entire image. Finally, it was in half-way decent shape.

As the last step of this part of the process, I used the filter/other/offset to move the edges to the middle, and then did two quick applications of the content aware fill to the small seams that were visible. The result is shown below:

 

[Tom Mann]

At this point, the lack of sharpness started to annoy me, so, to improve that as well as to show that it indeed could be used to make a decent tiling, I duplicated the previous image 8 more times, expanded the canvas by 3x in each direction, and moved the 9 tiles into a 3x3 array.

Because the OP explicitly asked for something around 500 px wide, I downrez'ed it once again to that final dimension. The result is shown below. It's not perfect, but it's vastly better than what one would get if you didn't first strongly even out the starting image.

I hope my description of the process was reasonably clear.

I will add that I would NOT ever want to attempt this, especially with the limited amount of time I want to put into a little demo like this, unless I had previous experience with projects like this, and also had tools like Topaz Details and Topaz Adjust available. It would hve taken much longer to do using only the native tools built into PS.

Tom

 

[krneki]

Wow, thank you very much Tom, you really did a nice job over there. I will try it for myself as well, but I sincerely doubt to get so good results.

Just for an addition, 500 px is not really a limit, but I just though that image in my first post should be downscaled to 500 px so there would be good compromise between details and sharpness. Final background size of course doesn't matter, it should just have dimensions for optimal results of website.

This is how layout looks like: s12.postimage.org/5b7u1z2rh/layout.jpg . As you can see, background is only on the each side. Width of website is 1140 px.

 

[ExProsiveGaming]

Well I feel like it has already been done but I had this lying around so I might as well upload it.

This is fully repeatable and 1500x1125. You can make it smaller if you wish and repeat it in every dimension. It will always fit perfectly.

 

[krneki]

Great job!

Since you guys are way more skilled that me, may I ask for another favor? Here is actual template of website I'm working on: postimage.org/image/sj65o410j/
As you can see, color scheme is more or less orange, so I believe that background would be better if it would fit more to those colors. Could you readjust that? Personally I would do that with channel mixer or hue/saturation to make it more orange, but I bet you have some secret tricks

 

[ExProsiveGaming]

Thanks. But I'd like to see you try it first. If it won't work, we will help