Author: Anonymous Source: ximumu
Hello everyone, it seems that I haven’t translated the tutorials anymore. I’m very sorry. Because I changed my job, I don’t have as much free time to translate as before.
The tutorial we are going to share today is a relatively alternative web page layout – 3D web page layout. It is a good choice to use a web page like this as a personal homepage, but if it is used as a business page, you have to have the courage, quack. . .
It’s better to see it first:
It works well
1. Open the photohshop software and create a new 1200*1200 document. Set the foreground color: “#424241” and the background color: “#191919. Then select the “Gradient Tool” in the toolbox and set it as shown below:
The gradient effect is as shown below:
2. Select “Text Tool” and type your website’s name and promotional words. The effect is as follows:
Next add some layer styles to the text:
The final effect is as follows:
3. Next, we add a search box to the web page, select the “Rounded Rectangle Tool” and set the size of its rounded corners to: 15px. Draw a rounded rectangle in the upper right corner of the page.
Next add a layer style setting to this rectangle as shown below:
The final effect is as follows:
Select the “Rounded Rectangle Tool” again and set the size of the rounded corners to: 5px. Draw a smaller rectangle, press ctrl+enter to turn the path into a selection, and then fill the selection with white.
Use the rectangular selection tool to crop the second half of this small rounded rectangle, press ctrl+x, then ctrl+v to copy it to a new layer, then hide it temporarily and save it for later use.
Next add a layer style to the first half of the rectangle, set as shown below:
The effect is as follows:
Now let’s open the second half that was just hidden, and use layer styles to make it into a button.
Create a new layer and add two 1px lines to this button, one filled with white and one filled with black. And set the blending option of this layer: soft light. The final effect is as shown below:
4. Next we will build a 3D navigation.
Create a new layer and draw two 1 px wide and 950 px long lines about 100 px below the search box, one filled with black and one filled with white. And blend mode: Overlay.
Create a new layer, select the “Rectangular Selection Tool”, draw a rectangle as wide as the line, and fill it with white.
Press the ctrl+T key combination on the keyboard, right-click the menu and select “Perspective”. Move the mouse to the node on the left, press and drag, the final effect is as follows:
Next, double-click this layer to open the layer style dialog box, and set it as follows:
�Select the “Ellipse Marquee Tool” to draw an ellipse, the effect is as follows:
Fill the elliptical selection with black and set its opacity to 50%. If you follow me step by step, you will get the result below.
5. Now let’s add some elements to the navigation. I downloaded some icons from this webpage: http://apathae.deviantart.com/art/W-R-E-N-84310039
Add an outer glow effect to the first icon (add it in the layer style).
Press ctrl+J to copy the icon, then press ctrl+T, and find “Flip Vertical” in the right-click menu. Then select: Filter-Blur-Gaussian Blur to add some blur effects to these icons.
Click the “Mask” icon on the layers panel, add a mask to these icons, and then select the “Gradient Tool” to gradient the color from “black – white”. Then use the Gradient Tool and drag from top to bottom. The final effect is as follows:
Finally, I added a “small prompt” icon to the first icon, and the effect is as follows:
6. Next we complete the main part of the page.
Use the Rectangular Selection Tool to draw parts of the subject. One thing to note is that the size of the rectangle should be the same as the navigation.
Add a layer style to this rectangle and set it as shown below:
Add the content you want to the main body. Here I divided the main body into three parts to add. The final effect is as follows:
7. quack. . . Finally almost done. Finally we add a footer to the page.
Add two 1 px straight lines below the main body, one filled with black and one filled with white. And blend mode: Overlay. (Do you have any impression, we have done the same steps above).
Finally, add your website information, and a more special web page layout is completed.
———
Let’s think about it, what are the features of this tutorial?
Author: Anonymous Source: ximumu
Hello everyone, it seems that I haven’t translated the tutorials anymore. I’m very sorry. Because I changed my job, I don’t have as much free time to translate as before.
The tutorial we are going to share today is a relatively alternative web page layout – 3D web page layout. It is a good choice to use a web page like this as a personal homepage, but if it is used as a business page, you have to have the courage, quack. . .
It’s better to see it first:
It works well
1. Open the photohshop software and create a new 1200*1200 document. Set the foreground color: “#424241” and the background color: “#191919. Then select the “Gradient Tool” in the toolbox and set it as shown below:
The gradient effect is as shown below:
2. Select “Text Tool” and type your website’s name and promotional words. The effect is as follows:
Next add some layer styles to the text:
The final effect is as follows:
3. Next, we add a search box to the web page, select the “Rounded Rectangle Tool” and set the size of its rounded corners to: 15px. Draw a rounded rectangle in the upper right corner of the page.
Next add a layer style setting to this rectangle as shown below:
The final effect is as follows:
Select the “Rounded Rectangle Tool” again and set the size of the rounded corners to: 5px. Draw a smaller rectangle, press ctrl+enter to turn the path into a selection, and then fill the selection with white.
Use the rectangular selection tool to crop the second half of this small rounded rectangle, press ctrl+x, then ctrl+v to copy it to a new layer, then hide it temporarily and save it for later use.
Next add a layer style to the first half of the rectangle, set as shown below:
The effect is as follows:
Now let’s open the second half that was just hidden, and use layer styles to make it into a button.
Create a new layer and add two 1px lines to this button, one filled with white and one filled with black. And set the blending option of this layer: soft light. The final effect is as shown below:
4. Next we will build a 3D navigation.
Create a new layer and draw two 1 px wide and 950 px long lines about 100 px below the search box, one filled with black and one filled with white. And blend mode: Overlay.
Create a new layer, select the “Rectangular Selection Tool”, draw a rectangle as wide as the line, and fill it with white.
Press the ctrl+T key combination on the keyboard, right-click the menu and select “Perspective”. Move the mouse to the node on the left, press and drag, the final effect is as follows:
Next, double-click this layer to open the layer style dialog box, and set it as follows:
Select the “Elliptical Marquee Tool” to draw an ellipse, the effect is as follows:
Fill the elliptical selection with black and set its opacity to 50%. If you follow me step by step, you will get the result below.
5. Now let’s add some elements to the navigation. I downloaded some icons from this webpage: http://apathae.deviantart.com/art/W-R-E-N-84310039
Add an outer glow effect to the first icon (add it in the layer style).
Press ctrl+J to copy the icon, then press ctrl+T, and find “Flip Vertical” in the right-click menu. Then select: Filter-Blur-Gaussian Blur to add some blur effects to these icons.
Click the “Mask” icon on the layers panel, add a mask to these icons, and then select the “Gradient Tool” to gradient the color from “black – white”. Then use the Gradient Tool and drag from top to bottom. The final effect is as follows:
Finally, I added a “small prompt” icon to the first icon, and the effect is as follows:
6. Next we complete the main part of the page.
Use the Rectangular Selection�Tool” to draw the main part. One thing to note is that the size of the rectangle should be the same size as the navigation.
Add a layer style to this rectangle and set it as shown below:
Add the content you want to the main body. Here I divided the main body into three parts to add. The final effect is as follows:
7. quack. . . Finally almost done. Finally we add a footer to the page.
Add two 1 px straight lines below the main body, one filled with black and one filled with white. And blend mode: Overlay. (Do you have any impression, we have done the same steps above).
Finally, add your website information, and a more special web page layout is completed.
———
Let’s think about it, what are the features of this tutorial?
<!–Collectio