گرد کردن گوشه‌های تصویر: راهنمای فنی انحنای رابط کاربری، اسکوئرکل‌ها و ماسک‌های آلفا
⚡چگونه در ۳ گام ساده گوشه‌های تصویر را گرد کنیم
۱. تصویر خود را وارد کنید
عکس JPG، PNG یا WebP خود را به فضای کار استودیو بکشید و رها کنید یا از حافظه دستگاه انتخاب کنید. ابزار ابعاد تصویر را فوراً در مرورگر می‌خواند.
۲. شعاع گوشه را تنظیم کنید
با اسلایدر تعاملی شعاع منحنی دلخواه را بر حسب پیکسل تعیین کنید — از منحنی ظریف ۱۲ پیکسلی رابط کاربری تا ماسک کاملاً دایره‌ای ۵۰٪ آواتار.
۳. PNG گردشده را دانلود کنید
پیش‌نمایش زنده ضدنقص را روی شبکه شفافیت بررسی کنید. روی «دانلود تصویر PNG» کلیک کنید تا تصویر با گوشه‌های منحنی شفاف فوراً روی دستگاه شما ذخیره شود.
گوشه‌های مستطیلی تیز ۹۰ درجه یادگار تاریخی نمایشگرهای اولیه پرتو کاتدی و معماری‌های ابتدایی حافظه شبکه پیکسلی هستند. در طراحی دیجیتال امروز — که رهنمودهای رابط انسانی iOS و macOS اپل، Material Design 3 گوگل و فریم‌ورک‌های مدرن CSS مانند Tailwind UI مروج آن‌اند — گوشه‌های گرد و انحنای نرم به زبان بصری جهانی ظرافت، دسترس‌پذیری و ارگونومی دیجیتال تبدیل شده‌اند. پژوهش‌های روان‌فیزیولوژیک نشان می‌دهند که گوشه‌های تیز اصطکاک بصری ایجاد می‌کنند، هوشیاری شناختی خفیفی برمی‌انگیزند و نگاه بیننده را به سمت پیرامون می‌کشند. در مقابل، گوشه‌های گرد نگاه را به نرمی به سوژه مرکزی عکس هدایت می‌کنند.
ابزار «گرد کردن گوشه‌ها» ما که در مرورگر اجرا می‌شود، کنترل دقیقی بر انحنای تصویر فراهم می‌کند. چه به ریزشعاع‌های ظریف ۸ تا ۱۶ پیکسلی برای کارت‌های وب مدرن نیاز داشته باشید، چه منحنی‌های جادار ۳۲ پیکسلی برای ماکت‌های فروشگاه اپلیکیشن، یا ماسک‌های کاملاً دایره‌ای ۵۰٪ برای آواتارهای بی‌نقص پروفایل، موتور ما تصاویر را با دقت ریاضی زیرپیکسلی شکل می‌دهد. نواحی گوشه بریده‌شده به کانال‌های آلفای شفاف ۳۲ بیتی نرم و ضدنقص تبدیل می‌شوند و روی پس‌زمینه‌های روشن، تیره یا گرادیانی یکپارچه شناور می‌مانند. چون همه چیز ۱۰۰٪ در سمت کاربر و با APIهای Canvas دارای شتاب سخت‌افزاری اجرا می‌شود، پرتره‌های خصوصی و دارایی‌های اختصاصی رابط کاربری شما هرگز به سرورهای ابری نمی‌رسند.
خواندن راهنمای فنی کامل
روان‌شناسی انحنا: سوگیری فووه‌آ و ارگونومی شناختی بصری
در ادراک بصری و عصب‌روان‌شناسی انسان، زاویه‌های هندسی تیز و گوشه‌های حاد با هوشیاری دفاعی بیشتری توسط قشر بینایی مغز پردازش می‌شوند. در طبیعت، گوشه‌های تیز نشانه خطرهای احتمالی (خار، دندان شکارچی، صخره‌های ناهموار) هستند، در حالی که خطوط گرد و طبیعی حس امنیت، نرمی و هماهنگی را منتقل می‌کنند.
در طراحی رابط دیجیتال، مرزهای مستطیلی تیز عکس باعث «حواس‌پرتی فووه‌آ» می‌شوند: رأس‌های تیز تمرکز چشم را به چهار گوشه پیرامونی تصویر می‌کشند. با اعمال یک شعاع گوشه نرم، بردارهای جهت‌دار تند لبه‌ها ملایم می‌شوند. نگاه بیننده به‌طور طبیعی به سمت سوژه اصلی — چهره فرد در پرتره، جزئیات محصول فروشگاه اینترنتی یا شاخص‌های کلیدی یک اینفوگرافیک — هدایت می‌شود. این تغییر روانی ظریف خستگی چشم را کاهش می‌دهد و تعامل بصری را به‌طور چشمگیری افزایش می‌دهد.
هندسه ریاضی: کمان‌های دایره‌ای، اسپلاین‌های بزیه و انحنای پیوسته
در گرافیک دوبعدی رایانه‌ای، خم کردن گوشه‌های یک مستطیل نیازمند ساخت یک مسیر برش برداری هندسی بسته است. مستطیل گوشه‌گرد استاندارد با اتصال چهار پاره‌خط لبه از طریق چهار کمان ربع‌دایره ۹۰ درجه با شعاع `R` ساخته می‌شود.
کمان‌های دایره‌ای استاندارد (هندسه `arcTo`) در شعاع‌های کوچک تمیز به نظر می‌رسند، اما در شعاع‌های بزرگ ممکن است در نقطه مماس، جایی که خط راست به منحنی دایره‌ای می‌رسد، ناگهانی بودن بصری دیده شود — پدیده‌ای که در طراحی صنعتی پیوستگی هندسی G1 نام دارد. سیستم‌های رابط پیشرفته امروزی (مانند «اسکوئرکل» نمادین اپل یا منحنی لامه که با معادله اَبَربیضی `|x/a|^n + |y/b|^n = 1` تعریف می‌شود، با `n ≈ 4 to 5`) به انحنای پیوسته G2 می‌رسند و نرخ تغییر انحنا را تدریجی کرده و گذارهای ناگهانی مماس را حذف می‌کنند.
موتور ما مختصات مسیر زیرپیکسلی را با دقت ریاضی بسیار بالا محاسبه می‌کند، تقریب‌های نرم منحنی بزیه می‌سازد که گذارهای تند را حذف می‌کنند و خطوطی مدرن و روان در هر وضوح نمایشی ایجاد می‌کند.
ضدنقص لبه زیرپیکسلی: شفافیت بی‌نقص کانال آلفا با ۲۵۶ سطح
هنگام شکل دادن هندسه منحنی روی شبکه مستطیلی گسسته‌ای از پیکسل‌های فیزیکی، چالش اصلی ضدنقص لبه (anti-aliasing) است. اگر ابزاری برش دودویی اعمال کند (پیکسل‌های داخل منحنی ۱۰۰٪ مات و پیکسل‌های بیرون ۱۰۰٪ شفاف)، محیط منحنی حاصل پیکسلی‌شدگی «پلکانی» زشتی خواهد داشت و ظرافت بصری از بین می‌رود.
موتور گرد کردن گوشه ما مساحت دقیق هندسی پوشش هر پیکسل مرزی را که با مسیر برش تلاقی دارد ارزیابی می‌کند. به پیکسل‌های مرزی مقدار دقیق کسری شفافیت آلفا بین ۰ تا ۲۵۵ اختصاص داده می‌شود. پیکسلی که ۴۰٪ آن زیر منحنی است مقدار آلفای ۱۰۲ (`0.40 * 255`) می‌گیرد. این هموارسازی زیرپیکسلی چندنمونه‌ای تضمین می‌کند وقتی تصویر گردشده روی رابط‌های حالت تاریک، گرادیان‌های رنگی زنده یا پس‌زمینه‌های ویدیویی قرار می‌گیرد، محیط منحنی کاملاً نرم و بدون لبه‌های دندانه‌دار یا هاله سفید ناخوشایند ترکیب شود.
برتری کارایی وب: رسترهای آماده در برابر بازترسیم‌های CSS border-radius
توسعه‌دهندگان فرانت‌اند مدرن اغلب برای گرد کردن پویای تصاویر در مرورگر به ویژگی‌های CSS (`border-radius: 16px; overflow: hidden;`) تکیه می‌کنند. این روش راحت است، اما اعمال برش CSS روی ده‌ها تصویر پروضوح در یک فید موبایلی با پیمایش سریع (مانند تایم‌لاین شبکه اجتماعی، کاتالوگ فروشگاه یا شبکه نمونه‌کار) سربار قابل‌توجهی بر رندر GPU تحمیل می‌کند.
برش overflow در CSS موتورهای رندر مرورگر موبایل (Chromium، WebKit) را وادار می‌کند لایه‌های ترکیب جداگانه اختصاص دهند و در هر فریم پیمایش ماسک‌های بافر استنسیل را در زمان اجرا اعمال کنند. در گوشی‌های اندرویدی میان‌رده این کار می‌تواند به افت فریم و پیمایش کند منجر شود. با ثبت گوشه‌های گرد مستقیماً در رستر تصویر به‌صورت PNG یا WebP شفاف ۳۲ بیتی، مرورگر با دارایی مانند یک بیت‌مپ ایستای ساده رفتار می‌کند. هزینه ترکیب لایه به صفر می‌رسد، توقف‌های ترسیم حذف می‌شوند و تجربه پیمایش روان ۶۰ فریم بر ثانیه تضمین می‌شود.
اجزای رابط کاربری، ماکت‌های فروشگاه اپلیکیشن و آواتارهای دایره‌ای
تصاویر گوشه‌گرد در جریان‌های کاری دیجیتال امروزی کارکردهای ضروری دارند:
۱. کارت‌های مدرن رابط کاربری: شعاع گوشه بین ۱۲ تا ۲۴ پیکسل کاملاً با مشخصات سیستم‌های طراحی امروزی (Apple iOS، macOS Sonoma، Tailwind UI، Material You) منطبق است و تصاویر بندانگشتی صیقلی برای شبکه وبلاگ، بنرهای بازاریابی و داشبوردهای نرم‌افزاری می‌سازد.
۲. ماکت‌های App Store و Play Store: توسعه‌دهندگان اپلیکیشن موبایل از گوشه‌های گرد برای ساخت ماکت‌های واقع‌گرایانه دستگاه، بنرهای تبلیغاتی شبکه‌های اجتماعی و نمایش نمونه‌کار مطابق با هندسه آیکون بومی اپلیکیشن استفاده می‌کنند.
۳. آیکون‌های دایره‌ای تیم و آواتار: رساندن شعاع گوشه به ۵۰٪ روی یک عکس مربعی (۱:۱) هر پرتره استانداردی را به آواتار دایره‌ای بی‌نقص برای فهرست‌های Slack سازمانی، پروفایل لینکدین، سربرگ رزومه و نشان‌های انجمن‌ها تبدیل می‌کند.
جریان تولید متصل رابط کاربری: برش، گرد کردن، سایه و فشرده‌سازی
برای ساخت اجزای رابط کاربری در سطح استودیو، این زنجیره پردازش ساده را دنبال کنید:
گام ۱ - ترکیب مربعی: اگر می‌خواهید آواتار دایره‌ای یا کارت متعادل بسازید، عکس را با «برش تصویر» یا «برش آواتار» به نسبت مربعی ۱:۱ برش دهید.
گام ۲ - انحنای گوشه: شعاع گوشه دلخواه را با همین ابزار گرد کردن گوشه‌ها اعمال کنید تا گوشه‌های شفاف نرم ساخته شوند.
گام ۳ - برجستگی سه‌بعدی: با اعمال سایه نرم از طریق «افزودن سایه» به کارت گرد عمق فیزیکی واقع‌گرایانه بدهید.
گام ۴ - قاب رنگی (اختیاری): اگر طراحی شما حاشیه رنگی متمایزی می‌خواهد، پیش از گرد کردن آن را با «افزودن حاشیه» اضافه کنید.
گام ۵ - انتشار وب نسل جدید: دارایی شفاف نهایی را با «تبدیل PNG به WebP» خروجی بگیرید تا حجم دانلود تا ۷۰٪ کاهش یابد و شفافیت آلفا حفظ شود.
💡نکات حرفه‌ای برای گوشه‌های گرد بی‌نقص
- •شعاع گوشه بین ۱۶ تا ۲۴ پیکسل کاملاً با استانداردهای طراحی کارت در Apple iOS و Tailwind UI منطبق است.
- •برای ساخت عکس پروفایل دایره‌ای بی‌نقص، ابتدا مطمئن شوید تصویر به نسبت مربعی ۱:۱ برش خورده و اسلایدر شعاع را روی ۵۰٪ بگذارید.
- •تصویر گردشده را همیشه PNG ذخیره کنید تا گوشه‌های شفاف حفظ شوند؛ ذخیره به‌صورت JPG گوشه‌های شفاف را سفید یا سیاه یکدست می‌کند.
- •پس از گرد کردن، با ابزار افزودن سایه ترکیب کنید تا تصاویر تخت به ماکت‌های کارت شناور و لمس‌پذیر تبدیل شوند.
- •ثبت گوشه‌های گرد مستقیماً در فایل تصویر، کندی بازترسیم GPU در مرورگر موبایل را که ناشی از برش سنگین overflow در CSS است حذف می‌کند.
- •چند پرتره کارکنان را پشت سر هم در زبانه مرورگر و بدون صف آپلود یا تأخیر سرور ابری پردازش کنید.
- •همه برش برداری و رمزگذاری PNG ۱۰۰٪ به‌صورت محلی در حافظه دستگاه شما انجام می‌شود تا پرتره‌های خصوصی کاملاً محرمانه بمانند.
🛡️برش مسیر برداری در سمت کاربر، ماسک‌های آلفای Canvas و حریم خصوصی بدون آپلود
ابزار گرد کردن گوشه‌های ما کاملاً درون محیط ایزوله سمت کاربر در مرورگر مدرن شما کار می‌کند. هنگام بارگذاری تصویر، مرورگر جریان بیت را به آرایه پیکسلی ۳۲ بیتی RGBA فشرده‌نشده در حافظه سخت‌افزار رمزگشایی می‌کند. یک زمینه داخلی HTML5 Canvas2D یا OffscreenCanvas مطابق ابعاد پیکسلی دقیق تصویر منبع اختصاص می‌یابد. موتور یک مسیر برش برداری دوبعدی بسته با منحنی‌های بزیه درجه دوم و هندسه کمان دایره‌ای تعریف می‌کند (`ctx.beginPath()`، `ctx.moveTo()`، `ctx.arcTo()`، `ctx.closePath()` و `ctx.clip()`). تصویر منبع با روال‌های `drawImage` دارای شتاب سخت‌افزاری از میان این استنسیل برداری رسم می‌شود. رسترساز گرافیکی بومی مرورگر پوشش زیرپیکسلی را در امتداد محیط منحنی محاسبه کرده و مقادیر کسری شفافیت ضدنقص (۰ تا ۲۵۵) را در کانال آلفای بافر ImageData می‌نویسد. گرافیک حاصل به‌صورت جریان بیت PNG از نوع RGBA ۳۲ بیتی truecolor منطبق با RFC 2083 خروجی گرفته شده و به یک Blob URL محلی موقت (blob:2run.tools/...) نگاشت می‌شود. چون هیچ داده‌ای از طریق شبکه‌های خارجی به سرورهای ابری ارسال نمی‌شود، پرتره‌های شخصی، عکس‌های تیم سازمانی و طراحی‌های اختصاصی رابط کاربری شما ۱۰۰٪ خصوصی و از رهگیری اشخاص ثالث در امان می‌مانند.
فناوری: WebAssembly • Web Workers چندرشته‌ای • HTML5 Canvas API
حریم خصوصی: فایل‌ها از دستگاه شما خارج نمی‌شوند و در فضای ابری ذخیره نمی‌شوند؛ آمار فقط با رضایت شما اجرا می‌شود.
ابزارهای مکمل این روند کار
این ابزارهای مرورگری را برای روند کاری پربازده با هم ترکیب کنید.
افزودن حاشیه
تصاویر را با قاب، رنگ و حاشیه‌های قابل تنظیم احاطه کنید.
افزودن سایه
جلوه سایه حرفه‌ای را دور گرافیک‌ها و ماکاپ‌های رابط کاربری اعمال کنید.
فشرده‌سازی تصویر
حجم فایل‌های JPG، PNG و WebP را بدون افت کیفیت قابل مشاهده کاهش دهید. فشرده‌سازی سریع و ۱۰۰٪ خصوصی در مرورگر.
تغییر اندازه تصویر
ابعاد دقیق پیکسلی یا درصدی را با حفظ تناسب تغییر دهید و فرمت را تبدیل کنید.