Bugün için yararlı bir komut dosyası sunuyoruz Adobe illüstratör... Adobe Illustrator için yetenekli bir Ukraynalı komut dosyası ve eklenti geliştiricisi ve geliştirici olarak da bilinen arkadaşım Yaroslav Tabachkovsky (Yemz) tarafından oluşturuldu. ücretsiz eklenti Ağ İşkencecisi. RandomSwatchesFill komut dosyası, seçilen nesneleri Renk Örnekleri paletinde seçilen renklerde rastgele renklendirir.

Bu incelemenin başında veya sonunda bulunan İndir düğmesine tıklayarak scripti ücretsiz olarak indirebilirsiniz.

Komut dosyasını aşağıdaki klasöre koyalım, örneğin:

Pencereler için: C: \ Program Dosyaları \ Adobe \ Adobe Illustrator CS5 \ Ön Ayarlar \ en_GB \ Komut Dosyaları

Mac için: Uygulamalar / Adobe \ Adobe Illustrator CS5 \ Presets \ en_GB \ Komut Dosyaları

Rastgele Renk Örneklerini Doldurma betiğinin çalışmasına bir örnek için, birçok monofonik nesneden oluşan bir vektör çalışmasını ele alalım.

Lütfen komut dosyasının uygulanacağı nesnelerin gruplandırılmaması ve seçilmesi gerektiğini unutmayın. Seçimi kaldırmadan Renk Örnekleri panelini açın. Ctrl / Command tuşunu kullanarak Swatchlar paletinden nesneleri boyamak için kullanacağımız renkleri seçin.

Dosya> Komut Dosyaları> RandomSwatchesFill'e giderek RandomSwatchesFill komut dosyasını uygulayın. Sonuç olarak, rastgele renkli nesneler elde ederiz.

Bu komut dosyası hem tüm vektör çalışmasına hem de birkaç nesneye uygulanabilir. Kement Aracını (Q) kullanarak birkaç nesne seçin ve Ctrl / Command tuşunu kullanarak bu nesneleri boyayacağımız Renk Örnekleri paletinden renkleri seçin.

Sonuç olarak, vektör çalışmalarının bir kısmı seçilen renklerle rastgele sırada renklendirilir.

Renk Örnekleri panelinde renkler, degrade dolgular veya Desenler ile denemeler yapabilir ve hangi orijinal sonuçları elde edebileceğinizi görebilirsiniz. Bu senaryo için kendi adıma Yemz'e teşekkür etmek istiyorum ve umarım günlük yaratıcı çalışmalarınızda faydalı olur ve rutin teknik konulara daha az zaman harcarsınız.

İsim hiçbir şeyi açıklamıyor, bu doğru. Resme bakmak daha iyi:

Gördüğünüz gibi, ilgili üç adım vardır: biraz arka plan bulun, vektör şekillerin üzerine çizim yapın, komut dosyasını çalıştırın ve yeniden renklendirilmiş şekilleri alın. Bunun çalışması için en az CS6 bir illüstratöre ihtiyacınız var ve bence (CS3'te test edilmiştir) herhangi bir photoshop. Photoshop olmadan yapamazsınız. Evet ve daha fazla sabır gerekecek)

Bu betik aslında bir anlamda senaristte (Color Raster) gerçekleşen işlevselliğin bir benzerini yapma girişimidir. Sadece resmi sitedeki resimlerde gördüğümü ve asla gerçek çalışmada görmediğimi ve gerçekte nasıl çalıştığını (çok daha hızlı olması dışında) ve hangi özelliklere sahip olduğunu bilmediğimi unutmayın. Yaptığım şey tam olarak başlıkta yazılan görevi anlayabileceğim biçimde ve sadece yerleşik komut dosyası yeteneklerini kullanarak uygulamaktı.

Şimdi her aşama hakkında biraz daha ayrıntı:
1. Arka Plan - arka plan herhangi bir, raster veya vektör olabilir. Katı veya herhangi bir şeyin kolajı olabilir. Tek önemli şey, arka plan komut dosyasının en alt katmanda bulunan her şeyi dikkate almasıdır.

2. Vektör nesneleri yeniden renklendirilecek olanlardır. Aslında herhangi bir rakam oluşturan kapalı yollardan bahsediyoruz. Bileşikleri test etmedim, göz ardı edileceklerini düşünüyorum. Şekiller, çok katmanlı olanlar da dahil olmak üzere gruplar halinde birleştirilebilir. Maskelenebilirler (maske tarafından "gizlenen" şeyin de yeniden boyanacağını akılda tutmalısınız ve bu, aşağıda tartışılan zamandır). En üst katmanda bulunan her şey yeniden renklendirilecektir. İlk ve son arasındaki katmanlar yok sayılır.

3. Senaryo ve asıl çalışması. Komut dosyasını çalıştırmadan önce Photoshop başlatılmalıdır. Bu durumda, komut dosyası kendisini başlatacaktır, ancak bu yalnızca fazladan zaman kaybına neden olacaktır. Hiçbir şey seçmenize gerek yok, arka plan ve nesneler hazırsa ve katmanlarındaysa, başlatın ve .. uzun süre bekleyin. İşte merhemde bir sinek, bu süreç uzun. Teknik ayrıntılarla kendimi mazur göstermeye çalışmayacağım, sorun elbette sadece benim eğriliğimde. Öyle ya da böyle, şimdiye kadar durum bu. Kapaktaki resimde olanın bir örneği yaklaşık 10 dakika sürdü ve içinde 400'den biraz fazla altıgen var. Onlar. nesne başına yaklaşık 1,5 saniye. İşlemde arızalar varsa, yeniden boyama için süre artar. Lansmandan hemen sonra, komut dosyası ne kadar süreceğini tahmin edecek ve raporlayacaktır. Ama artık reddetmek mümkün olmayacak (şimdilik).
Merhemdeki ikinci sinek, ancak yalnızca Windows bilgisayar sahipleri tarafından - işleminiz illüstratör donmuş gibi görünecek ("yanıt vermiyor" yazacaktır). Photoshop muhtemelen yeniden boyamak için arka planı yanıp sönecektir) Ancak, her şeyi kötü anlamak için veya sadece taklit ediyor, bir ses göstergesi ekledim - her 10. yeniden boyanmış nesneden sonra bir sistem bip sesi. Bu bip sesini duyarsanız (sesin açık olup olmadığını kontrol edin), komut dosyası çalışıyor demektir, beklemeniz yeterlidir. Bilgisayarın kendisi askıda kalmıyor, tarayıcıyı açabilirsiniz)
Ve haşhaş yetiştiricileri, yeniden boyama sürecini gerçek zamanlı olarak nesne nesne gözlemleyebilecekler.

Birkaç genel kelime daha:
Dolgu için renk bir noktadan değil, yeniden boyanmış nesnenin sınırlayıcı kutusunun boyutundan biraz daha küçük bir alanın ortalaması alınır.
Boyanacak nesnelerin ve arka planın çalışma yüzeyinin içinde olması gerekmez, fark etmez. Komut dosyası çalışırken, çalışma yüzeyinin boyutu, arka plandan ve hedef nesnelerden görünen her şeye uyacak şekilde ayarlanacak ve tamamlandıktan sonra yerine geri döndürülecektir. Bu nedenle, hedef nesne arka planın bir parçası üzerinde değilse ve çalışma yüzeyinin dışındaysa, orta rengi seçme özelliklerinden dolayı yakın arka plan tarafından hafifçe kirlenmediği sürece büyük olasılıkla beyaza boyanacaktır (yukarıdaki nokta) .

Aşağıdaki bağlantı, betiğin kendisi ve basit bir test durumudur. Onunla başlamak daha iyi.
Bağlantı:https://yadi.sk/d/aGnOBIkymiPbX
Beta testi bitti, deneyen herkese teşekkürler!
Aktif test kullanıcıları ile kurulan özel modda devam edeceğiz.

Bu bir beta sürümüdür, herhangi bir iyileştirme olacak mı ve Ek özellikler birinin hata bulup bulmadığına ve yeni özelliklerle gelip gelmediğine bağlıdır)
Senaryo fikri bana art_of_sun tarafından verildi, bunun için ona çok teşekkürler! Başka birinin fikri varsa - hoş geldiniz!

Oyuncak kullanışlı mı? Pixilezators farklıdır ve bensiz zaten yapılmıştır, ancak belki bir şekilde daha ilginç bir şekilde kullanılabilir? Ya da değil? Kim ne düşünüyor, konuşun)

bir obje . Düğme adı btn.cvet). Ana kare için bir komut dosyası oluşturalım:

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet.addEventListener (MouseEvent.CLICK, f); f işlevi (olay: MouseEvent): void (cvet.color = 0x0000ff; rol.transform.colorTransform = cvet)

Komut dosyasında kırmızı ile vurgulanan şu parçalarda değişiklikler yapılabilir: videonun adı (rol), düğmeler (btn.cvet), değişken (cvet), işlev (f) ve renk değeri (0000ff) .

Yukarıdaki betiğin çalışmasını analiz edelim:

• Rol filmi (tüm semboller gibi) hakkında bilgi içeren bir transform özelliğine sahiptir. çeşitli dönüşümler nesneye uygulanır (geometrik dönüşümler, renk ayarlamaları gibi). Bir nesnenin rengini ayarlamakla ilişkili dönüştürmeleri uygulamak için colorTransform özelliğini kullanın.
• Yeni oluşturulan cvet değişkeni, renk ayarlarıyla ilişkili rol özelliklerinin değerini alır.
• color özelliğinin color değerini yenisiyle değiştiriyoruz:

  0000ff - RGB formatında onaltılık renk gösterimi: kırmızı, yeşil ve mavi renkler onaltılık kodda iki basamaklı sayılar olarak belirtilir (onaltılık kodda Arap 0-9 arası sayılar kullanılır ve Latin harfleri a, b, c, d, e kullanılır) , f , 10, 11, 12, 13, 14 ve 15 sayılarının analogları olarak hareket eder). Bir nesnenin nihai rengi, üç rengin belirtilen oranlarda karıştırılmasıyla elde edilir.

• rol nesnesinin colorTransform özelliğini güncelleyin (renk düzeltmesi yapın).

1 numaralı pratik çalışma

Sahnede bir video (renklendirme için bir nesne - rol adlı) ve renk paletindeki 2 rengi simgeleyen 2 düğme (btn.cvet1 ve btn.cvet2) oluşturalım. Her düğmeye basmak, videoyu düğmeye atanan renkte renklendirir. Dış görünüş düğmeler amaçlarından bahsetmelidir (örneğin, düğmelerin rengi, boyanmakta olan nesnenin rengine karşılık gelir).

Komut dosyasında, nesnenin rengini okumak için bir değişken oluşturmanız ve basılan düğmeye bağlı olarak onun için iki renkten birini ayarlamanız gerekir:

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet1.addEventListener (MouseEvent.CLICK, f1); f1 işlevi (olay: MouseEvent): void (cvet.color = 0x0000ff; rol.transform.colorTransform = cvet;) btn.cvet2.addEventListener (MouseEvent.CLICK, f2); f2 işlevi (olay: MouseEvent): void (cvet.color = 0x00ff00; rol.transform.colorTransform = cvet;)

2 numaralı pratik çalışma

Sahnede 2 adet buton (renklendirme için nesneler - rol1, rol2 isimleriyle) ve 2 adet buton (renk paletinde 2 rengi simgeleyen - btn.cvet1 ve btn.cvet2 isimleriyle) oluşturalım. Renk paleti düğmesine basmak - renk seçimi; renklendirme için düğmelere-nesnelere tıklamak, onları önceden seçilen renkte renklendirmeye yol açar. Renk paletindeki düğmelerin görünümü, amaçlarını belirtmelidir.

Bir nesneyi boyamak için 2 adımı izlemeniz gerekir:

• bir renk seç;
• seçilen renkte boyanacak bir nesne seçin.

  var cvet: ColorTransform = rol1.transform.colorTransform; btn.cvet1.addEventListener (MouseEvent.CLICK, f1); f1 işlevi (olay: MouseEvent): void (cvet.color = 0x0000ff;) btn.cvet2.addEventListener (MouseEvent.CLICK, f2); f2 işlevi (olay: MouseEvent): void (cvet.color = 0x00ff00;) rol1.addEventListener (MouseEvent.CLICK, f3); f3 işlevi (olay: MouseEvent): void (rol1.transform.colorTransform = cvet;) rol2.addEventListener (MouseEvent.CLICK, f4); f4 işlevi (olay: MouseEvent): void (rol2.transform.colorTransform = cvet;)

Kural olarak, çeşitli nesnelerin rengini analiz etmeden nesneleri renklendirmek bir anlam ifade etmez. Seçim aracı olarak nesne renklendirme kullanan bir uygulama oluştururken bu nesnenin, iş sürecinde nesneler tarafından alınan renkleri analiz etmek gerekir. var yazılım nesnenin rengini analiz etmek.

Bir figürü renklendirmek için seçilen rengi "hatırlayarak" (önceden boyanmış bir figürün rengini "analiz ederek" değil) renk analizinin gerçekleştirildiği bir görev örneğini ele alacağız.

Diyelim ki bir dizi geometrik şekilden kareleri, üçgenleri ve eşkenar dörtgenleri işaretlemeniz gerekiyor: kareleri bir renkle, üçgenleri başka bir renkle boyayın, vb.

Pirinç. 22.1. Renk Analizi Uygulama Arayüzü

Senaryo bildiriyor gibi değişkenler Sayı:

• c (seçilen renkle ilgili bilgileri saklamak için),
• fla.1, fla.2, fla.3 (her daire tarafından alınan renk hakkında bilgi depolamak için).

Sahneye "Kontrol Et" düğmesi (adı pr) ve dairelerin doğru / yanlış rengiyle ilgili bilgileri gösteren dinamik bir metin alanı (ttt) yerleştirilir.

Tüm şekillerin doğru renklendirilmesi durumunda (dallandırma komutundaki mantıksal ifade, üçü de basit olduğunda doğru olacaktır. mantıksal ifadeler- dinamiğin text özelliğine birinci ve (&&) ikinci ve (&&) üçüncü) Metin kutusu ttt'ye "verno" değeri atanır, aksi takdirde - "ne verno":

… Pr.addEventListener (MouseEvent.CLICK, f7); f7 işlevi (olay: MouseEvent): void (if ((fla.1 == 1) && (fla.2 == 2) && (fla.3 == 3)) (ttt.text = "verno";) başka (ttt.text = "ne verno";))

Dersin kısa özeti:

Sembolün, nesneye uygulanan çeşitli dönüştürmeler (geometrik dönüştürmeler, renk ayarlamaları gibi) hakkında bilgi içeren bir dönüştürme özelliği vardır. Bir nesnenin rengini ayarlamakla ilişkili dönüştürmeleri uygulamak için colorTransform özelliğini kullanın.

Şahsen, bir arama siparişi vermek için yeni eklentimi oluştururken bu betiği kullandım. Bu palet, kullanıcının buton rengini ve sipariş formunu seçmesine yardımcı olur. Uzun zamandır seçiyorum istediğin senaryo ve bana gelince, bu en iyilerinden biri. Ayrıca dediğim gibi implantı kolaydır. Sonuç olarak elde ettiğiniz şeyin bir örneği aşağıdaki örnekte görülebilir. Degrade kutularında bir renk seçmek için imleci kullanın.

Böyle bir palet yapmak için 4 adım atmanız gerekir. İşaretleme ile sırayla başlayalım HTML... Paletin kendisini görmek istediğiniz yere eklemeniz gerekiyor.

Kimlikli ana ebeveyn bloğu - renk seçici... İçinde bulunan üç ana blok içerir. alt öğeler, paletimizin yapısını oluşturan. Bunları aşağıdaki resme göre sırayla parçalayalım.

1. kimlik bloğu seçici sarmalayıcı- bu ilk blok. Gölgesini seçmek için bir renk gradyanı olan bir kareyi görüntülemekten sorumludur. İçinde degradenin bulunduğu bir blok ve işaretçiden sorumlu bir blok var.
2. kimlik bloğu pcr-sarmalayıcı- ikinci blok, tüm renkleri degrade şeklinde gösteren bloktan sorumludur. İçeride eğimli bir blok ve yukarı ve aşağı hareket eden bir kaydırıcıyı gösteren bir blok var.
3. Kimlikli UL listesi renk değerleri- İçinde birkaç nokta var. İlk üçü, şemada numaralandırılmıştır - 3. Renk kodlarını üç biçimde gösterirler - RGB, HSV, HEX.
4. Resimdeki 4 numaralı blok, bir önceki listenin elemanlarından biridir. Bu son nokta. İçinde kimliği olan bir blok var pcr_bg... Bu blok, o anda seçili olan rengi verir.

İhtiyaçlarınıza bağlı olarak yer değiştirebilir, hatta ihtiyaç duyulmayan öğeleri kaldırabilirsiniz. Paletin kurulumunu tamamen bitirdiğimizde, onu daha ayrıntılı olarak anlayabilecek ve paletin bu veya bu öğesini nasıl değiştireceğinizi belirleyebileceksiniz.

Paleti ayarlamanın ikinci adımı stiller eklemektir. CSS... Bunları her zamanki gibi sitenizin veya bu renk paletini bağladığınız öğenin stil dosyasına eklersiniz.

# renk seçici (kenar boşluğu: 25 piksel otomatik; genişlik: 450 piksel;) # renk değerleri (ekran: blok; liste stili: yok; renk: # 222; kayan nokta: sol; kenar boşluğu: 0 0 0 15 piksel; dolgu: 5px; metin hizalama: sol;) #pcr_bg (yükseklik: 135px;) .picker-wrapper, .pcr-wrapper (konum: göreceli; kayan nokta: sol;) .picker-indicator, .pcr-indicator (konum: mutlak; sol: 0; üst: 0;) .picker, .pcr (imleç: artı işareti; kayan nokta: sol;) .cp-default .picker (genişlik: 200 piksel; yükseklik: 200 piksel;) .cp-varsayılan .pcr (genişlik: 30 piksel ; height : 200px;) .cp-default .pcr-wrapper (sol kenar boşluğu: 10px;) .cp-default .picker-indicator (genişlik: 5px; yükseklik: 5px; kenarlık: 2px katı koyu mavi; -moz-border- yarıçap: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: .5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opaklık = 50 )" ; filtre: progid: DXImageTransform.Microsoft.Alpha (Opaklık = 50); filtre: alfa (opaklık = 50); arka plan rengi: beyaz;) .cp-default .pcr-indicator (genişlik: %100; yükseklik: 10 piksel; sol t: -4 piksel; opaklık: .6; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opaklık = 60)"; filtre: progid: DXImageTransform.Microsoft.Alpha (Opaklık = 60); filtre: alfa (opaklık = 60); kenarlık: 4px düz açık mavi; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; sınır yarıçapı: 4 piksel; arka plan rengi: beyaz; )

CSS üzerine resim yapmayacağım. Dediğim gibi, yeni başlayan birinin bir palet oluşturması pek olası değildir, ancak CSS ile deneyimli bir palet aşinadır. Hangi parametrenin neyden sorumlu olduğunu anlayabileceğinizi düşünüyorum. Bir sonraki adıma geçelim.

Yapmanız gereken üçüncü nokta, renk paletinin kendisinin komut dosyasını içeren dosyayı bağlamaktır. Dosyanın kendisi bu makalenin kaynaklarıyla birlikte arşivde olacak. Aşağıdaki bağlantıyı kullanarak indirebilirsiniz.

dosya denir renk seçici.min.js... Paleti sitede görüntüleyecekseniz, sitenin üstbilgisine veya altbilgisine bağlayın. Bazı modüllerde, eklentilerde vb.yse, bu, komut dosyalarının geri kalanını eklediğiniz yerdir. Doğal olarak, dosyanın doğru yolunu sağlayın.

Pekala, son adım, palet değerlerinin çıktısını kontrol edecek bir komut dosyası bağlamak ve çalışmasına bu şekilde başlamaktır. Komut dosyasını HTML ile palet bloğundan hemen sonra eklemek en iyisidir.

Komut dosyasında özelleştirebileceğiniz birkaç şey var. Hadi onları parçalayalım. Değiştirilebilecekler 9. satırdan başlar.

• 9. satır - kimliği olan bloğa - altıgen, bir onaltılık renk değeri atanır. Yani, yukarıdaki resimde 3 numaradaki listede ilk satır. Böylece herhangi bir bloğa görüntülemek için bir renk kodu atayabilirsiniz.
• 10. satır - kimliği olan bloğa - rgb, rgb formatında bir değer atar. Her şey önceki noktaya benzer.
• 11. satır - kimliği olan bloğa - hsv, hsv formatında bir değer atar.
• 13. satır - kimlikli blok - pcr_bg, stil, onaltılık biçime karşılık gelen bir arka plan biçiminde atanır. Yani mevcut rengi gösteren kare. Benzer şekilde, örneğin belirli bir bloğun sitesinin arka planı vb. için paletteki rengi görüntüleyebilirsiniz.
• 15., son satır, varsayılan rengi ayarlar. Hex formatında kendinizinkini girebilirsiniz.

Bu aslında renk paletinin tüm bağlantısıdır. En başta söylediğim gibi, bu makale yeni başlayanlara yardımcı olmayabilir, daha deneyimli web yöneticileri için tasarlanmıştır. Umarım size yardımcı olur.

Hepsi bu, dikkatiniz için teşekkür ederim. 🙂

Özellikle sitenize yerleştirmeniz gerektiğinde bu bloğun çok faydalı olacağını düşünüyorum. Bu Renk Seçici bloğu Javascript kullanarak çalışır. O halde gelin birlikte sitenize nasıl ekleyeceğimize ve bu jQuery eklentisini bu kadar özel yapan şeyin ne olduğuna bir göz atalım.

Kodla çalışma

Her şeyden önce, Javascript'i bağlamamız gerekiyor ve CSS dosyası NS. CSS dosyasını düzenlemeyi ve resim yollarını (gerekirse) site temanıza uyacak şekilde düzeltmeyi unutmayın.

XHTML

Eklenti ayarları

Özel eklenti ayarları (isteğe bağlı).

• eventName - renk seçim fonksiyonunu çağırmak için istenen olay, varsayılan: "tıkla".
• renk - varsayılan renk. HEX rengi için dize veya RGB ve HSB için karma ((r: 255, r: 0, b: 0)), varsayılan: “FF0000 ″.
• düz - renk seçim bloğunu hemen veya yalnızca tıklandığında görüntüleyin, varsayılan değer yanlıştır.
• livePreview - varsayılan olarak doğru.
• onShow - Renk seçici gösterildiğinde geri arama işlevi tetiklenir.
• onBeforeShow - Geri arama işlevi, renk seçici gösterilmeden önce etkinleşir.
• onHide - Renk seçici gizlendiğinde geri arama işlevi tetiklenir.
• onChange - Renk değiştiğinde geri arama işlevi etkinleşir.
• onSubmit - bir renk seçtiğimizde geri arama işlevi tetiklenir.

Umarım bu eklentiyi beğenmişsinizdir. Size sitenizin başarısını ve gelişimini diliyorum!

Bu ders sizin için site ekibi tarafından hazırlanmıştır.
Eğitim kaynağı: http://www.eyecon.ro/colorpicker/
Çeviren: Vladislav Bondarenko