If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Feb 2014
    Member #

    Character/Font Color/Style and Techniques for Bright Color Image Backgrounds

    Alright guys,

    I'm in a situation here. I have a slider with 3 images, all are very colorful and bright. I have text going over all 3 of them but it's not readable very clearly. I tested many different colors, fonts, styles, etc and none work. I temporarily but a black background to the text so it's readable but it obviously looks like utter crap, so I need some help and suggestions from the pros on here.

    Would it be a better idea to darken all of the photos, change the contrast, put some tint in to them so it's darker and then add the white text over it.

    This isn't my area of expertise which is why I'm here. What do you guys recommend?

    See below for the 3 photos with the terrible temp job I did. The last one is with the white text alone.




  3. #2
    Member djitsz's Avatar
    Join Date
    Jan 2014
    Member #
    17 times
    Darkening the photos and putting white text on top, or the opposite lightening the photos and putting black text on top would be one way to go. Sometimes it helps to put text-shadow under the text as it makes it easier to read on colourful backgrounds.

    Try to add "text-shadow:2px 2px black;" to your css for any text on top of the images and see if that makes it better.

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Not from USA
    Member #
    2784 times
    Wow...we could be neighbours. I have the maximum level of street cred available for the city of Mississauga, which means that I know who Hazel McCallion is and I've spoken to my Ward 9 councillor a few times. Suburban white gangsta rollin' up a low-density side street in my economical family vehicle. (Yeah...Mississauga has all the culture of a dead sea otter).

    If you're doing that in Photoshop, and it looks like you are, what you can do is this: add a layer to the image, color it a solid dark color (or color the text-only section a solid dark color) and then change the blending mode either to Darken or Color, and play with the opacity. Depending on what you're doing, you may need two layers and two blending modes.

    I've created a VERY rough example (as in about 30 seconds worth of work) to give you the general idea.

    2 revised.jpg

    P.S. Don't mind the weirdness. I'm in a strange mood today.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Junior Member
    Join Date
    Feb 2014
    Member #
    Thanks a lot for the responses guys.

    Here is what I did - text-shadow:2px 2px black" to css - I did this, it helped a bit but not 100%. The problem is the white border in the photos from the collage which clashes with the white font.
    - I did some editing to the pictures as suggested and with my own tool...I added highlights and exposure so it darkens the pics. It looks great now bc the white font is visible, but the problem is that it doesn't look good on the homepage because the rest of the page is very bright with lots of graphics so the dull pictures stand out like a sore I don't think I can keep the edited pics the way they are darkened.

    I need some sort of other solution

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 03:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: