Make an image transparent online. How to make a transparent background in Photoshop

Vlad Merzhevich

Partial transparency, when used correctly, looks very impressive in website design. The main thing is that under the translucent blocks there is not a monochromatic design, but an image; it is in this case that transparency becomes noticeable. This effect is achieved in different ways and if you remember everything, including the old-fashioned methods, it is using a PNG image as a background, creating a checkered image and the opacity property. But as soon as the need arises to make a floor in the block transparent background, these methods turn out to have unpleasant reverse side. I'll do it short review, so that it becomes clear what we are talking about, as well as for those readers who are not familiar with non-traditional options for creating a translucent effect.

PNG as background

In the graphics editor, a single-color translucent drawing is first prepared, which is saved in the PNG-24 format (Fig. 1). A special feature of this format is that it supports 256 levels of transparency, or simply put, it can display translucent images.

Rice. 1. Image to create the background

Then we add the picture as a background through the background property, as shown in example 1.

Example 1: Using a translucent pattern

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Result this example shown in Fig. 3.

Rice. 2. Applying a wallpaper

Outdated browser Internet Explorer 6 does not work with translucency in PNG-24, if for some reason you need to support this browser, you will have to use scripts for it.

The above method has a number of limitations. So, when you disable images in the browser, the background will disappear altogether. In addition, it is not so easy to change the background color and transparency value; to do this, you will have to edit the image again.

Checkered image

This method refers to completely ancient methods of implementing translucency, when browsers “couldn’t do anything” and it was necessary to look for non-standard solutions. The trick is to create an image that alternates between transparent and opaque pixels (Figure 3). This regular structure creates a translucent effect, essentially imitating it.

Rice. 3. Enlarged checkered pattern

This is what it looks like in the end (Fig. 4).

Rice. 4. Simulate translucency

The disadvantages of this method are comparable to the previous one; a moiré pattern may also appear and the text will deteriorate.

Opacity property

The CSS 3 opacity property specifies the opacity value and ranges from 0 to 1, where zero is the complete transparency of the element, and one, on the contrary, is opaque. U opacity properties there is a feature - transparency applies to everything child elements, and they cannot exceed the transparency value of their parent. It turns out that there cannot be opaque text on a translucent background (example 2).

Example 2: Using opacity

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

The result of the example is shown in Fig. 5.

Rice. 5. Translucency of text and background

In Internet Explorer versions up to and including 8.0, opacity does not work, so it uses the browser-specific filter property. Naturally, this results in invalid CSS code.

RGBA

The modern approach is much simpler and more visual than the above methods and consists of using the RGBA format for colors and backgrounds. The first three letters are familiar to many and stand for red, green, blue (red, green, blue), the last symbolizes the alpha channel and sets the transparency of the element. The recording format is as follows.

background-color: rgba(r, g, b, a);

In parentheses, instead of letters, the value of the color component is placed; it can be viewed in any graphic editor; the last value sets transparency and coincides with the value of the opacity property.

Not all browsers support this format: Internet Explorer since version 9, Opera since version 10, Firefox since 3, Safari since 3.2. But in general, modern browsers display transparency correctly. For older versions of IE, you can separately specify the color in its usual format, and, of course, there will be no transparency. Or use the filter property again, but then you will have to put up with the fact that transparency will also affect the text (example 3). To comply valid code CSS, I used conditional comments.

Example 3: Using RGBA

HTML5 CSS3 IE Cr Op Sa Fx

The result of the example can be seen in Fig. 6.

Rice. 6. Translucent background with opaque text

Compare the picture with the previous one, the letters have become brighter and clearer.

IN Internet browser Explorer 7 discovered a bug when combining background-color with different meanings. For example, if you set the background color to red, as shown below, the background will not appear at all in IE7.

Div ( background-color: red; /* Not applicable in IE7 */ background-color: rgba(255, 0, 0, 0.5); )

This is solved by replacing the background-color property with background .

Div ( background: red; /* And this works */ background: rgba(255, 0, 0, 0.5); ) However, there is one caveat. The CSS validator complains about background if you give it a value in RGBA format. But at the same time it correctly refers to background-color . In general, as always, you have to choose between browsers and validity.

Sometimes it becomes necessary to change a picture by making its background transparent. Sometimes you come across a picture, but its background doesn’t suit your site, and you want to make it transparent. Of course, if you have Photoshop and know how to work with it, you can do it there too. But there is an easier way, so to speak, “for dummies.”

One day while surfing the Internet, I came across an article about graphic Pixlr editor Photo Editor. By the way, this is not ordinary graphic editor, and an online editor. Here is the link to it - http://pixlr.com/editor/.

It is this program that will help us make a picture with a transparent background in PNG format.

For example, we have this image:

I want to remove the black background from it and make it transparent.

To do this, go to the program, select the item "Open image from computer" and load the desired picture. Immediately change the program language to Russian (menu Language->Russian language).

On the right in the “Layers” window you will see a thumbnail of the picture and a block. Double-click on the block (a “bird” should appear in the square). This way you remove the blocking from the background.

After that, select the “Magic Wand” tool (on the left of the toolbar), bring it to the background of the picture and click the mouse. The background will be highlighted with a dotted line. Delete key destroy the background.

Here's what I got:

Sometimes you come across a very suitable picture for your post and everything would be fine... But the background of the picture does not match the background of the blog or block with text. Apparently no one has this problem and no one has a white background, which would be suitable in most cases. I need transparent background!

I couldn't find any good ideas on the Internet. how to make a transparent background For finished picture, so I started experimenting myself and found a more or less suitable solution!

How to make a transparent background for a picture

Let's take one example a simple picture in .jpg format (in general the format is not particularly important):

There is white background, which I want to get rid of and make a transparent background instead. An online version of Photoshop will help us with this.

Uploading our image. On the right in the “Layers” window a “Background” layer will appear, on which there is a lock (prevents the background of the picture from being deleted).

By double-clicking with the left mouse button on this lock, you can remove the lock from the background. A checkmark will appear instead of a padlock.

Now let's take magic wand(toolbar, right column, second button from the top), indicate following parameters: tolerance = 21, checkboxes for smoothing and continuity(usually such parameters are standard), although you can experiment with the parameters; and click on the background of the picture (in our case, on the white background).

Now we delete the background by pressing the “Delete” button and get the image we need with a transparent background.

As a result, the output is the same image with a transparent background.

The only negative of Pixlr- you cannot save the image in the .gif format, which also retains a transparent background, but is much lighter than the .png format. But if there is no other choice, why not take advantage of this?

thanks to Natalia Petrova

http://blogs.mail.ru/mail/nilllok/43BD7728F4AD505D.html

Many sites that we are used to using eventually become paid, and we have to look for something else, similar. This happened with the Clipping Magic website, detailed lesson according to which There is a similar site that is a pleasure to work with. The only negative of this site is MANDATORY REGISTRATION. Otherwise, the result cannot be saved.

Removing the background from a photo is not as simple a task as it might seem at first glance. Even with such a powerful graphics editor as Photoshop, you can spend more than one hour of work.
And the Background Burner website does a lot automatically. All that remains is to correct the result.

The main thing when working to remove the background- this is a high-quality photograph. It is necessary that the object and the environment be in good contrast with each other and have as few points of merging of similar colors as possible.

Going to the site Background Burner, select the photo or picture from which you want to delete background. To do this, click on the button SELECT PHOTO.


The photo was uploaded, and immediately the program automatically began processing it.


We are offered several options for an already processed photo or picture. We choose the most precisely processed one. This is usually the first option. But I specifically took a complex photo, with a background that almost merged with the dress. But the program coped well, albeit with some flaws.
If you take a picture with a contrasting background, then there is almost nothing to correct; the program will do everything itself.
Click on the selected option.


We see that the photo turned out NOT IDEAL. Therefore, we will edit it manually. Click on the very last button below, TINT. (the site has been translated so that the buttons are clearer).


Let's take it RED TASSEL(brush size can be changed using the arrows on the right), it removes unnecessary background, which the program could not remove, and we navigate to those places that we want to remove. In the original picture you will immediately see all the changes.
Taking a green brush (its size can also be changed), you can do the opposite RESTORE excessively removed parts
that is RED- what needs to be removed (i.e. extra background).
GREEN- what should remain (i.e. the selected object.)


When the result suits us, we press the button FINISH.


You can save the result on a white background or on a transparent one, but only after you REGISTER on the website.
Don’t be afraid of this, everything is absolutely free, but many functions will be immediately available.

ATTENTION - when saving a picture, be sure to check in what format you are saving it. What if the picture had no background? SELECTING THE PNG FORMAT.

You can make any collage from a cut-out photo by substituting your own background and frame. To do this, under the finished photo, press the MIDDLE button REPLACE BACKGROUND

You can take a background from ready-made ones (backgrounds offered by the system), or you can choose your own background that you need.


Edit the resulting collage. Take your photo with the mouse and drag it onto right place. Use the slider below to increase or decrease it.


When you are satisfied with the result, SAVE the photo using the very first button.


We get our collage.


Having received the photo cleared of the background, I inserted it into a frame in Photoshop online EDITOR, adding my own background. Who doesn't know how to do this