آخرین بروزرسانی در تاریخ : ۲۳, آذر, ۱۳۹۸ 1,336 بازدید

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

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

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

آموزش ساخت موج های SVG | CSS Waves
مدل های مختلفی از موج های SVG
حتما بخوانید  آموزش کار با المان نمایش نظرات در المنتور(review - جلسه 24)

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

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

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

حتما بخوانید  طراحی سایت مشهد | طراحی انواع سایت حرفه ای در شهر مشهد

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

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

ساخت امواج SVG با نرم افزار ایلوستریتور و افزودن آن به سایت
حتما بخوانید  آموزش ویدیویی ساخت اکولایزر با HTML & CSS

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

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

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

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

معرفی سایت getwaves برای ساخت ساده موج های SVG
سایت getwaves برای ساخت امواج SVG
حتما بخوانید  آموزش ویدیویی ساخت UI کارت پروفایل کاربری با HTML & CSS

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

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

حتما بخوانید  کار با المان Testimonial Carousel در المنتور (نمایش نظرات مشتریان - جلسه 22)

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

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

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

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

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

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

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

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

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

تنظیم Contrast حباب SVG حرفه ای (SVG blobs)
تنظیم Contrast حباب SVG
حتما بخوانید  آموزش ساخت هاور آیکون انیمیشنی با html و css (ساخت تولتیپ)

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

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

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

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

ویدیوی معرفی دو ابزار getwaves و Blobmaker
حتما بخوانید  آموزش ساخت باکس اطلاعات تماس با HTML و CSS (با هاور زیبا)

جمع بندی

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

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

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

تخفیف 10%
پوچ
دفعه ديگه .
تقریبا!
کد تخفیف 20%
کتاب آموزش وردپرس
کد تخفیف 30%
امروز رو شانس نبودی!
تقریبا!
تخفیف 40%
پوچ
پوچ
شانس خودتان را برای برنده شدن یک جایزه امتحان کنید!
ایمیل خود را وارد کنید و گردونه را بچرخانید و شانس خودتان را برای برنده شدن انواع کدهای تخفیف شگفت انگیز امتحان کنید!
قوانین داخلی ما:
  • یک بازی برای هر کاربر
  • متقلبین رد صلاحیت خواهند شد.