Photoshop handles text to make background and fonts more distinct

Many sites now like to decorate the site with large high-definition images, and how to make the text in the page in a beautiful background to stand out, so that the first time the reader to identify the text, for web designers is quite critical. Today, this issue of foreign PS translation tutorials to share with you 5 of simple and effective ways to improve the significance of the page text. Very simple and practical, suitable for small white students to learn.

1. Increase the contrast

As shown in the following picture, because the background and text color difference is small, resulting in the picture in the text is more ugly clear. The background of the picture, especially the menu area more details. The words "Buffalo Wings" are almost submerged in the background of a complex picture. The next step is to strengthen the color contrast between the text and the background.

Figure 01

First create a new layer in the Photoshop Layers panel and rename it to "color overlay." Select the Color selection tool (accelerator i), as shown in the following figure, to pick up the color of the blue shirt on the left uncle and press Shift+f5 to fill it in the new layer.

Figure 02

Next, adjust the opacity of the blue fill layer to 50%, and pull the blue layer below the text layer.

Figure 03

As shown in the following illustration, the contrast of the face painting has been improved. "Buffalo Wings" and other text in the picture has become more conspicuous and obvious, so that you can see the text clearly.

Figure 04

2. Add Shadow

As shown in the following example. Because the text is located in the shadow part of the bridge, the text is also set to black, so that the text is very inconspicuous, easy to see people clearly. The next step is to set the text color and special effects, improve visual effects.

Figure 05

When the text is set to white, the text will be very clearly different from the background, which is conducive to the first-glance recognition of text.

Figure 06

Then add the layer style and shadow effect to the text. Sets the opacity of the shadow to 52%, expands to 16%, the size is 100 pixels, and the angle is -144°. When the settings are complete, the bottom right of the text increases the shadow effect.

Figure 07

By simply adding shadow effects, you can make text appear completely in the background.

Figure 08

3. Add horizontal Line

Here's one of the easiest ways to highlight text content. You can isolate the background and text nicely by adding two white lines below the text. The original artwork is shown below.

Figure 09

Then after adding two horizontal lines, the text becomes apparent immediately. At the same time, horizontal and text spacing appropriate to create a good design effect.

Figure 10

4. Add local semitransparent background

Under certain conditions, it is also a good way to add a translucent background to enhance the text effect. As the following illustration shows, the white text is similar to the color of the background building, and the text content becomes less obvious.

Figure 11

To increase the recognition of text, select the Rectangle tool and add graphics. Shapes are determined by design needs, set the image to black, and then set the stroke to white, 3 pixels. Set as shown in the following figure.

Figure 12

Move the graphic layer below the type layer, and then set the layer opacity to 57%.

Figure 13

The following figure is the final effect, the text has been highlighted out of it.

Figure 14

5. blur Text Background

The background is slightly blurred, you can highlight the text, such as shooting in the background of virtual. As you can see from the figure below, the text melts into the background again.

Figure 15

The first step is to convert the background into an intelligent object, so that the image quality of the background will not fall because of the fuzziness. In the Layers panel, right click on the image and select Convert to Smart object.

Figure 16

Then edit the Smart object. In the main menu bar, select Filter > Blur > Gaussian blur. The operation is shown in the following figure.

Figure 17

Set the blur radius to 3.8 pixels.

Figure 18

This will be able to show the text from the background, become the focus of the screen.

Figure 19

Category:

• PS Image Processing