فوتر جالب

از طریق ابزار inspect مرورگرتون به سادگی می تونید بررسی کنید و متوجه بشید.
به کمک این ابزار، این دو مورد رو بررسی کنید:

<footer id="footer">
#footer {
    background: url(/wp-content/themes/Hamyar/assets/public/img/footer-bg.svg) repeat-x left top;
    height: auto;
    direction: rtl;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

<div class="main-footer-bg"></div>
#footer .main-footer .main-footer-bg {
    background: #d70d59;
    background: linear-gradient(324deg, #d70d59 0%, #fc3924 100%);
    -webkit-mask-box-image: url(/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg);
    mask-image: url(/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg);
    mask-position: top center;
    width: 1335px;
    height: 322px;
    position: absolute;
    left: 0;
    z-index: 0;
}

مرسی از کمکت منظور من این بود که ابزاری هست که بتونه عکس های خمیده درست کنه یا مثلا از قبل اماده داشته باشه
@milad

خواهش میکنم.
1) عکس خمیده رو من نمی دونم راه حلش رو، ولی این رو هم بگم که از عنوان سوالتون و همینطور متن گفتگوی اصلی تون، فکر نمی کنم خواننده متوجه بشه که میخواید عکس هارو تغییر حالت بدین.
2) در واقع همین کدها دارند کار مدنظر شما رو انجام میدن و در پس زمینه یک منحنی دو بعدی بوجود آوردن.

معمولا اگر طرح های UI/UX توسط یک دیزاینر تحویل برنامه نویس بشه به راحتی میشه این جور طرح ها رو خروجی گرفت. اگر هم نه خودتون میتونید تو فتوشاپ چنین طرح هایی رو درست کنید (با ابزار PEN مثلا) و با فرمت مثلا PNG ذخیره و استفاده کنید.

ولی رایج ترین روشش استفاده از طرح های vector-based هست. یعنی تصاویری که پیکسلی نیستند و فارغ از سایز صفحه نمایش با بالاترین کیفیت و پایین ترین حجم نمایش داده میشن. یکی از تخصصی ترین نرم افزار های این حوزه هم Adobe Illustrator هست. بعد از طراحی به روش های مختلفی میشه از کار Export گرفت. ولی باز فرمتی که مناسب وب هست و پیشنهاد میشه SVG هست.

در سایت مذکور هم اگر دقت کنید از همین تصاویر با فرمت SVG استفاده شده:
https://hamyar.co/wp-content/themes/Hamyar/assets/public/img/footer-inner-bg.svg

درود...
پیوند زیر:
https://www.youtube.com/watch?v=C_OplsTUuH0

مرسی از نظر تمام دوستان
@milad
@mhyeganeh
@endworld

این مقاله خیلی مختصر و مفید راجع به تفاوت svg و png توضیح داده و چندتا از نرم افزار های گرافیکی که به گرافیست Export فرمت svg میده رو معرفی کرده
https://blog.hubspot.com/website/what-is-an-svg-file

دوره svg سایت w3schools هم برای جزییات بد نیست
https://www.w3schools.com/graphics/svg_intro.asp

@mhyeganeh @endworld @f.zare
با تشکر از ارائه توضیحات شما دوستان، می خواستم جویا بشم که آیا منبعی رو می شناسید که چنین طرح هایی رو بصورت متنوع، در قالب عکس های png یا بُرداری svg شامل بشه؟

مثال:

یا

@milad
با فتوشاپ طراحی کن ...

@endworld بله فیلم رو دیدم و از پاسخ دوستان هم متوجه این شدم، اما منظورم اینه که جایی باشه که بخصوص چنین طرح هایی رو بصورت متنوع در دسترس گذاشته باشه و کار رو ساده کنه.

برای ساخت دیوایدر ها شما میتونید از این لینک استفاده کنید و خروجی رو بصورت تگ های html و css دریافت کنید و در سایت تون به راحتی استفاده کنید.

@milad
این لینک می تونه کمکتون کنه.
این لینک برای درست کردن shape های تصادفی خیلی خوبه .... این لینک برای درست کردن shape های منظم
تو بعضی از سایت هایی برای آیکون هم هستند می تونید همچین چیزایی رو تو فرمت svg پیدا کنید.

@f.zare @nimageneral
پیوندهایی که قرار دادید هر دو عزیز خیلی خیلی باحال و خوب بودن، سپاس سپاس 👌

خیلی ممنون از همه