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

Tech Styled Content and Header Box


1. Create a new document, pick any size you want. I used 330 x 300 for this tutorial.

2. Make a new layer. Use the Rectangular Marque Tool and make a square like below:

image 1

3. Now use the Polygonal Lasso Tool and make a shape like below:

image 2

4. Right click the layer and set these blending options:

image 3

image 4

image 5

Now you got the basic frame for the content box.

5. When doing techish like designs you want to add lots of lil things to make it look really cool. So use the tool we used in step 4 and add stuff like below (dont forget to make new layers for each graphic you add):

image 6

Notice I used the same blending options as the layer we just did. All I did was right click and copy layer style then right click the other layer and paste layer style.

6. Now lets switch up the color. Use the same tool once again and make a selection like below:

image 7

I also pasted the layer style onto this layer aswell:

image 8

7. Now everything is slowly coming together. Lets add a background gradient. Do this by using the rectangular tool and making a selection like below:

image 9

Make a new layer and move the layer just above the background layer. This is so the gradient will go behind everything.

Select the Gradient Fill Tool. Choose your colors, drag from the top down and you will end up with something like this:

image 10

Cool huh, now this is where I leave you to add some more techish stuff. Here are some small things I added and redid to make it look better:

Tech Styled Content and Header Box Tutorial: Final Result



Author's URL: Crunked-Designs.com
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 "Tech Styled Content and Header Box"

Captcha