Content box tutorial
Step1:
First open up adobe and make your width and height 800 by 800. After you finish, click on “view” and select “view actual pixels.”
Step2:
Now, select the “rectangular tool” and make a rectangle any size you want. Make sure that the rectangle is appropriate for the amount of content you will put in there. You should pick #e2e5eb for the color of the content box but feel free to experiment with the colors to come up with something that matches you web page.
Step3:
Next, make another rectangle on a different layer with the color #bdb9b9 but make this one thinner. This thinner rectangle will be the header of the content box. Click on the layer with the thinner rectangle and go to blending options.
Step4:
When you are in the blending options click on “gradient overlay” and apply these settings. The gradient color is #ffffff to #a09f9f.
Step5:
After you exit the blending options, go back to your layers and hold down shift while click on the content box layer and the header layer. This will highlight both layers at once. When both of them are highlighted press (ctrl&E) this will blend both layers together.
Next, click on the rectangular marquee tool and make a selection to the right of both image, this is done in order to make both images the same length. After you make the selection delete it so you have a smooth clean edge.
Now it’s time to add a stroke on the image. Once again go back to “blending options” by right clicking the mouse on the layer and go to stroke, apply these settings. The color of the stroke is #000000.
Make another layer and grab the pencil tool. Make the master diameter 2 pixels and the color should be #797979. Zoom into your image and go back to your pencil tool. Make a line right under the header, you can hold down shift while drawing the line for a 180-degree line.
Step6:
Make another layer and set your pencil tool to 1 pixel. Zoom into the image again and change your pencil color to #ffffff. On the light blue surface make a line going around your content box.
Finished:
Now add some text at the top and you are finish.
Untitled Document
This Tutorial was Created by pixelapex
© 2006-2007 pixelapex.net. All Rights Reserved.
|
|
