Free Adobe Photoshop Website Designing Video Tutorial - Eyedropper, Color Sampler and Measure Tool

In this Free Photoshop Website Designing Video Tutorial, we will show you how to use "Eyedropper Tool", "Color Sampler Tool" and "Measure Tool". Eyedropper and color sampler are used to gather color information. We suggest that you first view our "Eyedropper, Color Sampler and Measure Tool Video Tutorial" to understand this visually and more easily however we have also given steps, tips and options given in the tool options bar of eyedropper, color sampler and measure tool.

Press I to select Eyedropper tool. Hold Shift key while pressing I toggles you between eyedropper, color sampler and measure tool. When you have selected eyedropper tool press shift key and your cursor will work as a color sampler tool.

Functions of Photoshop Eyedropper, Color Sampler Tool and Measure Tool:

Eyedropper Tool: To pick any color from the canvas using this tool. You can see this color in the "Foreground Color" (toolbar). To set the "Background Color", hold down the Alt key while clicking. You can pick color not only from the file opened but also from other applications.
Color Sampler Tool: You can use maximum four-color samplers to display color information for different locations on the canvas. These color samplers are saved by default in the file. Use Info Palette to view these color values. To open info palette, select Window > Info. If you want to delete any color sampler point just drag it outside from the canvas.
Measure Tool: This is used to measure the distance between any 2 points in the canvas.

Steps for using Eyedropper, Color Sampler and Measure Tool
Eyedropper, Color Sampler and Measure Tool options given in the Tool Options Bar
Helpful Website Designing Photoshop tips for Eyedropper, Color Sampler and Measure Tool

Click "Play" button to see Website Design Eyedropper, Color Sampler Tool and Measure Tool Video Tutorial

Steps

Steps for using Eyedropper Tool and Color Sampler Tool:

Select File > Open.
To open the info palette, choose Window > Info.
Select "Eyedropper" or "Color Sampler" tool from the toolbar.
Choose Sample Size ( i.e. point sample, 3 by 3 average, 5 by 5 average) from the tool options bar. If you have selected "Color Sampler" then one additional option i.e Clear will get appear.
Click anywhere on the canvas and pick your color, it appears as the foreground color in the toolbar. But if you have selected "Color Sampler Tool" then you can click on four different points on the canvas to pick color values from four different points.
Now, open Color Adjustment dialogue box. Make your adjustments and before pressing Ok, view the info palette. This palette will show you 2 values for each color sampler point. The value in the left is the original color value and value on the right is the color value after adjustment.
To delete all color samples, click “ Clear” in the options bar.

Steps for using Measure Tool

Select File > Open.
Select Window > Info, to open info palette.
Click and drag on the canvas. This will define two points – starting and ending point. Hold down the Shift Key constrains the tool to the multiples of 45°.
Now, if you want to resize the line then click on any point and then drag. You can see all the information (starting location, horizontal and vertical distances etc.) in the info palette.

Note: After dragging the measure line, choose Image > Rotate Canvas > Arbitrary. A Rotate Canvas dialogue box will get appear, enter angle in the field given. This will rotate the image according to the angle entered.

Helpful Website Designing Photoshop Eyedropper, Color sampler and Measure Tool Tips

Turn caps lock on to change the Color Sampler cursor to crosshairs.
How to pick color code while using eyedropper tool?

After selecting eyedropper tool, just right click on the canvas area. A menu will get appear showing some options. Apart from the options given in the tool options bar, there is one extra option i.e. Copy Color as HTML. Using this option you can copy hexadecimal color code onto the clipboard and can paste this code into HTML
Press Caps lock to make the selection of the color more precisely. This will convert your eyedropper cursor to the target cursor. This is applicable if you have selected eyedropper or color sampler tool.

Eyedropper Tool and Color Sampler Tool options given in the Tool Options Bar:

When you select Eyedropper Tool or Color Sampler Tool related tool options appear in the Tool Options bar. These options are described below:

Sample Size: There are 3 sub options under this:

Point Sample: Point Sample size is the default size. This will read the color value of a single pixel.
3 by 3 Average: This will read the average color value of a 3 by 3 pixel area.
5 by 5 Average: This will read the average color value of a 5 by 5 pixel area.
Clear: This option is available only for Color Sampler Tool. You can delete all the color samples by simply clicking on this option.

Measure Tool options given in the Tool Options Bar:

X and Y: Values of starting location
W and H: Horizontal and vertical distances from the x and y-axes.
A: The angle measured relative to the axis.
D1 and D2: Two distances traveled while using protractor.
Clear: This will clear the line on the canvas.