Create a Twitter Widget UI – Photoshop CS6

Video

 

1. Create New Document

Create a new Photoshop document sized 1280px by 720px.

Create a Twitter Widget UI - Photoshop CS6

2. Find The Background

As with most UI pieces, you want a nice background to begin working on just to give your UI some kind of context before it is actually placed into an App or a website. I like to browse texture sites like http://lostandtaken.com to find great textures to use. I’ve found one that I like and I will place it into our document in Photoshop. I converted the texture to black and white to keep things simple.

Create a Twitter Widget UI - Photoshop CS6

3. Rounded Rectangle

Grab the Rounded Rectangle tool (U) and make sure you are drawing a new Shape Layer without a stroke. Click anywhere and draw a rectangle which is 100px wide and 100px high with a 5px corner radius.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

4. Add Avatar Picture

Let’s drop in our avatar picture before we at the 3D depth. Find a picture that you like and drag it into Photoshop. Resize the image until it is right about the size of the rounded rectangle and then go Layer>Make Clipping Mask to clip this to the rounded rectangle layer below our image layer. Check out my screenshot to see what your Layers panel looks like.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

5. Avatar Base

Duplicate the Shape Layer by holding your Alt/Opt key and dragging below our current Shape Layer (this will drop your duplicated shape below the shape holding our image, but, more importantly, it will keep us from accidently un-clipping our clipping mask).

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

6. 3D And Style

Grab the Move tool (V) and nudge your Shape layer down 10px by holding your shift key and pressing the down arrow. Next go Layer>Layer Style>Gradient Overlay. Click on the Gradient strip and drag the rightmost handle to the 25% position like I have in my screenshot. Sample a mid tone in your avatar image to be that 25% handle and then select a much darker color in the avatar image to be the handle set all the way to the left.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

7. Add Surface Dimension

Once more duplicate our original rounded rectangle my Alt/Opt clicking and dragging that layer, but this time drag the new rounded rectangle up above our clipped image. Reduce this Set a Bevel & Emboss, Inner Shadow, and Gradient Overlay as I have to add some depth and shine to our avatar. Refer to my screenshots to see all the settings and the gradient that I used.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

8. Add The Shadow

Create a new layer just about the background texture layer and name it “Avatar-Shadow”. Grab the Elliptical Marquee tool and draw a small oval at the base of our avatar box. Go Edit>Fill and fill it with black. Go Select>Deselect to get rid of the selection.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

9. Complete The Shadow

Go Filter>Blur>Gaussian and blur this oval by 9px. Adjust the opacity and feel free to go Edit>Free Transform to resize a little bit if you need to. Check out my finished shadow in the screenshot.

Create a Twitter Widget UI - Photoshop CS6

10. Tweet Holder

Select the top-most layer in your Layers panel and grab the Rounded Rectangle tool again. Set the fill color to white and make sure you’re drawing a Shape Layer like we did with our avatar holder. Click anywhere and set the width of 425px and the height to 175px with a corner radius of 5px.

Create a Twitter Widget UI - Photoshop CS6

11. Add Arrow

To Add the arrow “connecting” our text display area to the avatar image we want to make an addition to our shape layer. This is pretty easy in CS6. If you’re using a version of Photoshop older than CS6 create a new Shape and rotate it just like we will, but you will need to merge both layers together to get them onto one layer (You can play with the Paths panel, but I want to keep this short here). In CS6 select our newest Rounded Rectangle Shape Layer and grab the Rectangle Tool (U) and set the “Path Operations” to “Combine Shapes”.

Create a Twitter Widget UI - Photoshop CS6

12. Draw Arrow Shape

Drag out a new shape and you will notice that it is not creating a new layer. We are simply adding to our rounded rectangle layer.

Create a Twitter Widget UI - Photoshop CS6

13. Rotation Is Key

Grab the Path Selection tool (A) (The black arrow) and select our little box that we just drew. Go Edit>Free Transform Path and look to the toolbar and set the “Rotate” to “45”.

Create a Twitter Widget UI - Photoshop CS6

14. Position The Arrow And Combine

Using the Path Selection Tool drag the new box shape up to where we want it positioned and then drag a selection over this little box and our tweet holder rounded rectangle. Look to the toolbar for this tool and select the “Path Operations” icon and choose “Merge Shape Components”. This will create one path and one shape of both of our shapes.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

15. Add Outer Glow & Stroke

Add the Outer Glow & Stroke which I have in the screenshot. This will pull our edges off the background a little bit and really set this element off of the background.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

16. Add The Bird

Find a Twitter Bird in Google Images or anywhere online and drag it in, convert it to solid black, and set the Layer Opacity to 15% and use the Move tool (V) to drop it in the bottom right corner to “watermark” our UI element as a Twitter feed/Tweet.

Create a Twitter Widget UI - Photoshop CS6

17. Fill In Tweet

Grab your Type Tool (T) and add some text which will make up our tweet. I’ve added something and set the non-link text color to “#404040”.

Create a Twitter Widget UI - Photoshop CS6

18. Twitter Button Base

Grab your Rounded Rectangle tool again and click anywhere to create a new rounded rectangle. Set the width to 105px and the height to 20px.

Create a Twitter Widget UI - Photoshop CS6

19. Stroke And Gradient Overlay

Add the Stroke and Gradient Overlay to your Twitter button that I have added. Reference the screenshots to see the colors, sizes, and gradient settings.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

20. Add The Blue Twitter Bird

Run a Google images search and find a PNG file of the blue bird for Twitter. Drag that into Photoshop and make it fit into the left side of the Twitter button. Add the Drop Shadow and Inner Shadow that I have. Setting can be found in the screenshots below.

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

Create a Twitter Widget UI - Photoshop CS6

21. Adding The Type

Grab the Type Tool (T) and add a bit of text “Follow @tutvid” to your button. The text settings are Helvetica Neue, Bold, 11pt Size, Color of #323232.

Create a Twitter Widget UI - Photoshop CS6

22. Finished!

Create a Twitter Widget UI - Photoshop CS6
Follow Me On Twitter!

Like Tutvid on Facebook!