I'm a programmer, trying to create a good looking portfolio for myself. I have very little knowledge about graphic design, so please forgive me if I'm asking too broad questions.

I want to learn ways to convert a regular image, to a background image. What I mean is, If I find a beautiful image (say this one), it does not always go as a background. It has so many lines, colour changes etc, that the text on it cannot be read easily.

So I try to blur it, darken it, decrease saturation etc. But it simply does not look good.

I've seen people adding some "stripes" or "grids" on top of images, so they serve better as background images. Is there a name for such technique? Or is it up to me with trial and error in Photoshop ?

Thanks for any help!

  • 1
    Hi all, please note that simply downvoting the question, without telling why, does not help anybody. – jeff Nov 24 '13 at 15:22
  • 2
    I am guessing you got downvotes because this is pretty much a subjective issue. I guess maybe you would have avoided that by linking to some more concrete examples. – benteh Nov 24 '13 at 15:45

I think that the result that you are looking for is this because it creates a little contrast between the text and the background image;

Nature with shapes

I achieved this simply by using the shape tool (marked at #1) to create a white shape to place text on. I then changed the opacity (marked #2) to 50% to ensure that the background image could be seen but that the text was also legible at each graphically different part of this image.

Ultimately what you want to do is create more contrast between your text and the background image, this is one option though there are several others. For example creating a stroke around your text would increase contrast too, though I don't think that's what you are looking for.

Good luck with your project :)

  • Hi, Jenna. Thanks for your help :) I, too, solve this problem by adding white transparent background to text too. But I want to find a way (by changing the image), so that I can simply put text on it. Without background color. – jeff Nov 24 '13 at 15:20
  • I am assuming you want the text to work in html/css, not just a pretty background image created in photoshop, with text overlay? So you could have text links, change it easily etc? – benteh Nov 24 '13 at 15:32
  • Oh, and not to rain on your parade; as a programmer portfolio, I am not sure if background images as the one you linked to is the best way to go. It gives (at least me) a feeling of holiday bookings and Mauritius advertisement. Depending on the content of your site; I would consider other visual languages. – benteh Nov 24 '13 at 15:37
  • 1
    @boblet yes, you are right in both comments. I'm asking this for css, but it could apply to photoshop or any other media. And yes, of course this was an example, not the real case :) And for your comment in the main question, I'm gonna post links of good examples I find out. – jeff Nov 24 '13 at 17:24
  • Here are some solutions. What they have in common is very little text: line25.com/articles/… – benteh Nov 24 '13 at 20:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.