What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Making nice splash backgrounds


Salamandre19

Member
Messages
14
Likes
0
Hello,

I am making some wonders for Civ 5 game and I need to place splash design behind my buildings, as in original:

12345ed.png

As noticed, there are beautiful sun rays behind the building which I need to create from scratch, please someone can give me a hint on what tools to use or direction to start? For those sun rays I mean, the buildings are ready and the easy part.

Thanks:)
 

Salamandre19

Member
Messages
14
Likes
0
Okay, if you allow me one more question. I watched the video and now I can make easily that sunburst effect, using two colors then gradient + distort effect. I also downloaded and installed some cloud/sky brushes. Now my question is how to combine them so my sunburst effect is on sky background. Should I still go gradient style or make the sunburst one color only then simply paste it on a sky background? Also what I do with brushes?

Thanks.
 

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
The layers should be ordered and named from the bottom of the layers panel upwards......1, 2, 3, 4, etc,.

On layer 1 (bottom layer), place your sunburst.

On layer 2, place your Brush Tool Clouds.
(Download and install your cloud brushes: https://www.youtube.com/results?search_query=Photoshop+loading+brushes )
(How to use the Brush Tool: https://www.youtube.com/results?search_query=Photoshop+How+to+use+the+Brush+Tool )

On layer 3 (top layer), place your main image.
Remove the sky from the main image.
(How to remove the sky: https://www.youtube.com/results?search_query=Photoshop+removing+sky+background )
 
Last edited:

Salamandre19

Member
Messages
14
Likes
0
Thanks, managed to do something, but I am not very happy with. A few advices on what I could improve? I used brush for sun rays then at the end I used a round brush of slightly lighter color, flow 15% right in center to create the impression of a somewhat radient sky. But it doesn't look very alive, maybe sky is too common?
Untitled-1.jpg

Edit a bit later, added some outer glow then recalibrated the rays, but I do'nt know how to add clouds, the cloud brush has cloud form, but not the material.

Untitled-1.jpg
 

Attachments

  • Untitled-1.bmp
    88.4 KB · Views: 4
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
I thought you were going to add in clouds? That would help the sky.

Background Layer 1 (bottom layer)
Sunburst
Screen Shot 2015-11-12 at 10.52.51 PM.png

Cloud layer(s) 2 through 5
Made with cloud brush.
Several layers with different opacity settings for each.
Screen Shot 2015-11-12 at 10.54.23 PM.png

Main image layer 6 with it's background removed.
Screen Shot 2015-11-12 at 10.56.34 PM.png

Screen Shot 2015-11-12 at 11.00.09 PM.png

Image cropped using a layer mask.
Drop shadow and outer glow layer style.
This will come later.
Screen Shot 2015-11-12 at 11.05.53 PM.png
 

Salamandre19

Member
Messages
14
Likes
0
Beautiful. In the first image: what settings did you use for waves? And how do you get that gradient effect in the lower part of the image and how do you achieve that the waves don't start from center precisely, but a little delayed on the right side?

That's my result.

Untitled-1.jpg

And what you mean by this: "Image cropped using a layer mask."?
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
I did not save nor remember the settings.
These are not the exact settings or colors but they are close. You need to play with different settings in the wave generator to get the results you want.
Screen Shot 2015-11-13 at 8.07.44 AM.png

I created a large document 1400px x 800px. (it could be larger, but I would make it rectangular)
The above settings (along with Polar Coordinates) created the effect below.
Screen Shot 2015-11-13 at 8.16.31 AM.png

The gradient is made on a new layer above the starburst.
You can combine the two if you like, I prefer them on separate layers.

Set your Gradient Preset to Foreground to transparent.
Set your gradient to linear.
Choose your Orange foreground color.

Hold the shift key and create a gradient from the bottom to the top.
Screen Shot 2015-11-13 at 8.24.36 AM.png

Set your gradient layers blend mode to Multiply

The offset is a matter of where you position your main image and how you crop or mask your final image.

Here I have used the Rectangular Marquis Tool to create a selection.
Screen Shot 2015-11-13 at 8.31.42 AM.png

I then added a layer mask on both the sunburst layer and the gradient layer.
Screen Shot 2015-11-13 at 8.32.41 AM.png

At this point you could crop your image if you desire.

Here are some tutorials on layer masking: https://www.youtube.com/results?search_query=Photoshop+How+to+use+layer+masks
 

Salamandre19

Member
Messages
14
Likes
0
Thank you very much for kind and detailed help. Got this, now will try to improve technique with the next wonder.

Untitled-1.jpg

One more question :)

How did you get so precise half circle bar left side? In your final pic. As you see, I have a hard time inserting the result image properly into that pattern.
Screen Shot 2015-11-12 at 11.05.53 PM.png
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
Your very welcome. I only hope that I'm helping. It's very hard for me to know what you understand and what you may not, please feel free to ask any questions at all!

One more question.

How did you get so precise half circle bar left side? In your final pic. As you see, I have a hard time inserting the result image properly into that pattern.
It's a Inner shadow applied using a layer style.

The Layer Style is added to the final layer containing the layer mask I used to create the circle effect (before I may have said you could crop, I prefer to use the layer mask as it's non-destructive).
Screen Shot 2015-11-13 at 8.59.43 PM.png

Here are some tutorials on inner shadows with layer styles: https://www.youtube.com/results?search_query=photoshop+inner+shadow+with+layer+styles
 
Last edited:

Salamandre19

Member
Messages
14
Likes
0
I understand all, once I see the tutorials too, but new problems raise at each step. For instance, now I was able to create the inner shadow and get the half circle as you. But now the final problem is creating a precise circle for ,the whole pic. My technique is to select the white circle in the background with magic wand, then command "paste into". But with this trick, the borders are irregular. How to paste my wonder square final pic into the white circle correctly?

test1.png

because this is how it looks the Matrix. I must paste inside those circles my designs, so the game could read properly.


OCC_256.png
 
Last edited:

Salamandre19

Member
Messages
14
Likes
0
okay I think, I got it not too bad. Any further advices? My inner shadow left side still looks a bit irregular, dunno why.

Untitled-2.png
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
22,721
Likes
13,258
To make circles, use the Elliptical Marquis Tool. Hold down the shift key for a perfect circle. While holding the shift key, you can also add in the spacebar to move the selection to precisely where you want it.

You can also use the Ellipse Tool if you prefer shape.
 

Salamandre19

Member
Messages
14
Likes
0
Very good idea, I made a circle with Ellipse tool but I can't paste anything into, or move it. It just draws the circle (while holding shift) but can't neither fill it or move, it still considers the whole layer, so it fills the whole surface, like the circle didn't exist.
 

Top