Photoshop to create a simple colorful background image

IOS7 Transparent UI design when the road, the other find the background map is always not in line with their ideal color, in this, PS tutorial will teach you to use Photoshop to create this kind of super simple and with their own interface style completely match the background picture. The premise of making such a background picture is the need for a certain color theory, of course, the need for a pair of color matching sensitive eyes.

The final background figure is as follows:

Figure 01

OK, let's get started.

First, choose color scheme

Here, select the following image as the inspiration for the color scheme. Because the background color contrast obviously can better foil the sense of transparency, therefore tends to choose the tonal change is bigger, the distribution is broader picture.

Figure 02

Color schemes draw on the following colors: Peppers is red, green lemon skin of dark, light and lemon yellow grapes, in addition to choose the picture in the dark wood desktop as the background, background play against the role of other colors, if your other color block area is basically not see the background, but can feel it. (xi Hee, can you understand this "invisible but can feel" the mystery?)

Some people also suggest a direct choice of black or white background, but I think the picture itself on Black-and-white performance is much richer, pure black or white is too regular and conservative.

　　Second, the production of background map

1. New File

Here, I will make an adaptive screen display of the background image, so my PS file size set to W:640PX,H:1136PX, fill the background color color scheme in the dark-color.

Figure 03

2. Create a new layer on top of the background layer and use a large soft brush to paint the first color.

Here's what you need to be aware of:

1 Apply the brush after the best one-step, do not hesitate. Because the soft brush is colored, there will be a very abrupt boundary beyond the part of the artboard, which will not be conducive to the movement of the layer after the brush is shaded. In other words, the large and soft brush usage rule is one step positioning, the chance of modification is too small.

2 the size of the brush I choose here 900px, the actual size according to your file artboard size and actual needs to determine.

3 The transparency of the brush is reduced to 70%, which enables true "fusion" between different colors.

Figure 04

3, and then continue to create a new layer, smear several other colors. The distribution of color with its own preferences. But note that each color is best to create a new layer, rename a different layer, you can easily modify and adjust later.

Figure 05

4, the red and yellow-green color layer merged into a layer, the entire layer to do a deformation.

(Ctrl+t> mouse Right click > deformation) The purpose of the deformation is to make your color blend more naturally, no longer be a round piece together, but can show a sense of flow. At this point, you will use the shape of the joystick arbitrarily change the pattern you like.

Figure 06

5, at this time, perhaps for you this picture is relatively dark, then you can adjust the color level to achieve the highlight and enhance the picture color contrast.

Figure 07

6, further modification, this kind of modification is with the sex. Depending on your expectations, you can use such as eraser and adjust layers to further change the picture to the desired result.

7, finally, in order to make your picture more colorful color, you can copy the color layer, the copied layer blending mode to "soft light" or "overlay." and to adjust its transparency appropriately.

Figure 08

　　Third, put the background map into use

There are many ways to make such a picture, but this is the easiest way for me. Remember, the most important thing is to have fun with your creations.

Figure 09

This is the effect of the actual use of the project, the color blocks and lines used on the background image need to be reduced to a little transparency. I believe that we can make better works according to this method.

Figure 10

Category:

• PS Getting Started Tutorial