آخرین بروزرسانی در تاریخ : ۲۴, بهمن, ۱۳۹۸

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

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

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

آموزش ساخت موج های SVG | CSS Waves
مدل های مختلفی از موج های SVG
حتما بخوانید  آموزش کامل کار با ویرایشگر گوتنبرگ وردپرس (جلسه 18)

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

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

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

حتما بخوانید  آموزش انتشار اولین نوشته با ویرایشگر گوتنبرگ وردپرس (جلسه 12)

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

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

ساخت امواج SVG با نرم افزار ایلوستریتور و افزودن آن به سایت
حتما بخوانید  دکمه های اشتراک گذاری در شبکه اجتماعی در المنتور (share buttons - جلسه 26)

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

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

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

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

معرفی سایت getwaves برای ساخت ساده موج های SVG
سایت getwaves برای ساخت امواج SVG
حتما بخوانید  آموزش کار با المان شمارنده تاریخ در المنتور(countdown - جلسه 25)

نمونه ای از یک موج 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

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

حتما بخوانید  آموزش نصب افزونه وردپرس با روش های مختلف (جلسه 11)

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

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

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

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

حتما بخوانید  آموزش نصب وردپرس در هاست دایرکت ادمین - DirectAdmin (جلسه 6)

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

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

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

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

تنظیم Contrast حباب SVG حرفه ای (SVG blobs)
تنظیم Contrast حباب SVG
حتما بخوانید  سیستم مدیریت محتوای وردپرس چیست؟ (آموزش وردپرس - جلسه 2)

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

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

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

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

ویدیوی معرفی دو ابزار getwaves و Blobmaker
حتما بخوانید  آموزش خرید هاست و دامنه مناسب از شرکت های معتبر (آموزش وردپرس - جلسه 3)

جمع بندی

در انتها امیدوارم که با استفاده از این آموزش بتونید امواج SVG و حباب های SVG زیبایی رو برای سایت خودتون بسازید، اگر به سری مقالات آموزش طراحی سایت علاقمندید مقاله های ۲۵+ منبع برای دانلود رایگان وکتورهای گرافیکی جذاب و با کیفیت بالا و ریسپانسیو در css | طراحی واکنشگرا در css و تکنیک های تجربه کاربری را حتما مطالعه کنید.

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

نظرات در “ساخت امواج SVG | افزودن CSS Waves به سایت (آموزش ویدیویی)

  1. yegane میگوید:

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

    • نبی عبدی میگوید:

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

    • نبی عبدی میگوید:

      خوشحالیم که آموزش ساخت امواج SVG مورد پسند شما قرار گرفته است. نظرات شما باعث دلگرمی ما برای تهیه آموزش های بیشتر می شود.

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

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