Today we present a useful script for Adobe Illustrator. It was created by a talented Ukrainian developer of scripts and plug-ins for Adobe Illustrator and my friend - Yaroslav Tabachkovsky (Yemz), who is also known as a developer free plugin Mesh Tormentor. The RandomSwatchesFill script randomly paints selected objects with the colors selected in the Swatches palette.

You can download the script for free by clicking on the Download button at the beginning or end of this review.

Let's place the script in the following folder, for example:

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

For Mac: Applications / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

For an example of the work of the Random Swatches Fill script, let's take a vector work consisting of many one-color objects.

I draw your attention to the fact that the objects to which the script will be applied must be ungrouped and selected. Without deselecting, open the Swatches panel. Using the Ctrl/Command key, select the colors from the Swatches palette that we will use to color the objects.

We use the RandomSwatchesFill script, for this we go to File > Scripts > RandomSwatchesFill. As a result, we get colored objects painted randomly.

This script can be applied both to the entire vector work and to several objects. Using the Lasso Tool (Q), select a few objects and using the Ctrl/Command key, select colors from the Swatches palette to paint these objects with.

As a result, a part of the vector work is colored randomly with the selected colors.

You can experiment with colors, gradient fills or patterns in the Swatches panel and see what original results you can achieve. On my own behalf, I want to thank Yemz for this script and I hope that it will be useful in your daily creative work and you will spend less time on routine technical issues.

The title doesn't explain anything, it's true. It's better to look at the picture:

As you can see, three steps are involved: find some background, draw on top of the vector figures, run the script and get the recolored figures. For this to work, you will need an illustrator of at least CS6 and I think any (tested on CS3) photoshop. It won't work without photoshop. Yes, and patience is required

In a sense, this script is really an attempt to make an analogue of the functionality that took place in the scriptographer (Color Raster). Just keep in mind that I have only seen it in pictures from the official site and never in real work, and I don’t know how it actually worked (besides being much faster) and what features it had. What I did is exactly the implementation of the task written in the title, in the form in which I could understand it, and using only the built-in scripting capabilities.

Now a little more about each stage:
1. Background - the background can be any, raster or vector. It can be either solid or be a collage of anything. The only important thing is that the background of the script will be everything that lies on the lowest layer.

2. Vector objects - this is what will be repainted. In fact, we are talking about closed paths that form any shapes. Compounds did not check, I think they will be ignored. Figures can be combined into groups, including multi-tiered ones. They can be masked (you just need to keep in mind what will be repainted and what is "hidden" by the mask, and this is the time, about which below). What will be repainted is what lies on the topmost layer. Layers between the first and last will be ignored.

3. The script and its actual work. Photoshop must be started before the script is run. In which case, the script will launch it itself, but you will only lose too much time. There is no need to select anything, if the background and objects are ready and lie on their layers, launch and .. wait a long time. Here is a fly in the ointment, this process is long. I will not try to excuse myself with technical details, the problem is of course simply in my curvature. One way or another, this is how things stand for now. The example that is in the picture in the header took about 10 minutes, and there are a little more than 400 hexagons in it. Those. about 1.5 seconds per object. If there are failures in the process, the time is increased for repainting. Immediately after the launch, the script will estimate how long it will take and report it. But it will be impossible to refuse (for now).
The second fly in the ointment, but only for owners of windows computers - your process will look like illustrator is frozen (it will write "not responding"). Photoshop will probably blink in the background for repainting) But, in order to understand everything badly or he just pretends, I added a sound indication - a system beep after every 10th repainted object. If you hear this beep (check if the sound is on), then the script is working, you just need to wait. The computer itself does not hang, you can open the browser)
And Mac drivers will be able to watch the process of repainting in real time, object by object.

A few more common words:
The color for filling is not taken from one point, but the average from an area slightly smaller than the size of the bounding box of the object being repainted.
The recolor objects and background do not have to be inside the artboard, it doesn't matter. While the script is running, the size of the artboard will be adjusted to fit everything visible from the number of background and target objects, and upon completion it will be returned to its place. Therefore, if the target object does not lie on part of the background, and outside the artboard, it will most likely be painted white, except that it will be slightly polluted by a close background due to the peculiarity of the choice of the middle color (point above).

The link below is the script itself and a simple test example. It's better to start with it.
Link:https://yadi.sk/d/aGnOBIkymiPbX
Beta testing is over, thanks to everyone who tried it!
With active testers, we will continue in the established private mode.

This is a beta version, will there be any improvements and additional features depends on whether someone finds bugs and comes up with new features)
The idea of ​​the script was given to me by art_of_sun , for which many thanks to her! If anyone else has ideas - welcome!

Is it a useful toy? They have already made different pixelizers without me, but maybe it can be used in some more interesting way? Or not? Who thinks, speak up)

an object . The button name is btn.cvet). Let's create a script for the keyframe:

var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet.addEventListener(MouseEvent.CLICK, f); function f(event:MouseEvent):void ( cvet.color = 0x0000ff; rol.transform.colorTransform = cvet )

Changes in the script can be made in the following fragments highlighted in red: the name of the movie (rol), button (btn.cvet), variable (cvet), function (f) and color value (0000ff).

Let's analyze the above script:

• The rol movie (as well as all symbols) has a transform property that contains information about various transformations applied to the object (such as geometric transformations, color settings). To apply transformations related to setting the color of an object, use the colorTransform property.
• The new variable cvet created is set to the value of the movie properties rol related to color settings.
• We change the color value of the color property to a new one:

  0000ff - hexadecimal representation of color in RGB format: red, green and blue colors are specified as two-digit numbers in hexadecimal code (in hexadecimal code, Arabic numerals 0-9 are used, and Latin letters a, b, c, d, e, f , acting as analogues of the numbers 10, 11, 12, 13, 14 and 15). The final color of the object is obtained by mixing three colors in the specified proportions.

• Update the colorTransform property of the rol object (perform color correction).

Practical work No. 1

Let's create a movie on the stage (an object for coloring - named rol) and 2 buttons (btn.cvet1 and btn.cvet2), symbolizing 2 colors in the color palette. Clicking on each button paints the video in the color assigned to the button. Appearance buttons should talk about their purpose (for example, the color of the buttons corresponds to the color of the object being painted).

In the script, you will need to create a variable to read the color of the object and set one of two colors for it, depending on the button pressed:

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

Practical work №2

Let's create 2 buttons on the scene (objects for coloring - named rol1, rol2) and 2 buttons (symbolizing 2 colors in the color palette - named btn.cvet1 and btn.cvet2). Pressing the color palette button - color selection; clicking on the buttons-objects for coloring leads to coloring them in the color selected earlier in a step. The appearance of the color palette buttons should indicate their purpose.

There are 2 steps to coloring an object:

• choose a color;
• select an object to be painted in the selected color.

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

Coloring objects without analyzing the coloring of various objects, as a rule, does not make sense. When creating an application that uses object coloring as a selection tool this object, it is necessary to analyze the colors obtained by the objects in the course of work. Exist software object color analysis.

We will consider an example of a task in which color analysis is performed by "remembering" the selected color for coloring a figure (and not by "analyzing" the color of an already painted figure).

Suppose it is necessary to mark squares, triangles and rhombuses from a set of geometric shapes as follows: color the squares with one color, triangles with another, etc.

Rice. 22.1. Color Analysis Application Interface

The script declares type variables number:

• c (for storing information about the selected color),
• fla.1, fla.2, fla.3 (to store information about the color received by each circle).

The "Check" button (its name is pr) and a dynamic text field (ttt) are placed on the stage, in which information about the correctness / incorrectness of the coloring of the circles is displayed.

In the case of correct coloring of all shapes (the logical expression in the branching command will be true when all three simple boolean expressions- first and (&&) second and (&&) third) to the text property of the dynamic text field ttt is set to "verno", otherwise "ne verno":

... pr.addEventListener(MouseEvent.CLICK, f7); function f7(event:MouseEvent):void ( if ((fla.1==1) && (fla.2==2) && (fla.3==3)) ( ttt.text = "verno"; ) else ( ttt.text = "ne verno"; ) )

Brief summary of the lecture:

The symbol has a transform property that contains information about the various transformations applied to the object (such as geometric transformations, color settings). To apply transformations related to setting the color of an object, use the colorTransform property.

Personally, I used this script when creating my new plugin for ordering a call. This palette helps the user to select the color of the button and the order form. For a long time I have been picking desired script And in my opinion this one is one of the best. Besides, as I said, it is easily implanted. An example of what you get as a result can be seen in the example below. Select a color with the cursor on the fields with a gradient.

To make such a palette, you need to take 4 steps. Let's start in order with markup HTML. You need to add it to where you want to see the palette itself.

Main parent block with id - color-picker. It contains three main blocks, which inside have child elements, which creates the structure of our palette. Let's take them in order, relative to the image below.

1. block with id picker-wrapper is the first block. Responsible for drawing a square with a gradient of one color to choose its hue. Inside it is a block with the gradient itself and a block responsible for the pointer.
2. block with id pcr-wrapper- the second block responsible for the block that displays all the colors in the form of a gradient. Inside is a block with a gradient and a block that displays a slider that moves up and down.
3. UL list with id color-values- There are several points inside it. The first three, in the diagram they are numbered - 3. They display color codes in three formats - RGB, HSV, HEX.
4. The block in the picture, which is number 4, is one of the elements of the previous list. This is the last li item. Inside it is a block with ID pcr_bg. This block displays the currently selected color.

You can, depending on your needs, swap or even remove those elements that are not needed. When we are completely done with the installation of the palette, then you will be able to figure it out in more detail yourself and determine how to change one or another element of the palette.

The second step to install the palette is to add styles. css. You add them, as usual, to the style file of your site, or of the element to which you connect this color palette.

#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; text-align:left; ) #pcr_bg( height:135px; ) .picker-wrapper, .pcr-wrapper ( position: relative; float: left; ) .picker-indicator, .pcr-indicator ( position: absolute; left: 0; top: 0; ) .picker, .pcr ( cursor: crosshair; float: left; ) .cp-default .picker ( width: 200px; height: 200px; ) .cp-default .pcr ( width: 30px; height : 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)" ;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); background-color: white; ) .cp-default .pcr-indicator ( width: 100%; height: 10px; lef t: -4px opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); border: 4px solid lightblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px background color: white )

I won't write about CSS. As I said, it is unlikely that a beginner will set a palette, but an experienced one is familiar with CSS. I think you will understand which parameter is responsible for what. Let's move on to the next step.

The third point that you must do is to include a file that contains the color palette script itself. The file itself will be in the archive with the sources of this article. You can download it from the link below.

The file is called colorpicker.min.js. Connect it in the header or in the footer of the site, if you will display the palette on the site. If in some module, plugin, etc., then where you connect the rest of the scripts. Naturally, specify the correct path to the file.

Well, the last step is to connect a script that will control the output of the palette values, well, and start its work as such. The script is best connected immediately after the palette block with HTML.

There are several things that can be configured in the script. Let's break them down. What can be changed starts from the 9th line.

• 9th line - block with id - hex, the color value is assigned in hex format. That is, in the list, which is number 3 in the picture above, the first line. Thus, you can assign a color code to any block to display it.
• 10th line - block with id - rgb, assigns a value in rgb format. Everything is similar to the previous paragraph.
• 11th line - block with id - hsv, assigns a value in hsv format.
• 13th line - block with id - pcr_bg, the style is assigned, in the form of a background corresponding to the hex format. That is to say, the square that shows the current color. In a similar way, you can display color from the palette, for example, for the background of a site of a certain block, and so on.
• The 15th, last line, sets the default color. You can specify your own, in hex format.

That's essentially the whole connection of the color palette. As I said at the very beginning, this article may not help a beginner, it is designed for more experienced webmasters. I hope she helps you.

That's all, thanks for your attention. 🙂

I think this block will be very useful, especially for cases when you need to embed it on your site. This Color Picker block works with Javascript. So let's look at how to add it to the site and what is remarkable about this JQuery plugin.

Working with code

First of all, we need to include Javascript and css file s. Don't forget to edit the CSS file and fix the image paths (if needed) to match the theme of your site.

XHTML

Plugin settings

Custom plugin settings (optional).

• eventName - the desired event to call the color picker, default: "click".
• color is the default color. String for color HEX or hash for RGB and HSB ((r:255, r:0, b:0)), default: “FF0000″.
• flat - display the color picker immediately or only on click, default value is false .
• livePreview - true by default.
• onShow - The callback function fires when the color picker is shown.
• onBeforeShow - The callback function fires before the color picker has been shown.
• onHide - The callback function fires when the color picker is hidden.
• onChange - The callback function fires when the color changes.
• onSubmit - The callback is fired when a color is selected.

Hope you enjoy this plugin. I wish you success and development of your site!

This lesson was prepared for you by the site team
Lesson source: http://www.eyecon.ro/colorpicker/
Translated by: Vladislav Bondarenko