girişPhotoshop cs6'da yuvarlak kenarlar. Photoshop olmadan CSS ile bir görüntünün köşeleri nasıl yuvarlanır
Görüntülerin dik açıları herkes tarafından sevilir. Ancak yine de, aynı köşelerin yuvarlatılması gereken zamanlar vardır. Ardından Photoshop programı tekrar yardımınıza gelecektir. Bu yazıda, bunu yapabileceğiniz birçok yoldan birine göz atacağız. Unutmayın, yöntemim ayrıca görüntünün kenarlarından biraz kırpılmasını da içeriyor, bu yuvarlatılmış köşeler adına bir tür fedakarlık.
Daha fazla netlik isteyenler için, bu eğitimin sonunda izleyebileceğiniz bir eğitim videosu kaydettim. Öyleyse görüntünün köşelerini yuvarlamaya başlayalım:
Aşama 1
Varsayılan olarak, Photoshop'ta açılan tüm görüntüler arka plan görüntüsü olur. Photoshop bu katmanı "Arka Plan" olarak adlandırır ve ayrıca gereksiz düzenlemeleri engeller. Bu bize küçük bir kilit simgesiyle bildirilir.
Böyle bir katmanın kilidini açmak için üzerine çift tıklamanız gerekir. Yeni Katman iletişim kutusu görünür. Hiçbir şeyi değiştirmeyin, sadece Tamam'a tıklayın. Kilit şimdi gitmiş olmalı.
Adım 5
Katmanlar panelinde, orijinal görüntümüzün olduğu ilk katmana tıklayın ve Ctrl + Shift + I klavye kısayoluna basın. Sonuç olarak, meydanımızın sınırları dışında kalan tüm alanı seçmeliyiz. denir. Nelerin değiştiğine daha yakından bakın:
6. Adım
Şimdi Ctrl + X tuş kombinasyonuna basın (düzenle - kes) seçili alanı silmek için. Seçim kaybolmalı ve görüntünün bir zamanlar olduğu yerde bir dama tahtası arka planı (şeffaflık) görünecektir.
7. Adım
Şimdi şekil katmanımızı görünmez yapalım. Bunu yapmak için, katmanlar panelinde kareli katmanın karşısındaki göz simgesine tıklayın. İşte köşeleri yuvarlatılmış orijinal görüntü.
Adım 8
komutu çalıştırın Resim - böylece Photoshop görüntünün etrafındaki tüm fazla alanı kaldırır. Sonuç olarak, şeffaflık modu yalnızca köşelerde görünmelidir.
Gelecekte, böyle bir görüntüyü kullanmak için, şuraya kaydedilmelidir: PNG formatı! Bu durumda, köşeler şeffaf kalacaktır. Aksi takdirde, örneğin JPG formatında kaydederseniz, köşeler otomatik olarak beyaz bir arka plana sahip olur.
Yani her şey hazır. Köşeleri yuvarlatılmış bir görüntü şöyle görünecektir:
Ve örneğin sadece bir yuvarlak köşe nasıl yapılır?
Çok basit. Şekli çizdiğimiz sahneye geri dönelim. Sadece bir yuvarlak köşe görecek ve diğer üçü tuvalin dışına gizlenecek şekilde gerin. Burada ve ardından yukarıdaki talimatları izleyin. Her şey aynı.
Umarım talimatlar size yardımcı olmuştur ve harika bir şeyler yapabilirsiniz! İyi şanlar.
Metinde bir hata bulursanız, onu seçin ve Ctrl + Enter tuşlarına basın. Teşekkürler!
Tüm modern tarayıcılar, HTML5 hiper metin biçimlendirme standartlarını ve CCS3 stil sayfalarını destekler. Ve siteniz (şablon) modern standartları destekliyorsa, grafik editörlerin yardımına başvurmadan köşelerin yuvarlanması, gölgeler, degrade dolgu gibi tasarımda değişiklikler yapabilirsiniz.
Web yöneticileri, web sitelerinde bloklar ve çerçeveler için genellikle yuvarlatılmış köşeler kullanır. Bu yazımda sizlere sitedeki resim ve fotoğrafların köşelerini kullanmadan nasıl yuvarlayacağınızı anlatacağım. üçüncü taraf programları sadece CSS kullanarak.
Makalede verilen örneklerin ekranınızda doğru görüntülenebilmesi için en çok taze versiyonlar tarayıcılar, FireFox, Chrome ve bunlara dayalı olanlar: Yandex Tarayıcı, Amigo vb.
DIV blokları için yuvarlatma köşeleri
CSS3 standardına göre, böylece blok BÖL köşeleri yuvarlatılmış, şekillendirilmesi gerekiyor sınır yarıçapı, örneğin şöyle:
Sınır yarıçapı: 10 piksel;
Anlaşılır olması için düz ve yuvarlak köşeli iki blok çizelim:
Sağ açı bloğu
Yuvarlak köşe bloğu
Resimlerin köşelerini yuvarlama
Yukarıdaki örneğe benzeterek, sitedeki fotoğraf gibi görsellerin köşelerini yuvarlatabilirsiniz. Netlik için, sayfadaki fotoğrafın köşelerini yuvarlayacağız.
İşte CSS işlemesi olmayan görüntü
Şimdi köşeleri yuvarlatılmış:
Sınır yarıçapı: 10 piksel;
Tamamen "güzel" hale getirmek için baştan kenar ekleyeceğiz ...
Sınır yarıçapı: 10 piksel; kenarlık: 5px #ccc katı;
ve sonra gölgeler:
Sınır yarıçapı: 10 piksel; kenarlık: 5px #ccc katı; kutu gölgesi: 0 0 10px # 444;
Aşağıdaki seçenek ( yuvarlatılmış köşeler kenarlıksız gölge ile) fare altlığına çok benzer:
Sınır yarıçapı: 10 piksel; kutu gölgesi: 0 0 10px # 444;
Ve son olarak, görüntünün tam bir alay konusu
Sınır yarıçapı: %50; kenarlık: 5px #cfc katı; kutu gölgesi: 0 0 10px # 444;
Resmi yeni bir pencerede açarsanız, onun (görüntü) değişmediğini ve tüm köşelerin, gölgelerin vb. CSS tarayıcınızla stiller.
Küçük lirik arasöz
stil sınır görüntünün boyutunu kenarlık miktarı kadar artırır. değer belirtilirse sınır: 5 piksel, ardından son görüntü daha geniş ve 10 piksel daha uzun olacaktır. Bunu düşünün, bazı durumlarda sitenin düzeni "gitebilir".
Bir stil kutu-gölge resmin boyutunu etkilemez, gölge komşu öğelerin üzerinden geçiyor gibi görünüyor. Kullanırken, sitenin düzeni acı çekmez.
WordPress'te görüntülerin köşeleri nasıl yuvarlanır?
Yukarıdaki tüm örneklerde stilleri direkt olarak etiketlerin içine yazdım. HTML Kodu... Örneğin, ikincisi şöyle görünür:
Bu, bir resmi veya fotoğrafı yeniden tasarlamanız gerektiğinde iyidir. Ya her şeyi değiştirmek istersen? Her birinin görüntüsünü düzenlemek için sitenizin her yerine tırmanmayacaksınız. Çoğu durumda WordPress etiketi IMG birkaç stil sınıfını tanımlar. Biri görüntüyle birlikte benzersiz dosya adına, diğeri boyuta ve ayrıca hizalamaya göre. Bunlardan birini yukarıdaki parametrelerle tamamlayabilirsiniz.
Örneğin, hiçbir hizalama belirtilmeyen tüm resimler için dosyada stil.css sizin WordPress temaları Aşağıdakini yaz:
Alignnone (sınır yarıçapı: 10 piksel; kenarlık: 5 piksel #cfc katı; kutu gölgesi: 0 0 10 piksel # 444;)
Ya sitedeki tüm resimler için en zor yöntem. Tüm etiketler için stili geçersiz kıl IMG:
Img (kenarlık yarıçapı: 10 piksel; kenarlık: 5 piksel #cfc katı; kutu gölgesi: 0 0 10 piksel # 444;)
İkinci seçenek yalnızca WordPress için değil, herhangi bir CMS için de uygundur. Ve hatta basit bir HTML resimleri görüntülerken, etiketin olduğu durumda sayfalar IMG hiçbir stil sınıfı atanmaz. Ama dikkat et. Etiketin görüntüleme seçeneklerini geçersiz kılarsanız IMG sen değiş görünüm TÜM resimler sitede!
Sonuç yerine
Bu makaledeki tüm örnekler koşulludur ve yalnızca CSS'nin görüntü işleme için bazı olanaklarını ve ne kadar basit olduğunu göstermeyi amaçlar.
Herkese günaydın, öğleden sonra, akşam veya gece. Dmitry Kostin tekrar tekrar sizlerle. Bir keresinde farklı resimlere baktım ve sonra bazılarını beğendim. Ve yuvarlatılmış kenarları olduğu gerçeğini beğendi. Hemen bir şekilde daha ilginç görünüyor. düşünmüyor musun? Ve bugünün dersinde size fotoğrafın daha ilginç görünmesi için Photoshop'ta köşeleri nasıl yuvarlayacağınızı anlatmak istiyorum.
Photoshop'ta sevdiğim şey, çoğu durumda aynı şeyin birkaç şekilde yapılabilmesidir. Yani burada. Gelelim photoshopumuza.
Basit kenar yumuşatma
Kenarlıkları kullanarak kenar yumuşatma
Bu yöntem öncekine benzer, ancak yine de çok farklıdır. Her şeyi aynı görüntü ile yapacağız.
Bir şekil oluşturarak
İşte üçüncü yöntem, önceki ikisinden zaten kökten farklıdır. Bu yüzden birkaç saniye ara verin ve devam edin. Görüntüyü değiştirmeyeceğim ve bu arabayı tekrar Photoshop'a yükleyeceğim.
Sonunda ne yaptığını görüyor musun? Resim, kenarları yuvarlatılmış hale geldi ve bunların tümü, yalnızca çizilmiş yuvarlak dikdörtgenimizin olduğu şekilde görüntülenmesi nedeniyle. Ancak artık "Çerçeve" aracını kullanarak fazladan fotoğrafı kırpabilir veya resmi hemen kaydedebilirsiniz ve zaten köşeleri yuvarlatılmış ayrı bir resminiz olacaktır.
Her şeyi kendiniz yapmaya çalışın ve aynı zamanda bana sunulan yöntemlerden hangisinin sizin için daha çok tercih edildiğini söyleyin.
Ve bu arada, Photoshop'ta boşluklarınız varsa veya mümkün olan en kısa sürede tamamen çalışmak istiyorsanız, bir tanesine bakmanızı şiddetle tavsiye ederim. yeni başlayanlar için harika bir photoshop kursu... Kurs mükemmel bir şekilde yapılır, her şey çok iyi anlatılır ve gösterilir ve her materyal çok ayrıntılı bir şekilde analiz edilir.
Pekala, bugünlük dersimi bitiriyorum. Yeni makalelere abone olmayı ve bunu arkadaşlarınızla paylaşmayı unutmayın. Sizi blogumda gördüğüme sevindim. Seni tekrar görmek için sabırsızlanıyorum. Güle güle.
Saygılarımla, Dmitry Kostin
Bu hızlı eğitimde, Photoshop'ta kullanarak nasıl yuvarlak köşeler oluşturabileceğinizi göstereceğim. basit yöntemler maskeleme ve filtreler.
Şeklinizin, metnin vb. kenarlarını yuvarlamak için köşe yarıçapını ayarlayabileceksiniz. Bu, yuvarlatılmış köşeler oluşturmak için hızlı ve kolay bir yöntemdir. Bunları oluşturmak için bir Katman Maskesi kullanabilirsiniz.
seriyi kullanma basit adımlar Photoshop'ta yuvarlak bir dikdörtgen yapabilirsiniz. Photoshop'ta hemen yuvarlak köşe yapmak için bir filtre veya araç yoktur, ancak bunu Illustrator ile yapabilirsiniz. Hemen hemen her nesne için yuvarlak köşe efekti oluşturmanıza olanak tanır. İçinde menüye gitmeniz gerekiyor Efektler> Stilize Et> Yuvarlatılmış Köşeler(Efektler > Stilize > Yuvarlatılmış Köşeler).
Aşama 1
Bu hızlı eğitimde, Photoshop'ta rasterleştirilmiş metin, şekil veya bir tür görüntü kullanarak köşeleri yuvarlatmanın basit bir yöntemini göstereceğim. Keskin köşeleri olan bir yıldızın vektör görüntüsünü alın (bu yöntem dik açılarda da işe yarar).
Adım 2
Şimdi katmanı rasterleştirmeniz gerekiyor. Bunu yapmak için, katmanlar paletindeki yıldız katmanı minik resmine sağ tıklayın ve bağlam menüsü Seç katmanı rasterleştir(Rasterleştirme Katmanı). Bir metin katmanı kullanıyorsanız, aynısını yapmanız gerekir.
Aşama 3
Menüye git Filtre> Bulanıklaştır(Filtre> Bulanıklaştır) öğesini seçin ve Gauss bulanıklığı(Gauss Bulanıklığı). Bulanıklığın yarıçapı, görüntünüzün boyutuna ve elde etmek istediğiniz sonuca bağlı olacaktır. 5 piksellik bir yarıçap seçeceğim.
4. Adım
Görüntü seçimini etkinleştirmek için "Ctrl" tuşunu basılı tutun ve katman küçük resmine tıklayın. Ardından, menüye gidin Vurgulama ve Seç Kenar rafine(Seçin > Kenarı İyileştir). Parametrelerle deney yapabilirsiniz kenar yumuşatma(Pürüzsüz) ve tüylenme(Tüy) ile istenen efekti seçin. Zıtlık(Kontrast) 100 yap.
Adım 5
Şeklin rengini alın, bizim durumumuzda sarıdır ve tüm seçimi bu renkle doldurun. Bunu "Shift + F5" tuş bileşimine basarak yapabilirsiniz.
6. Adım
Seçimi kaldırmadan, katmanlar paletinin altında bulunan simgeye tıklayarak bir katman maskesi eklemelisiniz. İşte bu, şimdi yıldızın köşeleri yuvarlandı.
Aşağıdaki resimde gösterildiği gibi köşeleri yuvarlatılmış metin oluşturmak için aynı yöntemi kullanabilirsiniz. Artık kendi yazı tipinizi oluşturabilirsiniz.
Sitemin bu bölümüne yerleştirmeye karar verdim. Photoshop dersleri, bir web sitesi tasarımı oluştururken sizin için yararlı olabilir. Photoshop öğrenmeye başlamadan önce size kendimi tanıtmamın gereksiz olmayacağını düşünüyorum. kısayol tuşları photoshop... kullanma kısayol tuşları photoshop, işinizi kolaylaştıracak ve zamandan tasarruf edeceksiniz. ...
Benim ilk Photoshop eğitimi sana nasıl olduğunu söyleyecek yuvarlak köşeler Fotoğraf.
Siteler oluştururken, genellikle resmin köşelerini nasıl yuvarlayacağınız veya nasıl yuvarlayacağınız sorunuyla karşı karşıya kalırsınız. yuvarlak köşeler Fotoğraf. Bu eğitimde Photoshop sana nasıl yapılacağını öğreteceğim yuvarlak köşelerşekil photoshop... Ayrıca bu Photoshop dersi sana izin verecek yuvarlak köşeler fotoğraflar. Umarım bu sizin için açıktır. Sonuçta, için Photoshop hem resim hem de fotoğraf bir bütündür. Adobe'yi işimde kullanıyorum Photoshop SC5, Rus versiyonu. Dillerde güçlü değilim.
Bugünkü dersim Photoshop'ta bir fotoğrafın köşelerini yuvarlamakla ilgili. Benimki gibi köşeleri yuvarlatılmış bir fotoğraf çekelim.
1. uygulamak Photoshop'ta köşeleri yuvarlama, Bununla aç Photoshop ihtiyacımız olan resim (fotoğraf). Örneğin, fotoğraf arşivimdeki fotoğraflardan birini çektim.
2. Resmin ölçülerini ihtiyacımız olan parametrelere getiriyoruz. Bunu yapmak için ALT + CTRL + I tuşlarına basın. Görüntü Boyutu penceresi açılır. İhtiyacımız olan ölçüleri belirliyoruz. Resmi istediğiniz boyuta kırpabilirsiniz.
3. Resmi seçin (CTRL + A) (çevre çevresinde noktalı bir çizgi görünecektir) ve kopyalayın (CTRL + C); Uyguladıktan sonra orijinal görüntünün değişmeden kalması için fotoğrafı kopyalarız Photoshop'ta köşeleri yuvarlama... Orijinal üzerinde çalışmak mümkün olsa da, yuvarlatılmış köşeler hazır olduğunda, fotoğrafı başka bir görüntü olarak kaydedeceğiz.
4. Yeni bir pencere açın (CTRL + N), istediğiniz görüntü boyutunu ayarlayın ve "Tamam"a tıklayın. Lütfen arka planı "şeffaf" olarak ayarladığımı unutmayın. İstediğiniz rengin arka planını hemen ayarlayabilirsiniz;
5. Kopyalanan resmi yeni bir pencereye (CTRL + V) yapıştırın ve yeni katman(CTRL + ÜST KRKT + N). Bu katmanda dikdörtgen aracını kullanarak yuvarlatılmış köşeler"Gerekli boyutta bir dikdörtgen çizin. Dikdörtgenin rengi önemli değil. Aracın seçimi farenin sağ tuşuna basılarak yapılır. Veya sadece (U) tuşuna basılarak yapılır. Turun yarıçapını kendinize göre ayarlayın. takdir yetkisi (aşağıdaki şekle bakın);
Gerekirse klavyedeki okları kullanarak veya sol tuşu basılı tutarken fareyi kullanarak çizilen şekli hareket ettirebilirsiniz. Araç çubuğundaki (üst düğme) "hareket" i etkinleştirmeyi unutmayın. Ayrıca yeniden boyutlandırmak rakamlar. Bunu yapmak için (CTRL + T) tuşlarına basın ve sol tuşu basılı tutarken fareyi kullanarak şekli istediğiniz boyuta sürükleyin. Aynı oranlarda yeniden boyutlandırmak istiyorsanız, SHIFT'i basılı tutmanız ve şeklin köşesini sürüklemeniz gerekir.
6. Katmanlar paneline gidin. CTRL'yi basılı tutun ve dikdörtgen katmanının önizlemesine (resme) sol tıklayın. Şeklin kesikli bir taslağı görünür.
7. Alt katmana gidin. Bunu yapmak için, katmanlar panelinde resmin sağına tıklayın. Bizim durumumuzda - katman 1. Mavi seçim katman 1'e gidecektir.
8. CTRL + SHIFT + I tuşlarına basın. Resmin dikdörtgenimizin dışında kalan kısmının sınırı boyunca noktalı bir seçim görünecektir. yuvarlatılmış köşeler.
9. Klavyede DEL'e basın. Resmin dikdörtgenin dışında kalan kısmı kaldırılacaktır.
10. Dikdörtgen katmanını yeniden etkinleştirin. Çöp kutusu simgesine tıklayarak siliyoruz.
11. "M" tuşuna basın ve görüntünün herhangi bir yerine sol tıklayın. Seçim kaldırıldı. hazır. Elde ettiğimiz görüntüyü & gerçekleştirerek kaydedebilirsiniz. Photoshop'ta köşeleri yuvarlama, ihtiyacımız olan formatta.
Site tasarımı oluşturmak için böyle bir görüntü kullanılacaksa, Web ve cihazlar için kaydedin (ALT + SHIFT + CTRL + S).
12. Dikkat! ile görüntünün kenarlarında varsa yuvarlatılmış köşelerşeffaf pikseller var, kırpmanız gerekiyor. Bunu yapmak için "Görüntü" ye tıklayın, "Kırpma" seçeneğini seçin, açılan pencerede ayarları resmimdeki gibi yapın ve "Tamam" ı tıklayın. Tuval, görüntü boyutuna göre yeniden boyutlandırılacak ve fazladan saydam pikseller kaldırılacaktır.
bu Photoshop dersi hem oval hem de kıvırcık fotoğraflar için kullanılabilir. Bunu yapmak için, 5. adımda "dikdörtgen" yerine yuvarlatılmış köşeler"aracı seçin" elips "," çokgen "veya" keyfi şekli. " köşeleri yuvarlama.