How to Color Match a JPG Background to Your Web Page With Photoshop
- 1). Isolate the image in your photograph and "cut it out" by using the “Extract” tool, which is located under the Filter toolbar.
- 2). Use the “Edge Highlighter” tool at the top-left of the Tools bar to draw a line around the object that you want to cut out. Using the slider bar on the right, you can change the width of the Edge Highlighter tool by sliding to a smaller or larger number. Choose a width that allows you to create a line half on and half off of the image. Use the smallest width you can manipulate easily.
- 3). Make sure the lines around the object intersect so that it you have one continuous line and then choose the “Fill” tool, which is under the Edge Highlighter tool. Simply select and then place the “Fill” tool on the image you are cutting out. Left-click once and click “OK.”
- 4). Clean up the edges of your cutout. This can be accomplished by using two of the tools on the Tools bar: the “History Brush” and the “Eraser.”
- 5). Create a new layer that will serve as your background. Be sure your cutout is the top layer and the new background is below it.
- 6). Go to your Web page and check the page or table properties, depending on how you are laying out the page. Under Properties, select “Background.” On the Background window, under Color, click on the arrow located to the right.
- 7). Go to the bottom of the drop-down menu and click on “More Colors.” In the More Colors window that opens, click “Custom.”
- 8). Click on the desired color if you have already selected the color of your Web page or table background. If you have not selected the color, choose a color now.
- 9). Find the red, blue and green color values in the Color Picker window. Write down the numbers that appear at the bottom right corner of the window – these are the RGB values.
- 10
Go back to your Photoshop image and click on the “Foreground Color” square at the bottom of the toolbar. In the Color Picker window, change the values in the “R,” “G” and “B” boxes to match the numbers in the corresponding color boxes of your layout program's custom colors. - 11
Fill your background layer with this new color. Flatten the image. Confirm that the size is correct for your Web page. Then save and insert the image into your Web page. The inserted object will appear to have a transparent background.