ابزار ساخت Blob و شکل‌های ارگانیک SVG
شکل‌های ارگانیک SVG را با Seed قابل تکرار، چند لایه، Gradient، Stroke و Animation بسازید و Path یا SVG نهایی را برای رابط کاربری بردارید.
بوم زنده
هر تغییر همان لحظه روی SVG دیده می‌شود.
فرم و هندسه
ساختار اصلی Blob را کنترل کن.
رنگ و Fill
رنگ ساده یا Gradient دو رنگ انتخاب کن.
Stroke و افکت‌ها
حاشیه، Blur و Drop Shadow را خروجی استاندارد CSS تنظیم کن.
لایه‌های تزئینی
نسخه‌های نرم‌تر و کوچک‌تر از Blob اصلی برای عمق بیشتر اضافه کن.
Animation
حرکت سبک CSS برای استفاده تزئینی در UI.
Presetها
از یک استایل آماده شروع کن و بعد شخصی‌سازی کن.
SVG Health
پیچیدگی و وزن خروجی را قبل از استفاده بررسی کن.
خروجی نهایی
SVG، Path و CSS پایین Workspace هستند تا Canvas هیچ‌وقت روی کد قرار نگیرد.
SVG کامل
Path اصلی
CSS اختیاری
ابزار ساخت Blob SVG برای ساخت فرم‌های ارگانیک قابل ویرایش
Blobها برای Hero، Background، Illustration و عناصر تزئینی UI کاربرد دارند. چون خروجی SVG است، اندازه‌پذیری و ویرایش رنگ و Path نسبت به تصویر Raster ساده‌تر باقی می‌ماند.
Seed باعث می‌شود بتوانید یک فرم را دوباره تولید کنید و با کنترل پیچیدگی، لایه‌ها و افکت‌ها به نتیجه‌ای برسید که با هویت بصری پروژه هماهنگ باشد.
راهنمای استفاده از SVG Blob Builder
این راهنما فقط درباره کار با همین ابزار است؛ از شروع کار تا معنی گزینه‌ها و خواندن خروجی.
این ابزار دقیقاً چه کاری انجام می‌دهد؟
SVG Blob Builder شکل‌های ارگانیک را به‌صورت SVG تولید می‌کند. هندسه، نرمی، Fill، Stroke و بعضی افکت‌ها قابل تنظیم‌اند و می‌توانید SVG کامل یا فقط Path را بگیرید.
قبل از شروع این موارد را بدانید
- برای Background نسبت ViewBox و فضای اطراف Shape مهم است.
- برای Icon یا Mask، Path ساده‌تر معمولاً بهتر است.
- قبل از Random دوباره، فرم موردپسند را Copy یا نگه دارید.
قدم‌به‌قدم با ابزار کار کنید
- ۱. فرم جدید بسازیدبا «فرم جدید» یا حالت تصادفی Shape پایه را ایجاد کنید.
- ۲. هندسه را تغییر دهیدپیچیدگی، نرمی و فرم کلی Blob را تنظیم کنید.
- ۳. Fill و افکت‌ها را بسازیدSolid/Gradient، Stroke، لایه‌های تزئینی و Animation را تنظیم کنید.
- ۴. خروجی مناسب را برداریدSVG کامل، Path اصلی یا CSS اختیاری را کپی کنید.
دکمه‌ها، گزینه‌ها و اصطلاحات یعنی چه؟
اگر نام یک گزینه فنی است، این بخش توضیح می‌دهد چه کاری انجام می‌دهد و در کدام بخش ابزار به کارتان می‌آید.
- Random
- یک فرم تازه با تنظیمات تصادفی تولید می‌کند.
- Fill
- رنگ یا Gradient داخل شکل.
- Stroke
- خط دور Shape.
- Path
- هسته هندسی SVG که می‌توان مستقل استفاده کرد.
خروجی ابزار را چطور تفسیر کنید؟
SVG کامل برای استفاده مستقیم مناسب است؛ Path فقط داده هندسی d را می‌دهد و باید داخل SVG مقصد قرار بگیرد. Complexity زیاد می‌تواند حجم Path را بالا ببرد.
سوالات رایج
SVG Blob چیست؟
یک شکل برداری نامنظم و ارگانیک است که معمولاً برای عناصر تزئینی رابط کاربری استفاده می‌شود.
Seed چه کاربردی دارد؟
به شما اجازه می‌دهد یک شکل تصادفی مشخص را دوباره تولید کنید.
SVG بهتر است یا PNG؟
برای شکل‌های برداری ساده SVG معمولاً مقیاس‌پذیرتر و قابل‌ویرایش‌تر است؛ PNG برای تصاویر Raster مناسب‌تر است.