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

Create abstract figures in HTML/CSS – Photoshop

At the moment I am building a simple personal website to show some of the stuff I am doing.
You can see a little Image I made myself in Photoshop to work up to here:

https://ibb.co/61VxFnD (mobile), https://ibb.co/122nPmv (desktop)

For the content boxes I plan to use CSS grid. But you might have noticed that in the background I wanted to add this slight curvy figure. I think it just looks very nice.

It doesnt have to be exactly this figure right there. Just some sort of colored curve does the job for me.

I know that I could just use an image from this curve as an background but using such big images may cause the website to load slower.

Is there any way to maybe create an Figure and put an solid color on it? I hope like this I can keep my Website lightweight.

Tags:

2

Answers


  1. 0

    use .png for the gray wave at the bottom. it doesn’t matter how big images are if you are using simple shapes like this one. PNG handles these shapes very well and the file size is very small. try exporting from Photoshop in different ways to see what works best. after you export go to https://tinypng.com/ and drop the image to get the best result possible.

    Login or Signup to reply.
  2. 0

    I would recomend you to use svg: it will scale without any loss of quality. Check this out:

    <div style="height: 150px; overflow: hidden; background: lightgray">
  <svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
    <path d="M0.00,49.98 C216.98,182.06 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" 
          style="stroke: none; fill: gray;">
    </path>
  </svg>
</div>

    By the way, this guy has created a nice svg wave generator

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

Back To Top
Search