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

Create a Latest Tweets Box


1. First thing we want to do is create a new canvas of 400x400

image 1

2. Next lets go ahead and get out our rounded rectangle tool and set the radius to 8px. Then make a rectangle similar to the following:

image 2

3. Now lets go ahead and add a few blending options to that layer. To do so right click the layer and choose blending options and input the following

image 3

image 4

image 5

4. Your document should look something like this:

image 6

5. Next we want to add a very slight highlight to the top of our rounded rectangle. The way we will do this is to CTRL+CLICK your rounded rectangle layer to make a selection of it. Next, lets go ahead and create a new layer and fill the selection with #FFFFFF. Using your arrow keys, and with your rectangle selected, move the selection down a couple pixels and choose EDIT>CLEAR

image 7

6. We want to go ahead and lower the opacity of this layer to about 30% and you'll have something that looks like this:

image 8

7. Next we want to go ahead and add a Twitter icon to our content box. This is the one I choose to use

image 9

Icon From Iconfactory

8. Try to position it on the top as I have:

image 10

9. Next I added the heading to my content box. For 'Latest' I used #04a7ca, and for 'Twitter' I used #f84c6c, and a generic font, helvetica.

image 11

10. All that we need to do now is create how our tweets will be displayed. Using the rectangle marquee tool, create a selection similar to the following and fill it with #FFFFFF

image 12

11. Next, lets go ahead and input the following blending options onto that layer

image 13

image 14

12. Add some text above the box, and then you'll have something that looks like this

image 15

13. Once you do that you can copy it down to fill up the box and your final result will look like this:

Create a Latest Tweets Box



Author's URL: PSDVIBE
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Create a Latest Tweets Box"

Captcha