9 commonly used Photoshop skills

Reproduced http://www.3lian.com/edu/2010/06-24/2552.html

For web designers, most of the purposes of using Photoshop are web page formatting. Of course, sometimes some effects need to be made. In more cases, web designers use PS to be simpler than graphic designers, this article summarizes several commonly used Photoshop functions and skills by web designers, and I believe they will be frequently used by beginners and experts.

1. Change the background color of the icon.

As a web developer, the most common thing I need to do with Photoshop is to change the background color of an icon or to make the background transparent.

Take the RSS (aggregate content) icon as an example. These icons have different shapes and sizes.

When you find the most appropriate icon, you still need to make some modifications. The most common problem is that the background of the website may be different from the image background. We need to do some work to bring them together.

If the image is in GIF format, it is recommended to convert it to PNG format first. They are similar, but the PNG format file is relatively small. Read the pros and cons of using GIF and PNG images on your website.

The specific method is as follows:

Step 1: Open the image in Photoshop, and click File-> Save as the format used by the Web and devices (shortcut: Ctrl/Cmd + Alt/Option + Shift + S ), then select the PNG-8 or PNG-24 format in the drop-down box on the right of the presets. You can compare the quality and size of the format to be better. (See how to store images in the Web format .)

Close the GIF file and open the image you just stored.

Open the layer Panel (if not displayed, press F7 to make it visible). You can see a background layer.

Right-click the layer, select the background layer from the menu, and click OK.

Step 2: Use the magic wand tool.

1. Click the magic wand tool in the tool panel.

2. Make sure that the tolerance is set to around 20. The check box is used to eliminate the sawtooth and continuity, for example:

Then, click the White (or other color) Background surrounding the icon.

Make sure that the selected area does not contain the shadow part under the icon as much as possible. If the shadow part is included, adjust the tolerance (use the magic wand to reselect the background ).

Remove background color

Simply click the Delete key to remove the background and make it transparent. Click File> Save as the format used by the Web and devices, and select the transparent option.

Change Background Color

1. Click the foreground color and select the desired color from the color picker. Click OK.

2. Click the paint bucket tool (shortcut key G ). If you do not find the paint bucket tool, right-click the gradient tool and select the paint bucket tool.

Then fill in the selected color with it next to the icon.

2. Use the automatic selection tool to select a Layer

It is easy to select a layer: Click the layer in the layer Panel (if the Panel is not displayed, press F7 ).

If there are many layers or layers in your panel that are not intuitively named, it will become annoying to find the relevant layers.

One way is to turn on the automatic selection tool:

1. Click "Move tool" on the tool panel.

2. Select the layers in the drop-down box on the right.

3. Check the automatic selection option.

When automatic selection is enabled, you can click on the canvas to select the relevant layers.

3. Press Ctrl/Cmd + the left mouse button to select a layer.

Another way to use the move tool (shortcut key V) to select a layer is to use Ctrl/Cmd + the left mouse button to select a specific layer on the canvas. Note that the automatic selection function should be removed.

4. Split a Layer

After selecting a layer, you may want to copy it to a new file and store it as a new image.

One way is to use the cropping tool (shortcut key C ).

However, there is a quick way to keep the layer size unchanged:

1. Press Ctrl/Cmd and click the thumbnail of the layer. In this way, everything in that layer is automatically selected.

2. Press Ctrl/Cmd + C (edit-copy shortcut key)

3. Press Ctrl/Cmd + N to create a new file. Photoshop automatically copies and creates a file of the same size.

4. Press Ctrl/Cmd + V to copy it to the new layer.

5. Copy a layer from one file to another by dragging and dropping

There are many ways to copy a layer or a group of graph layers from one PSD file to another. However, the simplest method is drag and drop.

1. Select the layer you want to copy from the file. If you want to copy multiple layers, press Ctrl to select a layer in the layers panel.

2. Select the mobile tool (shortcut key V ).

Click anywhere in the canvas and drag the layer to the new file you want to copy. This file will be activated. Open the mouse and place the copied layer where you want it.

6. expand or contract the image.

In the first tip, I demonstrated how to select the background of an icon. In some cases, the selected area is inaccurate. You may want to enlarge or narrow down the selected area.

First, press Ctrl ++ to enlarge the image to see the part you selected.

Click "select" modify ">" extension ".

Select-Modify-Contract

Enter the pixels you want to expand or contract and click "OK.

7. Use layer Composition

When there are multiple layers, obtaining the visible state of the layer is more effective. In other words, only the layers you want to see are displayed.

1. Display Layer Composite: window-> layer composite.

2. Select New Layer Composite from the layer composite menu or click the new layer composite shortcut under the panel.

3. Name the new layer compound, check the visibility option, and click OK.

Application Layer combination

Click the icon on the right of the layer to hide or display the layer composition.

8. Basic Image Processing: changing colors

Another common problem in Photoshop is to copy some layers and change their color.

Here is an example. The following icon is used as a menu button:

How can we only copy the house and turn it into black and white colors? This technique is often used when you need to make a mouse touch effect.

1. Select the Rectangular Box selection tool (shortcut key M ).

2. Select the house on the canvas. Then, press Ctrl/Cmd + J to copy it to a new canvas.

3. Press Ctrl/Cmd + U to adjust the color and saturation of the new layer. Adjust the saturation to the left to turn the house into black and white.

Result:

However, the color version of the house is still there. To see it, set it to visible.

9. Use measurement tools

As a web designer, in order to make images suitable for webpages, we often need to be accurate to pixels to measure images. A common example is to calculate the size of the menu bar for CSS image combination.

There are two methods for measurement:

Scale (shortcut: Ctrl/Cmd + R)

1. Click it and drag the ruler in the upper left corner to the canvas.

2. Release the mouse where you want to place coordinates.

3. Zoom (shortcut: Ctrl/Cmd ++) to better observe the scale.

Suggestion: double-click the scale itself or click Edit-> preference-> unit and ruler to open the selection box, 3lian.com, and select the measurement unit you want (such as from inch to pixel ).

Scale tool (shortcut key I)

1. Click the scale tool in the tool Panel (if not, right-click the straw tool to convert it to the scale tool ).

2. Click and drag from the start point to the end point for measurement.

3. Check the width and height of this part.