how I can make an image under side diagonal in photoshop 2024?

[johannes999]

hello,

I want to make the image under side diagonal as you see in screenshot . I made it in css but there is some problem with some function of performance plug in that I use. this  Hero image is of my website ?

please tell me the most simpel way to achieve my goal.

thanks

[Bojan Živković]

In Photoshop, use Free Transform (Ctrl + T), then hold down Ctrl to distort each individual handle, or right-click and choose an option like Distort, Perspective, etc.

[Conrad_C]

The formal way is to choose

Edit > Transform > Perspective

or

Edit > Transform > Distort

and then drag a corner handle.

But in practice, I like and use the method Bojan suggested (Edit > Free Transform with modifier keys), because it means I only have to remember one command, and Edit > Free Transform has a keyboard shortcut.

[jane-e]

I want to make the image under side diagonal as you see in screenshot . I made it in css

By @johannes999

Can you confirm what you are trying to do? When I read your post, I interpreted it that you want to create an image in the area at the bottom that is currently white.

If so, create a Clipping Mask. Details here:

https://helpx.adobe.com/photoshop-elements/using/clipping-masks.html

Also, by "css" do you mean cascading style sheets or is it a typo? If you meant CSS, that's a different answer.

Jane

[johannes999]

thanks every one ,

1-the answer for Jane it is cascading style sheet.

2-I have used ctrl-t then distort ,it worked but now I can not cut the rest of the image the blank space , I used pen to make selection but I don't know how to cut the rest of the image. the cut tool is not working because under side of the image is diagonal . can you tell me which way is the most simpel way to remove the rest of the image after distorting it. I upload screenshot so you can see what I mean!but I see the screenshot the rest of the distort image is not vissible as it is in photshop. 

thanks 

[Conrad_C]

Do you mean you want to remove the white area at the bottom so that it’s transparent on the web page? If thh Layers panel has a Background layer, then the document is opaque. If the Background layer is blank, then you can simply delete it, but if the Background layer has content you want to keep, then convert the Background layer to a normal layer and then delete the white. You can try steps like these, shown in the demo below:

1. In the Layers panel, click the lock icon to convert the opaque Background layer to a normal layer that supports transparency. 

2. Select the white area using any selection tool or method that works fast. I used the Magic Wand tool because the area is solid white so I only needed one click, but you can also use your method of drawing with the Pen tool and converting the resulting path into a selection. 

3. Delete the selection. You can press the Delete key; I chose Edit > Clear just so you could see what I did. Then deselect the selection. 

If you see a checkerboard pattern in the deleted area, that indicates document transparency. 

4. Save the document in a web image file format that supports transparency, such as PNG.

 

[Lumigraphics]

Images must be a rectangle. You can have transparency with some formats such as TIFF and PNG but the image is still rectangular.

[jane-e]

1-the answer for Jane it is cascading style sheet.

By @johannes999

Photoshop cannot write CSS code. You can handcode it with a text editor or use an app that will write HTML and CSS. Adobe has Dreamweaver, or you can do a Google search for others.

Jane

[johannes999]

thanks <

I am already using css code in my website like this:

.header-image img {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 95%);
}    it was causing problem with some function that I have enabled  in litespeed plug in to boast performance in pagespeed  so I thought  I can do the same shape  in photoshop and I did  but I changed it to  webp format and it caused also problem on width screens . so I  changed my mind and found solutione in chatgpt and used in place of  clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);  this :clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 95%);  I changed the last number from 100% to 95% and it solved the problem .  but still I want to know the same shape I made in photoshop why it made problem on wider screens . is it I have to use ping format in place of webp format?

thanks

[jane-e]

@johannes999 

Since your question is not about Photoshop, you might ask in the Dreamweaver forum, where they are more likely to be experts in CSS, best file format, and why your code is a problem on wider screens. If they don't know, then try a non-Adobe forum.

https://community.adobe.com/t5/dreamweaver/ct-p/ct-dreamweaver

If (for instance) you want to know how to save in a different format, we can assist with that.

Jane