Remove White Background From That jpg
Welcome to this bluPixel Studio quick tip!
Ok new web developers out there, let’s talk about this scenario.
You open up your project, inspect the code only to see your provided header image is a jpg with a white background. The body has a background color so this will not work. We need a transparent png file.
Let’s put that shiny new copy of Photoshop to use and remove the white.
Open your file in Photoshop and double click the lock to unlock the background layer.
Now that the layer is unlocked, lets double click the layer to bring up the layer style panel.
Now we are going to use the blending options panel to remove the white from the background.
Make sure the “Blend If” is set to grey, and look for the “This Layer” slider.
Let’s take the slider down to a value of 220 and the white will be removed.
Now we can export that png file to add back into page.
Now that we have the png file our image looks good against the colored background.
Now that we have our image in our code and looking the way it should let’s discuss this process.
This is a common scenario, and there are a lot of different ways to accomplish this whether it be using selections, plugins, etc. If you are new to the Web Development/Photoshop workflow I encourage you to give it a shot, as it can be a quick way to get an image from an unusable state to in your code and on the web.
If you are someone like me who likes to watch as well as read to learn, click here to watch the companion video for this tip.
Thank you so much for reading!! Be sure to look around our site for other tips/tricks as we hope to add more each week.