منتشر شده در تاریخ : 22, اکتبر, 2019 129 بازدید

سلام به همه شما همراهان گرامی آکادمی کسب و کار اینترنتی وبکیما در این آموزش طراحی سایت می خواهیم به شما ساخت انواع امواج SVG یا همان CSS Waves را آموزش دهیم. اضافه کردن SVG waves اگر به صورت اصولی و استاندارد اضافه شود باعث زیبایی سایت شما می شود. اگر می خواهید امواج SVG را به سایت خود اضافه کنید این آموزش را تا انتها مطالعه بفرمایید.

آموزش ساخت موج های SVG | CSS Waves

به احتمال بسیار زیاد سایت هایی را مشاهده کرده اید که در قسمت هایی از سایت تصاویری به صورت موج استفاده شده است . برای مثال تصویر زیر را مشاهده کنید:

آموزش ساخت موج های SVG | CSS Waves
مدل های مختلفی از موج های SVG

چندین راه مختلف برای اضافه کردن این شکل ها به سایت وجود دارد. برای مثال شما می توانید از تصاویر با پسوند png برای ساخت این موج ها استفاده کنید. روش این کار هم به این صورت است که ابتدا در نرم افزار فتوشاپ تصویر مورد نیاز خود را ساخته سپس طبق آموزش ویدیویی زیر آن را به پروژه خود اضافه کنید.

ویدیوی آموزش ساخت و افزودن موج (Wave) به سایت

برای این که کارتون آسون تر باشه تصویر استفاده شده در ویدیوی آموزشی بالا را در زیر می توانید دانلود کنید و در پروژه های طراحی سایت خود به راحتی استفاده کنید.

آموزش ساخت امواج SVG با نرم افزار ایلوستریتور ( illustrator )

یکی دیگه از راه هایی که می توانید موج های زیبایی را به سایت تان اضافه کنید این است که ابتدا در نرم افزار ایلوستریتور – illustrator یک شکل که مناسب سایت تان باشد را بسازید سپس آن را به سایت خود اضافه کنید. در ویدیوی زیر ابتدا یک Wave شکل در نرم افزار ایلوستریتور ساختیم سپس آن را به پروژه طراحی سایت خود اضافه کردیم.

ساخت امواج SVG با نرم افزار ایلوستریتور و افزودن آن به سایت

معرفی سایت getwaves برای ساخت ساده موج های SVG

حالا اگه حوصله کار کردن با نرم افزار های فتوشاپ و illustrator ندارید، پس بزارید یک ابزار خیلی باحال بهتون معرفی کنم که با استفاده از اون می تونید امواج SVG بسیار حرفه ای و زیبایی را در سایزها و رنگ ها و شکل های مختلف بسازید و فایل SVG آن را به صورت کاملا رایگان دانلود کنید و در پروژه های طراحی سایت خود استفاده کنید.

ابزاری که این همه ازش تعریف کردیم توسط شرکت zcreativelabs طراحی و توسعه داده شده است و نام آن getwaves است . برای دسترسی به ابزار getwaves روی دکمه زیر کلیک کنید.

پس از ورود به سایت getwaves مشاهده می کنید که با استفاده از ابزارهای قرار داده شده می توانید انواع مختلفی از امواج SVG را ساخته و در سایت خود استفاده کنید.

معرفی سایت getwaves برای ساخت ساده موج های SVG
سایت getwaves برای ساخت امواج SVG

نمونه ای از یک موج SVG ساخته شده توسط ابزار getwaves

در زیر تصویری از یک نمونه موج SVG ساخته شده توسط ابزار getwaves را مشاهده می کنید که خیلی راحت به یک پروژه افزوده شده است:

یک نمونه موج SVG
یک نمونه موج SVG

افزودن انیمیشن به امواج SVG

حالا که یاد گرفتید چگونه امواج SVG را به سایت خود اضافه کنید می خوام بهتون یاد بدم که چگونه به این موج های SVG انیمیشن های زیبایی را اضافه کنید تا یک سایت زیبا و چشم نواز بتونید برای خودتون طراحی کنید.

نگران نباشید نیازی نیست که اسکریپت های سنگینی را برای افزودن انیمشن به امواج SVG به سایت خود اضافه کنید، راه بسیار ساده و کم حجمی برای افزودن انیمشن به موج های SVG وجود دارد آن هم استفاده از دستور transforms و keyframe animations در CSS است.به کد زیر توجه کنید:

@keyframes animateWave {
  ۰% {
    transform: scale(1,0);
  }
  ۱۰۰% {
    transform: scale(1,1);
  }
}
.wave-container > svg {
  display: block;
  transform-origin: bottom;
  animation: animateWave 1000ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

با استفاده از قطعه کد بالا می تونیم موج SVG ساخته شده را به شکل زیر انیمیشن دار کنیم:

افزودن انیمیشن به امواج SVG

دیگه خودتون با کمی بالا و پایین کردن کدها می تونید طبق میل و نیاز خودتون این انیمیشن رو شخصی سازی کنید.

ساخت حباب SVG حرفه ای (SVG blobs) با ابزار Blobmaker

خب حالا که ساخت امواج SVG رو یاد گرفتید می خوام بهتون یاد بدم که چگونه حباب SVG بسازید. بزارید اینجوری بگم که به احتمال زیاد تا به حال شده که شکل های چند ضلعی زیبایی رو در سایت های مختلف دیده اید که برای پس زمینه برخی سکشن ها استفاده شده است برای مثال تصویر زیر را مشاهده کنید:

ساخت حباب SVG حرفه ای (SVG blobs) با ابزار Blobmaker
حباب های SVG یا (SVG blobs)

خب برای ساخت حباب های SVG یا همون SVG blobs می تونید از ابزار Blobmaker که یکی دیگه از ابزارهای شرکت zcreativelabs است استفاده کنید برای دسترسی به ابزار Blobmaker از دکمه زیر استفاده کنید:

بعد از مراجعه به ابزار Blobmaker مشاهده می کنید که مثل ابزار قبلی دارای چندتا دکمه برای ساخت و کنترل SVG blobs دلخواه است. با استفاده از کنترل های قرار داده شده در این ابزار می توانید رنگ حباب SVG خودتون رو تغییر بدید یا اینکه تعداد ضلع های حباب SVG رو کم و زیاد کنید.

بذارید به صورت تصویری بهتون توضیح بدم . همان طور که در تصویر زیر مشاهده می کنید با استفاده از ابزار complexity می تونید تعداد ضلع های حباب رو تنظیم کنید:

تنظیم تعداد ضلع  حباب SVG حرفه ای (SVG blobs)
تنظیم تعداد ضلع حباب SVG حرفه ای (SVG blobs)

همچنین با استفاده از ابزار contrast می تونید تنظیم کنید که حباب SVG شما بیشتر به یک دایره شبیه باشه یا به یک چند ضلعی، در واقع پیچیدگی شکل رو می تونید تنظیم کنید:

تنظیم Contrast  حباب SVG حرفه ای (SVG blobs)
تنظیم Contrast حباب SVG

باحال ترین بخش ابزار Blobmaker  اینه که شما می تونید خیلی راحت و با استفاده از یک دکمه که در کنار بخش دانلود است ، حباب های SVG رندوم بسازید و اونقدر این دکمه رو بزنید تا یک حباب SVG مطابق سلیقه تون پیدا کنید.

ساخت رندوم حباب SVG
ساخت رندوم حباب SVG

بعد از پیدا کردن حباب SVG رویاهاتون ! خیلی راحت فایل SVG اونو دانلود کنید و مطابق ویدیوهای آموزشی بالا توی پروژه های طراحی سایت خودتون استفاده کنید.

نکته مهماگه حوصله خوندن مقاله رو ندارید می تونید با مشاهده ویدیوی آموزشی زیر با دو ابزار getwaves و Blobmaker به صورت کامل آشنا بشید و یاد بگیرید چگونه امواج SVG و حباب SVG مطابق سلیقه خودتون بسازید.

ویدیوی معرفی دو ابزار getwaves و Blobmaker

جمع بندی

در انتها امیدوارم که با استفاده از این آموزش بتونید امواج SVG و حباب های SVG زیبایی رو برای سایت خودتون بسازید ، شما هم اگر ابزاری رو برای ساخت این مدل اشکال می شناسید در بخش دیدگاه ها مطرح کنید تا دیگر کاربران هم بتونند استفاده کنند. ممنون از همراهی تون 😉

آموزش چقدر برای شما مفید بود؟
[مجموع: 0 میانگین: 0]

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطلب پیشنهادی