doncharisma.org, don charisma - colour problem

How to Get Photoshop JPG colour to match web page colour

What’s wrong with this picture ?

doncharisma.org, don charisma - colour problem
doncharisma.org – colour problem

As I’m not a photographer, it’s taken me an age to get to the bottom of how to fix this. Photoshop has it’s own idea about colours, presumably something to do with the fact that I might want to get photos printed. For blogging and websites, mostly I just want screen accurate colours, so what I see in Photoshop, I also see on the web.

I made myself the new “Graffiti” writing header and wanted to blend it in with the rest of the header. There’s a few ways to get the colour into Photoshop, one could use ALT+PRINT SCREEN and paste the window’s contents into MSPaint. Or one could use the Snipping Tool. Or one could right click on the coloured part in Chrome and do an “Inspect Element”, giving the colour in the bottom right hand corner – mine is “#443b31”.

Bottom line is that there are some settings needed in Photoshop to get the colours right, have a look at this, it fixed the problem for me – http://viget.com/inspire/the-mysterious-save-for-web-color-shift

Basically Photoshop needs setting up for Monitor/RGB rather than the default settings.

Don’t forget to unchecked that sneaky sRGB checkbox, it caught me out !

BONUS!

If you use the “Save for web” function in Photoshop, you can adjust the image size which is handy, especially as I normally work with huge pictures then scale them down to fit. ALSO because Photoshop will optimise the image, it’s size will be smaller and will load faster on the browser.

It worked, yay!

I now have a header image that blends into the header background, happy days:)

25 thoughts on “How to Get Photoshop JPG colour to match web page colour

  1. I think Adobe Photoshop is the best program ever!
    I “save for web” with all of my photos.
    I took an online Photoshop class….and learned how to customize my web page header by combining 5 of my own photos and sizing it to fit across the top.
    I took Adobe Illustrator too…but I’m not an artist so my illustrations weren’t so good….
    I’m sticking with Photoshop.

    1. Hey Mary, I’ve been lagging a bit on my comments, sorry:)

      I love Photoshop too, and I reckon I’d have saved myself some pain if I’d have taken a course. It’s got some great features, still really learning. Illustator I will try again soon, but it defeated me last time I tried!

      A reader has recommended GIMP (can’t get Pulp Fiction out of my mind for some reason), I’d like to give that a try also as it’s free and runs on Linux:)

      Keep in touch

      Don Charisma

    1. My pleasure:) presume you’re talking about the right click in Chrome then inspect element. You could also use the “Snipping tool”, take a swatch, load into photoshop, pipette the colour and then finally bring up the colour palette box which also shows the # colour for web (or use the colour palette on existing JPG/GIF/PNG etc) … keep in touch, DOn Charisma

    1. My pleasure, this problem I’ve had before, so was really pleased to find the solution. One of my readers suggested GIMP so will try that out too, it’s free !

      Keep in touch, DOn Charisma

  2. And this is one of the reasons why I use The GIMP.
    Nice job on the logo, although you should never save anything but photos as JPEG; it destroys quality and you often end up with artifacts that make editing the raster image (if you don’t have access to the source file) extremely annoying.
    Use PNG instead. As a bonus, PNG supports transparency, so there’s no hassle with choosing the right colour and no problems if you decide to change the background.

    1. Hey thanks that’s really useful info. I knew about the transparent background with PNG, just more used to using JPG. How does files size compare JPG vs PNG, and presumably it’s an 8-bit PNG that I should use?

      I’ve used various open-source programs in the past (not GIMP), but I thought Photoshop had more features and was widely used by Pros ?

      Really useful, appreciate your input:)

      1. You’re welcome. I’m always happy to help a fellow blogger!

        Taking your current JPEG header, which is about 102KB, converting it to 24-bit PNG gave a file size of 155KB; the difference is negligible unless you’re really tracking every KB. Using an 8-bit palette, which work surprisingly well for this image, I get 45KB. On a side note, I’ve found that 8-bit PNG is often smaller than a GIF of the same image (so use GIF for animations only).

        Of course, this is taking the JPEG image, where JPEG’s “optimizations” might have an effect on the file size. I’d suggest trying it using the source image; it might actually be slightly smaller.
        As for 24-bit vs 8-bit PNG, 24-bit PNG is lossless and supports partial transparency, whereas 8-bit restricts you to 256 colours and 1-bit transparency (only transparent or opaque).

        To summarize, for images to be published on the Web, I recommend GIF for crude animations, 8-bit PNG for images that only need 256 colours and 1-bit transparency, JPEG for photos, and 24-bit PNG for everything else.

        As for Photoshop and the pros, they often go to proprietary software for the instant support. The average user be fine with a search on the Internet, especially with big open-source projects like The GIMP, and sometimes forum answers are much better than paid customer support.
        Regarding more features, I would actually argue that The GIMP has more features because it’s an open-source project with support for plugins. In general, with open-source applications with plugin support, if you can think of it, someone’s probably already made a plugin for it, and if not, it’s usually not too hard to make your own.

        I’ll finish this (long) comment with this note: NASA has been known to use The GIMP.

      2. Happy for long responses, I got a lot out of that, thankyou:) Most of my work in PS I save in PSD format, which preserves the layers and I can change at full size later if i need. I’ll have look at PNG next time I’m doing this (which will be soon !) … GIMP I’ll have a look at also, free software is good !

        Thanks once again, sincerely Don Charisma

      3. Speaking of which, The GIMP also has support for PSD files. I don’t get too many PSD files, so I can’t tell you how good the compatibility is, but the few that I have loaded didn’t seem to have too many problems (and that was back in GIMP 2.6).
        If you plan to migrate to The GIMP, for maximum compatibility, use Photoshop for your existing PSDs, but use The GIMP’s native XCF format for new projects. But you probably would have done that anyway.

        There’s a bit of a learning curve to The GIMP (as with many programs), but the process has been made much easier in v2.8, and you probably won’t want to go back to Photoshop once you’ve gotten used to GIMP.
        You can use the docs to help you get started.

        Just in case anyone’s still not convinced, here are 10 reasons why GIMP is better than Photoshop.
        For those of you who are still stuck on GIMP 2.6, highly anticipated features have been implemented in v2.8.

      4. Hey thanks, just when I was starting to get the hang of photoshop !

        I’m using Linux more and more these days, about to do a post on Debianising a Seagate product imminently … linux is starting to be something I’m taking seriously since looking at this and OpenWRT … Photoshop doesn’t run on Linux so, this maybe my prompt …

        Thanks for input it’s appreciated:)

    1. Hey Krista, thank you also, I try my best to be creative and innovative, I really enjoy creating stuff that’s visually apealing to me, and a real bonus if others like it too.

      I had a glance at the freelance sites including Elance (wasn’t aware of Elance community) and was put off by (or so it seemed) that there where people working there for like 10 cents an hour, personally when the wages get that low I’d rather be working on my own projects, as the wages don’t even cover my/our expenses. If I’m wrong and there are jobs that are being paid at worthwhile levels, then certainly happy to admit being wrong and take another look. I’m working with a partner dannyboybroderick, and our intention is too work together on all projects, so also not sure whether that’s a possible scenario on Elance, ie partnership or company offering services.

      Be happy to know more:)

      Sincerely

      Don CHarisma

      1. Yes, I can see how .10 cents can be off putting haha but you should definitely take a second look! My advice for the website is to only take fixed price jobs that way you get what you think you deserve rather than getting paid by the hour. I don’t do designs I do the writing section. As for your partner you guys can work together. Elance allows you to make a team of people you like to work with. Also, if you have a team you can take on harder jobs and get them done faster.

        I have seem some of the reviews on Elance because when I first ran into it, I thought it was a scam, but it is very legit. While it is true some clients on Elance are looking to pay what little money they can, their are also clients who are willing to pay the extra penny for QUALITY work. I’m certainly not racist however it is normally individuals from different countries who get ripped of because they have to work cheaper since they do not speak English very well.

        I am a stay at home mother and I make a pretty good chunk of money monthly, then again I am good at making proposals on the website and following through and from your blog I can tell you are pretty good at following through as well.

        When I write for clients I normally charge 1.00 usd/ 100 words so If i get a bundle of articles that need to be written at 500 or 800 words I can make a good bit. Then again I write fast, so I have the potential to make 80.00 a day. My advice for using Elance is to make your profile stand out as much as possible with a great portfolio and when bidding on jobs don’t be to greedy…but don’t be cheap either.

        Honestly, when first starting out on Elance if you take a low paying job to start with and that client leaves you positive feedback other higher paying customers will want to work with you. It is all about building a reputation !

        Just keep doing what works for you though, just giving some info on how to make more money from one freelancer to the next! Good luck with everything and if you do take a second glance please let me know if your experience is better.

        -Krista

      2. Hey Krista,

        Thanks for taking the time to explain and props for doing some real work, already mothering a challenge i know, so to be making a decent wage at the same time, good on you:)

        A while back I reblogged Lisa’s article about some of the bad behaviour going on in regards to less scrupulous freelancers lying about their qualifications and who they are. Not a race issue, it’s one of standards and starts to question morals. Scams are something that always interest me, because I’d like to be better prepared and better able to defend myself. Presumably the “quality” clients are screening for to-good-to-be-true profiles, and I guess the “it can’t be more than 5 minutes work” brigade are relatively easy to spot by freelancers. My experience with my own company in London was that one either learns to be savy or gets “scammed” continuously.

        At the moment I’m trying out ideas and seeing what I enjoy doing, and what not. Not sure if I want to be a full time writer, I really really enjoy the creative aspects of what I’m doing here. Usually what eventually happens is that I’ll see a direction that’s “me” and go for it.

        I have realised that being in a web business that involves being found by the likes of Google, then my writing is important. I’m becoming more adaptable especially to being able to write things like relevant keyword rich, “snippets”. So writing is definitely going to form part of what I’m doing.

        DonCharisma.com is now nearly ready for traffic, which will be my “commercial” base, whilst DonCharisma.org (here) is my “professional/personal” base, want to keep it because I’ve found wordpress.com a very inspiring community with a lot of supportive people here, and it’s rewarding to be able to help others.

        Thanks once again Krista for taking the time, I do appreciate guidance from those with experience, we’re all continually novices whilst we’re learning!

        Please do keep in touch;)

        Sincerely

        Don Charisma

    1. My pleasure and thank you for following my blog , I really appreciate it. At present I’m just getting the income side of things sorted out, so not quite a business yet, but will be soon.

      Keep in touch

      Sincerely

      Don Charisma

Leave a Reply for Don Charisma

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.