Skip to main content
Inspiring
September 19, 2024
Question

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

  • September 19, 2024
  • 3 replies
  • 797 views

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

This topic has been closed for replies.

3 replies

jane-e
Community Expert
Community Expert
September 20, 2024
quote

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

 

Inspiring
September 20, 2024

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
Community Expert
Community Expert
September 20, 2024

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.

 

Conrad_C
Community Expert
Community Expert
September 20, 2024

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.

Bojan Živković11378569
Community Expert
Community Expert
September 20, 2024

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.