How to create a transparent drawing. How to create PNG with transparency in Adobe Photoshop (CC version and above)? How to make a transparent background for an image
Sometimes you need to upload an image that contains transparent elements, through which the original background will show through. In these cases, it would be convenient to load PNG images as they are capable of preserving transparency.
In this article, we will tell how to make transparency in photoshop.
File creation
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 correct size, and make sure the resolution of the document is 72 pixels per inch ( because the file is intended for use on the web). And also that you chose the value "Transparent" ( transparent) in the Background content drop-down list ( background content).
*Before making a PNG with transparency in Photoshop, we 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 3000px, height 1730px, 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're working on the transparent layer and not the background:
Once you have completed the creation and are ready to save the transparent image, depending on the version of Photoshop you are using, in the File menu ( file) you can use one of the possible options:
Photoshop versions earlier than CC 2015:
Now we will tell how to make an image 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 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 populated with the values you specified when you created the file. But if you want to resize the file before saving, you can do so now.
Photoshop version CC 2015:
Before, how to make photos transparent in photoshop, you need to know that since version CC 2015 the option "Save for Web" ( Save for Web & Devices) in the File menu ( file) is marked Legacy. And replaced by a new option "Export" ( Export), which offers identical functionality with faster saving in a smaller file and in 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 it's available via File > Export ( File > Export) or when 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).
Hello dear visitors. In this tutorial, I'll show you how to use Photoshop to remove background and make the photo transparent. You won't need any special knowledge of this Photo-Monster, because everything is very simple here. The main thing is that you have Photoshop installed, and you repeat all the steps after me.
So how do you make a transparent background in Photoshop?
We launch Photoshop and open the experimental photo. Click the menu File - Open and specify the location of the image.
Ok, the photo is open and let's start cropping the background. First of all, we need to unlock the layer. Pay attention to the lower right corner of the program. There you will see the main layer of our photo and little padlock.
It is necessary that this lock disappear, that is, the layer is unlocked. For this, right on the castle one click with the left mouse button. And the castle is no more!
Now we need to remove the background. To do this, we take some kind of selection tool, for example, Magic wand.
We press the tool on the background in the photo, thus highlighting the object we do not need.
A dotted line appeared (running ants). It remains to press the DELETE key on the keyboard and the background will be deleted. See how it turned out:
Super! Now deselect by pressing CTR+D on your keyboard.
Well, in general, how make a transparent background in photoshop we figured it out and now it remains to save this photo correctly.
To do this, click the menu File - Save for Web. Or just use ALT+SHIFT+CTRL+S.
You will see a window in which we definitely need to select the PNG-24 format and only after that click the Save button.
And now look what was and what has become:
Finally, it should be said that in some cases when you decide to make a transparent background in Photoshop on some picture, you may have to use other selection tools, for example, Pen or Magnetic Lasso. I used the tool Magic wand, since it was easy to separate a person from the background in my photo. If you remove the background from complex images, you will have to sweat a little.
That's all for today, good luck!
Take a look at the figure in the format jpg, the notorious cartoon character Mammoth who lost his mother .. I want to cry .. no, not because the mammoth cannot find his mother (although because of this too), but because the blue background hurts his eyes terribly! I just want to remove this blue and fill the background of the picture with such a color that it blends with the background of the page ..
I don't think this is a problem for you! just think of opening it with the same Photoshop and filling the background with the desired color! but what if the main background of the page is some kind of complex texture?
An example where an image is overlaid on top of a texture:
Open Photoshop and draw in a picture with a mammoth instead of a blue background of a cell? And then try to fit them to the main background of the page? This is not an option!!!
So, I report that graphic formats gif And png- support the transparency mode, thereby making it possible to make some areas of the picture invisible to the human eye - which is exactly what we need!
Now in order:
1. Open the picture whose background you want to make transparent with Adobe Photoshop.
2. Open a bookmark "Image" >> "Mode" >> "Indexed Colors".
3. In the dialog box that appears "Indexed Colors" put a tick "Transparency" and press "OK"
4. Using the selection tool "Magic wand" And "Eraser" we erase the background in the picture, actually making the parts we need transparent.
5. Well, save our picture in the format gif.. bookmark "File" >> "Save for Web…" in the window that appears, indicate (agree) that the picture will be saved in the format gif click "Save".. select a folder, write a name - all this is you, I hope you know how ..
All picture with transparent background created!!
Now it can be inserted into our page again, without forgetting to change the extension jpg on gif .
gif" alt="Mammoth"> !} Very often, when creating greeting cards or videos, I came across the question: How can I do this without knowledge photoshop?
Those who are familiar with Photoshop will do this without difficulty. But not everyone has yet learned this smart program. How can they be? Is there really no way out?
After all, there is always a desire to make our presentations, congratulations, pages the most attractive and professional. I have already told you how to use the program for this purpose. It will help you make your pictures and you can even make your first one with it.
And now I will tell you one more secret: today you will learn how to make the background of the picture transparent. And 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-layered background - for example, on a white one. Let's go to the service page. You do not 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 image from computer". Select the picture you have prepared. You can place it in a separate folder in the images. Or on the desktop, so as not to look for a long time. Click once on this picture and click " open".
The picture appears on the server page:
On the right, there are 3 windows and a lock is drawn on the middle of them. 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 your chosen picture. A dashed line appears around the image.
The final step on the path to transformation: press the button " Del" (delete) on your computer. The background becomes a box. If not all the space around is covered by a box, touch this place again with a magic wand and press the "Del" button
A window appears in which you are asked: "Do you want to save the image before closing?" Press " Yes".
Today I decided to move a little away from the topic of coding and tell a little about the design. Although design plays an important role in creating a site, I have not been friends with drawing, graphics and design since childhood. Therefore, I am looking for images for my posts, like many bloggers, somewhere on the Internet, using free photo banks and photo stocks.
And so, sometimes a very suitable picture for your post comes across and everything would be fine ... But the background of the picture does not fit the background of a blog or a block with text. Obviously, none of me have such a problem and none of my backgrounds are white, which would be suitable in most cases. I need transparent background!
I didn'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 an image
Let's take one example a simple picture in .jpg format (in general, the format is not particularly important):
There is a white background here that I want to get rid of and make a transparent background instead. Pixlr, an online likeness of Photoshop, will help us with this.
Loading our image. On the right in the "Layers" window, the "Background" layer will appear, on which there is a lock (does not allow to remove the background of the picture).
By double-clicking the left mouse button on this padlock, you can remove the lock from the background. A checkmark will appear instead of a padlock.
Now we take the magic wand (toolbar, right column, second button from the top), specify the following parameters: tolerance = 21, ticks are on anti-aliasing and continuity(usually such parameters are standard), although you can experiment with the parameters; and click on the background of the image (in our case, on a white background).
Now we delete the background by pressing the "Delete" button and get the image we need with a transparent background.
