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.
What we`ll be designing today:
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.
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%.
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.
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.
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.
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”.
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.
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.
Stylize this shape too, by adding it a very light gray color and a smooth drop-shadow(every detail counts 🙂 ).
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.
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.
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:
Our design is starting to take shape and the pinboard is looking like this:
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).
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).
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.
If you followed the steps above, the thumbnail should look like this:
Now add a title, a date and the source website.
Last thing, a “favorite” and an “info” button. I used some custom shapes (Custom Shape Tool -U) to draw them at 16x16px.
Create the rest of two items like we did on this one.
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:
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!