: How can I make the logo light up against a blurred background? I'm trying to create a website for a friend and I'm having trouble I tried adding a transparent white or black background on

@Sims5801359

Alright, the main point I want to emphasize is somewhat a combination of the other answers plus a bit more. You've got a very powerful compositing tool in your hands, and are barely using it.

This is just one take, and its very much subject to opinion, but hopefully the reasoning behind it leads you to some ideas for your own take, and helps others.

I don't know how big this is supposed to be so I took your original and cropped the menu portion of as a size which gave me, 779px x 390px.

First I'll understand that this is about windows and glass. Going off of Hitchcock's Rule that should be a fairly large item. The road and grass is less important but does help ground the image so we'll make it very small. Then I know I'll need space for a logo too. So maybe something like this:



Alright, now this picture already looks pretty Color Corrected but because our logo is Blue we could probably use some Compositing and/or Color Grading to really enhance it a bit. Here it is with the Logo:



One of the most popular color combinations in cinema which will work well for this is Blue and Gold/Yellow.

So I can drop in a Curves Adjustment layer and this was what I went with:



Which gives us much more contrast:



Then we can really edit it with some more fine adjustments. Like the blue logo on the building right by our logo is distracting, especially if you then want to add that subtext around there. So I can remove that. And I'll remove the crane for the same reason:



And it's probably pretty good now but to further emphasize my point maybe that building is still distracting, so let's just shorten it real quick:



The main point I hope this shows is, don't feel like you're limited to - this is my photo, where can I shove in this logo? Oh it doesn't quite look right, well lets add either a box, a shadow or a glow. There's a lot more compositing you can do.

Vote Up Vote Down

@RJPawlick971

Whenever I encounter such a situation, the first two things I think of is adding a Drop Shadow or an Outer Glow, considering the logo and colors, you should use and Outer glow to make your logo stand out from the background.

This way, wherever you wanna place it on your image, it'll still be readable and look nice, see:

Vote Up Vote Down

@Cofer715

I've found that a white outline with a black blur underneath seems to take care of practically any text problems.
Edit: Here's what it would look like regularly - using your professional graphics:



In this case, I think it would also be beneficial to brighten up the image in the background - perhaps purchase another which was taken on a sunnier day. That will also save the darker colors for your logo - meaning that you will have to do less to make the text stand out.

Vote Up Vote Down

@Jessie844

You can have a look at this question for some ideas:

Making text stand out in front of images.



Additionally, why not simply add more sky on top and shrink the city building to be below the logo and not interact with it.

Right now your high building is what takes away the contrast; the tower is dark and so is that part of the logo.

Here's a suggestion, and it can easily be used as a responsive banner design.



It doesn't require many layers, you simply need to use a gradient on your layer masks in Photoshop to merge the sky with the city, and change the blending mode IF you want. You can also cut out the city to make the sky fit perfectly behind that scene, it's up to you.

You can also tint your background with a light blue if you prefer. I chose gray because it creates a nice color theme with the blues, and also makes the logo more as the central point of interest.

Vote Up Vote Down