Removing Text From Existing Graphics

Wednesday, May 23, 2007 by Sumana Harihareswara

I had to make new button graphics for a web page, and they had to match the existing buttons.  I couldn't get/find the original graphics files with the layers that neatly separated the text from the background colors.  So I had to somehow change the text on this button:

The original button.

which meant that I needed to remove the text and get a blank version of the button and write new text on it.

My first thought was basically "clone the background and paint/pencil over the text with matching background colors to create a blank button."  But my clone-and-paint dexterity wasn't good enough to match the original colors and shading, or I was just impatient.

So now I decided to create the button background anew, and then write text over it.  Using Paint.NET and existing tutorials on gradients, I could only make flat-looking buttons that didn't match the reflecting-light looks of the originals. 

A failed attempt to recreate the gradient of the original button.

 But then I remembered from the gradient tutorials that you can select certain pixels and then stretch them to cover more surface area.  Well, maybe I could use the rectangular Select tool, copy the gradient pixels from the old button, top-to-bottom

Using the rectangular Select tool, select and copy a rectangle containing the gradient you want to replicate.

make a new image the same size (248 by 45), and paste the pixels and stretch them to fill the width of the new button.

Paste the gradient you've selected into the new image.

Use the handles on the sides of the pasted selection to stretch the gradient and fill up the image.

So now my whole new button was the gradient.

The blank button made by simply stretching the gradient.

But it didn't look right at the left and right edges, so I also had to find a way to copy the borders on those sides  I lassoed the text in the middle of the old button:

Use the Lasso tool or the Rectangular Select tool to capture all the text on the button.

and then did a Reverse Lasso (Edit: Invert Selection) to get everything except the text, and copy it.

Invert the selection to select the border outside the text.

The new button only had a background layer.  I added a new layer and pasted the border on it.

Add a new layer and paste the border in it.

Once I viewed both layers of the new image:

When you view both the background layer (the gradient) and the new layer (the border), you'll see a whole blank button.

I had my blank button, ready for new text and/or saving as a PNG.

The blank button, which fits with other buttons on the page.

In retrospect, I could have done that lasso and paste of the border first, and then stretched the existing gradient pixels in the new file over the middle of the image.  That might have been easier.  In any case, I hope this is useful for other graphics newbies, or anyone who has to remove something from the middle of a background. 

Categories: General
Tags:
Actions: E-mail | Permalink