Photoshop design page Game UI Theme page tutorial on Brown Department pages

The focus of the tutorial is the design of the front page, need to be based on customer requirements to determine the content of the page to be displayed, and then collect the relevant materials, according to their own creative play, the screen to do gorgeous, visual impact can be.

Final effect

Since the theme "Global Championship" is clear, then we can focus on the idea of the topic. First of all, or in the mind of the imagination to create a general scenario.

Kennedy for the world first, reflected in the game is the nature of the heroes to fight for the martial arts master of the feeling, you can surround the hero around, put a similar medal in the middle of things, then the general scene and the tone of the scene can be set. Let's refine the keyword first.

Based on these keywords, we can search the material. This page is mainly used in the game to provide the characters and scenes of the original painting material, the external material is not too much, I only list the use of the game inside the material.

1, we began to create the scene.

2, here is mainly to the original painting a dark around the middle of the treatment, the reason for this treatment is because you can make the middle of the theme is fully prominent. Let's take a step-by-step look at how to achieve the present effect.

3, first of all, the original painting on both sides of the fuzzy treatment, increase some depth of the effect. The method is to turn the original painting into a smart object, then add a Gaussian blur value of 5 or so, and then erase the mask of the filter to erase the place where the blur is not needed.

4, the appropriate reduction of brightness and saturation, increase the contrast of the picture, reduce the original painting itself too much color to the later rendering of the inconvenience.

5, add red and yellow to the screen, is the dark side of the page Red brown, bright slightly yellow.

6. Darken the whole picture again.

7. Brighten up the sky part. Use a white flexible brush to apply to the sky, pattern overlay.

8, to the middle part of the light, here is divided into 3 layers, the bottom layer is red, the largest range of the middle layer of yellow, the range is slightly smaller than the red part of the top layer of natural white, that is, the location of the light source, the smallest range. This step is equivalent to adding a light source to the screen, the light from the middle to four weeks gradually weakened.

Tips:

Here in the image of the dark processing, and not on the screen itself with the fireball, explosion flame, etc. to deal with, these own fire later can be used, so do not have to be pressed dark, in the process should be erased on the mask this part. The black area on the Inner Mongolia version of the box is the flare part, reserved.

9, here mainly to teach you to make this kind of title effect.

10, first to the text according to the primary and secondary relationship of typesetting, here is also best to use the form of the center. "Global hegemony" the word is a good job before the deformation of colleagues, I directly here to use, the text deformation is not the focus of this tutorial, so here do not do a detailed introduction, interested can see the tour VC on the text deformation of the tutorial.

After the text is lined up, use the pen tool to hook up the black background outline in the lower layer of the text, this can have a variety of forms, painters better students can hook up a very good bottom, here I only do a slight processing (obviously I am not painters very good classmate), to the corners of the added some point out of the sharp, make it look more sharp.

11, to the bottom of the text to do the effect, overlay material. Select a brown color value for the bottom, using #2e2320, and then mainly bevel and emboss.

12, the application of bevel and relief should pay attention to the "method and depth" value, we suggest that everyone to adjust their own experience of changes. My side usually use this effect is selected as "Smooth" and "1000", you can make the segmentation of the bevel clear and will not appear miscellaneous edge.

The following high light and shadow are adjusted by constantly looking at the effect diagram. After the adjustment of the style to find a wall of material superimposed on the bottom, and then according to the effect of superposition after the corresponding adjustment can be.

13, the text to do the effect, the method is similar. The main layer is also the style, and then add wall material overlay. Here with a different color to distinguish between the main and the secondary, the latter can use a white flexible brush to add some high light, direct smear, overlay can (no longer detailed here).

14, this step is to find some swords and metal decorations to decorate our title, is that they look full of the feeling of battle. Here everyone is easy to have a misunderstanding: some students may feel that the back of the broadsword is a complete knife of the copy and horizontal flip. Not really, because the middle part of the knife is blocked, and we want to find a feature that fully conforms to our expectations of the knife is not very easy, so this time we can split into two parts to find their own thinking of the hilt and blade, looking for the time must look for the more domineering knife, such as here because it is the theme of Tianlong , I looked for the hilt when I found a handle with a faucet, and the theme of the game can be more appropriate.

The blade is better looking for a wider, not like the Japanese samurai used the kind of fine knives, but like the past cut the head with the Broadsword (Ni, Good blood), looks will be more domineering, the combination of the two, copy flip, and then through the adjustment of color and brightness contrast, you can get the effect now. Here you should pay attention to the color palette slightly toward the overall tone of the page closer.

The top metal modifier is usually collected, can be deducted from some weapons, metal armor and some game UI, in the processing proceeds, here as decorations also can play a good role. Some students may ask, why not put this modifier on the bottom? The reason is very simple, because we have to put some text content, just can be placed between two blades.

The other text part of the contents of the line, you can get the results of the following diagram.

15, to the major experts to play light color processing.

First we find the six masters according to the action of the corresponding relationship between the size of the adjustment and the level of flip to achieve the balance of the picture harmony. Here is a general introduction: The Archer and the gourd baby are all belong to the front slightly biased, face has a slight orientation, so choose him (she, it) as the main figure in front, monk and chopper men are jumping flying feeling, so in the arrangement is slightly higher than the main characters, and they two posture exactly echoes, really worthy of a good base friend; Fan men and looking back women are obviously sideways, the body accounted for a small proportion, so the most narrow place (who let you two not face, into the bench).

16, here to the right half of the three heroes to give you a light explanation, first take the gourd baby, to add a mask to the gourd doll, with a flexible brush to erase the knee below, the above the creation of a clipping mask, pull a background color to the transparent gradient, so that gourd doll and the picture more integrated.

17, reduce saturation, increase the contrast, so that the characters look more texture (the following figure left). Use the color balance to add ambient color to the characters, and to adjust to the red and yellow direction (right below).

18, reduce saturation, increase the contrast, so that the characters look more texture (the following figure left). Use the color balance to add ambient color to the characters, and to adjust to the red and yellow direction (right below).

19, on the left side of the background to highlight again, through the flexible brush to overlay, or through the layer style to absorb the environment color to adjust (figure left). Create a clipping mask at the top of the character, from the top left brim to the right and down to the transparent gradient, fill to zero, use the layer style to adjust the color to the character further increase the ambient color light, so that the character's affected by the smooth from the top left to the bottom of the lower right.

20, the kitchen knife men and looking back at the treatment of women with the same style gourd doll similar, is to reduce saturation after the color and then go to the light, you need to pay attention to the distance between the intermediate light source is different, the degree of light is not the same, such as here the kitchen knife male by the light slightly weaker than the gourd baby, and looking back at women by the weakest. There is a point, is the kitchen knife in the gourd boy behind, there will be a part of the light because the back of the gourd baby and reflected to the kitchen knife male left, so the left side of the light slightly stronger. According to these relationships, the light processing of our characters is as shown in the picture.

21, the left half of the three-man treatment with the right side of the same, here no longer repeat, the final effect as shown.

If you are not very understanding of this phenomenon of backlighting, you can go back and do a simple test. When you get home, close the lights in the house, turn on the flashlight or the flash of your phone, and then stretch out your hand to the flashlight, and look at the color of the palm and the discernment of the details by changing the distance between the hand and the flashlight and your eyes. I believe this small experiment can help you to have a general understanding of the phenomenon of backlighting. There is also a point to note that the near large and small, near clear far blurred perspective of the relationship between the most people on the other side to be smaller, but also a little bit of Gaussian blur processing, so that more real.

Add some spark light effect to the final picture and increase the atmosphere.

Category:

• PS Composite Picture Tutorial