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

Create a Latest Tweets Box 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:

Create a Latest Tweets Box 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

Create a Latest Tweets Box image 3

Create a Latest Tweets Box image 4

Create a Latest Tweets Box image 5

4. Your document should look something like this:

Create a Latest Tweets Box 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

Create a Latest Tweets Box 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:

Create a Latest Tweets Box 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

Create a Latest Tweets Box image 9

Icon From Iconfactory

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

Create a Latest Tweets Box 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.

Create a Latest Tweets Box 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

Create a Latest Tweets Box image 12

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

Create a Latest Tweets Box image 13

Create a Latest Tweets Box image 14

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

Create a Latest Tweets Box 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 Tutorial: Final Result



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

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Create a Latest Tweets Box"

Only registered users can write comment

Reader's comments