Photoshop'ta degradeler oluşturmak için Degrade Aracını kullanın. Photoshop'ta farklı türde degradeler oluşturma olanağına sahipsiniz: “Doğrusal degrade”, “ Radyal degrade", "Açılı degrade", "Yansıyan degrade", "Elmas degrade" (ihtiyacınız olan degradeyi seçmek için, seçenekler çubuğundaki ilgili düğmeleri, degrade türü örneğini içeren simgeleri kullanın). Çoğunlukla "Doğrusal degrade" kullanılır; dolgu alanı, degradenin içerdiği renklerle, seçtiğiniz yönde doğrusal olarak eşit şekilde boyanır.
Degrade, renk yerine şeffaf degrade alanı kullanmak da dahil, kullandığınız tüm olası renkleri içerebilir. Seçtiğiniz renkten şeffafa doğru bir degrade oluşturmak için Degrade Aracını seçin. Seçenekler Çubuğunda o anda seçili olan degradeye tıklayın.
Açılan "Degrade Düzenleyici" iletişim kutusunda "Ad" alanında yeni bir degrade oluşturun
Degradeniz için bir ad girin ve “Yeni” düğmesine tıklayın. "Degrade Türü" alanında "Katı"yı seçin ve "Düzgünlük" alanında bunu %100 olarak ayarlayın. "Pürüzsüzlük" altında, üstte ve altta renk seçimi kaydırıcılarının bulunduğu gelecekteki degradeyi göreceksiniz.
Üst kaydırıcılar belirli bir rengin şeffaflık yüzdesinden, alt kaydırıcılar ise degradenin renginden sorumludur. Alt kaydırıcılarda renkleri seçtikten sonra, karşılık gelen üst kaydırıcılardaki "Opaklık" ve "Konum" parametrelerini değiştirerek opaklık yüzdesini ayarlayabilirsiniz.
Sol üst kaydırıcıya tıklayın ve "Durdurmalar" alanındaki parametrelerinde "Opaklık" için %0 ve "Konum" için %0 ayarlayın.
Sol alttaki kaydırıcıya gidin (sadece üzerine tıklayarak da). Bu "Duraklar" parametrelerinde ayrıca "Konum"u %0 olarak ayarlayıp "Renk" öğesinden bir renk seçersiniz; şeffaf renk beyaza karşılık gelmelidir.
Şimdi kaydırıcıların sağ tarafına gidin. Sağ alt kaydırıcının parametrelerinde ihtiyacınız olan rengi seçin, “Konum” öğesinde bunu% 100 olarak ayarlayın.
Sağ üst kaydırıcının parametrelerinde “Opaklık” ve “Konum”u %100 olarak ayarlayın.
Degrade hazır ve uygulayabilirsiniz. Görüntünün degradenizi başlatmak istediğiniz kısmına Degrade Aracı ile tıklayın ve fare imlecini devam etmek istediğiniz noktaya sürükleyin. Seçilen bir alan üzerinde çalışmıyorsanız degrade görüntünün tüm alanına uygulanacaktır.
Şeffaflık, gölgeler ve degradeler
Şeffaflık
Görüntüleri ve renkleri şeffaf hale getirme yeteneği CSS3'ün en temel yapı taşlarından biridir. Şeffaflığı ayarlamanın iki yolu vardır. İlki işlevi kullanmaktır rgba(), dört parametre alır. İlk üç parametre, rengin kırmızı, yeşil ve mavi bileşenlerinin değerlerini (0'dan 255'e kadar) belirler. Son parametre 0 (tamamen şeffaf) ila 1 (tamamen opak) arasında değişebilen şeffaflık değerini veya alfayı belirtir.
Aşağıdaki kural, arka planı yüzde 50 şeffaflıkla parlak yeşil bir renge ayarlar:
Bir kenara ( arka plan: rgba(170,240,0,0.5); )
rgba() işlevini desteklemeyen tarayıcılar bu kuralı göz ardı edecek ve arka plan varsayılan şeffaflığını - tam şeffaflığını - koruyacaktır.
Bu nedenle ikinci yaklaşım daha iyidir. Burada önce düz bir geri dönüş rengi belirliyoruz ve ardından onu yarı şeffaf bir renkle değiştiriyoruz:
Kenara ( arka plan: rgb(170,240,0); arka plan: rgba(170,240,0,0.5); )
Bu nedenle, rgba() işlevini desteklemeyen tarayıcılar, öğenin arka planını yine de renklendirecektir, ancak yalnızca tamamen opak bir renkle.
Yedek renk ile ana renk arasında daha iyi bir eşleşme elde etmek için yarı saydam efekti en iyi şekilde üreten bir yedek renk kullanmalısınız. Örneğin, beyaz bir arka plana yarı saydam bir renk uygulanırsa, o renk, yarı saydamlıktan dolayı daha da açık görünecektir. Beyaz arkaplan. Bir yedek renk seçerken bu etki dikkate alınmalıdır.
CSS3 spesifikasyonu aynı zamanda bir stil özelliğini de tanımlar opaklık(opaklık), alfa değeriyle tamamen aynı şekilde çalışır. Opaklık değeri ayrıca 0 ile 1 arasında ayarlanabilir ve bu sayede herhangi bir öğeyi yarı saydam yapabilirsiniz:
Kenara ( arka plan: rgb(170,240,0); opaklık: 0,5; )
Aşağıdaki şekil, biri rgba() işlevi ve diğeri opacity özelliği kullanılarak uygulanan iki yarı saydamlık örneğini göstermektedir:
Opaklık özelliği Aşağıdaki durumlarda işlev yerine rgba() kullanılması tercih edilir:
birkaç rengi yarı saydam yapmanız gerektiğinde. Opaklık özelliği, bir öğenin arka planının, metninin ve çerçevesinin rengini yarı saydam yapmanıza olanak tanır;
Örneğin rengin başka bir stil sayfası veya kod tarafından ayarlanmış olması nedeniyle, rengini bile bilmeden bir şeyi yarı saydam yapmanız gerektiğinde JavaScript komut dosyaları;
ne zaman yapmalı yarı saydam görüntü;
bir geçişin ne zaman kullanılacağı, ör. Bir öğenin solup kaybolmasına neden olan bir animasyon efekti.
Gölgeler
CSS3 spesifikasyonu iki yeni gölge türünü tanımlar: kutu gölgeleri Ve metin gölgeleri. Blok gölgeler genellikle daha kullanışlıdır ve daha fazla özelliğe sahiptir. yüksek seviye desteği yok, ancak metin gölgeleri hiçbirinde çalışmıyor İnternet sürümleri Kaşif. Gölgeyi engelle herhangi bir eleman bloğunun arkasında dikdörtgen bir gölge oluşturmak için kullanılabilir
Söz konusu gölgeler özellikler aracılığıyla yaratılmıştır kutu gölgesi Ve Metin gölgesi. Aşağıda temel bir blok gölge oluşturma örneği verilmiştir:
Kenara ( kutu gölgesi: 8px 8px 10px gri; )
box-shadow özelliğinin ilk iki değeri, gölgenin yatay ve dikey uzaklıklarını ayarlar. orijinal nesne. Pozitif değerler gölgeyi aşağı ve sağa hareket ettirir, negatif değerler ise gölgeyi yukarı ve sola hareket ettirir. Bir sonraki değer bulanıklığın boyutunu belirler (bulanıklık, bu örnekte 10 piksel), bu da gölgenin bulanıklığını artırır. Son değer gölgenin rengini belirler. Bloğun altında herhangi bir içerik varsa, gölgeyi yarı saydam yapmak için rgba() işlevini kullanmayı düşünün.
Daha fazlası için ince ayar Box-shadow özelliğine iki değer ekleyebilirsiniz. Bir gölgenin genişliğini (yayılmasını) ayarlamak için - gölgeyi genişleten, aradaki katı kısmını kalınlaştıran bir alt özellik bulanık kenarlar, bulanıklık ve renk değerleri arasına bir değer ekleyerek:
Kenara ( kutu gölgesi: 8px 8px 10px 5px gri; )
Ve dışarıya değil öğeye yansıyan bir gölge oluşturmak için değer, değerler listesinin sonuna eklenir. ek. En iyi etki gölge, yatay veya dikey sapma olmadan doğrudan öğenin üstüne yerleştirildiğinde elde edilir:
Kenara ( kutu gölgesi: 0px 0px 20px kireç eki; )
text-shadow özelliği benzer bir değer kümesi gerektirir, ancak bunlar farklı bir sıradadır. Önce renk belirtilir, ardından yatay ve dikey uzaklıklar ve ardından bulanıklık belirtilir:
H1 ( metin gölgesi: gri 10 piksel 10 piksel 7 piksel; )
Degradeler
Degradeler, menü çubuğunun altındaki hafif bir gölgeden psikedelik renkli düğmelere kadar çok çeşitli efektler yaratabilen renk geçişleridir.
Birçok web sayfası degradeleri simüle eder arka plan görselleri. Ancak CSS3 teknolojisi, web geliştiricisinin tarayıcı tarafından oluşturulacak gerekli degradeyi tanımlamasına olanak tanır. Bu yaklaşımın avantajı, işlenmesi gereken görüntü dosyalarının sayısını azaltması ve herhangi bir alanı doldurmak için sorunsuz bir şekilde yeniden boyutlandırılan degradeler oluşturma yeteneği sağlamasıdır.
CSS'de degradeler oluşturmak için özel özellikler yoktur. Bunun yerine, arka plan özelliğini ayarlamak için degrade işlevi kullanılır. Ancak degradeleri desteklemeyen tarayıcılar için bir geri dönüş dolgusu oluşturmak amacıyla önce bu özelliği düz bir renge ayarladığınızdan emin olun. İnternet Explorer yalnızca IE 10'dan itibaren degradeleri destekler).
Tamamı tarayıcı geliştirici öneklerini gerektiren dört degrade işlevi vardır. Bu bölümde degrade örneklerine bakacağız. Chrome tarayıcı(bunun için -webkit- öneki kullanılır). Destek için Firefox tarayıcıları ve Opera'nın tam olarak aynı degrade değerlerini eklemesi gerekiyor, ancak -moz- ve -o- önekleriyle.
Önce fonksiyonuna bakalım doğrusal-gradyan(). Aşağıdaki, bloğun en basit biçimlerinden biridir; üstteki bloğu beyaza boyayan, altta maviye dönen blok:
Kenara ( arka plan: -webkit-linear-gradient(üst, beyaz, mavi);)
Üst değerin sol değerle değiştirilmesi doğrusal bir yatay degrade verir. Ve degradeyi başlatmak için bloğun köşesini belirterek çapraz bir geçiş elde ederiz:
Kenara ( arka plan: -webkit-linear-gradient(sol üst, beyaz, mavi);)
Bir renk listesi sağlayarak çok renkli bir degrade oluşturabilirsiniz. Örneğin, aşağıdaki kural üç renkli yatay bir degrade oluşturur:
Kenara ( arka plan: -webkit-linear-gradient(sol, kırmızı, turuncu, sarı);)
Son olarak bunun yerine üniforma dağıtımı degrade renkleri kullanarak her rengin başlangıç konumunu belirleyebilirsiniz. degrade duraklarışeritleri germek veya sıkıştırmak veya bunları bir yönde veya başka bir yönde kaydırmak.
Degrade aracı çeşitli türde degradeler çizmenize olanak tanır. Ayrıca, şeffaflık modunda degradeleri kullanarak, iki görüntüyü "soldurma" veya "birleştirme" efektini tek bir görüntüde elde etmek mümkündür.
Tüm degrade türleri aşağıdaki degrade bölümünde seçilebilir:
Aşağıda her bir degrade türünün görüntüyü nasıl etkilediğine ilişkin örnekler verilmiştir. Solda, Renk modunda iki opak renkle (ve 255 alfa değeriyle) degradeyi işledikten sonraki görüntüler var. Sağda, Şeffaflık modunda degradeyle işlendikten sonraki görüntüler var:
Renkli ve şeffaf modlarda dairesel degrade
Degrade Oluşturma
Bir degrade çizmek için fare düğmesini tıklayıp basılı tutmanız ve sanki bir çizgi çiziyormuş gibi imleci tuval üzerinde hareket ettirmeniz yeterlidir. Degrade, fareyi nasıl hareket ettirdiğinize göre genişleyecektir.
Fare düğmesini bıraktıktan sonra degrade bunu kullanarak ayarlanabilir kontrol noktaları veya küçük daireler şeklinde “düğümler”. Böyle bir "düğüme" sağ tıklamak, degradenin birincil ve ikincil renklerini değiştirecektir. Her iki fare düğmesini basılı tutarken "düğümlerden" birini hareket ettirirseniz, degrade alanının tamamını taşıyabilirsiniz.
Renk modu
Varsayılan Renk modu her şeyi etkiler renk kanalları ve alfa kanalı. Bu modda bir degrade kullanıldığında, ana renk yavaş yavaş ikincil renge dönüşecektir. Sol fare düğmesi yerine sağ fare düğmesini kullanırsanız, birincil ve ikincil renkler yer değiştirir. Yukarıdaki örneklerde degrade, varsayılan birincil ve ikincil renkleri (birincil - siyah, ikincil - beyaz) kullandı.
Şeffaflık modu
Şeffaf gradyan modu, görüntünün bir kısmını kademeli olarak karartmak için kullanılabilir. Bu mod aynı zamanda iki görüntüyü "karıştırmak" için de yararlı olabilir. Bu modu etkinleştirmek için ilgili kontrol elemanını istenen konuma getirin:
Bu tür degrade yalnızca geçerli katmanın alfa kanalını etkiler. Degrade, ikincil rengin alfa değerini tersine çevirmeden önce ana rengin alfa değerini düzgün bir şekilde değiştirecektir. Kullanma sağ düğme fareyi kullandığınızda degrade, alfa değerini, ikincil rengin alfa değerinin tersine çevrilmesinden ana rengin alfa değerine düzgün bir şekilde değiştirecektir. Basitçe söylemek gerekirse, düşünebilirsiniz şeffaf degrade, tam opaklıktan (alfa değeri 255 olan) tam şeffaflığa (alfa değeri 0 olan) yumuşak bir geçiş olarak.
İki görüntü arasında "solma" veya "karışım" oluşturmak için bunları farklı katmanlara yerleştirin ve ardından Saydamlık modunu kullanarak üst katmana bir degrade uygulayın.
Örnek olarak açıklamada verilen iki görseli kullanıyoruz. Yumuşak bir geçiş Saydam bir degradeyi görüntünün sol kenarından sağ kenarına "uzatarak" kolayca bir görüntüyü diğerine dönüştürebilirsiniz:
Konuyla ilgili makaleler
Geniş yatay görüş açısına sahip monitörler - fiyatlar
Samsung Galaxy Senkronizasyon Programı
Sony Xperia L1, fazla bir şey beklemeyenler için uygun fiyatlı bir akıllı telefon
Chrome: Başlangıçta yalnızca bir sekme yükleniyor
Acer Aspire V5 dizüstü bilgisayarınızı fabrika ayarlarına nasıl sıfırlayabilirsiniz?