Dnes představujeme užitečný skript pro Adobe illustrator... Vytvořil jej talentovaný ukrajinský vývojář skriptů a doplňků pro Adobe Illustrator a můj přítel - Yaroslav Tabachkovsky (Yemz), který je také známý jako vývojář bezplatný plugin Mesh Tormentor. Skript RandomSwatchesFill náhodně vybarví vybrané objekty v barvách vybraných v paletě Vzorník.

Skript si můžete zdarma stáhnout kliknutím na tlačítko Stáhnout na začátku nebo na konci této recenze.

Vložme skript například do následující složky:

Pro Windows: C: \ Program Files \ Adobe \ Adobe Illustrator CS5 \ Presets \ en_GB \ Scripts

Pro Mac: Aplikace / Adobe \ Adobe Illustrator CS5 \ Presets \ en_GB \ Skripty

Jako příklad práce skriptu Random Swatches Fill si vezměme vektorové dílo skládající se z mnoha monochromatických objektů.

Objekty, na které bude skript aplikován, musí být seskupeny a vybrány. Bez odebrání výběru otevřete panel Vzorník. Pomocí klávesy Ctrl / Command vyberte z palety Vzorník barvy, které použijeme k malování objektů.

Použijte skript RandomSwatchesFill v nabídce Soubor> Skripty> RandomSwatchesFill. V důsledku toho získáme náhodně barevné objekty.

Tento skript lze použít jak na celou vektorovou práci, tak na několik objektů. Pomocí nástroje Laso (Q) vyberte několik objektů a pomocí klávesy Ctrl / Command vyberte barvy z palety Vzorník, ve které tyto objekty namalujeme.

V důsledku toho jsou některé vektorové práce vybarveny v náhodném pořadí s vybranými barvami.

Na panelu Vzorník můžete experimentovat s barvami, přechodovými výplněmi nebo vzory a uvidíte, jakých původních výsledků můžete dosáhnout. Za sebe chci poděkovat Yemzovi za tento scénář a doufám, že bude užitečný ve vaší každodenní kreativní práci a budete trávit méně času rutinními technickými problémy.

Název nic nevysvětluje, je to pravda. Je lepší se podívat na obrázek:

Jak vidíte, existují tři kroky: najít pozadí, kreslit na vektorové obrázky, spustit skript a získat přebarvené obrázky. Aby to fungovalo, potřebujete ilustrátor alespoň CS6 a myslím jakýkoli (testovaný na CS3) photoshop. Bez Photoshopu to nejde. Ano, a bude vyžadována větší trpělivost)

V jistém smyslu je tento skript skutečně pokusem vytvořit analogii funkcí, které se odehrály ve scénáristovi (Color Raster). Jen mějte na paměti, že jsem to viděl jen na obrázcích z oficiálních stránek a nikdy ne ve skutečné práci, a nevím, jak to vlastně fungovalo (kromě toho, že to bylo mnohem rychlejší) a jaké funkce to mělo. Udělal jsem přesně implementaci úkolu napsaného v názvu, ve formě, ve které jsem mu rozuměl, a používal jsem pouze vestavěné skriptovací schopnosti.

Nyní trochu podrobněji o každé fázi:
1. Pozadí - pozadí může být libovolné, rastrové nebo vektorové. Může to být buď pevná látka, nebo koláž čehokoli. Jediná důležitá věc je, že skript na pozadí vezme v úvahu vše, co leží na nejnižší vrstvě.

2. Budou přebarveny vektorové objekty. Ve skutečnosti mluvíme o uzavřených cestách, které tvoří jakékoli postavy. Sloučeniny jsem netestoval, myslím, že budou ignorovány. Tvary lze kombinovat do skupin, včetně víceúrovňových. Dají se zamaskovat (jen je třeba mít na paměti, že to, co je „skryto“ maskou, bude také překresleno, a to je čas, který je probrán níže). Cokoli leží na nejvyšší vrstvě, bude přebarveno. Vrstvy mezi první a poslední budou ignorovány.

3. Skript a jeho skutečná práce. Před spuštěním skriptu by měl být spuštěn Photoshop. V takovém případě jej skript spustí sám, ale bude to jen ztráta času navíc. Nemusíte nic vybírat, pokud je pozadí a objekty připravené a jsou ve svých vrstvách, spusťte a .. počkejte dlouho. Tady je muška v masti, tento proces je dlouhý. Nebudu se snažit omlouvat technickými detaily, problém je samozřejmě jednoduše v mém zakřivení. Tak či onak, zatím tomu tak je. Příklad toho, co je na obrázku v čepici, trval asi 10 minut a je v něm něco málo přes 400 šestiúhelníků. Tito. přibližně 1,5 sekundy na objekt. Pokud během procesu dojde k poruše, prodlouží se doba pro přelakování. Bezprostředně po spuštění skript odhadne, jak dlouho to bude trvat, a nahlásí to. Odmítnout (prozatím) ale již nebude možné.
Druhá moucha, ale pouze majiteli počítačů s Windows - váš proces bude vypadat, jako by ilustrátor zamrzl (napíše „nereaguje“). Photoshop pravděpodobně přemaluje pozadí pro přelakování) Abych však všemu špatně porozuměl nebo to jen předstíral, přidal jsem zvukovou indikaci - pípnutí systému po každém 10. přemalovaném objektu. Pokud uslyšíte toto pípnutí (zkontrolujte, zda je zapnutý zvuk), pak skript funguje, stačí počkat. Počítač sám nevisí, můžete otevřít prohlížeč)
A pěstitelé máku budou moci sledovat proces překreslování v reálném čase, objekt po objektu.

Ještě pár obecných slov:
Barva výplně není převzata z jednoho bodu, ale z průměru o něco menší než velikost ohraničujícího rámečku přemalovaného objektu.
Předměty k malování a pozadí nemusí být uvnitř kreslicího plátna, na tom nezáleží. Během běhu skriptu bude velikost kreslicího plátna upravena tak, aby odpovídala všemu viditelnému z pozadí a cílových objektů, a po dokončení se vrátí na své místo. Pokud tedy cílový objekt neleží na části pozadí a mimo kreslicí plátno, bude s největší pravděpodobností namalován bíle, pokud není mírně znečištěn blízkým pozadím kvůli zvláštnostem výběru střední barvy (bod výše) .

Níže uvedený odkaz je samotný skript a jednoduchý testovací případ. Je lepší začít s ním.
Odkaz:https://yadi.sk/d/aGnOBIkymiPbX
Beta testování skončilo, díky všem, kteří to vyzkoušeli!
S aktivními testery budeme pokračovat v zavedeném soukromém režimu.

Toto je beta verze, dojde k nějakému vylepšení a další funkce záleží na tom, zda někdo najde chyby a přijde s novými funkcemi)
Myšlenku scénáře mi dala art_of_sun, za což jí patří velký dík! Pokud má ještě někdo nějaké nápady - vítejte!

Je hračka užitečná? Už beze mě vyrobili různé pixilizéry, ale možná se to dá nějak zajímavěji použít? Nebo ne? Kdo si co myslí, ozvěte se)

objekt . Název tlačítka btn.cvet). Pojďme vytvořit skript pro klíčový snímek:

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet.addEventListener (MouseEvent.CLICK, f); funkce f (událost: MouseEvent): void (cvet.color = 0x0000ff; rol.transform.colorTransform = cvet)

Změny ve skriptu lze provést u následujících fragmentů zvýrazněných červeně: název videa (rolka), tlačítka (btn.cvet), proměnná (cvet), funkce (f) a hodnota barvy (0000ff) .

Pojďme analyzovat práci výše uvedeného skriptu:

• Film rolí (jako všechny symboly) má vlastnost transformace, která obsahuje informace o různé transformace aplikované na objekt (například geometrické transformace, úpravy barev). Chcete -li použít transformace spojené s nastavením barvy objektu, použijte vlastnost colorTransform.
• Nově vytvořená proměnná cvet získá hodnotu vlastností rolí spojených s nastavením barev.
• Změníme hodnotu barvy vlastnosti color na novou:

  0000ff-hexadecimální barevná reprezentace ve formátu RGB: červená, zelená a modrá barva jsou v hexadecimálním kódu specifikována jako dvouciferná čísla (v hexadecimálním kódu jsou použita arabská čísla 0-9 a latinská písmena a, b, c, d, e , f, působící jako analogie čísel 10, 11, 12, 13, 14 a 15). Konečnou barvu předmětu získáme smícháním tří barev v uvedených poměrech.

• Aktualizujte vlastnost colorTransform objektu rol (proveďte opravu barev).

Praktická práce č. 1

Vytvořme video na scéně (objekt pro vybarvování - pojmenovaný rol) a 2 tlačítka (btn.cvet1 a btn.cvet2), symbolizující 2 barvy v paletě barev. Stisknutím každého tlačítka se vybarví video barvou přiřazenou tlačítku. Vzhled tlačítka by měla mluvit o svém účelu (například barva tlačítek odpovídá barvě malovaného objektu).

Ve skriptu budete muset vytvořit proměnnou pro čtení barvy objektu a nastavit pro něj jednu ze dvou barev, v závislosti na stisknutém tlačítku:

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet1.addEventListener (MouseEvent.CLICK, f1); funkce f1 (událost: MouseEvent): void (cvet.color = 0x0000ff; rol.transform.colorTransform = cvet;) btn.cvet2.addEventListener (MouseEvent.CLICK, f2); funkce f2 (událost: MouseEvent): void (cvet.color = 0x00ff00; rol.transform.colorTransform = cvet;)

Praktická práce č. 2

Vytvoříme 2 tlačítka na jevišti (objekty pro vybarvování - pojmenované rol1, rol2) a 2 tlačítka (symbolizující 2 barvy v paletě barev - pojmenované btn.cvet1 a btn.cvet2). Stisknutím tlačítka palety barev - výběr barvy; kliknutím na tlačítka-objekty pro vybarvování dojde k jejich vybarvení dříve zvolenou barvou. Vzhled tlačítek na paletě barev by měl naznačovat jejich účel.

Chcete -li namalovat objekt, musíte provést 2 kroky:

• vyberte barvu;
• vyberte objekt, který chcete malovat ve vybrané barvě.

  var cvet: ColorTransform = rol1.transform.colorTransform; btn.cvet1.addEventListener (MouseEvent.CLICK, f1); funkce f1 (událost: MouseEvent): void (cvet.color = 0x0000ff;) btn.cvet2.addEventListener (MouseEvent.CLICK, f2); funkce f2 (událost: MouseEvent): void (cvet.color = 0x00ff00;) rol1.addEventListener (MouseEvent.CLICK, f3); funkce f3 (událost: MouseEvent): void (rol1.transform.colorTransform = cvet;) rol2.addEventListener (MouseEvent.CLICK, f4); funkce f4 (událost: MouseEvent): void (rol2.transform.colorTransform = cvet;)

Zbarvení objektů bez analýzy barvy různých objektů zpravidla nedává smysl. Při vytváření aplikace, která jako nástroj pro výběr používá vybarvení objektu tohoto objektu, je nutné analyzovat barvy přijaté objekty v procesu práce. Existuje software analyzovat barvu objektu.

Budeme uvažovat o příkladu úlohy, ve které je barevná analýza prováděna „zapamatováním“ vybrané barvy pro vybarvování postavy (a nikoli „analýzou“ barvy již namalované figury).

Řekněme, že potřebujete označit čtverce, trojúhelníky a kosočtverce ze sady geometrických tvarů: malovat čtverce jednou barvou, trojúhelníky jinou atd.

Rýže. 22.1. Rozhraní aplikace pro analýzu barev

Skript deklaruje proměnné jakoČíslo:

• c (pro ukládání informací o vybrané barvě),
• fla.1, fla.2, fla.3 (pro ukládání informací o přijaté barvě každým kruhem).

Na pódium je umístěno tlačítko „Zkontrolovat“ (jeho název je pr) a dynamické textové pole (ttt), které zobrazuje informace o správné / nesprávné barvě kruhů.

V případě správného vybarvení všech tvarů (logický výraz v příkazu větvení bude pravdivý, až budou všechny tři jednoduché logické výrazy- první a (&&) druhé a (&&) třetí) na vlastnost textu dynamické Textové pole ttt má přiřazenu hodnotu „verno“, jinak - „ne verno“:

… Pr.addEventListener (MouseEvent.CLICK, f7); funkce f7 (událost: MouseEvent): void (if ((fla.1 == 1) && (fla.2 == 2) && (fla.3 == 3)) (ttt.text = "verno";) else (ttt.text = "ne verno";))

Stručné shrnutí přednášky:

Symbol má vlastnost transformace, která obsahuje informace o různých transformacích aplikovaných na objekt (například geometrické transformace, úpravy barev). Chcete -li použít transformace spojené s nastavením barvy objektu, použijte vlastnost colorTransform.

Osobně jsem tento skript použil při vytváření svého nového pluginu pro objednání hovoru. Tato paleta pomáhá uživateli vybrat barvu tlačítka a objednávkového formuláře. Vybíral jsem dlouho požadovaný skript a pokud jde o mě, je to jeden z nejlepších. Kromě toho, jak jsem řekl, je snadné implantovat. Příklad toho, co získáte jako výsledek, můžete vidět v níže uvedeném příkladu. Pomocí kurzoru vyberte barvu v polích přechodu.

Chcete -li vytvořit takovou paletu, musíte udělat 4 kroky. Začněme v pořadí značením Html... Musíte ji přidat tam, kde chcete vidět samotnou paletu.

Hlavní rodičovský blok s ID - výběr barvy... Obsahuje tři hlavní bloky, které uvnitř mají podřízené prvky, což vytváří strukturu naší palety. Pojďme je rozebrat v pořadí vzhledem k obrázku níže.

1. ID blok sběrač-obal- toto je první blok. Odpovědný za zobrazení čtverce s přechodem jedné barvy za výběr jeho odstínu. Uvnitř je blok se samotným přechodem a blok, který je zodpovědný za ukazatel.
2. ID blok pcr-obal- druhý blok je zodpovědný za blok, který zobrazuje všechny barvy ve formě přechodu. Uvnitř je blok s přechodem a blok, který zobrazuje posuvník, který se pohybuje nahoru a dolů.
3. Seznam UL s ID barevné hodnoty- Uvnitř je několik bodů. První tři jsou v diagramu očíslovaní - 3. Zobrazují barevné kódy ve třech formátech - RGB, HSV, HEX.
4. Blok na obrázku, který je očíslován 4, je jedním z prvků předchozího seznamu. Toto je poslední bod. Uvnitř je blok s ID pcr_bg... Tento blok vydá aktuálně vybranou barvu.

V závislosti na svých potřebách můžete změnit místa nebo dokonce odstranit ty prvky, které nejsou potřeba. Když jsme s instalací palety úplně hotovi, budete na to moci přijít sami podrobněji a určit, jak změnit ten či onen prvek palety.

Druhým krokem při nastavování palety je přidání stylů CSS... Přidáte je, jako obvykle, do souboru stylu vašeho webu nebo prvku, ke kterému připojíte tuto paletu barev.

# color-picker (margin: 25px auto; width: 450px;) # color-values ​​(display: block; list-style: none; color: # 222; float: left; margin: 0 0 0 15px; padding: 5px; zarovnání textu: vlevo;) #pcr_bg (výška: 135px;) .picker-wrapper, .pcr-wrapper (pozice: relativní; float: vlevo;) .picker-indikátor, .pcr-indikátor (pozice: absolutní; left: 0; top: 0;) .picker, .pcr (cursor: nitkový kříž; float: left;) .cp-default .picker (width: 200px; height: 200px;) .cp-default .pcr (width: 30px ; výška: 200px;) .cp-default .pcr-wrapper (margin-left: 10px;) .cp-default .picker-indicator (width: 5px; height: 5px; border: 2px solid darkblue; -moz-border- radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: .5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50 ) "; filtr: progid: DXImageTransform.Microsoft.Alpha (Opacity = 50); filtr: alpha (opacity = 50); barva pozadí: bílá;) .cp-default .pcr-indikátor (šířka: 100%; výška: 10px; vlevo t: -4px; krytí: 0,6; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 60)"; filtr: progid: DXImageTransform.Microsoft.Alpha (Opacity = 60); filtr: alfa (opacita = 60); ohraničení: 4px pevná světelná modř; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; poloměr ohraničení: 4px; barva pozadí: bílá; )

Na CSS nebudu malovat. Jak jsem řekl, paletu pravděpodobně nenastaví začátečník, ale zkušená s CSS je známá. Myslím, že můžete zjistit, který parametr je za co zodpovědný. Přejděme k dalšímu kroku.

Třetím bodem, který musíte udělat, je připojit soubor, který obsahuje skript samotné palety barev. Samotný soubor bude v archivu se zdroji tohoto článku. Můžete si jej stáhnout pomocí níže uvedeného odkazu.

Soubor se nazývá colorpicker.min.js... Pokud ji na webu zobrazíte, připojte ji v záhlaví nebo v zápatí webu. Pokud v nějakém modulu, pluginu atd., Pak sem zahrnete zbytek skriptů. Přirozeně zadejte správnou cestu k souboru.

Posledním krokem je připojit skript, který bude řídit výstup hodnot palety, a začít pracovat jako takový. Nejlepší je zahrnout skript hned za blok palety s HTML.

Ve skriptu lze upravit několik věcí. Pojďme je rozebrat. Co lze změnit, začíná od 9. řádku.

• 9. řádek - do bloku s ID - hex, je přiřazena hodnota hexadecimální barvy. Tedy v seznamu, který je na obrázku výše u čísla 3, první řádek. K jakémukoli bloku tedy můžete přiřadit barevný kód a zobrazit jej.
• 10. řádek - do bloku s ID - rgb, přiřadí hodnotu ve formátu rgb. Všechno je podobné předchozímu bodu.
• 11. řádek - do bloku s ID - hsv, přiřadí hodnotu ve formátu hsv.
• 13. řádek - blok s ID - pcr_bg, styl je přiřazen ve formě pozadí, které odpovídá hexadecimálnímu formátu. Myslím čtverec, který ukazuje aktuální barvu. Podobným způsobem můžete zobrazit barvu z palety, například pro pozadí webu určitého bloku atd.
• 15., poslední řádek, nastavuje výchozí barvu. Můžete zadat svůj vlastní, v hexadecimálním formátu.

To je v podstatě celé spojení palety barev. Jak jsem řekl na samém začátku, tento článek nemusí začátečníkovi pomoci, je určen pro zkušenější webmastery. Doufám, že vám to pomůže.

To je vše, děkuji za pozornost. 🙂

Myslím, že tento blok bude velmi užitečný, zejména pro případy, kdy jej potřebujete vložit na svůj web. Tento blok Výběr barvy funguje pomocí Javascriptu. Pojďme se tedy podívat, jak jej přidat na váš web a čím je tento plugin jQuery tak výjimečný.

Práce s kódem

Nejprve musíme propojit Javascript a Soubor CSS NS. Nezapomeňte upravit soubor CSS a opravit cesty obrázků (je -li to nutné), aby odpovídaly motivu vašeho webu.

XHTML

Nastavení pluginu

Vlastní nastavení pluginu (volitelně).

• eventName - požadovaná událost pro volání funkce výběru barev, výchozí: „kliknutí“.
• barva - výchozí barva. Řetězec pro barvu HEX nebo hash pro RGB a HSB ((r: 255, r: 0, b: 0)), výchozí: „FF0000 ″.
• plochý - zobrazí blok výběru barvy okamžitě nebo pouze po kliknutí, výchozí hodnota je false.
• livePreview - ve výchozím nastavení true.
• onShow - Funkce zpětného volání se spustí, když je zobrazen výběr barvy.
• onBeforeShow - Funkce zpětného volání se spustí dříve, než se zobrazí výběr barvy.
• onHide - Funkce zpětného volání se spustí, když je skrytý výběr barev.
• onChange - Funkce zpětného volání se spustí při změně barvy.
• onSubmit - funkce zpětného volání se spustí, když vybereme barvu.

Doufám, že se vám tento plugin líbil. Přeji vám úspěch a rozvoj vašich stránek!

Tuto lekci pro vás připravil tým webu
Zdroj tutoriálu: http://www.eyecon.ro/colorpicker/
Přeložil: Vladislav Bondarenko