Create an Instagram Widget in Adobe Photoshop

Preview

Topic: Adobe Photoshop
Difficulty: beginner
Estimated completion time: 30 minutes

In this tutorial we will be creating a beautiful Instagram widget. We will actually imitate one of the popular “play-off” trends on Dribbble, which is creating a fictional widget for the very popular mobile photo sharing service, Instagram. Follow along as I will teach you how to make from scratch a beautiful and appealing widget in Adobe Photoshop, for the earlier mentioned application.

Step 1

We will begin by creating a simple shape (File -> New) of about 775 pixels in width and 415 in height.

SEE ALSO: 9 Photoshop Alternatives For Big and Small Tasks

Step 1

Step 2

We will need a nice and attractive background for our user interface piece. In our case i decided to use a vertical background pattern, which will nicely fit our design. You will be able to download it for free here.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

Step 2

Step 3

We will start the work on the widget it-self by creating a new rectangle shape (U) of about 350 pixels in height and 335 pixels in width. Give it a nice gray color (#e5ebeb).

Step 3

Step 4

We will have to apply a nice subtle shadow to the image so that our base shape won’t look too “flat”. Set the distance to 3, the size to 5 and the opacity to 47%. Set the color to black.

Step 4

Step 5

Add a light noise to the shape. I really like to see light noise effects on different shapes but you should be careful and not over-use the noise by using it on all elements possible. Just use it when you’ll consider it’s necessary and won’t hurt everyone’s eyes. There are actually various ways of adding a noise effect to your necessary shapes or layers, but the one i prefer is actually applying that noise as a pattern.

Step 5

Step 6

Finish the base shape by applying a light stroke effect. The color must be a dark grey and the size must be 1 pixel.

Step 6

Step 7

Let’s make the shape more lively and colorful and find a pretty image (be sure to not break any copyright rules) of about 170 pixels in height that will cover the entire width of the shape. I  applied a light “Inner Shadow” effect to apply a nice effect at the top part of the image.

Step 7

Step 8

It will be pretty easy to create our avatar box, for that we will only need a white shape of about 80×80 pixels (Create it by using the Rectangle Tool (U)) with a nice drop shadow effect. Find an image of about 10 pixels less then its shape and position it on center.

Step 8

Step 9

We will also place one CTA (call-to-action) button below the avatar. To do that, use the Rounded Rectangle Tool (U)  and create a shape of 145 pixels in width and about 40 pixels in height. Give it a nice pinky color (#d53043) and apply the drop shadow effect you can see on the image.

Step 9

Step 10

Continue by adding that “usual” effect for all cta buttons which is an “Inner Shadow” effect. Set the distance to one pixel and the opacity to 30%.

Step 10

Step 11

Apply a “Bevel and Emboss” effect, which will give our button a better-defined shadow on the bottom part of the button.

Step 11

Step 12

We will also apply a Gradient Overlay effect to the button as well. It is a common practice to actually give the button the top and bottom color but I am used to doing it in another, easier way. I usually apply a Blending Mode of Soft Light and give it the required Opacity. This time i found 45% opacity to be perfect.

Step 12

Step 13

Finish the button shape by adding a light, 1 pixel stroke effect as shown on the image above.

Step 13

Step 14

Last step in our “header” part of the widget and button is adding a short, catchy yet usual phrase. I simply added “Follow Me” by using the Open Sans font, setting the weight as bold and the size 14pt. Apply a Drop Shadow effect to the text as well.

Step 14

Step 15

We move on to our next section of the button which will contain a little bit information about our fictional profile. Use the earlier-mentioned font to add the text you see on the image. For the name I used the font in a bold weight and a size of 18pt. Apply a white drop shadow effect to the text to make it stand out, just a little bit.

Step 15

Step 16

We will have to add a small widget that will show the counters for how many follows, followers and images we have posted thus far. Use the Rounded Rectangle Tool (U) and create a shape similar to the one you see on the image. Apply a light drop shadow effect, the size being 1 pixel and the distance 1 pixel as well. Set the opacity to 15%.

Step 16

Step 17

Apply a “Inner Shadow” effect as seen on the image. This is actually an optional effect because it is barely visible yet i think that this effect a little bit enhances the look of the shape. It is totally up to you to add it or not.

Step 17

Step 18

As you can see on the image above,  there is a light Gradient Overlay effect present, so why wouldn’t you add that right away?

Step 18

Step 19

Our last enhancement for the shape will be a light-grey stroke effect. The color for our stroke is: #c8c8c8.

Step 19

Step 20

Finish it by adding some numbers and grey division lines between those stats. The font used is also Open Sans for both the numbers and text. By using the Line Tool (U) create a grey horizontal line under the middle section of the main widget and give that line a light white Drop Shadow effect.

Step 20

Step 21

Add two images that will actually represent our “feed” of images. Don’t forget to give them a 2 pixel white stroke effect.

Step 21

Step 22

Step 22 Step 23

Finish the whole widget by adding 3 pins that will actually imitate a slider’s functionality. We will be creating these pins by using the Elipse Tool (U) and will style them as follows: The first and the last circles will have a grey color hence their “inactive” states and the middle one will be given that nice pink color we used for the button. It would be eye-pleasant to add some white Drop Shadow effect as well. To be noted is that I have also added a light stroke effect to the inactive pins, of a little bit darker grey then the color of the shape. This is more of another optional step because those two grey colors (stroke and base) can easily clutter so do that if you only consider to be it appealing and not disturbing.

That’s it for this tutorial guys, I hope you’ve enjoyed it and found it easy to work along. Stay tuned for more tutorials and let me know in comments section if you’ve got any questions or suggestions!

File Source (PSD)

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Stelian Subotin

Stelian is a Web/UI Designer who focuses most of his time on writing and creating premium PSD templates.

Newsletter

5 Comments
  1. Goran Jan 9, 1:26 pm

    Awesome tutorial. Also you are missing fb share button on posts

    Reply
    +4
  2. stuart Jan 9, 3:11 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -7
    • xeninweb Jan 9, 7:26 pm

      Quote in full Stuart!

      Reply
      0
    • Ray Jan 14, 10:02 am

      @ Stuart Your “anyone can design this” comment is the dumbest I’ve seen here in a long while. is all about design. And design is not pointless, if you want to see things that work, then go to github, or perhaps a tutorial on the Coding section on here.

      Reply
      -3
  3. Marc Jan 18, 6:56 am

    Hey guys – I loved the look of this widget, so I built a version in HTML and CSS. I’m more familiar with flickr, so I used php and the flickr API to make the widget pull your latest photos from there.

    Time-permitting, I’m going to take a stab at an Instagram version.

    Reply
    +3

Leave a Reply

*
* Minimum length: 20 characters