Küncləri yuvarlaqlaşdırılmış düzbucaqlının adı nədir? CSS və HTML-də küncləri necə yuvarlaqlaşdırmaq olar. Şəkillərin künclərinin yuvarlaqlaşdırılması. Yalnız, məsələn, bir yuvarlaq küncü necə etmək olar
Saytımın bu bölməsində yerləşdirməyə qərar verdim photoshop dərsləri, vebsayt dizaynı yaratarkən sizin üçün faydalı ola bilər. Məncə, Photoshop-u öyrənməyə başlamazdan əvvəl sizi tanıtmaq mənim tərəfimdən artıq olmaz Photoshop isti düymələri. İstifadə Photoshop isti düymələri, işinizi asanlaşdıracaq və vaxtınıza qənaət edəcəksiniz. .
Mənim ilk Photoshop dərsi necə deyərlər küncləri yuvarlaqlaşdırınŞəkil.
Veb saytları yaradarkən, tez-tez şəklin künclərini yuvarlaqlaşdırmaq və ya necə etmək problemi ilə qarşılaşmalı olursunuz. küncləri yuvarlaqlaşdırınŞəkil. Bu dərsdə Photoshop Mən sizə necə öyrədəcəyəm küncləri yuvarlaqlaşdırınçəkmək photoshop. Həm də bu Photoshop dərsi sizə imkan verəcək küncləri yuvarlaqlaşdırın fotolar. Ümid edirəm ki, bu sizə aydındır. Axı, üçün Photoshop həm şəkil həm də şəkil eynidir. İşimdə Adobe proqramından istifadə edirəm Photoshop SC5, rus versiyası. Yaxşı, dilləri yaxşı bilmirəm.
Bugünkü dərsimiz Photoshop-da fotoşəkilin künclərini yuvarlaqlaşdırmaqdır. Şəkilimdəki kimi yuvarlaq künclərlə birlikdə şəkil çəkdirək.
1. Həyata keçirmək Photoshop-da künclərin yuvarlaqlaşdırılması, ilə aç Photoshop bizə lazım olan şəkil (şəkil). Nümunə olaraq, foto arxivimdən fotoşəkillərdən birini götürdüm.
2. Rəsmin ölçülərini bizə lazım olan parametrlərə gətiririk. Bunu etmək üçün ALT+CTRL+I düymələrini sıxın. Şəkil ölçüsü pəncərəsi açılır. Lazım olan ölçüləri təyin edirik. Siz sadəcə olaraq şəkli istədiyiniz ölçüdə kəsə bilərsiniz.
3. Şəkli seçin (CTRL+A) (perimetr ətrafında nöqtəli xətt görünəcək) və onu kopyalayın (CTRL+C); Şəkili kopyalayırıq ki, biz tamamladıqdan sonra orijinal şəkil dəyişməz qalsın Photoshop-da künclərin yuvarlaqlaşdırılması. Orijinal üzərində işləyə bilsək də, yuvarlaqlaşdırılmış künclər hazır olduqda, sadəcə olaraq fotoşəkili başqa bir şəkil kimi saxlayacağıq.
4. Yeni pəncərə açın (CTRL+N), tələb olunan şəkil ölçülərini təyin edin və “OK” düyməsini basın. Nəzərə alın ki, mən fonu “şəffaf” olaraq təyin etdim. Siz dərhal fonu istədiyiniz rəngə uyğunlaşdıra bilərsiniz;
5. Kopyalanan şəkli yeni pəncərəyə yerləşdirin (CTRL+V) və yeni təbəqə yaradın (CTRL+SHIFT+N). Bu Layerdə Düzbucaqlı Alətindən istifadə edin yuvarlaq künclər"Tələb olunan ölçüdə düzbucaqlı çəkin. Düzbucaqlının rənginin fərqi yoxdur. Alət siçanın sağ düyməsini sıxmaqla seçilir. Və ya sadəcə (U) düyməsini sıxmaqla seçilir. Biz əyrilik radiusunu öz ixtiyarımıza uyğun olaraq təyin edirik ( aşağıdakı şəkilə baxın);
Lazım gələrsə, klaviaturadakı oxlardan istifadə edərək və ya sol düyməni basıb saxlayaraq siçan vasitəsilə çəkilmiş formanı hərəkət etdirə bilərsiniz. Əvvəlcə alətlər panelində (yuxarı düymə) “hərəkət et” funksiyasını aktivləşdirməyi unutmayın. Siz də edə bilərsiniz ölçüsünü dəyişdirin rəqəmlər. Bunu etmək üçün (CTRL+T) basın və sol düyməni basıb saxlayaraq siçan vasitəsilə formanı istədiyiniz ölçüyə qədər uzatın. Əgər proporsiyaları qoruyaraq ölçüsünü dəyişmək istəyirsinizsə, SHIFT düyməsini basıb formanın küncünə qədər sürükləməlisiniz.
6. Qatlar panelinə keçin. CTRL düyməsini basıb saxlayaraq, düzbucaqlı təbəqənin ön görünüşünə (şəklə) sol klikləyin. Formanın nöqtəli konturu görünür.
7. Alt təbəqəyə keçin. Bunu etmək üçün təbəqələr panelində şəklin sağ tərəfinə klikləyin. Bizim vəziyyətimizdə qat 1. Mavi vurğu 1-ci qata keçəcək.
8. CTRL+ SHIFT+I düymələrini basın. Şəklin bizim düzbucaqlımızın xaricində yerləşən hissəsinin sərhədi boyunca nöqtəli seçim görünəcək yuvarlaq künclər.
9. Klaviaturada DEL düyməsini basın. Şəklin düzbucaqlıdan kənar olan hissəsi silinəcək.
10. Düzbucaqlı təbəqəni yenidən aktivləşdirin. Zibil qutusu simgesini klikləməklə onu silin.
11. "M" düyməsini basın və şəkilin istənilən yerinə sol klikləyin. Seçim silindi. hazır. Aldığımız şəkli saxlaya bilərsiniz Photoshop-da künclərin yuvarlaqlaşdırılması, bizə lazım olan formatda.
Əgər belə bir şəkil veb-sayt dizaynı yaratmaq üçün istifadə olunacaqsa, onu Veb və cihazlar üçün yadda saxlayın (ALT+SHIFT+CTRL+S).
12. Diqqət! Əgər kənarları ilə şəkilləriniz varsa yuvarlaq künclər Hələ şəffaf piksellər var, kəsmə yerinə yetirmək lazımdır. Bunu etmək üçün "Şəkil" düyməsini basın, görünən pəncərədə "Kəsmə" seçin, mənim şəklimdəki kimi parametrləri təyin edin və "Ok" düyməsini basın. Kətanın ölçüsü şəklin ölçüsünə dəyişdiriləcək və hər hansı əlavə şəffaf piksellər silinəcək.
The photoshop dərsi həm oval, həm də formalı fotoşəkillər üçün istifadə edilə bilər. Bunu etmək üçün 5-ci addımda "ile düzbucaqlı" əvəzinə yuvarlaq künclər" "ellips", "poliqon" və ya "sərbəst forma" alətini seçin. Sonra əldə etmək üçün etdiyimiz bütün hərəkətləri yerinə yetiririk. künclərin yuvarlaqlaşdırılması.
Hər kəs şəkillərdə düzgün bucaqları sevir. Ancaq yenə də bu eyni künclərin yuvarlaqlaşdırılması lazım olduğu vaxtlar var. Sonra Photoshop proqramı yenidən köməyinizə gələcək. Bu yazıda bunun necə edilə biləcəyini bir çox yoldan birinə baxacağıq. Nəzərə alın ki, mənim metodum həm də təsvirin kənarlarından bir az kəsilməsini nəzərdə tutur, bu yuvarlaq künclər adına bir növ qurbandır.
Daha çox aydınlığı sevənlər üçün bu dərsin sonunda izləyə biləcəyim bir video dərslik yazdım. Beləliklə, şəklin künclərini yuvarlaqlaşdırmağa başlayaq:
Addım 1
Varsayılan olaraq, Photoshop-da açılan bütün şəkillər fon şəklinə çevrilir. Photoshop bu təbəqəni “Arxa fon” adlandırır və həmçinin onu lazımsız redaktədən qoruyur. Bu, bizə kiçik bir asma kilid işarəsi ilə göstərilir.
Belə bir təbəqənin kilidini açmaq üçün üzərinə iki dəfə klikləmək lazımdır. Yeni Layer dialoq qutusu görünür. Heç nəyi dəyişməyin, sadəcə OK düyməsini sıxın. Kilid indi yox olmalıdır.
Addım 5
Laylar panelində orijinal şəklimizlə ilk təbəqəyə klikləyin və Ctrl+Shift+I düymələr kombinasiyasını basın. Nəticədə, meydanımızın hüdudlarından kənarda bütün ərazini seçməliyik. Bu adlanır . Nə dəyişdiyini daha yaxından nəzərdən keçirin:
Addım 6
İndi Ctrl+X düymələr birləşməsini basın (redaktə etmək - kəsmək) seçilmiş ərazini silmək üçün. Seçim yox olmalı və şəklin əvvəllər olduğu yerdə dama taxtası fonu (şəffaflıq) görünəcək.
Addım 7
İndi isə forma qatımızı görünməz edək. Bunu etmək üçün təbəqələr panelində kvadrat təbəqənin qarşısındakı göz simgesini vurun. Budur yuvarlaq küncləri olan orijinal şəkil.
Addım 8
Komandanı işə salın Şəkil - Photoshop-un şəklin ətrafındakı bütün əlavə boşluqları silməsini təmin etmək. Nəticədə şəffaflıq rejimi yalnız künclərdə görünməlidir.
Gələcəkdə belə bir şəkil istifadə etmək üçün onu PNG formatında saxlamaq lazımdır! Bu vəziyyətdə künclər şəffaf qalacaq. Əks halda, məsələn, JPG formatında yadda saxlasanız, künclər avtomatik olaraq ağ fonda olacaq.
Beləliklə, hər şey hazırdır. Yuvarlaq küncləri olan şəkil belə görünəcək:
Yalnız, məsələn, bir yuvarlaq küncü necə etmək olar?
Çox sadə. Fiqur çəkdiyimiz səhnəyə qayıdaq. Onu uzatın ki, yalnız bir yuvarlaq künc sizə görünsün, qalan üçü isə kətanın xaricində gizlənsin. Burada, sonra yuxarıda təsvir olunan təlimatlara əməl edin. Hər şey eynidir.
Ümid edirəm təlimatlar sizə kömək etdi və siz gözəl bir şey edə bilərsiniz! Uğurlar.
Mətndə səhv görsəniz, onu seçin və Ctrl + Enter düyməsini basın. Çox sağ ol!
Nəzərə alın ki, verilmiş forma üçün CSS üslubları fayla bir dəfə daxil edilir, lakin HTML etiketi saytda limitsiz sayda yerləşdirilə bilər.
Çıxış nəticəsində aşağıdakıları əldə edirik çərçivə ilə düzbucaqlı.
CSS-də dairəvi küncləri necə etmək olar
Atribut küncləri yuvarlaqlaşdırmaq üçün istifadə olunur sərhəd-radius.
Sadəcə bu atribut əlavə edə bilərik. O, adətən yuvarlaqlaşdırma nəticəsini brauzerlərin yeni versiyalarında göstərir, lakin bir çox istifadəçinin hələ də bu atributun düzgün işləmədiyi köhnə versiyaları var. Buna görə də, uyğunluq üçün biz Style.css faylındakı blokumuza birbaşa müəyyən brauzerlərə bağlı olan bu atributun daha bir neçə təsvirini əlavə edəcəyik və nəticədə aşağıdakı kod əldə ediləcək:
HTML div teqi bizə verəcəkdir dairəvi bir çərçivədə düzbucaqlıvə künclər:
və mətni göstərmək üçün HTML etiketi belə görünəcək:
|
pib9.ru
|
alırıq dairəvi düzbucaqlı və mətn: 
Düzbucaqlı ölçüsünün təsviri atributlarını koddan silsəniz eni Və hündürlük, onda yuvarlaq küncləri olan aşağıdakı formaları əldə edə bilərsiniz:
1. Mətn yoxdur
Bu zaman formalar mühitin ölçülərini alır: uzunluq sahənin eninə uyğun gəlir, forma məzmunla dolduqca hündürlük dəyişir.
Seçilmiş küncləri yuvarlaqlaşdırın
Stil təsvirində, atributda 10px parametri sərhəd-radius sizə lazım olanı seçməklə dəyişdirilə bilən əyrilik radiusunu göstərir. 0-a təyin edilərsə, yuvarlaqlaşdırma baş verməyəcək. Bu xüsusiyyət seçilmiş küncləri yuvarlaqlaşdırmaq lazım olduqda istifadə edilə bilər.
Hər künc üçün yuvarlaqlaşdırma radiusunun dəyərlərini yazaq, yuvarlaqlaşdırmanı ləğv etdiyimiz sıfırları göstərək. Məsələn, üçüncü və dördüncü künclərdə yuvarlaqlaşdırmanı ləğv edək. Kodumuz belə görünəcək:
1. Yuxarı sol künc.
2. Yuxarı sağ künc.
3. Aşağı sağ künc.
4. Aşağı sol künc.
Bu, yalnız yuxarı künclərdə seçilmiş əyriləri olan düzbucaqlı ilə nəticələnir.
Bucaqlar yuxarı sol küncdən başlayaraq saat əqrəbi istiqamətində sayılır: 
2. Stil faylına yazmadan HTML kodundan istifadə edərək künclərin yuvarlaqlaşdırılması
Stil faylına yazmadan HTML kodundan istifadə edərək küncləri yuvarlaqlaşdırılmış düzbucaqlı əldə etməyin ikinci yoluna baxaq.
HTML dairəvi künclər
Bütün prosesi daha da asanlaşdıran kiçik bir xüsusiyyət var - bu HTML dairəvi künclər. CSS kodlarında olduğu kimi eyni üslubları ehtiva edən HTML kodunun yaradılmasından ibarətdir. Bu, CSS blokunda olduğu kimi eyni atributlardan istifadə edir və blokun Style.css faylına yazılması ehtiyacını aradan qaldırır. Bir sözlə CSS kodunu tamamilə HTML kodu ilə əvəz edirik.
CSS blokumuzun əvəzinə, yuvarlaq küncləri olan düzbucağın görünməli olduğu yerə daxil etdiyimiz bir HTML skripti alırıq:
Künclərin yuvarlaqlaşdırılmasının ilk üsulu eyni forma üslubları dəyişdirmədən bir dəfədən çox istifadə edildikdə istifadə edilə bilər. İkinci üsul üslubları bir dəfə istifadə olunan formalar üçün istifadə olunur.
3. Küncləri yuvarlaqlaşdırılmış şəkillər. HTML şəkli ətrafında çərçivə
Mən də sizə faydalı məlumat vermək istəyirəm. Tez-tez istifadə Veb sayt dizaynı üçün şəkillər, Mən çox istəyirəm ki, onların formasını dəyişdirərək, gözəl rəngdə və müxtəlif genişlikdə çərçivə ilə çərçivələyib daha da gözəlləşdirim. Bu sual doğurur: “ Şəklin künclərini necə yuvarlaqlaşdırmaq olar?”.
Bu çox sadədir və indi bunu necə edəcəyimizi öyrənəcəyik.
Şəkli sayta yerləşdirək, onu div teqinin fonu kimi öz arxa planına çevirək. Aşağıdakı kodu və şəkli alırıq:
Çərçivə əlavə edərək şəklin künclərini yuvarlaqlaşdırmaq
CSS və HTML-də şəkillərin künclərini yuvarlaqlaşdırmaq və haşiyə əlavə etmək yuxarıda təsvir edilən iki üsuldan biri ilə edilə bilər.
Bu məqalədəki birinci üsuldan istifadə edərək, stil faylı və div teq HTML kodu üçün şəkil kodları belə görünəcək:
Nəzərə alın ki, bəzi atributlar stil faylına, bəziləri isə div teqinə daxil edilə bilər. Bizim vəziyyətimizdə şəkil ölçüləri eni və hündürlüyü HTML koduna daxil edilir.
İkinci metodun HTML kodu, bu məqalədə təsvir edilən üslub faylından istifadə etmədən belə görünür:
İki metodun hər birinin kodları nəticəsində eyni nəticəni alırıq - yuvarlaq küncləri olan bir şəkil:
Düzbucaqlı əsas formaların ən sadəsidir, element buna cavabdehdir
Qeyd
Vizual olaraq, düzbucaqlı parametrlərindəki x və y koordinatları, məsələn, formaya çevrilmə tətbiq edilərsə, yuxarı sol künc olmaya bilər.
Düzbucaqlının konturları xətlərlə eyni fırça ilə, eyni xassələrlə çəkilir. Varsayılan olaraq, fırça heç biri (vuruş: heç biri) olaraq təyin edilir və heç bir kontur çəkilmir. Bir neçə nümunə:
Nəticə "canlı" və ya şəklə baxın:
Qeyd
Kontur elə çəkilir ki, onun yarısı düzbucaqlının içərisində, digər yarısı isə ondan kənarda olsun. Düzbucaqlılardan birinə böyüdülmüş şəkildə baxaq:
Əgər x və ya y koordinatları üçün ilkin dəyəri təyin etməsəniz, onlar sıfıra təyin olunacaqlar. Əgər siz eni və ya hündürlüyü sıfıra təyin etsəniz, düzbucaqlı görünməyəcək. Düzbucaqlının enini və ya hündürlüyünü təyin etmək üçün mənfi dəyərlərdən istifadə xətadır.
Dairəvi düzbucaqlılar
Küncləri yuvarlaqlaşdırılmış düzbucaqlı çəkmək üçün x (rx) və y (ry) oxları boyunca künc radiuslarını təyin etməlisiniz. rx üçün maksimum rəqəm düzbucaqlının eninin yarısıdır. Ry üçün maksimum dəyər hündürlüyün yarısıdır. Əgər siz rx və ya ry-dən yalnız birini təyin etsəniz, təyin olunmayan biri göstərilənə bərabər olacaqdır.
Ellips.
Poliqon.
Xətt.
Pulsuz fiqur. Dərhal ön plan rəngi ilə doldurulan müxtəlif formalar yaratmağa imkan verir. İxtiyari forma istisna olmaqla, bütün formaları yaratmaq üçün bir forma seçmək, kursoru şəklin istədiyiniz sahəsinə yerləşdirmək və siçanın sol düyməsini tutaraq kursoru hərəkət etdirərək forma yaratmaq lazımdır. Forma yaradıldıqdan sonra boşluq düyməsini sıxsanız, forma şəklin istənilən nöqtəsinə köçürülə bilər. Forma yaradarkən Alt düyməsini basıb saxlasanız, forma mərkəzdən yaradılacaq. İxtiyari forma yaratmaq üçün onu Forma elementində alət parametrləri sətrində seçmək lazımdır. Yuvarlaq kənarları olan düzbucaqlı formasının əyrilərinin radiusunu dəyişmək üçün eyni parametrlər sətirində Radius elementində istədiyiniz dəyəri təyin edin.
Əl– şəkil ekran çərçivəsinə uyğun gəlmirsə, onu sürükləyə bilərik.
Görünüşü döndərin. Bütün vərəqi bütün təbəqələrlə birlikdə fırladır.
Ölçək- kursoru şəklin üzərinə aparsanız, o, dairədə xaç şəklini alır və hər dəfə sol kliklədikdə şəkil böyüyəcək. Alt düyməsini sıxsanız, hər kliklə şəkil daha kiçik olacaq.
Rəngli kvadratlar- əsas (üst) rəng və fon (aşağı) rəngi.
Sürətli maska rejimi. Q düyməsi ilə çağırılan şəffaf şəkil (rəsmi əhatə edən uşaq bezi kimi bir şey), onun üzərində adi bir təbəqədə olduğu kimi çəkə və sonra bu maskanı yenidən seçimə çevirə bilərsiniz.
Sənədə baxmaq rejimləri. Birincisi, standart rejim, standart olaraq təyin edilir, ikincisi menyu çubuğu ilə tam ekran, üçüncüsü isə tam ekrandır. Siz həmçinin F düyməsini basaraq rejimlər arasında keçid edə bilərsiniz.