Background Image Blue Overlay

[gbasalmon]

Hey guys, I was messing around in Photoshop Elements with a large QMJHL picture I downloaded, and I think it may have turned out kinda good. The only thing I might change is make it a little darker overall to match the other ones that are already there. I tried it out ingame and if I do say so myself, it looks quite nice. Anyway, here's a looksee.



This is obviously a much smalller version, but if I'm on the right track, I'll release it along with a few others I hope to work on...

[Shadd666]

Yeah! Nice one!

I don't know if it's possible,but can we have many pics,and the game displays a randomized one? It would be nice...

Or maybe a specific pic in specific leagues...

[archibalduk]

Shadd - you can have specific pics for specific leagues and teams. Otherwise the default background is shown. It's also possible to have a specific background for certain screens.

Gbasalmon - Do you have a template for your blue effect? I've been trying to make a nice one but haven't been very successful.

[gbasalmon]

I don't have a template per se. What I can tell you is what I did to get that effect.

First, bear in mind that this is all in Photoshop Elements. I'm not sure if it's the same in Photoshop, I think if anything it might be easier. I took the photo and resised it to the 1280x768 size necessary. Then, I changed the hue, saturation, and lightness to 225, 25, and -25 respectively. Then I applied a reflected Steel Blue gradient to the image with 10% smoothness and 40% opacity to the image, with two seperate filters, one from top left to bottom right, and one from top right to bottom left. I'm not sure if I like it, because the default backgrounds seem to have shading going only from top right to bottom left. There, I hope it was at least pseudo-easy to follow as to what I did. Also, if anyone has any large photos that I could use, feel free to PM them my way, if that's even possible.

[Minstrel]

I can say that how I did my NHL logo ones was that I used a default blue background that I though worked well and then I used the 'Luminosity' layer type then blurred the image and adjusted the hue/sat and layer transparency so that mainly the white portions would still not interefere with white game text.

So you could try that even though you'll be overlaying a full screen image instead of just a big logo like I was... you can test it out using a flat one color background as your base image, one with a gradient and/or even textures on it as they'll show through your photo and give it some depth which can make the overlay of the game's text set itself off a bit more. I'm sure Elements has the Texturizer and or Craquelure in it's 'Texture' filters are right? Mine used the Craquelure filter with a heavy blur on it

[inSTAALed]

gbasalmon and I are working on a mini-background project together.

As of now we are fixing up the overlay on the images. I'll give your way a shot Minty (I have CS2 so you can be more specific if you want to).

The hardest part of this whole thing is finding pictures that are big enough to use.

[Minstrel]

Part of the advantage of using blur and texture is that you can break fromt he restraints of finding a full sized image I actually used the 45x45 logos expanded to near full screen for mine, it's just I offset the logos so they would stay pretty much within the display section on the screen and not overlap into the sidebars of background of the titlepanel as I find that distracting...

Anyholmes... here's from the text file included with my NHL team bkgs about how I roughed up my images for background use

For people who might want to recreate this look for other leagues here's the tech details: This look was created by first taking a light blue and using Photoshop's 'Craqueleur' texturzing filter. Next I sized logos about the size of the roster page overlay where the rosters are listed. I then gave them a fairly heavy gaussian blur to keep them from being distracting and set the layer properties to 'Luminosity', this is what gives the shades of blue instead of the normal logo colors.

I then set the layer to around 35% opacity but you'll have to adjust it until you get the look you want. If your logo has a lot of white in it it can be helpful to use the saturation and lightness commands to make the white less apparent. All of that is done so that the background image doesn't interfere with the text that will be dispalyed n top of it. Save as an average quality .jpg to save space and add a bit more effect and you're all set!

[archibalduk]

Thanks for the info

I took the photo and resised it to the 1280x768 size necessary.

I'm 99% sure you only need to make them 1024x768.

[gbasalmon]

Thanks for the info

I took the photo and resised it to the 1280x768 size necessary.

I'm 99% sure you only need to make them 1024x768.

That might explain why my Boston Bruins one wasn't working. Sillyness...

[inSTAALed]

I knew I was right salmon.

I tried Minty's method with an action shot and it just didn't look right. For logos and stuff like that it looks wonderful though...

[B. Stinson]

I know this is a real shot in the dark... but does anyone have the default "overlay" for background images... or at least a very similar one/a way to make one?

'Cause I'm looking to add some background images of my choice, but I want the same blue/glared tint that the default images have, so I can keep everything consistent.

[Minstrel]

It's different with pictures but InStaaled, gbasalmon and I were talking about this in my backgrounds project announce thread; gbasalmon did his alt background pics project but can't remember if he said in that thread what transforms he did to get his end result...

My guess, without having a test image open to verify the process would be to desaturate the image and then use the hue/saturation's "colorize" option to find a suitable blue; then use a giant lensflare fliter to make the edges darker than the center and probably a radial motion blur of some sort; then I'd drop a transparent layer over the top of the image to adjust the image to best work without being distracting to the game's text displays (the reason I'm personally not a fan of background pictures and restored the original textured background in mine).

Test and tweak for best results; then season to taste, put in the oven at 350 degrees for 15-20 minutes, sprinkle with your favorite seasonings and/or sauces and serve with a nice chianti.

[B. Stinson]

One more quick question:

How in the world do you get rid of the deafult "chl" background? 'Cause I have a skin that's somewhat similar to the Hellenic2006 skin for FM2006, and I want just the one background... so I got the background and made three copies named 'default', 'chl', and 'office', but no matter how many times I load the skin; rename the file; move the file; delete the file; restart the game... the game still uses the normal "chl" background with the players lined up on the blue line. Which is actually as creepy as it is annoying, because I moved the file altogether, and it still remembers it and loads it for the CHL screens.

[Shadd666]

B. Stinson: I'm not an expert in this domain, but i think you have to give your pic the name of original file, and rename/delete the original file. So if the original file is called "chl_background" (i don't know how it's called), rename it to "chl_bkgd", for example, and give your file the "chl_background" name. I think it works like that...

[B. Stinson]

so I got the background and made three copies named 'default', 'chl', and 'office', but no matter how many times I load the skin; rename the file; move the file; delete the file; restart the game...

[B. Stinson]

I guess it's hardcoded somehow

'Cause I've been working on this for the last couple of hours, and it's still able to find the image from somewhere.

EDIT TO POST ABOVE: The above post is a quote from my initial question about this CHL background issue(since the quoting is gone for some reason, it looks like a fresh response)

[B. Stinson]

Thanks to TWolf, we have a solution. As I've just realized for the first time, there's a second 'backgrounds' folder in Data/pictures/backgrounds/...

I was still stuck on that stuff being a skin-thing, so I assumed the skin directory was all there was to it

[Minstrel]

My bad amigo I didn't realize you were in the wrong folder either I was going to say try and see if my NHL backgrounds worked for you and try using one of them as relacements and then you'd probably have figured it out from my install readme but I d'int. Glad you figured it out at least, I know the feeling though as there are still folders in those skin folders and elsewhere that reamin a complete mystery to even me and I'm probably the person who has done the most deconstruction/tweaking of them.

You can see though why I haven't had the tme to work on another full-featured skin though, the time investment needed/complexity of the system is pretty intensive and maybe if I didn't actually play the game or run TBL and just did design work in my free time I'd get one out for 007 by 2007, but even then it might be pushing it... (apologies for the semi off-topic ramble there)

[StarboardWinger]

how do you create the light and dark effect in front of the image?

[Saranis]

Dunno how they did it but I know it can be done using a mask and gradiant tool. Solid color back layer with 2 copies of the image on top of it. The first image layer should have the mask and whatever gradiant you want. The second image should remain as is but change the opacity so that the first layers shadows can leak through to your desired amount.
Heres a very poor example

[CatchUp]

Coming from a graphics guy - that's actually a pretty good example!

Thanks Saranis!

[Saranis]

Coming from a graphics guy - that's actually a pretty good example!

Thanks Saranis!

I'm head of Firepark Development (we make game mods and are working on our own game at the moment) so I'm somewhat familiar with PS for 2d and Maya for 3d.

[StarboardWinger]

Dunno how they did it but I know it can be done using a mask and gradiant tool. Solid color back layer with 2 copies of the image on top of it. The first image layer should have the mask and whatever gradiant you want. The second image should remain as is but change the opacity so that the first layers shadows can leak through to your desired amount.
Heres a very poor example

Can you expand on how to use the mask and gradiant tool in this case? Sorry for these easy questions, I'm a complete noob. I'm using photoshop cs.

[StarboardWinger]

also, what solid color did you use for back layer? appreciated.

[Saranis]

You can use any background color. In this case I just used a black layer to show the darkening layers.

In the example in order to create the shadows you need to use the gradiant tool on the mask and not the layer.

For other information I would recommend reading tutorials on CS. I dont mean to be rude but it would provide you information on what you are looking for faster than waiting for answers. Plus you would find information on other features.