How to Create Instagram Widget in Photoshop

Instragram has evolved as an effective tool recently. In the following tutorial, we will be discussing the process for creating Instagram widget in Photoshop by following some simple steps.

Instagram Widget Creation

  • One should start by making a simple shape of about 415pxls in height and 775pxls in width.
  • For the user interface piece, one will need an attractive and nice background that fits nicely to the design.
  • The widget-work can get started by simply creating a rectangular shape of about 335pxls in width and 350pxls in height. A nice grey colour touch can also be added to it.
  • A subtle shadow needs to be applied on the image so that the base doesn’t look too flat. The distance can be set to 3, opacity to 47% and size to 5. The colour must be set to black.
  • A little noise can be added to the shape, but one should be careful at the time of using them so that there is no scope for any “overdose”. It should be used only if necessary and should not be hurting the viewer’s eyes. Noise effect can be added in a number of ways but the popular among them is to apply it as a pattern.
  • The base shape can be finished by applying the effect of light stroke. The size needs to be set at 1pxl and in dark grey colour.
  • Now to make the shape come alive one can find a pretty picture that will be covering the shape’s entire width.
  • A white shape is needed of 80x80pxls to create the avatar box. Next, one will need an image of 70x70pxls and then put it right on the centre of it.
  • A call-to-action (CTA) button needs to be placed below the avatar. For that the Rounded Rectangle Tool can be put to use and create a shape of 40pxls in height and 145pxls in width. The effect of drop-shadow can be applied here.
  • By setting the distance to 1pxl and opacity to 30%, one can continue the process for the buttons.
  • The effect of “Bevel and Emboss” can be applied on the button.
  • Last step before completing the widget’s “header” part is by adding a catchy, short yet usual phrase.
  • Next, is to add some information about the fictional profile.
  • Then one needs to add a little widget that will be showing the counters of followers, number of images posted and the number of follows.
  • Finish the thing by simply putting some numbers and division lines between the stats. To create the grey horizontal line, one can use the Line Tool and round it up by lightly applying the Drop Shadow Effect.
  • Two images need to be added that actually will be representing the images “feed”. A 2pxl white stroke can be given to them.
  • Now, the entire widget can be finished by adding 3 pins, imitating the functionality of a slider. To do that, one can use the Elipse Tool.