Register

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 8 of 8
Like Tree4Likes
  • 1 Post By breno
  • 1 Post By Vapr_Arts
  • 1 Post By breno
  • 1 Post By Fireproofgfx

Thread: Make background image lighter

  1. #1
    Junior Member St_Elmo's Avatar
    Join Date
    Jun 2015
    Location
    South Africa, Johannesburgh
    Posts
    16
    Member #
    50318
    Liked
    2 times

    Make background image lighter

    Hi,
    I have a beautiful background image, I wish to use in a website; the problem that arises when I do is that the writing or content is not clearly visible then.
    Is there a way to make my image lighter or fainter...?
    Would Photo-shop or Illustrator be best to use, I have Adobe CS on my PC...?
    Can I please have some guidance on how to achieve this?

    regards

  2.  

  3. #2
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    139
    Member #
    41574
    Liked
    29 times
    You can use something like filter: brightness(50%); on the image.
    Set the value to whatever suits. I'm not sure what filter support is like cross browser so you might want to include vendor prefixes.
    St_Elmo likes this.

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    Make background image lighter

    Use Photoshop and brighten the image. Photoshop is meant for photos and pixel based graphics. Illustrator is meant for creating vector based illustrations. I am unsure of what exactly it is youre trying to accomplish but once you have the image in photoshop you will be able to do whatever it is you need. So as far as how to achieve it is going to determine on what exactly you want to do. You may have to chose a different image or font color as well though. You can only alter an image so much before it starts to look bad.


    Sent from my iPhone using Tapatalk
    St_Elmo likes this.

  5. #4
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    139
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by Vapr_Arts View Post
    Use Photoshop and brighten the image. Photoshop is meant for photos and pixel based graphics. Illustrator is meant for creating vector based illustrations. I am unsure of what exactly it is youre trying to accomplish but once you have the image in photoshop you will be able to do whatever it is you need. So as far as how to achieve it is going to determine on what exactly you want to do. You may have to chose a different image or font color as well though. You can only alter an image so much before it starts to look bad.


    Sent from my iPhone using Tapatalk
    Traditionally you could do it in Photoshop but if you don't get the desired effect, you have to go back into PS change settings and resave image. It'd be much quicker with CSS.
    Ideally you should have this kind of thing sorted before you start coding.
    Last edited by breno; Oct 08th, 2015 at 08:24 PM.
    St_Elmo likes this.

  6. #5
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times

    Make background image lighter

    Quote Originally Posted by breno View Post
    Traditionally you could do it in Photoshop but if you don't get the desired effect, you have to go back into PS change settings and reaave image. It'd be much quicker with CSS.
    Thats dependent on if what he what he describes is exactly what he is trying to achieve. Considering he has asked how to do it as well as if he should use PS over Illy makes me assume he is not a designer and may not accurately know how to describe what it is he wants to do. It could also be harder to get as accurate using css as it is using ps. He could spend more time experimenting with numbers trying to get it where he wants that it would take to put it into PS > do the effect > save & reupload it.




    Sent from my iPhone using Tapatalk

  7. #6
    Senior Member Fireproofgfx's Avatar
    Join Date
    Apr 2012
    Location
    Washington
    Posts
    840
    Member #
    31498
    Liked
    171 times
    I would edit it in PS like Vapr stated. Another Idea you can do is add a white layer on top of the image and lower the opacity to 40-50% (or whatever you like) and then you can use darker fonts on your website. Like so: Michelle Caldier | 26th District State Representative
    St_Elmo likes this.

  8. #7
    Senior Member breno's Avatar
    Join Date
    Feb 2015
    Location
    Australia
    Posts
    139
    Member #
    41574
    Liked
    29 times
    Quote Originally Posted by Vapr_Arts View Post
    Thats dependent on if what he what he describes is exactly what he is trying to achieve. Considering he has asked how to do it as well as if he should use PS over Illy makes me assume he is not a designer and may not accurately know how to describe what it is he wants to do. It could also be harder to get as accurate using css as it is using ps. He could spend more time experimenting with numbers trying to get it where he wants that it would take to put it into PS > do the effect > save & reupload it.




    Sent from my iPhone using Tapatalk
    If I remember correctly from reading his previous posts, he is trying to learn HTML/CSS amongst other things. So it would be good to understand what CSS can do. I still think its quicker changing a number rather than the PS route, but that's just me D
    At least he know his options now, waiting his reply.

  9. #8
    Junior Member St_Elmo's Avatar
    Join Date
    Jun 2015
    Location
    South Africa, Johannesburgh
    Posts
    16
    Member #
    50318
    Liked
    2 times
    Hi Folks (breno / Fireproofgfx / Vapr_Arts)...
    Thanks for the recommendations...sorry, I took a while to get back - been busy with some home issues (summer here...in SA)
    I will try all suggestions to develop my knowledge sorta all around..
    Fireproofgfx provides the ideal example of my situation, it that example site, there seems to be a "bridge" or "iron girders" background.
    Now that image is what I am trying to "lighten" so that the text on the website shows through.
    See, where Mitchell has her profile write-up, it has a blue background so she doesn't run into the same problem as I do.
    Mine doesn't have... so my website text "clashes" with the background if that's a correct analogy to use.

    breno, are you saying as one can lighten text in CSS (set font weight to 300, 400, 500 etc), you can or should do the same with an image?
    Thanks All, once again...and I look upon various suggestions merely as means or ways to improve or broaden one's knowledge.
    Last edited by St_Elmo; Oct 23rd, 2015 at 05:06 AM.


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 06:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com