How to make a logo background transparent. How to make a logo's background transparent How to make a picture's background transparent

Today I decided to move a little away from the topic of coding and talk a little about the design. Although design plays a significant role in creating a website, I have not been friends with drawing, graphics and design since childhood. Therefore, I look for images for my posts, like many bloggers, somewhere on the Internet, using free photo banks and photo stocks.

And so, 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 the 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's a white background here that I want to get rid of and make a transparent background instead. Pixlr, 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 lock.

Now take the magic wand (toolbar, right column, second button from the top), specify the 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.

Very often when creating greeting cards or video I came across the question: How can this be done without knowledge photoshop?

Anyone who is familiar with Photoshop will do this without difficulty. But not everyone has studied this yet smart program. How can they be? Is there really no way out?

After all, there is always a desire to make our presentations, congratulations, and pages the most attractive and professional. I have already told you how to use the program for these purposes. It will help you make your pictures and you can even use it to make your first one.

And now I’ll tell you another secret: today you will learn how to make the background of a picture transparent. Moreover, you will do it absolutely free and spend only 2 minutes of your time.

Let's get down to business.

Find the picture you like. To begin with, it should be an image on a non-multilayered background - for example, on a white one. Go to the service page. You don't need to go through a tedious registration procedure. Just click on the online service link.

The following window will open in front of you:

Press " Upload an image from your computer". Select the picture you have prepared. You can place it in separate folder in images. Or on your desktop, so you don’t have to search for it for a long time. Click once on this picture and press " open".

The picture appears on the server page:

There are 3 windows coming out on the right and in the middle of them there is a castle drawn. Click on it 2 times with the left mouse. This will open the door to magic.

On the left side you see the panel " Tools", one of which is that " Magic wand", which we will now use. Click on it once, and then click on any empty space in the background of the picture you selected. A dotted line will appear around the image.

The final step towards transformation: press the " Del" (delete) on your computer. The background becomes a checkered area. If not all the space around is covered by the checkered area, touch this place again with the magic wand and press the "Del" button

A window appears asking you: “Save the image before closing?” Click " Yes".

By default, all new layers in Photoshop are created with 100% opacity. But the degree of transparency of the layer can be changed using the settings Opacity And Fill located at the top of the Layers palette.

Opacity(Opacity) is a setting with a 100% scale that allows you to change the degree of transparency of the entire layer, with all the applied effects. If the value is different from 100%, the underlying layer will be visible. A transparency level of 0% indicates a complete absence of visible images.

The transparency of the layer can be compared to tracing paper, which is applied to drawings in order to copy them.

Fill(Fill) is a 100% scaled setting that allows you to change the visibility of a layer without affecting its overlays.

What transparency looks like in Photoshop

Logically, transparency digital image is a lack of color saturation and density. If you imagine color as a film, then transparency is the intensity of light shining through it. But How to show translucency on a computer?

Photoshop introduced a transparency convention for the world computer graphics — chess background.

Now this convention has become a standard. Many programs and web services use checkerboard backgrounds when it comes to transparency. For example, Yandex.Images or Google Images show images with transparent elements on a checkerboard background.

3 ways to make an image layer transparent

To begin with, you need the necessary layer. The technique of selecting two or more using Ctrl keys or Shift .

Note

Fo new layer(with a lock icon) cannot be transparent. For him, these settings are inactive.

One more note

The layer thumbnail will not change, no matter what opacity value you set.

Method 1 Entering numbers

Enter the required transparency value in numbers from 0 to 100 in the special settings window on the palette. Since both settings have almost the same effect, you can use either of them, just remember what they are.

Method 2 Slider control

A little to the right of the numbers there is a button with a small arrow. If you click on it, a slider will appear. You need to move it with the mouse left or right to decrease or increase the transparency of the layer, respectively.

The number display will show the current value, and the image itself will change with the movement of your hand.

Method 3 Using the keyboard

For a number of Photoshop tools, it is possible to change the opacity of a layer using the keyboard. Select a tool, for example, or (there are also a number of other tools, you can find them by brute force).

Now press the numbers on your keyboard:

• The number 1 will change the opacity to 10%, 2 to 20%, 5 to 50% and so on;
• The number 0 means 100%;
• Dial 55 and you get 55%, 67 is 67% and so on

To use the same technique to change Fills, hold down the Shift key along with the numbers.

How to make a separate section of a layer transparent

To make not the entire layer transparent, but only a separate section of it, will require some effort. There is no tool as such for this purpose. However, depending on the problem, there are at least two solutions.

Both solutions are united by the initial, perhaps the most time-consuming work - creating a dedicated area. The logic of the action is simple - you need to select a fragment of the image with which further work will take place.

In our example, let's say you need to make a gray round background transparent. To do this I will use the tool. On the settings panel you need to set the parameter Add to selection, and then click on all the desired areas until you select them all.

After the selected area has appeared, you can make this fragment transparent.

Method 1: Cut out the desired area of ​​the image onto a new layer

First you need to make sure that any of the tools for creating a selected area is not active. For example Magic wand, which was used in the previous step.

Now you can right-click on the selection. will appear context menu. We are interested in the team Cut to new layer.

As a result, this fragment will be separated from the current image and moved to a new layer. And then you can do whatever you want with that new layer, including changing the transparency.

Method 2 Using an eraser

This method is suitable if you need to achieve not a uniform reduction in transparency, but a floating one, that is, make this effect stronger in some places and weaker in others.

Select , in the options bar set the value Opacity different from 100%. Then erase areas of the image that are in the selected area. The tool will only affect those pixels that you have selected.

Change the value Opacity, if you need to achieve an uneven effect.

How to save an image with transparency

There are many, but only two of them support transparency - PNG and GIF.

GIF has a limitation - the pixel must either be transparent or not, there is no third option, that is, a transparency value, for example, 59% will no longer be supported. This format also has restrictions on the number of colors used - there can be no more than 256.

Therefore, the image must be saved in PNG format. Only it is devoid of all shortcomings and is capable of showing translucent pixels.

To create a PNG image in Photoshop, you need to run the command: File - Save As. A dialog box will appear in which you need to specify a location to save on your computer, and also select from the drop-down list File type — PNG(*.PNG).

If you notice an error in the text, select it and press Ctrl + Enter. Thank you!

On the left is an image with an opaque background, on the right is an image with a transparent background.

How to find PNG images in Yandex or Google images?

Typically image files with a transparent background have the extension png(from the name of the Portable Network Graphics file format), so we just need to type “gnome png” in the search bar to find a suitable picture.

Notice the “checkered” background image in the Google search example. This is how all image editors show the “transparent” background of a picture.

In the Yandex search example, the display of a transparent background will be different (picture on a dark background):

In any case, you can click on the picture right button mouse, copy it to the clipboard and immediately paste it into the presentation, check.

Unfortunately, it is not always possible to find a suitable image in png format with a transparent background. But if there is an image on a white (or any plain) background, then this background can be made transparent. To do this, we will use a powerful and free graphic editor. Pixbuilder Studio.

After downloading, install and run the program.

Step 1. How to open an image in the Pixbuilder Studio editor

First way

Suitable for those who use Google browsers Chrome, Yandex.Browser or Firefox.

Find a picture on the Internet, display it in maximum quality on the browser screen, right-click on it and select Copy picture.

After that, in the editor, select the menu File - New.

In the window that appears, without changing any parameters, click OK.

Second way

Download the picture to your computer.

Drag the image file onto the editor field or open the image via File - Open.

Drag and drop

Command: File - Open

In any case, the result should be like this:

Step 2. Making a transparent background:
"Magic wand" function

In the editor, to the left of the image there is a toolbar.

We will need a "Magic Wand". Select it, then make sure that the tolerance is within 20-40 units.

Click on the picture to enlarge

Click the Magic Wand in any area white background. You will see how he stands out as "running ants".

And after that you should get this result (picture on a transparent background).

Step 3. Save the image with a transparent background

In the save settings, specify the folder, enter a new file name and be sure to specify the extension png, then click Save.

In the window that appears, you need to check that all the settings are as in the presented screenshot and click Save.

The picture with a transparent background is ready!

• With a magic wand you can highlight not only external contours, but also internal ones (for example, for the letter “O” or “U”). That is, first you need to select and remove the background from the outside, and then from the inside.
• If the wand does not help (does not highlight the background correctly), then you can use Eraser, and erase the background manually.
• If the wand highlights too much or too little of the background (this happens when the colors of the image and background are similar), you can change the setting Tolerance in one direction or the other, and select the background again. (See comments).
• If you don’t like the result of your actions, you can always cancel it (up until the moment you open the picture in the editor) through the menu Edit - Cancel or by selecting an action in the window Story(the window is located in the editor on the right, second from the bottom).

In conclusion of the article, I would like to add that Pixbuilder Studio is very good and flexible graphics editor(The Magic Wand is just one tool among many), and it can accomplish a lot in implementing your teaching materials. Don't be afraid to experiment.

Sometimes you need to upload an image that contains transparent elements that will allow the original background to show through. In these cases, it would be convenient to download PNG images since they are capable of maintaining transparency.

In this article we will tell you how to make transparency in Photoshop.

Creating a file

The first step is to create a file. To do this, open Adobe Photoshop and in the "File" menu ( File) at the top of the page select “Create” ( New).

Then in the window that appears “ new document » ( New Document) create a file of the desired size, and make sure the document resolution is 72 pixels per inch ( since the file is intended for use on the web). And also that you selected the value “Transparent" ( Transparent) in the “Background Content” drop-down list ( Background Contents).

*Before you make a PNG with transparency in Photoshop, you need to clarify that in this example we are creating an image to upload as a background for the site, so the document size is set as follows: width 3000 pixels, height 1730 pixels, which are the recommended sizes for HD image downloads:

After you have set the parameters, click "OK" to open a new document.

Then in the “Layers” panel ( Layers) make sure you are working on the transparent layer and not the background one:

Once you have completed creation and are ready to save transparent image, depending on the used Photoshop versions, in the "File" menu ( File) you can use one of the possible options:

Photoshop versions earlier than CC 2015:

Now we will tell you how to make a picture transparent in Photoshop, which came out before CC 2015. These versions use the "Save for Web" method ( Save for Web & Devices) to save and optimize PNG images for use on the web. To use this method, simply go to the "File" menu ( File), and then “Save for Web” ( Save for Web & Devices):

Then in the window that appears, select PNG-24 from the drop-down menu of possible values, and then make sure that the “ Transparency" options are selected ( Transparency) And " Convert to sRGB» ( Convert to sRGB). This confirms that the image will contain a transparent background and its color mode will be converted to sRGB, the recommended color space for the web.

Fields " Image Size» ( Image Size) are automatically filled with the values ​​you specified when you created the file. But if you want to change the file size before saving, you can do it now.

Photoshop version CC 2015:

Before, how to make a photo transparent in Photoshop, you need to know that from version CC 2015 the option “Save for Web" ( Save for Web & Devices) in the "File" menu ( File) is marked Legacy. And replaced by new option"Export" ( Export), which offers identical functionality with faster saving to a smaller file and to best quality. To use the "Export" option, click the "File" menu ( File), and then - " Export as» ( Export As).

Note: Adobe still offers a "Save for Web" option ( Save for Web & Devices) in Photoshop CC 2015, and is accessible through the File > Export menu ( File > Export) or using the keyboard shortcut Command+Option+Shift+S (for Mac) or Ctrl+Alt+Shift+S (for PC):

Then in the window that appears, select PNG from the “Format” drop-down menu ( Format) and make sure the Transparency options are selected ( Transparency) And " Convert to sRGB» ( Convert to sRGB).