RIATMP1075 – Tutorial – Web presence for Personal Page Website Template

June 28th, 2009

RIATMP1075 - Tutorial - Web presence for Personal Page Website Template: Tutorial – Web presence for Personal Page Website Template

Here is the tutorial for the Personal Website design; which one I promised Yesterday. This web template is for presenting your own personal page. I hope it will be helpful for all type of professional who wants an effective web presence. Very Soon I will upload the PSD file for your convince. In this tutorial I am trying to give you step by step information so that you can create your own website. It is very important to allow users to know you better; so that’s why its very important to be more attentive to create your website. You can also use this same web design for some other different topic as well as to present your product.

1075-pic15

1075-pic16

Step 5: Now again select ROUNDED RECTANGLE TOOL and set the corner radius size to 5 pixels. Now create 2 different size Rectangle in 2 new layers ( Upper Frame, Bottom Frame). Now add layer styles in “Upper Frame” layer > Gradient Overlay > see pic12. Then add Stroke > Pic13. See Pic14. Now copy that layer styles and add this on layer “bottom frame”. I have deleted some portion to give some dimension. You will get the result like pic15. Now if you have Binder graphics you can add that too. So this is your main frame . See pic16. Now you can add your images and text as you want or just follow my frame distribution. So here is your final PERSONAL TEMPLATE.

1075-pic1

1075-pic11075-pic2

Step 1: Create a new file of about 860px /855px, with White Background (File -> New). Now select GRADIENT TOOL and add a vertical gradient on the background layer. Then select a rectangle portion to create the header for this design and fill this selection with color #2f4a1f. See Pic1, Pic2.

1075-pic3

1075-pic31075-pic41075-pic51075-pic6

Step 2: Select ROUNDED RECTANGLE TOOL and set the corner radius size to 5 pixels. Now create 2 different size Rectangle in 2 new layers ( Top Page, Bottom Page). Now add layer styles in “Top Page” layer > Gradient Overlay > see pic3. Then add Stroke > Pic4. Also add Drop Shadow > Pic5. Now copy that layer styles and add this on layer “bottom page”. You will get the result like pic6.

1075-pic7

1075-pic71075-pic81075-pic91075-pic10

Step 3: Now it is time to create menu bar. Select ROUNDED RECTANGLE TOOL and set the corner radius size to 5 pixels. Create one rectangle in a new layer named “ Menu1” (like pic 7) and fill that with white. Go to Edit > Transform > Warp . Follow pic7. Now fill that shape with color (dfdfdf, b9b8b9). Now copy 4 more in a new layer named “menu all”. Add layer style in this new layer “ menu all). Layer style . Gradient Overlay > See pic8. Then add Drop Shadow > See pic9. Now place these menu under the layer “Top Page”. You will get the result like pic10.

1075-pic11

Step 4: Now copy “Menu 1” and paste into a new layer named “Menu Bottom”. Also paste the earlier layer style. You will get the bottom menu like pic11.