افزودن سایه به تصاویر: راهنمای فنی برجستگی بصری، انسداد محیطی و واقع‌گرایی سه‌بعدی
⚡چگونه در ۳ گام ساده سایه اضافه کنیم
۱. گرافیک شفاف خود را وارد کنید
PNG، WebP یا سوژه جداشده شفاف خود را به فضای کار استودیوی سایه بکشید و رها کنید یا از حافظه دستگاه انتخاب کنید. ابزار ابعاد تصویر را فوراً می‌خواند.
۲. تاری، جابه‌جایی و رنگ را تنظیم کنید
شعاع تاری گاوسی، جابه‌جایی افقی (X) و عمودی (Y) منبع نور، رنگ سایه و اسلایدرهای شفافیت آلفا را به‌صورت زنده با پیش‌نمایش تعاملی تنظیم کنید.
۳. تصویر برجسته‌شده را دانلود کنید
رندر زنده را روی صفحه شطرنجی شفافیت بررسی کنید. روی «دانلود تصویر» کلیک کنید تا گرافیک سه‌بعدی با شفافیت کامل آلفا مستقیماً روی دستگاه شما ذخیره شود.
گرافیک‌های دیجیتال تخت و دوبعدی اغلب از نظر بصری از محیط نمایش خود جدا به نظر می‌رسند. در شناخت فضایی انسان و طراحی رابط بصری مدرن — مانند قاب پنجره‌های macOS اپل، سلسله‌مراتب برجستگی Material Design گوگل و نمایش محصولات SaaS امروزی — سایه‌ها با شبیه‌سازی یک منبع نور جهت‌دار که در امتداد محور z عمق ایجاد می‌کند، فیزیک دنیای واقعی را بازسازی می‌کنند. سایه‌ها نشانه‌های ادراکی ضروری فراهم می‌کنند: برجستگی نوری می‌سازند، کارت‌های رابط کاربری پیش‌زمینه را از سطوح پس‌زمینه جدا می‌کنند، محصولات جداشده فروشگاه اینترنتی را روی زمین می‌نشانند تا هرگز به‌طور مصنوعی معلق به نظر نرسند و اسکرین‌شات‌های تخت نرم‌افزار را به دارایی‌های سه‌بعدی شناور و لمس‌پذیر تبدیل می‌کنند.
ابزار «افزودن سایه» ما که در مرورگر اجرا می‌شود، به طراحان، بازاریابان و توسعه‌دهندگان امکان می‌دهد سایه‌های چندلایه و از نظر فیزیکی دقیق را دور هر گرافیک PNG، WebP یا برداری شفاف در چند میلی‌ثانیه رندر کنند. کنترل دقیق جابه‌جایی منبع نور (مختصات X و Y)، شعاع تاری گاوسی، رنگ سایه و شفافیت آلفا در اختیار شماست. نکته مهم اینکه موتور ما فاصله بوم بیرونی را به‌طور پویا محاسبه می‌کند تا لبه‌های ظریف و پخش‌شده نیم‌سایه هرگز به مرزهای سخت بوم برخورد نکنند و بریده نشوند. چون همه چیز ۱۰۰٪ در سمت کاربر و با APIهای Canvas دارای شتاب سخت‌افزاری اجرا می‌شود، نمونه‌های اولیه منتشرنشده و ماکت‌های تجاری شما بدون هیچ آپلود ابری کاملاً محرمانه می‌مانند.
خواندن راهنمای فنی کامل
فیزیک نوری شکل‌گیری سایه: سایه کامل، نیم‌سایه و انسداد محیطی
در اپتیک فیزیکی، سایه‌های منابع نور واقعی هرگز اشکال سیاه یکدست و تند نیستند. سایه‌های واقعی با دو ناحیه نوری اصلی تعریف می‌شوند: سایه کامل (umbra — هسته تیره و متراکم زیر جسم که منبع نور کاملاً پوشیده است) و نیم‌سایه (penumbra — مرز بیرونی نرم و پخش‌شده که منبع نور فقط تا حدی پوشیده است).
هندسه فضایی نیم‌سایه را فاصله فیزیکی جسم تا سطح دریافت‌کننده تعیین می‌کند. جسمی که مستقیماً روی میز قرار دارد سایه تماسی فشرده، تیز و تیره (انسداد محیطی) ایجاد می‌کند. هرچه جسم در امتداد محور z بالاتر رود، نیم‌سایه به بیرون گسترش می‌یابد و نرم‌تر، شفاف‌تر و پخش‌تر می‌شود.
موتور سایه ما به شما اجازه می‌دهد این اصول فیزیکی را به‌صورت ریاضی بازسازی کنید. با تنظیم دقیق شعاع تاری گاوسی همراه با جابه‌جایی‌های عمودی و افقی، می‌توانید همه چیز را از نور مستقیم ظهر (سایه‌های فشرده و تیز درست زیر جسم) تا نور پخش استودیو از ارتفاع زیاد (درخشش‌های نرم و گسترده محیطی) شبیه‌سازی کنید و به آثار دیجیتال حضور فیزیکی واقعی بدهید.
هندسه گسترش پویای بوم: جلوگیری از بریده شدن تند لبه‌های سایه
رایج‌ترین نقص ابزارهای آماتوری سایه، «برش کادر محدوده» است. وقتی سایه درون بومی با ابعاد ثابت رندر می‌شود، تاری گاوسی نرم و پرمانند فراتر از عرض و ارتفاع اصلی تصویر پخش می‌شود. ابزارهای ساده این تاری را در مرزهای بوم به‌طور ناگهانی قطع می‌کنند و برش‌های عمودی و افقی تیز و زشتی ایجاد می‌شود که واقع‌گرایی سایه را کاملاً از بین می‌برد.
موتور افزودن سایه ما با محاسبه و اختصاص پویای فاصله گسترده بوم پیش از رسترسازی از برش جلوگیری می‌کند: `PaddingX = (ShadowBlur * 2) + Math.abs(ShadowOffsetX)` `PaddingY = (ShadowBlur * 2) + Math.abs(ShadowOffsetY)` `NewCanvasWidth = SourceWidth + (PaddingX * 2)` `NewCanvasHeight = SourceHeight + (PaddingY * 2)`
بوم گسترش‌یافته فضای هندسی کاملی فراهم می‌کند تا کل منحنی نیم‌سایه به‌طور طبیعی به شفافیت صفر (`alpha = 0`) برسد. PNG شفاف ۳۲ بیتی حاصل با گذارهای گرادیانی کاملاً نرم روی هر پس‌زمینه روشن، تیره یا طرح‌دار وب به‌طور یکپارچه شناور می‌شود.
ماکت‌های رابط کاربری، نمایش محصولات و گرافیک صفحات فرود SaaS
سایه‌ها محرک‌های بصری ضروری در بازاریابی دیجیتال و فروش نرم‌افزارند:
۱. اسکرین‌شات صفحه فرود SaaS: بنیان‌گذاران و توسعه‌دهندگان فرانت‌اند مرتباً از اپلیکیشن اسکرین‌شات می‌گیرند تا جریان‌های کاری داشبورد را نشان دهند. یک اسکرین‌شات مستطیلی ساده تخت و آماتور به نظر می‌رسد. اعمال سایه پخش مدرن (مثلاً جابه‌جایی Y: ۲۰ پیکسل، تاری: ۴۰ پیکسل، شفافیت: ۱۸٪) اسکرین‌شات را به کارت نرم‌افزاری معتبر و شناوری تبدیل می‌کند که فوراً توجه کاربر را جلب می‌کند.
۲. نشاندن محصول فروشگاهی روی زمین: وقتی عکاسان تجاری کفش، لوازم آرایشی، مبلمان یا لوازم الکترونیکی را روی پس‌زمینه شفاف جدا می‌کنند، محصولات ممکن است معلق و غیرطبیعی به نظر برسند. اعمال سایه تماسی واقعی با زمین، محصول را روی سطح می‌نشاند، مقیاسی لمس‌پذیر ایجاد می‌کند و اطمینان خرید مشتری را در آگهی‌های Shopify و آمازون به‌طور چشمگیری افزایش می‌دهد.
۳. خوانایی لوگو روی رسانه شلوغ: قرار دادن نشان‌های شفاف برند روی بنرهای عکاسی شلوغ و چندرنگ اغلب خوانایی را کاهش می‌دهد. یک سایه تیره ظریف حائل کنتراستی میکروسکوپی ایجاد می‌کند و تضمین می‌کند لوگو صرف‌نظر از ویدیو یا عناصر عکاسی پس‌زمینه کاملاً واضح بماند.
درخشش‌های محیطی رنگی و زیبایی‌شناسی نورپردازی نئومورفیک
سایه‌های سنتی از سیاه یا ذغالی خنثی (`#000000` با شفافیت ۲۰٪ تا ۳۰٪) استفاده می‌کنند، اما طراحی پیشرفته رابط کاربری امروز اغلب از «سایه‌های محیطی رنگی» یا درخشش‌هایی با رنگ برند بهره می‌برد. به‌جای سایه سیاه سرد، رنگ سایه با فام غالب سوژه پیش‌زمینه هماهنگ می‌شود (مثلاً یک کفش ورزشی نئونی که سایه نارنجی گرم ملایمی دارد یا داشبورد فین‌تکی که بازتاب محیطی آبی تیره نرمی می‌اندازد).
ابزار ما اجازه می‌دهد هر رنگ سایه دلخواهی را با انتخابگر رنگ تعاملی یا وارد کردن کد هگز دقیق انتخاب کنید. سایه‌های رنگی رادیوسیته فیزیکی — بازتاب نوری نور رنگی از سطوح — را شبیه‌سازی می‌کنند و زیبایی‌شناسی درخشان و پرانرژی‌ای می‌سازند که در پلتفرم‌های بازی و هویت برندهای فناوری محبوب است.
جریان برجستگی متصل: جداسازی، گرد کردن، سایه و بهینه‌سازی
برای تبدیل عکس‌های خام دوربین به تصاویر محصول تجاری در سطح استودیو، این زنجیره پردازش ساختاریافته را دنبال کنید:
گام ۱ - جداسازی سوژه: اگر با تصویری روی پس‌زمینه یکدست شروع می‌کنید، سوژه را با «حذف پس‌زمینه» یا «شفاف‌سازی» جدا کرده و شفافیت آلفای ۸ بیتی تمیز بسازید.
گام ۲ - انحنای لبه: اگر دارایی شما کارت نرم‌افزاری یا اسکرین‌شات است، گوشه‌های تیز را با «گرد کردن گوشه‌ها» نرم کنید.
گام ۳ - سایه سه‌بعدی: با همین ابزار افزودن سایه، عمق، جابه‌جایی و تاری گاوسی واقع‌گرایانه اضافه کنید.
گام ۴ - پس‌زمینه (اختیاری): اگر می‌خواهید دارایی شناور را روی سطح تمیز استودیویی قرار دهید، آن را با «تغییر رنگ پس‌زمینه» روی بومی تازه ترکیب کنید.
گام ۵ - تحویل نسل جدید: دارایی شفاف نهایی را با «تبدیل PNG به WebP» به WebP مدرن تبدیل کنید تا بیشترین سرعت دانلود موبایل حاصل شود.
💡نکات حرفه‌ای برای سایه‌های واقع‌گرایانه
- •شعاع تاری بزرگ (۳۰ تا ۵۰ پیکسل) همراه با شفافیت کم (۱۲٪ تا ۲۰٪) برجستگی مدرن «نور پخش» را می‌سازد که در طراحی‌های اپل و Stripe محبوب است.
- •جابه‌جایی X را ۰ و جابه‌جایی Y را ۱۲ تا ۲۰ پیکسل بگذارید تا نور طبیعی از بالا شبیه‌سازی شود که برای سیستم بینایی انسان طبیعی‌ترین حالت است.
- •همیشه با گرافیک PNG یا WebP شفاف شروع کنید؛ اگر تصویر پس‌زمینه یکدست دارد، ابتدا سوژه را با ابزار حذف پس‌زمینه جدا کنید.
- •برای نمایش پرجلوه محصول، از سایه رنگی هم‌رنگ با رنگ غالب محصول استفاده کنید تا رادیوسیته واقعی نور شبیه‌سازی شود.
- •ابزار ما حاشیه‌های بوم را به‌طور پویا به بیرون گسترش می‌دهد تا لبه‌های نرم و پرمانند سایه هرگز ناگهانی بریده نشوند.
- •چند محصول جداشده را پشت سر هم در زبانه مرورگر و بدون صف آپلود یا تأخیر سرور ابری پردازش کنید.
- •همه رندر کانولوشن سایه ۱۰۰٪ به‌صورت محلی در حافظه دستگاه شما انجام می‌شود تا نمونه‌های اولیه اختصاصی محصول کاملاً محرمانه بمانند.
🛡️کانولوشن تاری Canvas در سمت کاربر، گسترش بافر و حریم خصوصی بدون آپلود
ابزار افزودن سایه ما کاملاً درون محیط ایزوله سمت کاربر در مرورگر مدرن شما کار می‌کند. هنگام بارگذاری تصویر شفاف، مرورگر جریان بیت را به آرایه پیکسلی ۳۲ بیتی RGBA فشرده‌نشده در حافظه سخت‌افزار رمزگشایی می‌کند. موتور فاصله بافر بیرونی لازم را با فرمول `Padding = (BlurRadius * 2) + max(|OffsetX|, |OffsetY|)` محاسبه می‌کند. یک زمینه داخلی HTML5 Canvas2D یا OffscreenCanvas مطابق ابعاد گسترش‌یافته اختصاص می‌یابد. این زمینه خط پردازش سایه دوبعدی بومی و دارای شتاب سخت‌افزاری خود را با ویژگی‌های `shadowBlur`، `shadowOffsetX`، `shadowOffsetY` و `shadowColor` پیکربندی می‌کند. وقتی تصویر منبع روی بوم رندر می‌شود، موتور گرافیک دوبعدی مرورگر (Skia یا CoreGraphics) سیلوئت آلفای غیرصفر تصویر را استخراج کرده و یک فیلتر کانولوشن تاری گاوسی جدایی‌پذیر دوگذره روی بافر رنگ اعمال می‌کند. تصویر منبع با تراز دقیق پیکسلی روی سایه تولیدشده رسم می‌شود. ترکیب حاصل به‌صورت جریان بیت PNG از نوع RGBA ۳۲ بیتی truecolor منطبق با RFC 2083 خروجی گرفته شده و به یک Blob URL محلی موقت (blob:2run.tools/...) نگاشت می‌شود. چون هیچ داده‌ای از طریق شبکه‌های خارجی به سرورهای ابری ارسال نمی‌شود، نمونه‌های اولیه تجاری، دارایی‌های مشتری و ماکت‌های محرمانه شما ۱۰۰٪ خصوصی و از رهگیری اشخاص ثالث در امان می‌مانند.
فناوری: WebAssembly • Web Workers چندرشته‌ای • HTML5 Canvas API
حریم خصوصی: فایل‌ها از دستگاه شما خارج نمی‌شوند و در فضای ابری ذخیره نمی‌شوند؛ آمار فقط با رضایت شما اجرا می‌شود.
ابزارهای مکمل این روند کار
این ابزارهای مرورگری را برای روند کاری پربازده با هم ترکیب کنید.
افزودن حاشیه
تصاویر را با قاب، رنگ و حاشیه‌های قابل تنظیم احاطه کنید.
گوشه‌های گرد
لبه‌های تصویر را با شعاع گوشه گرد و مدرن نرم کنید.
فشرده‌سازی تصویر
حجم فایل‌های JPG، PNG و WebP را بدون افت کیفیت قابل مشاهده کاهش دهید. فشرده‌سازی سریع و ۱۰۰٪ خصوصی در مرورگر.
تغییر اندازه تصویر
ابعاد دقیق پیکسلی یا درصدی را با حفظ تناسب تغییر دهید و فرمت را تبدیل کنید.