Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Simple Information Box

Simple Information Box


Step 1:

Create a new image press (Ctrl+N) or File > New set the width to 800 and the length to 600 pixels. When you are finished click ok. Press (ALT+Ctrl+0) or View> Actual Pixel to view your work space actual pixel. Change the background color to #c8c8c8.

Step 2:

Create a new layer (Shift+Ctrl+N) or Layer>New>Layer, and name it news box. Click on the  Rounded Rectangular Tool image 1   change the rectangle color to #7b91ad and enter the setting that I have below.

image 2

Create a rectangle with the dimensions that you want,

image 3

Step 3:

Hold Ctrl and click on the layer to select it. You will know that the layer is selected by a border forming around your object , now press Shift+Ctrl+N to create a new layer name it box1 click on the rectangular Marquee Tool image 4 and click on Subtract From Selection image 5 . Subtract the selection Until you get something like I have below.

image 6

Now click on the box1 layer and fill your selection with this color #FFFFFF.

Step 4:

Right click on the box1 layer and click on Blending Options. Use the setting I have below. All I did was just added a Gradient Overlay

image 7

Step 5:

Create a new layer (Shift+Ctrl+N) or Layer>New>Layer, and name it header Click on the  Rounded Rectangular Tool image 8 and change the background color to #898989. Draw a rectangle over the gradient, like I have below

image 9

Right click on the header layer and click on Blending Options and add the setting below.

Stroke Setting

image 10

Gradient Overlay

image 11

If you followed the steps correctly you should have something like I have below.

image 12

Step 6:

Repeat steps 3 to 5 to create the footer below your text box. Its simple if you follow the steps. you did this in steps 3 - 5 so it shouldn't be hard. If you followed the steps you should have something like I have below.

image 13

Tip:

Hold Ctrl and click on each on you layers except your background layer. should look something like this below. After you have the layers selected click Ctrl+E to merge the layers. Then go to Images> Adjustments> Hue/Saturation.

image 14

You will see the Hue/Saturation box below click on colorize. If you play around with the setting you and match you web site color scheme without redoing the entire tutorial.

image 15

Simple Information Box Tutorial: Final Result



Author's URL: Mark
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Share print this page subscribe to newsletter subscribe to rss

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Simple Information Box"

Captcha