Photoshop Question posted in
The official user guide can be found here.

How do you create non rectangular shaped image on website header/hero? – Photoshop

I’m creating a small website and i wanted to experiment with the modern non rectangular image approach on hero images, but i’m not sure how to go about it.Here is an example of what i’m trying to achieve.Any guidance would be highly appreciated.

enter image description here

Tags:

3

Answers


  1. 0

    I am not sure why you’ve received so many down votes, but I know the solution to this. To achieve something like that type of design, you’ll need to utilize an SVG. A Scale-able Vector Graphic(SVG) is an element in HTML used to draw a complex path, however many people utilize online tools pr programs like GIMP, Adobe Illustrator, or Inkscape to make them. You draw them in a program and export the path data to your HTML Document. I hope this helps you and your growing site.
    https://inkscape.org/ — Inkscape
    https://www.gimp.org/ — GIMP

    Login or Signup to reply.
  2. 0

    Use a png mask image on the picture.

    https://i.stack.imgur.com/ReAR9.png

    .wrap {position:relative;width:969px;height:300}
.wrap .bg {height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover}
.wrap .mask {position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0}
    <div style="width:969px;margin:0 auto">
  <div class="wrap">
    <div class="bg"></div>
    <div class="mask"></div>
  </div>
  <div>
    Content
  </div>
</div>
    Login or Signup to reply.
  3. 0

    A great way to do that is with an SVG Clipping Path. This website here allows you to create the path you want and then it will automatically generate the CSS you need to create it.

    https://bennettfeely.com/clippy/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search