Hari ini kami menyajikan skrip yang bermanfaat untuk Adobe Illustrator.. Itu diciptakan oleh pengembang skrip dan plug-in Ukraina berbakat untuk Adobe Illustrator dan teman saya - Yaroslav Tabachkovsky (YEMZ), yang juga dikenal sebagai pengembang dari plugin Thirmentor jala gratis. Script acakswatchesfill dalam urutan acak cat objek yang dipilih dalam warna yang dipilih dalam palet swatch.

Anda dapat mengunduh skrip unduhan secara gratis pada tombol unduh di awal atau akhir ulasan ini.

Mari kita letakkan skrip ke folder berikut, misalnya:

Untuk Windows: C: \\ Program Files \\ Adobe \\ Adobe Illustrator CS5 \\ Presets \\ En_gb \\ Scripts

Untuk Mac: Aplikasi / Adobe \\ Adobe Illustrator CS5 \\ Presets \\ En_GB \\ Scripts

Sebagai contoh dari skrip isi Swatch acak, ambil karya vektor yang terdiri dari berbagai objek monofonik.

Saya menarik perhatian Anda pada apa objek yang akan diterapkan skrip harus dibatalkan dan disorot. Tanpa menghapus pemilihan, buka panel swatch. Menggunakan tombol Ctrl / Command, pilih warna swatch dari palet Swatches untuk digunakan untuk mewarnai objek.

Kami menggunakan skrip randomswatchesfill, yang Anda buka file\u003e Scripts\u003e RandomSchesPill. Akibatnya, kita mendapatkan benda berwarna dicat dalam urutan acak.

Script ini dapat diterapkan baik ke seluruh pekerjaan vektor dan ke beberapa objek. Menggunakan alat lasso tool (Q), pilih beberapa objek dan menggunakan tombol Ctrl / perintah, pilih warna dari palet swatch di mana kita akan melukis objek.

Akibatnya, bagian dari pekerjaan vektor dicat dalam urutan acak warna yang dipilih.

Anda dapat bereksperimen dengan warna, gradien isian atau pola di panel swatch dan lihat hasil aslinya yang dapat dicapai. Saya pribadi ingin mengucapkan terima kasih kepada Yemz untuk skrip ini dan berharap itu akan berguna dalam pekerjaan kreatif sehari-hari Anda dan Anda akan membayar lebih sedikit waktu untuk masalah teknis rutin.

Nama itu tidak menjelaskan apa-apa, itu benar. Lebih baik melihat ke dalam gambar:

Seperti yang dapat dilihat, itu tersirat tiga langkah: Temukan latar belakang apa pun, gambar di atas angka vektor, mulailah skrip dan dapatkan angka dicat ulang. Untuk memastikan bahwa ia membutuhkan ilustrator tidak lebih rendah dari CS6 dan saya pikir (diverifikasi pada CS3) Photoshop. Tanpa photoshop itu tidak akan berhasil. Ya, dan masih kesabaran akan diperlukan)

Dalam arti tertentu, skrip ini benar-benar merupakan upaya untuk membuat analog dari fungsionalitas dalam scripter (raster warna). Kami hanya perlu mengingatnya bahwa saya hanya melihatnya dalam gambar dari situs resmi dan tidak pernah dalam pekerjaan nyata, dan saya tidak tahu bagaimana dia benar-benar bekerja (kecuali itu jauh lebih cepat) dan apa yang dimiliki peluang. Apa yang saya lakukan adalah dengan tepat implementasi tugas yang direkam dalam judul, dalam bentuk di mana saya dapat memahaminya, dan hanya menggunakan kemampuan scripting bawaan.

Sekarang sedikit lebih banyak tentang setiap tahap:
1. Latar belakang - latar belakang dapat berupa apa saja, raster atau vektor. Itu bisa sama-sama padat dan menjadi kolase apa pun. Hanya penting bahwa skrip script akan mempertimbangkan semua yang ada di lapisan terendah.

2. Objek vektor - inilah yang akan dicat ulang. Intinya, kita berbicara tentang jalur tertutup membentuk bentuk apa pun. Senyawa tidak memeriksa, saya pikir mereka akan diabaikan. Angka dapat digabungkan menjadi beberapa kelompok, termasuk multi-tiered. Dapat ditutup (perlu hanya untuk mengatasi pikiran bahwa itu akan dicat ulang dan fakta bahwa masker "tersembunyi", dan ini adalah waktu, tentang yang lebih rendah). Kerepotan akan menjadi apa yang ada di lapisan paling atas. Lapisan antara yang pertama dan yang terakhir akan diabaikan.

3. Script dan sebenarnya pekerjaannya. Photoshop harus diluncurkan sebelum skrip diluncurkan. Dalam hal ini, skrip akan menjalankannya sendiri, tetapi hanya saatnya yang berlebihan. Tidak perlu mengalokasikan apa pun jika latar belakang dan objek siap dan berbaring di peluncuran layer Anda dan .. menunggu lama. Ini sendok tar, proses ini panjang. Saya tidak akan mencoba menghalangi detail teknis, masalahnya tentu saja hanya dalam kruellement saya. Salah satu atau lain cara, kasing persisnya. Contoh dari apa yang ada dalam gambar di header dibuat sekitar 10 menit, dan di dalamnya sedikit lebih dari 400 hexagons. Itu. Sekitar 1,5 detik ke objek. Jika ada kegagalan dalam proses, waktu meningkat untuk pengecatan ulang. Segera setelah peluncuran, skrip akan melampirkan berapa banyak waktu yang diperlukan dan dilaporkan. Tetapi tidak mungkin untuk menolak (sejauh ini).
Sendok kedua terbang, tetapi hanya pemilik komputer Windows - proses Anda akan terlihat seperti ilustrator yang melayang-layang (saya akan menulis "tidak menjawab"). Photoshop mungkin akan membekukan latar belakang untuk mencetak kembali) tetapi untuk memahami semuanya dengan buruk atau hanya berpura-pura, saya menambahkan tampilan suara - biip sistemik setelah setiap 10 objek dicat ulang. Jika Anda mendengar bip ini (apakah suara dihidupkan), maka skrip berfungsi, Anda hanya perlu menunggu. Sebenarnya, komputer tidak menggantung, Anda dapat membuka browser)
Dan Makovoda akan dapat mengamati proses pengecatan ulang, objek di belakang objek.

Beberapa kata yang lebih umum:
Warna untuk pengisian tidak diambil dari satu titik, tetapi bagian tengah ukuran ukurannya sedikit lebih kecil dari ukuran kotak bounding dari objek yang dicat ulang.
Objek untuk pengecatan ulang dan latar belakang tidak harus terletak di artbed, itu tidak masalah. Selama operasi skrip, ukuran artboard akan disesuaikan untuk semua latar belakang yang terlihat dan objek target, dan setelah selesai, dikembalikan ke lokasi. Oleh karena itu, jika objek target tidak pada latar belakang latar belakang, dan di luar artboratory - kemungkinan besar dicat putih, kecuali bahwa itu akan sedikit mencemari latar belakang dekat karena fitur pemilihan warna tengah (item atas).

Setelah referensi di bawah skrip itu sendiri dan contoh tes sederhana. Lebih baik untuk memulai dengannya.
Tautan:https://yadi.sk/d/agnobikymipbx.
Pengujian beta selesai, terima kasih kepada semua orang yang mencoba!
Dengan penguji aktif, kami akan melanjutkan dalam mode yang berlaku.

Ini adalah versi beta, apakah akan ada perbaikan dan fitur tambahan Tergantung pada apakah ada yang akan menemukan bug dan akan muncul dengan fitur-fitur baru)
Gagasan skrip memberi saya art_of_sun, yang sangat dia ucapkan terima kasih! Jika orang lain memiliki ide - selamat datang!

Apakah ini mainan yang berguna? Murid-murid yang berbeda dan tanpa saya sudah melakukannya, tetapi mungkin itu bisa entah bagaimana lebih menarik untuk digunakan? Atau tidak? Siapa yang berpikir apa yang bersaing)

Sebuah Objek . Nama tombol btn.cvet). Untuk bingkai kunci, buat skrip:

var cvet: colorformform.colortransform; btn.cvet.addeventlistener (mouseevent.click, f); Fungsi f (Acara: MouseEvent): Void (CVET.Color \u003d 0x0000ff; ROL.Transform.colortransform \u003d CVET)

Perubahan skrip dapat dilakukan pada fragmen berikut yang diisolasi dalam warna merah: atas nama roller (rol), tombol (btn.cvet), variabel (CVET), fungsi (F) dan dalam nilai warna (0000FF).

Kami akan menganalisis pekerjaan skrip di atas:

• Roller rol (serta semua karakter) memiliki properti transformasi yang berisi informasi tentang transformasi berbeda.berlaku untuk objek (seperti konversi geometris, pengaturan warna). Untuk menerapkan konversi yang terkait dengan tugas warna objek, properti ColorTransForm digunakan.
• Dibuat variabel CVET baru menerima nilai properti Rol Roller yang terkait dengan pengaturan warna.
• Kami mengubah nilai warna properti warna untuk yang baru:

  0000FF - presentasi heksadesimal warna dalam format RGB: warna merah, hijau dan biru diatur dalam bentuk angka dua digit dalam kode heksadesimal (dalam kode 16-tirik Gambar Arab 0-9, dan huruf Latin a, b, b, b, c , D, E, F digunakan menonjol analog angka 10, 11, 12, 13, 14 dan 15). Warna hasil objek diperoleh dengan mencampur tiga warna dalam proporsi yang ditentukan.

• Kami memperbarui properti ColorTransForm dari objek ROL (menghasilkan koreksi warna).

Pekerjaan praktis nomor 1

Buat roller pada tahap (objek untuk pewarnaan - dengan nama ROL) dan 2 tombol (btn.cvet1 dan btn.cvet2), melambangkan 2 warna dalam palet warna. Menekan setiap tombol noda roller dalam warna tetap dengan tombol. Penampilan Tombol harus berbicara tentang tugas mereka (katakanlah, warna tombol sesuai dengan warna objek yang dicat).

Dalam skrip, Anda harus membuat variabel untuk membaca warna objek dan pekerjaan untuk itu untuk itu satu dari dua warna, tergantung pada tombol ditekan:

var cvet: colorformform.colortransform; btn.cvet1.addeventlistener (mouseevent.click, f1); Fungsi F1 (Acara: MouseEvent): Void (CVET.Color \u003d 0x0000ff; rol.transform.colortransform \u003d CVET;) btn.cvet2.addeventlistener (mouseevent.click, f2); Fungsi F2 (Acara: MouseEvent): Void (Cvet.Color \u003d 0x00ff00; roll.transform.colortransformform \u003d CVET;)

Pekerjaan praktis nomor 2.

Buat 2 tombol di atas panggung (objek untuk pewarnaan - dengan nama ROL1, ROL2) dan 2 tombol (melambangkan 2 warna dalam palet warna - dengan nama btn.cvet1 dan btn.cvet2). Menekan tombol palet warna - pilih warna; Menekan tombol objek untuk pewarnaan mengarah untuk menodai mereka dalam warna sebelumnya yang dipilih. Penampilan tombol palet warna harus berbicara tentang tujuan mereka.

Untuk melakukan objek, Anda harus melakukan 2 langkah:

• pilih warna;
• pilih objek yang akan dicat dalam warna yang dipilih.

  var cvet: colorstransformform.coltransform; btn.cvet1.addeventlistener (mouseevent.click, f1); Fungsi F1 (Acara: MouseEvent): Void (CVET.COLOR \u003d 0x0000FF;) btn.cvet2.addeventlistener (mouseevent.click, f2); Fungsi f2 (acara: mouseevent): void (cvet.color \u003d 0x00ff00;) rol1.addeventlistener (mouseevent.click, f3); Fungsi F3 (Acara: MouseEvent): Void (rol1.transform.colortransform \u003d CVET;) rol2.addeventlistener (mouseevent.click, f4); Fungsi F4 (Acara: MouseEvent): Void (rol2.transform.colortransform \u003d CVET;)

Benda-benda mewarnai tanpa menganalisis warna berbagai objek, sebagai aturan, tidak masuk akal. Saat membuat aplikasi di mana pewarnaan objek digunakan sebagai alat seleksi objek ini, Perlu untuk menganalisis warna yang diperoleh dengan objek selama operasi. Ada perangkat lunak Analisis warna objek.

Kami akan mempertimbangkan contoh pekerjaan di mana analisis warna dibuat dengan "menghafal" warna yang dipilih untuk warna gambar (dan bukan oleh "analisis" warna dari angka yang sudah dicat).

Misalkan perlu untuk menandai kotak, segitiga dan ganja dari serangkaian angka geometris sebagai berikut: untuk melukis kotak dalam satu warna, segitiga berbeda, dll.

Ara. 22.1.Antarmuka Aplikasi "Analisis Warna"

Script diumumkan tipe variabel. Jumlah:

• c (untuk menyimpan informasi tentang warna yang dipilih),
• fla.1, fla.2, fla.3 (untuk menyimpan informasi tentang warna yang dihasilkan oleh setiap lingkaran).

Tombol "periksa" ditempatkan pada adegan dan bidang teks dinamis (TTT) di mana informasi tentang warna lingkaran yang benar / salah ditampilkan.

Dalam hal warna yang benar dari semua angka (ekspresi logis di tim cabang akan benar ketika kebenaran semuanya sederhana ekspresi logika. - pertama dan (&&) detik dan (&&) ketiga) Dinamis Properti Teks) bidang teks TTT ditugaskan ke "Verno", jika tidak - "NE VERNO":

... pr.AddeventListener (Mouseevent.Klik, F7); Fungsi F7 (Acara: MousEevent): Void (if ((((fla.1 \u003d\u003d 1) && (fla.2 \u003d\u003d 2) && (fla.3 \u003d\u003d 3)) (ttt.text \u003d "verno";) (ttt.text \u003d "ne verno";))

Kuliah singkat:

Simbol memiliki properti transformasi yang berisi informasi tentang berbagai transformasi yang diterapkan pada objek (seperti konversi geometris, pengaturan warna). Untuk menerapkan konversi yang terkait dengan tugas warna objek, properti ColorTransForm digunakan.

Secara pribadi, saya menerapkan skrip ini saat membuat plugin baru Anda untuk memesan panggilan. Palet ini membantu pengguna memilih warna tombol dan formulir pemesanan. Untuk waktu yang lama saya mengambil skrip yang diinginkan Dan untuk saya, ini adalah salah satu yang terbaik. Selain itu, dia, seperti yang saya katakan, mudah ditanamkan. Contoh dari apa yang akan terjadi dari Anda sebagai hasilnya dapat dilihat pada contoh di bawah ini. Pilih kursor warna pada bidang gradien.

Untuk membuat palet seperti itu, Anda perlu membuat 4 langkah. Mari kita mulai dengan markup Html.. Anda perlu menambahkannya ke tempat Anda ingin melihat palet itu sendiri.

Blok induk utama dengan iidi - pemilih warna.. Itu menyimpulkan tiga blok utama, yang di dalamnya memiliki anak perusahaan yang menciptakan struktur palet kami. Mari kita analisis mereka secara berurutan mengenai gambar di bawah ini.

1. Blok dengan IDI. picker-Wrapper. - Ini adalah blok pertama. Bertanggung jawab atas output kuadrat dengan gradien dengan warna yang sama untuk memilih naungannya. Di dalamnya, blok dengan gradien itu sendiri dan blok yang bertanggung jawab untuk pointer.
2. Blok dengan IDI. pcr-wrapper. - Blok kedua bertanggung jawab untuk blok, yang menampilkan semua warna dalam bentuk gradien. Di dalam blok dengan gradien dan blok, yang menampilkan slider yang bergerak ke bawah.
3. Daftar UL dengan iidi nilai warna. - Ada beberapa item di dalamnya. Tiga pertama, dalam diagram mereka diberi nomor - 3. Mereka membawa kode bunga dalam tiga format - RGB, HSV, hex.
4. Blok dalam gambar adalah bahwa pada angka 4, ini adalah salah satu elemen dari daftar sebelumnya. Ini adalah item LI terakhir. Di dalamnya blok dengan iidi pCR_BG.. Unit ini menampilkan warna yang dipilih saat ini.

Anda dapat, tergantung pada kebutuhan Anda, mengubah tempat atau untuk menghapus elemen-elemen yang tidak diperlukan. Ketika sepenuhnya lengkap dengan instalasi palet, maka Anda dapat mengetahui sendiri lebih detail dan menentukan cara mengubah satu atau elemen lain dari palet.

Langkah kedua dalam menginstal palet akan menambahkan gaya CSS.. Anda menambahkannya, seperti biasa dalam file gaya situs Anda, well, atau item yang Anda hubungkan palet warna ini.

# Color-picker (margin: 25px otomatis; lebar: 450px;) # nilai-warna (tampilan: blok; gaya daftar: tidak ada; warna: # 222; float: kiri; 0 0 0 15px; 5px; teks-align: kiri;) #pcr_bg (tinggi: 135px;) .pick-wrapper, .pcr-wrapper (Posisi: relatif; float: kiri;). Indikator-indikator; Kiri: 0; TOP: 0;) .pick, .pcr (kursor: crosshair; float: kiri;) .cp-default .pick (lebar: 200px; tinggi:) .cp-default .pcr (lebar: 30px) ; Tinggi: 200px;) .cp-default .pcr-wrapper (margin-left: 10px;) .cp-default RADIUS: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: -ms-filter: "progid: dximageThaf.microsoft.alpha (opacity \u003d 50) ) "; Filter: progid: dximageetransform.microsoft.alpha (opacity \u003d 50); filter: alpha (opacity \u003d 50); latar belakang-warna: putih;) .cp-default .pcr-indikator (lebar: 100%; 10px; lef. T: -4px; Opacity: .6; -Ms-filter: "progid: dximageetransform.microsoft.alpha (Opacity \u003d 60)"; Filter: progid: dximageetransform.microsoft.alpha (Opacity \u003d 60); Filter: Alpha (Opacity \u003d 60); Perbatasan: 4px lightblue solid; -MOZ-BORDER-RADIUS: 4PX; -O-perbatasan radius: 4px; -WebKit-Border-Radius: 4px; BORDER-RADIUS: 4PX; Latar Belakang - Warna: Putih; )

Saya tidak akan melukis dalam CSS. Seperti yang dia katakan, palet itu tidak mungkin memulai pemula, dan yang berpengalaman dengan CSS sudah terbiasa. Saya pikir Anda akan berurusan dengan parameter apa untuk apa yang bertanggung jawab. Pergi ke langkah berikutnya.

Poin ketiga yang harus Anda lakukan adalah menghubungkan file, yang berisi skrip palet warna itu sendiri. File itu sendiri akan berada di arsip dengan kode sumber artikel ini. Anda dapat mengunduhnya, dengan referensi di bawah ini.

File ini dipanggil colorpicker.min.js.. Hubungkan di header atau di ruang bawah tanah situs, jika Anda menampilkan palet di situs. Jika dalam modul, plugin, dll, lalu di mana Anda menghubungkan skrip yang tersisa. Secara alami, tentukan jalur yang benar ke file.

Nah, langkah terakhir adalah menghubungkan skrip yang akan mengelola output dari nilai-nilai lattern, well, itu akan meluncurkan pekerjaannya seperti itu. Script paling baik terhubung segera setelah blok palet dengan HTML.

Beberapa saat dapat dikonfigurasi dalam skrip. Mari kita heran mereka. Apa yang dapat diubah dimulai dengan baris ke-9.

• Baris ke-9 - Blok dengan iidi - hex.Nilai warna dalam format hex ditugaskan. Yang Anda maksud dalam daftar yang pada gambar di atas pada nomor 3, baris pertama. Dengan demikian, Anda dapat menetapkan kode warna ke blok apa pun untuk outputnya.
• Baris 10 - blok dengan iidi - rGB.menetapkan nilai dalam format RGB. Semua mirip dengan titik sebelumnya.
• Baris ke-11 - blok dengan iidi - hSV., menetapkan nilai dalam format HSV.
• Line 13 - Blok dengan iidi - pCR_BG.Gaya ditugaskan, dalam bentuk latar belakang format hex yang sesuai. Yang Anda maksud, alun-alun, yang menunjukkan warna saat ini. Demikian pula, Anda dapat menarik warna dari palet, misalnya, untuk latar belakang situs blok tertentu dan sebagainya.
• 15, baris terakhir, menetapkan warna default. Anda dapat menentukan format Anda sendiri, dalam format hex.

Ini pada dasarnya semua koneksi palet warna. Seperti yang dia katakan pada awalnya, pendatang baru mungkin tidak membantu, itu dirancang untuk webmaster yang lebih berpengalaman. Saya harap dia akan membantu Anda.

Itu saja, terima kasih atas perhatiannya. 🙂.

Blok ini berpikir akan sangat berguna, terutama untuk kasus-kasus ketika Anda perlu membangunnya di situs Anda. Unit pemilih warna ini bekerja dengan JavaScript. Jadi mari kita lihat cara menambahkannya ke situs dan plugin jQuery yang patut diperhatikan.

Bekerja dengan kode

Pertama-tama, kita perlu menghubungkan JavaScript dan File CSS.s. Jangan lupa untuk mengedit file CSS dan memperbaiki jalur ke gambar (jika perlu), sesuai dengan topik situs Anda.

Xhtml.

Plugin pengaturan

Pengaturan plug-in khusus (opsional).

• eventName - Acara yang diinginkan, untuk memanggil fungsi pemilihan warna, secara default: Klik ".
• warna - warna default. String untuk warna hex atau hash untuk RGB dan HSB ((R: 255, R: 0, B: 0)), default: "FF0000".
• flat - Tampilkan unit pemilihan warna segera atau hanya klik, nilai default salah.
• livePreview - secara default benar.
• onshow - Fungsi panggilan balik dipicu ketika unit pemilihan warna ditampilkan.
• onbeforeshow - fungsi panggilan balik bekerja sebelum unit pemilihan warna ditampilkan.
• dihide - fungsi panggilan balik dipicu ketika unit pemilihan warna disembunyikan.
• onchange - fungsi panggilan balik dipicu ketika warna berubah.
• onsubmit - fungsi panggilan balik dipicu saat memilih warna.

Saya harap Anda menyukai plugin ini. Saya berharap Anda sukses dan pengembangan ke situs Anda!

Pelajaran ini disiapkan untuk Anda oleh tim situs.
Sumber Sumber: http://www.eyecon.ro/colorpicker/
Diterjemahkan: Vladislav Bondarenko