Şəkillərə kölgə əlavə etmək: vizual hündürlük, ətraf okklüziyası və 3D realizm üzrə texniki bələdçi
⚡Kölgəni 3 sadə addımda necə əlavə etmək olar
1. Şəffaf qrafikanızı idxal edin
Şəffaf PNG, WebP və ya obyekt kəsiyinizi kölgə studiyasının iş sahəsinə sürükləyib buraxın və ya cihazınızın yaddaşından seçin. Alət şəkil ölçülərini dərhal oxuyur.
2. Bulanıqlığı, sürüşməni və rəngi fərdiləşdirin
İnteraktiv önizləmə ilə Qauss bulanıqlıq radiusunu, üfüqi (X) və şaquli (Y) işıq mənbəyi sürüşmələrini, kölgə rəngini və alfa şəffaflığı sürgülərini real vaxtda tənzimləyin.
3. Hündürlük effektli şəklinizi endirin
Şəffaflıq şahmat taxtası üzərində canlı nəticəni yoxlayın. Tam alfa şəffaflığa malik 3D effektli qrafikanı birbaşa cihazınıza saxlamaq üçün 'Şəkli endir' düyməsinə klikləyin.
Düz, ikiölçülü rəqəmsal qrafikalar çox vaxt təqdimat mühitindən vizual olaraq qopuq görünür. İnsanın məkan idrakında və müasir vizual interfeys dizaynında — Apple macOS pəncərə çərçivələri, Google Material Design hündürlük iyerarxiyaları və müasir SaaS məhsul nümayişləri kimi — kölgələr z oxu boyunca dərinlik salan istiqamətli işıq mənbəyini təqlid edərək real dünya fizikasını canlandırır. Kölgələr əvəzsiz qavrayış işarələri verir: optik hündürlük yaradır, ön plandakı UI kartlarını fon səthlərindən ayırır, təcrid olunmuş e-ticarət məhsul kəsiklərini yerə bağlayaraq onların süni şəkildə havada asılı görünməsinin qarşısını alır və düz proqram ekran görüntülərini toxunulan, havada süzülən üçölçülü aktivlərə çevirir.
Brauzerdə işləyən Kölgə əlavə et alətimiz dizaynerlərə, marketoloqlara və tərtibatçılara istənilən şəffaf PNG, WebP və ya vektor qrafikanın ətrafında fiziki cəhətdən dəqiq, çoxqatlı kölgələri millisaniyələr ərzində yaratmaq imkanı verir. İşıq mənbəyi sürüşmələri (X və Y koordinatları), Qauss bulanıqlıq radiusu, kölgə rəngi və alfa şəffaflığı üzərində dəqiq nəzarət sizdədir. Ən əsası, mühərrikimiz dinamik xarici kətan boşluğunu avtomatik hesablayır ki, kölgənizin zərif, səpələnmiş yarımkölgə kənarları heç vaxt sərt kətan sərhədlərində kəsilməsin. Aparat sürətləndirməli Canvas API-ləri ilə 100% brauzer tərəfində işlədiyi üçün buraxılmamış məhsul prototipləriniz və kommersiya maketləriniz buluda yüklənmədən ciddi məxfi qalır.
Tam texniki bələdçini oxu
Kölgə əmələ gəlməsinin optik fizikası: tam kölgə, yarımkölgə və ətraf okklüziyası
Fiziki optikada real işıq mənbələrinin saldığı kölgələr heç vaxt bərabər, sərt qara formalar deyil. Real kölgələr iki əsas optik zona ilə müəyyən olunur: tam kölgə (umbra — işıq mənbəyinin tamamilə örtüldüyü, obyektin birbaşa altındakı tünd, sıx nüvə) və yarımkölgə (penumbra — işıq mənbəyinin yalnız qismən örtüldüyü yumşaq, səpələnmiş xarici sərhəd).
Yarımkölgənin məkan həndəsəsi obyektlə qəbul edən səth arasındakı fiziki məsafə ilə müəyyən olunur. Birbaşa masa üzərində duran obyekt sıx, kəskin, tünd təmas kölgəsi (ətraf okklüziyası) yaradır. Obyekt z oxu boyunca yüksəldikcə yarımkölgə xaricə genişlənir, daha yumşaq, daha şəffaf və getdikcə daha səpələnmiş olur.
Kölgə mühərrikimiz bu fiziki prinsipləri riyazi olaraq yenidən yaratmağa imkan verir. Qauss bulanıqlıq radiusunu istiqamətli şaquli və üfüqi sürüşmələrlə birlikdə incə tənzimləməklə günorta birbaşa işıqlandırmadan (birbaşa altda sıx, kəskin kölgələr) yüksəkdə səpələnmiş studiya işığına (geniş, yumşaq ətraf parıltısı) qədər hər şeyi təqlid edə və rəqəmsal əsərlərə əsl fiziki mövcudluq verə bilərsiniz.
Dinamik kətan genişləndirmə həndəsəsi: kölgə kənarlarının sərt kəsilməsinin qarşısını almaq
Həvəskar şəkil kölgəsi alətlərində ən geniş yayılmış qüsur 'sərhəd qutusu kəsilməsi'dir. Kölgə sabit ölçülü şəkil kətanında göstərildikdə yumşaq, lələkvari Qauss bulanıqlığı orijinal şəkil eni və hündürlüyündən kənara yayılır. Sadə alətlər bulanıqlığı kətan sərhədlərində kəskin kəsir və nəticədə kölgənin realizmini tamamilə məhv edən çirkin, ülgüc kimi kəskin şaquli və üfüqi kəsiklər yaranır.
Kölgə əlavə et mühərrikimiz rastrlaşdırmadan əvvəl genişləndirilmiş kətan boşluğunu dinamik hesablayıb ayırmaqla kəsilmənin qarşısını alır: `PaddingX = (ShadowBlur * 2) + Math.abs(ShadowOffsetX)` `PaddingY = (ShadowBlur * 2) + Math.abs(ShadowOffsetY)` `NewCanvasWidth = SourceWidth + (PaddingX * 2)` `NewCanvasHeight = SourceHeight + (PaddingY * 2)`
Genişləndirilmiş kətan bütün yarımkölgə əyrisinin təbii olaraq sıfır şəffaflığa (`alpha = 0`) enməsi üçün tam həndəsi boşluq təmin edir. Nəticədə alınan 32 bitlik şəffaf PNG mükəmməl lələkvari qradiyent keçidləri ilə istənilən açıq, tünd və ya naxışlı veb fon üzərində qüsursuz süzülür.
UI maketləri, məhsul nümayişləri və SaaS açılış səhifəsi qrafikaları
Kölgələr rəqəmsal marketinq və proqram satışında vacib vizual amillərdir:
1. SaaS açılış səhifəsi ekran görüntüləri: Təsisçilər və frontend tərtibatçıları panel iş axınlarını göstərmək üçün müntəzəm olaraq tətbiq ekran görüntüləri çəkir. Çılpaq düzbucaqlı ekran görüntüsü düz və həvəskar görünür. Müasir səpələnmiş kölgə (məs. Y sürüşməsi: 20px, bulanıqlıq: 40px, şəffaflıq: 18%) tətbiq etmək ekran görüntüsünü istifadəçi diqqətini dərhal cəlb edən nüfuzlu, havada süzülən proqram kartına çevirir.
2. E-ticarət məhsulunun yerə bağlanması: Kommersiya fotoqrafları ayaqqabı, kosmetika, mebel və ya elektronikanı şəffaf fonlarda təcrid edəndə məhsullar havada asılı və qeyri-təbii görünə bilər. Əsl döşəmə təmas kölgəsi tətbiq etmək məhsulu yerə bağlayır, toxunulan miqyas yaradır və Shopify və Amazon elanlarında müştərinin alış inamını kəskin artırır.
3. Qarışıq mediada loqo oxunaqlılığı: Şəffaf brend işarələrini qarışıq, çoxrəngli foto bannerlərin üzərinə yerləşdirmək çox vaxt oxunaqlılığı pozur. Zərif tünd kölgə mikroskopik kontrast buferi yaradır və fon videosu və ya foto elementlərindən asılı olmayaraq loqoların kəskin qalmasını təmin edir.
Rəngli ətraf parıltıları və neomorfik işıqlandırma estetikası
Ənənəvi kölgələr neytral qara və ya kömür rəngindən (`#000000`, 20%–30% şəffaflıqla) istifadə etsə də, müasir yüksək səviyyəli UI dizaynı tez-tez 'rəngli ətraf kölgələri' və ya brend rəngli parıltılardan istifadə edir. Soyuq qara kölgə salmaq əvəzinə kölgə rəngi ön plandakı obyektin dominant çalarına uyğunlaşdırılır (məsələn, canlı neon idman ayaqqabısı zərif isti narıncı kölgə salır və ya fintex paneli yumşaq tünd mavi əks etdirmə yaradır).
Alətimiz interaktiv rəng seçici və ya dəqiq hex kod daxil etməklə istənilən fərdi kölgə rəngini seçməyə imkan verir. Rəngli kölgələr fiziki radiozitəni — rəngli işığın səthlərdən əks olunmasını — təqlid edir və müasir oyun platformalarında və texnologiya brendlərində sevilən parlaq, enerjili estetika yaradır.
Əlaqəli hündürlük axını: təcrid et, yuvarlaqlaşdır, kölgə və optimallaşdır
Xam kamera fotolarını studiya səviyyəli kommersiya məhsul vizuallarına çevirmək üçün bu strukturlaşdırılmış emal zəncirini izləyin:
Addım 1 - Obyektin təcridi: Bütöv fonlu şəkillə başlayırsınızsa, Fonu sil və ya Şəffaf et aləti ilə obyektinizi ayırın və təmiz 8 bitlik alfa şəffaflığı yaradın.
Addım 2 - Kənar əyriliyi: Aktivinizi proqram kartı və ya ekran görüntüsüdürsə, Yuvarlaq künclər əlavə et aləti ilə iti künclərini yumşaldın.
Addım 3 - Ölçülü kölgə: Bu Kölgə əlavə et aləti ilə realistik dərinlik, sürüşmə və Qauss bulanıqlığı əlavə edin.
Addım 4 - Fon (istəyə bağlı): Süzülən aktivi təmiz studiya səthinə yerləşdirmək istəyirsinizsə, Fon rəngini dəyiş aləti ilə onu yeni kətan üzərində birləşdirin.
Addım 5 - Yeni nəsil çatdırılma: Maksimum mobil endirmə sürəti üçün son şəffaf aktivi PNG-ni WebP-yə çevir aləti ilə müasir WebP-yə çevirin.
💡Realistik kölgələr üçün peşəkar tövsiyələr
- •Böyük bulanıqlıq radiusu (30px–50px) aşağı şəffaflıqla (12%–20%) birlikdə Apple və Stripe UI dizaynlarında sevilən müasir 'səpələnmiş işıq' hündürlüyü yaradır.
- •İnsan görmə sisteminə ən təbii görünən yuxarıdan düşən işığı təqlid etmək üçün X sürüşməsini 0px, Y sürüşməsini 12px–20px qoyun.
- •Həmişə şəffaf PNG və ya WebP qrafika ilə başlayın; şəklinizin bütöv fonu varsa, əvvəlcə Fonu sil aləti ilə obyekti ayırın.
- •Canlı məhsul nümayişləri üçün realistik işıq radiozitəsini təqlid etmək məqsədilə məhsulun dominant rənginə uyğun rəngli kölgədən istifadə edin.
- •Alətimiz kətan kənarlarını dinamik olaraq xaricə genişləndirir və yumşaq lələkvari kölgə kənarlarının heç vaxt kəskin kəsilməməsini təmin edir.
- •Bir neçə məhsul kəsiyini yükləmə növbəsi və bulud server gecikməsi olmadan brauzer tabınızda ardıcıl emal edin.
- •Bütün kölgə konvolyusiyası 100% cihazınızın yaddaşında yerli icra olunur və xüsusi məhsul prototipləriniz ciddi şəkildə məxfi qalır.
🛡️Brauzer tərəfli Canvas bulanıqlıq konvolyusiyası, bufer genişləndirməsi və sıfır yükləmə məxfiliyi
Kölgə əlavə et alətimiz tamamilə müasir veb brauzerinizin təcrid olunmuş brauzer tərəfli mühitində işləyir. Şəffaf şəkil yüklənəndə brauzer bit axınını aparat yaddaşında sıxılmamış 32 bitlik RGBA piksel massivinə açır. Mühərrik tələb olunan xarici bufer boşluğunu `Padding = (BlurRadius * 2) + max(|OffsetX|, |OffsetY|)` düsturu ilə hesablayır. Genişləndirilmiş ölçülərə uyğun daxili HTML5 Canvas2D və ya OffscreenCanvas konteksti ayrılır. Kontekst `shadowBlur`, `shadowOffsetX`, `shadowOffsetY` və `shadowColor` xüsusiyyətləri ilə yerli aparat sürətləndirməli 2D kölgə axınını konfiqurasiya edir. Mənbə şəkil kətana çəkiləndə brauzerin 2D qrafika mühərriki (Skia və ya CoreGraphics) şəklin sıfırdan fərqli alfa siluetini çıxarır və rəng buferi boyunca iki keçidli ayrıla bilən Qauss bulanıqlıq konvolyusiya filtri tətbiq edir. Mənbə şəkil yaradılmış kölgənin üzərinə piksel dəqiqliyi ilə çəkilir. Nəticədə alınan kompozit RFC 2083-ə uyğun 32 bitlik truecolor RGBA PNG bit axını kimi ixrac edilir və müvəqqəti yerli Blob URL-ə (blob:2run.tools/...) bağlanır. Heç bir məlumat xarici şəbəkələr vasitəsilə bulud serverlərinə ötürülmədiyi üçün kommersiya məhsul prototipləriniz, müştəri aktivləriniz və məxfi maketləriniz 100% məxfi qalır və üçüncü tərəflərin ələ keçirməsindən qorunur.
Texnologiya: WebAssembly • Çoxaxınlı Web Workers • HTML5 Canvas API
Məxfilik: Fayllar cihazınızı tərk etmir və buludda saxlanmır; analitika yalnız razılığınızla işləyir.
Bu iş axını üçün tamamlayıcı alətlər
Yüksək performanslı iş axınları üçün bu brauzer alətlərini birlikdə istifadə edin.
Çərçivə əlavə et
Şəkilləri fərdi çərçivə, rəng və kənar boşluqlarla əhatə edin.
Yuvarlaq künclər
Şəkil kənarlarını müasir yuvarlaq künc radiusu ilə hamarlayın.
Şəkli sıx
JPG, PNG və WebP fayllarının ölçüsünü görünən keyfiyəti itirmədən azaldın. Sürətli və 100% məxfi brauzer sıxması.
Şəklin ölçüsünü dəyiş
Nisbətləri qoruyaraq dəqiq piksel və ya faizlə ölçünü dəyişin və formatı çevirin.