Case study: Hands-on teaching you to design a film director Studio homepage

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

I. Final effects and PSD files

　　

PS: Because the file is relatively large, so I will design psd source files in the Flying Fish Sonar group sharing files, welcome to download. Group number: 168083758

Ii. Design Requirements

Create a film director studio home page that reflects nostalgia and loneliness. No logo, no pictures, all the material to collect themselves.

Iii. Design ideas and materials

According to the design requirements, we can imagine a scene, a room with a pan-old floor and mottled walls, an empty director's chair was quietly placed there, beside the chair, with a loud microphone and discarded film footage, and the boards leaning against the wall, lying quietly in the dark corner. A light shot down from the top and landed on the chair and floor, making the whole atmosphere more solitary. Based on this idea, we collect the following material to create this scene in our mind.

Floor

Wall

Crack Brush

Director Chair

Microphone

Film

Playing board

Film Brushes

Phonograph

Related fonts (Han xue June, pixel font)

Iv. Creating methods

Next is the specific implementation step.

1, open Photoshop, shortcut key CTRL + N Create a new 960-pixel, high 800-pixel empty document, use the Move tool (V) in the left and right side of the document pull the guide, and then select the image > Canvas Size command, in the dialog box width to 1400 pixels, click OK. This allows us to have a 1400-pixel wide, 800-pixel blank document and a reasonably positioned reference line. Next, all of our designs are expanded within these two guides, so it is important to create the guides in the first step. As shown in the following illustration:

　　

2, press D to adjust the foreground and background color to the default and front black and white state, and then use the Alt+delete key to fill the layer with black. Use the file > Place command to import the floor footage we've already found into the document to create the first element of the entire scene. Because the floor material file is very large and exceeds the size of the document, you will see that the placement command automatically adjusts the image to the appropriate size. In addition, this command adds a floor picture as a smart object to the document. We can scale, position, skew, rotate, or deform the floor icons without reducing the quality of the image. So placement is a great choice to import pictures into your document.

By looking at the placed floor picture we can see that the wood bar in the floor is still too wide for the scene we want to create, so we use the free transform (CTRL) command to shrink the picture a little bit. At this point, although the width of the bar is appropriate, but the overall size of the picture is too small to cover the entire document, and our goal is to create a room covered with wood flooring feeling. So here we will adjust the picture of the floor and then copy another layer. Put two pictures together, so the width of the picture is enough. Here to pay attention to a detail, that is, two pictures of the stitching seams to be carefully adjusted, it is best to see. It is not difficult to do this with the obvious wooden floor. Finally, use Ctrl to merge two layers. The final effect is as follows:

　　

3. On the floor layer of the Layers panel, right click, select Convert to Smart Object command. Then use the free transform (ctrl) to right-click in the free transform area of the document, select Perspective, drag the mouse horizontally to the left at the anchor point in the upper right corner, and you will see that the top of the floor picture will shrink inward, while the sense of perspective appears, and you can adjust the perspective of the perspective by moving the anchor point horizontally to the right , while adjusting to observe the effect of the picture, until satisfied. If the final effect is not satisfactory, you can do it again, because the layer is already a smart object, so there is no loss of clarity. After you finish the perspective, click the Add Layer Mask button at the bottom of the Layers panel, then select the Gradient tool (G), use the black to transparent gradient and hold down the SHIFT key at both ends of the floor to pull the horizontal gradient, covering both sides of the floor to make it better integrated into the scene. Finally select the filter > Sharpen > Smart Sharpen command, in the pop-up dialog box will be adjusted to 110%, radius 1 pixels, the other parameters by default, click OK. The floor will look clearer. The results of the final completion are shown below:

　　

4, because we need to create a sense of nostalgia, so the original floor picture color looks too bright and saturation too high. So next we click on the bottom of the layers panel like the Tai Chi icon Adjustment Layer button, select the level adjustment layer. Apply the following parameter settings:

　　

Of course, these parameters are only used for reference, not to say that must not be changed, you can adjust the value of your own, as long as the floor brightness down to your own think fit, everything to feel the main. When you are done, return to the layers panel make sure that the adjustment layer is over the floor layer color, hold down the ALT key, move the mouse to the position between the adjustment layer and the floor layer, and you will see that the mouse from the shape of the finger to the left a small arrow to the right of the two circular-folded icon style, click, A small downward arrow appears on the left side of the adjustment layer to convert the adjustment layer to the following layer's clipping mask, so that the level adjustment layer will only work on the floor layer, otherwise the layer that is built underneath the adjustment layer will be affected by the adjustment layer.

After lowering the brightness, we then create a hue saturation adjustment layer in the same way, and the parameters are set as follows:

　　

After adjusting the levels and saturation, let's look at the finished effect:

　　

5, the effect of this floor is finished, next we will cover a wall behind the floor. Apply the placement command to load the downloaded wall footage into the document. As the wall material is also covered with the ground, so we put the wall material below the floor layer, so that the floor cover the excess parts, and then adjust the position of the wall and apply the free transformation of the wall material size appropriate. The effect is as follows:

　　

6, can be observed, to make the wall material integrated in the whole scene there are so many problems to be solved. The first is from the translucent area of the floor can see the wall material superfluous parts, need to cover. The second is to adjust the color of the wall, because it is too red. Third, the intersection of the wall and floor is too blunt, it looks unnatural. Now let's solve a problem. First create a new layer above the wall layer, using the gradient tool (G), hold down the SHIFT key to pull a black to transparent gradient from the bottom of the document to the intersection of the floor and the wall, so that the extra parts of the wall are obscured, and the blending of the floor and wall will appear natural because of the shadow added to the bottom of the wall. Solved two problems at a time. Note that the effect of the gradient should not be too strong, to soften some, if you do not good enough, you can try to do more than a few times. Here is the final effect:

　　

7, then we and the above floor in the same way, by setting up the adjustment layer to the wall to color, so that it and the feeling of the floor fusion. First set up a level adjustment layer, apply the following parameter settings:

　　

To create a hue saturation adjustment layer, the parameters are as follows:

　　

Finally, create a mask for the wall layer, covering both sides of the area. Of course, don't forget to use the ALT key to apply the adjustment layer as a clipping mask. After the completion of the effect of the following figure:

　　

8, in order to increase the atmosphere of nostalgia, next, we use the brush tool on the wall to create a crack effect. First create a new layer, then download the cracked brush effect file provided above, select the Brush Tool (B), and load the downloaded crack brush into the brush. Adjust the foreground color to black, select one of the cracks in the brush effect, use the keyboard left and right square bracket keys to adjust the size of the brush, the wall in the lower right-hand corner of the position click, such a crack on the wall surface, the effect of the crack is completed. Finally, select all the layers created above for floors and walls and press G to put them in a layer group named "floors and walls." The final effect is as follows:

　　

9, so far our entire space background to create a complete, the entire design also has some atmosphere. Next we will complete the homepage logo and the navigation production. Create a new layer group, named Navigation, where you create a new layer. Download the film brush file provided above, load the brush, select one of the long film brushes, adjust the brush size, adjust the foreground color to black, draw the movie film navigation background, if the film is too short, the film will be painted layer copy, using the Mobile tool (V) to adjust the location of the two pictures, Put it together and use Ctrl to merge the two layers.

Since we only need the punching part of the film, so next, create a new layer, use the rectangular tool to draw a width across the entire document, that is, greater than 1400 pixels, a height of 115 pixels of the black rectangle, using the Move tool carefully the rectangle's bottom box and the film's punch part together. After the completion of the effect of the following figure:

　　

10, Next we add logo and navigation text. Select the Type tool, respectively key out "movie", "Studio", "Flyfish Film Studio" Three text layer, "movie" text use 68 pixel size, Han snow June font, and apply the following layer style:

　　

　　

　　

The "studio" and "Flyfish Film Studio" text use both the founder and Georgia fonts, 22 pixels and 14 pixel sizes, and the colors are #b86850.

The Navigation Chinese text section uses 12 pixel size, Microsoft ya Black font, bold, sharp, color #bab1ad, and then create a new layer, select the rectangular selection tool (M), draw a selection containing the upper part of the Chinese text, fill in white, and then hold down the ALT key to the layer as a text layer of the clipping mask, So the navigation text has a metallic texture.

The English text part uses 12 pixel size, Georgia font, sharp, color #b86850. Then use the Mobile tool to arrange the Chinese and English navigation text, the navigation part of the design is completed. The following figure:

　　

　　

11. We continue. The next step is the most important part of the whole design, the design of the main vision. First download the Director Chair material, open in Photoshop, and use the pen tool to carefully pull the chair out of the background. Although the technology content is not high, but directly affect the later design effect, so can not be sloppy. Next, use the Patch tool (J) and the Clone Stamp tool (S) to erase the watermark on the Chair picture and the text behind the chair. When you are done, use copy-paste to load it into the document. Right-click to convert to smart object, use the free transform (ctrl) to adjust its size to fit, observe the picture after found that the chair's brightness and saturation is too high, so we still use the method in the above steps to darken it, and reduce saturation, The following are the specific parameter settings for the level adjustment layer and hue saturation adjustment layer. #p # subtitle #e#

　　

　　

After the adjustment, we can clearly see the seat back and cushion part of the green, so we need to change the hue, here are the specific parameters:

　　

After the completion of the effect of the following figure:

　　

12, although the tone of the chair is finished, but the chair is like floating in the air, not landing feeling. Don't worry, we'll let the chair fall to the ground. First, in order to increase the atmosphere of loneliness, we intend to play a beam of light at the top of the chair, similar to the effect of the stage light. So we create a new layer group below the navigation layer group, name it "Light", create a new layer in it, use the Polygon lasso tool, draw a trapezoid at the top of the chair, then select the Gradient tool (G), hold down the SHIFT key, and use the white to transparent gradient to draw a white gradient inside the selection, as shown in the following illustration:

　　

Converts this layer to a smart object, applies a Gaussian blur with a radius of 10 pixels, changes the layer mode to overlay, and then lowers the layer's saturation to 65%. When you're done, copy the layer, use the free transform (ctrl) to shrink the copied layer and place it in the middle of the outer light, so that there is a brighter area in the middle of the light, a few more times with the same method, so that the light appears to have a certain level of layering. Finally create a new layer, using the Oval tool (U), draw a white ellipse about the size of the light above the bottom of the chair, change the layer mode to overlay, copy the layer over, grid layer, apply a Gaussian blur of 3 pixels so that the light doesn't look too stiff. The results of the final completion are shown below:

　　

13. Next we add shadows and high light to the chair. To create a new layer, use the rectangular tool (U) to draw a black rectangle about the size of the chair seat at the bottom of the chair, apply a Gaussian blur of 5 pixels, and change the opacity to 30%. Then copy the Chair layer, hold down the CTRL key, click on the layer thumbnail, load the chair into the selection, fill it black, and ctrl the selection. Then using the free transform (ctrl) to flatten the layer from top to bottom, the effect is as follows:

　　

Next, add a layer mask to the shaded layer and wipe out the excess shadow by using a soft black brush of the appropriate size so that the chair falls solidly on the floor. The final effect is as follows:

　　

Go on. Next we add a high light to the seat of the chair, create a new layer, use the Oval tool (U) to draw a white oval in the seat of the Chair, grid layer, apply Gaussian blur, and then change the layer mode to overlay, because the chair part is darker, you may need to copy several layers more. Next use the Text tool in the Chair back key text, size 22 pixels, Georgia font, Color #a06a57, the effect of the following figure:

　　

14, then add other objects. The first is the megaphone. Download the footage, use the pen to pull the microphone out of the background, use the color balance adjustment layer and the optional color adjustment layer to adjust the microphone tone to make it blend with the background. The specific parameters are set as follows:

　　

　　

　　

　　

　　

And then, like the chair above, we have to add shadows and high light to the microphone. As with the above method, we create a high light using a white overlay with Gaussian blur, and use a pen to draw a selection on the left side of the microphone, fill the black, and apply the Gaussian blur and mask to add shadows. The final effect is as follows: #p # subtitle #e#

　　

15, Next is the movie film Box. Download the material and dig out the part you need. Converts to a smart object, using the free transform (ctrl) to resize the picture to the appropriate size. Because the main color of the film box is blue, so we first use the hue saturation adjustment layer to adjust the entire blue to match the entire scene of the red, the following is the specific parameter settings:

　　

You can observe that the film part is colored, so we create a new black and white adjustment layer, this time the entire picture is colored, we do not want to let the film plate part of the adjustment layer affected, so we in the layers panel select the black and white adjustment layer of the Mask section, and then use the appropriate size of the black brush to erase the film part. This way you will see the film is divided into black and white, and the film plate part of the red color. Next we create a new color balance adjustment layer, hold down the CTRL key on the black and white adjustment layer of the Mask click on, and then the color balance to adjust the same part of the layer mask to black, to ensure that this part is not affected by color balance, and then apply the following parameter settings:

　　

Then add the color level adjustment layer to darken the entire picture. The following are parameter settings:

　　

Finally, use the above method to add high light and shadow to the portion of the film's light area and to the right away from the light, to make it more integrated into the scene. Here is the final result:

　　

16. Finally, we will add the movie playing board and the propaganda language. Download the material, the playing board from the background, to convert to smart objects, using the free transform to adjust their size to fit. Because the original material is cyan, less color and higher brightness, so we first use the hue saturation adjustment layer to make adjustments, so that the cyan board is slightly darker, the following is the specific parameters set:

　　

It can be observed that the board is not enough red, so we add a color balance adjustment layer to add a certain amount of red.

　　

　　

Finally, use the color level adjustment layer to darken the picture.

　　

Finally in the back of the board and against the wall part of the shadow, in the lower left corner of the board superimposed white painted high light part. Finally, the main vision is the left side of the chair to add propaganda language. The finished effect is shown below:

　　

17, is about to complete our design. Finally, we design the footer and add the copyright information. First create a new layer group, name it "footer," create a new layer in it, use the Rectangle tool (U), and draw a black rectangle across the document at the bottom of the document. Use the Type tool (T) to separate the "Flying Fish Director studio Flyfish FILM Studio", "Flyfish FILM Studio all RIGHTS RESERVE 2011-2013″ and" Web design startwmlife. COM. Beijing ICP prepared 20111011″ three lines of text, the first line of text 12 pixel size, the Chinese part of the use of founder Small song font, the English part of the use of Georgia font, Color #ab8574, the second line of English text applied 04b_03 pixel font, 8 pixel size, color # 492317, the third line of text is identical to the first line of text, and the color is the same as the second line of text.

Next, pull out the old gramophone from the background and convert it into a smart object. Change the size of the free transform, because the picture itself is a bit dark, so we create a new layer, created as a clipping mask, use a soft white brush in the need to brighten the place to draw white, and then change the layer blending mode to overlay, so that the dark part of itself is lit.

Finally, adjust the foreground color to white, enlarge the document, using a 1-pixel pencil tool to draw a 3-pixel high, 2-pixel high and 1-pixel high three vertical white line, so that you can create a fine arrow effect, reduce the document to 100%, you will see the actual effect of the forward back arrow to do the same, Finally, apply the following gradient overlay layer style to them.

　　

The final effect of the footer section is as follows:

　　

OK, so far, our film director Studio home page design is complete, you can download psd file, detailed view of each step of the specific operation. Below is the final effect thumbnail, which you can click to view the larger image.