Her

Home Photoshop Tutorials Web Layout Create a Latest Tweets Box

Create a Latest Tweets Box

Author: PSDVIBE Author's URL: psdvibe.com More by this author

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