thumbnail

In this tutorial, I`m going to show you how to design a clean and beautiful pinboard widget. The tool we`ll be using is Photoshop. The tutorial is meant to introduce you into UI(user interface) design, a more and more used and appreciated design niche, since smartphones and tablets took the supremacy over apps. Every app you see and use has an interface, built to help you understanding the app and using it with ease. From here, a clean and intuitive interface is mandatory for the success of every application.

280 downloads

What we`ll be designing today:

final image Design a Clean and Modern Pinboard Widget in Photoshop

Let`s begin. Open Photoshop and create a new document. I set the dimensions of the document to 630x500px. Set the Resolution to 72dpi because we`re designing for web.

new document Design a Clean and Modern Pinboard Widget in Photoshop

Grab the Paint Bucket Tool(G) and paint the empty canvas with white. We`ll be applying a filter, so the background will look a bit noisy. For that, go to Filter->Convert for Smart Filters.

Double-click the background layer and stylize it with “Color Overlay”. Change the “Blend Mode” to “Multiply” and apply the “#f2f2f2″ color.

Now go to “Filter->Noise->Add Noise” and add an uniform monochromatic noise of 3%.

background noise Design a Clean and Modern Pinboard Widget in Photoshop

Now we have a background on which we can build a pinboard. Let`s proceed to the next step.
Draw the pinboard shape with the Rounded Rectangle Tool. Set it a radius of 5px. The shape should be 310x310px.

new shape Design a Clean and Modern Pinboard Widget in Photoshop

Next, we`ll draw the top area of the board. Select the Elipse Tool(U), draw a circle of 44x44px(hold Shift key while you drag to draw a perfect circle) and place it at the top of the board like in the image.

pin Design a Clean and Modern Pinboard Widget in Photoshop

You can smooth a bit the area where the circle meets the shape by adding 2 small “ears” I would say, to the design. Select the Pen Tool(P) and draw 2 shapes, and position them one on the right and one on the left side of the circle, just where the circle meets the shape.

ears Design a Clean and Modern Pinboard Widget in Photoshop

Let`s stylize all these shapes. For this, we need to merge all this layers into a single one, so the effect can propagate on the entire design. Select the shape layer, circle layer and small “ears” layers(Ctrl+Click to select more layers) and hit Ctrl+E or go to “Layers->Merge Layers”. Now you should obtain a single layer of all the elements we just draw until now(excepting the background, of course). The effect that we want to add is an “Inner Shadow”.

inner shadow Design a Clean and Modern Pinboard Widget in Photoshop

The shape received an effect which is called the “letterpress” effect. There are a lot of tutorials about this technique and as you can see, is very easy to obtain it with just one layer style applied.

letterprint Design a Clean and Modern Pinboard Widget in Photoshop

Select the Rounded Rectangle Tool(U), set the radius to 4px this time, draw a shape of 300x300px and center it inside the big one.

inner shape Design a Clean and Modern Pinboard Widget in Photoshop

Stylize this shape too, by adding it a very light gray color and a smooth drop-shadow(every detail counts icon smile Design a Clean and Modern Pinboard Widget in Photoshop ).

color overlay Design a Clean and Modern Pinboard Widget in Photoshop

drop shadow Design a Clean and Modern Pinboard Widget in Photoshop

If you`re a beginner, I`m suggesting you to pay attention to the next step, because is not an easy to understand task.

Okay. We`re going to obtain the selection of only a part of the shape. Because our inner shape has rounded corners, you can`t select it by using the Rectangular Marquee Tool(M).

Ctrl+Click on the small layer thumbnail to reveal its selection.

obtain selection Design a Clean and Modern Pinboard Widget in Photoshop

Now that you have the selection revealed, pick up the Rectangular Marquee Tool(M), set the selecting mode to “Intersect with Selection” and draw a selection which, intersected with the original one, will generate another selection of 60px high, like in the image.

new selection Design a Clean and Modern Pinboard Widget in Photoshop

Now create a new layer(Layer->New->Layer), grab the Paint Bucket Tool(G) and paint the selection with white.

I`m going to show you how to add to this shape another cool effect which will make it look like is sitting on the pinboard. Apply this next styles:

another drop shadow Design a Clean and Modern Pinboard Widget in Photoshop

new inner shadow Design a Clean and Modern Pinboard Widget in Photoshop

Our design is starting to take shape and the pinboard is looking like this:

white Design a Clean and Modern Pinboard Widget in Photoshop

Following the same steps as above regarding to selections, create a top ornament by designing another shape with top-rounded corners and bottom-rectangle corners. Color it with a light blue(#4fcef4 in my case).

top ornament Design a Clean and Modern Pinboard Widget in Photoshop

Separate the main area of the inner shape in 3, by drawing 2 pairs of 2 smooth lines(one darker and the other one lighter than the background content, to create an inner effect).

lines Design a Clean and Modern Pinboard Widget in Photoshop

Now we`re going to add some content inside the new areas created. The typeface I`m using is the elegant Museo. So, go and grab it and install it on your system.

I decided to use this widget for displaying a feed of some articles. Therefore, the title I set was “My Favorites Articles”(Font:Museo 500; Color:#565656; Font-size:14px).

The thumbnail I decided to make it with rounded corners. Here`s how:
Take an ordinary picture and resize it to 50x50px.
Select the Rounded Rectangle Tool(U), set the radius to 4px, change the mode to “Paths” and draw a path of 50x50px(same dimensions as the thumbnail). Right-click on the path and choose “Make Selection”. Now you should have a selection with rounded corners.
Superpose it on the image and cut(hit Ctrl+X) the selection from the image. Now hit Ctrl+V to paste what you cut.
There you go. You just made a rounded-corner image.

Stylize it by adding it some stroke and a drop shadow.

stroke Design a Clean and Modern Pinboard Widget in Photoshop

image drop shadow Design a Clean and Modern Pinboard Widget in Photoshop

If you followed the steps above, the thumbnail should look like this:

article thumbnail Design a Clean and Modern Pinboard Widget in Photoshop

Now add a title, a date and the source website.

titles Design a Clean and Modern Pinboard Widget in Photoshop

Last thing, a “favorite” and an “info” button. I used some custom shapes (Custom Shape Tool -U) to draw them at 16x16px.

favorite info Design a Clean and Modern Pinboard Widget in Photoshop

Create the rest of two items like we did on this one.

3 articles Design a Clean and Modern Pinboard Widget in Photoshop

Last touch, let`s add a Pin. Select the “Elipse Tool(U)” and draw a circle of 10x10px. Color it in white and add to it a small gray drop-shadow.
That was all! Here`s how the pinboard looks like:

final image Design a Clean and Modern Pinboard Widget in Photoshop

Summing Up

This tutorial is a good example of what UI design is all about. The pinboard can easily be integrated into an app or website and can be coded entirely using CSS3(rounded corners, drop shadows, inner shadows). Regarding the technical part of the tutorial, the things you can learn are: how to create images with rounded corners, how to design shapes with both rounded and rectangular corners and how to create modern effects like letterpress or shadow effects.

I thank you for your time and hope you enjoyed the tutorial and learned something today. If you have any feedback, drop it below in the comments section!

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • http://imasoud.net/ Masoud

    Good tutorial
    Thanks