Photoshop Techniques, Tips and Tricks

In the world of design, it’s all about being innovative and creative. To convey your innovative and creative ideas to a client, translate them into something they can see, you may need to create a visualization, a mockup.
Photoshop remains the standout choice for this kind of exercise, offering as it does a dazzling range of tools for creating and manipulating images. In fact, Photoshop is such an elaborate piece of software that it can be difficult to work out exactly how to achieve a particular effect.
At the same time, it is critical that your mockups look highly professional — they are a selling tool that tells your client just how good you are, not just in the production of ideas but in the way you execute them.
If you wish you knew just a bit more about how to get really impressive results with Photoshop, this article is for you.
In this tutorial we’ll learn how to create a slick, clean visual design for an RSS Feed Widget. Perhaps it’s for a website, to sit on a desktop or maybe as a little hover screen in your taskbar.
This is not about how to develop or program such a widget, it’s just about creating a visual design using what are really only basic Photoshop techniques and some modern web design principles. You’ll end up having created an impressive design and, more importantly, feel comfortable with techniques you can apply to other projects.
The techniques described here are what I call “there’s-no-other-way” techniques. That’s because I have been in situations where I didn’t know what to do, so I figured out a way to achieve the effect I wanted. For me, there’s no right way or wrong way, there’s just the way that works.
Let’s get started. Fire up Photoshop.

Starting Up

We’ll begin with setting up a new document – File -> New, of course. I chose these settings (see the image below), but since we’ll use gradients in the background, any size is possible. However it’s advised to use a smaller size, so that you can add details easily and you get a more compact result. Name it RSS Feed Widget or something like that.

The Background

Start the design by giving it a decent background. Right away, this might surprise you: after all, the background doesn’t really matter, it’s about the widget, right? The fact is, a background with depth and texture will go a long way toward making your image seem realistic. The technique involved is pretty basic and can be used for many purposes, while the effect is impressive.
We’ll make our eventual widget appear stronger if we use a color contrast between the background and the widget. In the color scheme, orange is the opposite of blue. So we’ll make a background with a blue tint.
Grab the gradient tool and open up the gradient editor (by clicking on the gradient bar in the top left corner). Let’s also select the Radial Gradient because that’s what we’re going to need after we set the gradient.

In the gradient editor, we’re going to make a gradient that has uses purple and a turquoise color. I am not going to use full blue, because we want it to balance but not overwhelm the orange color of the RSS feed. I have made this gradient (see the screenshot below). The colors and positions are as follows:

#695699 at 0%
#0d605d at 56%
#06302f at 80%
#022120 at 100%

Now let’s click OK. Remember to have Radial Gradient selected and draw the gradient from the bottom left corner to the right left corner. Experiment a little with the position: try to have a pretty big purple spot in the corner, going to green with a large dark green outflow. Name the layer Gradient 1 or something like that.
Mine looks like this:

We are going to repeat the drawing of the gradient two more times. The second one is a gradient from the top to the bottom, something like this (make sure to put it on a new layer and call that layer Gradient 2!):

…and the third one, also on a new layer that we’ll call Gradient 3(!), looks something like this (a big one from the bottom right corner to the top left):

What we’re going to do now is change the opacity of two of the layers: Gradient 2 will have an opacity of 50% and Gradient 3 will have an opacity of around 28%. We should have something like this:

Now for our final step: create a new layer and call it Clouds. Make sure the layer is on top of all of the previous layers (the gradients). Set your foreground color to #2a435a and your background color to #cbd1d6 (the colors can be set by clicking the colored squares in the bottom left corner and inserting the HEX-​​codes into the given spaces). Go to Filter -> Render -> Clouds. By doing that, clouds have rendered on our new layer. Change the layer opacity to 10% and set the mode to Vivid Light (the mode can be found left of the Opacity slider). We now have something like this, in which the clouds provide some texture:

Our background, so important for our presentation, is now done! On to the real design.

The Basic Shape

When we look at the final widget, we see a white and an orange shape being dominant in the image. Let’s start with the white shape, since that’s our base.
Before we actually draw it, here’s a tip: try pressing CTRL+R to bring up the Rulers, the two rulers on the left and top of your editing screen. Then right-​​click one of the rulers, to bring up a little menu in which you can choose your measuring unit. I chose pixels. Now here’s another tip: you can click and hold one of the rulers, drag your mouse to the right (when coming from the left ruler) and down (when coming from the upper ruler) to create a guide. You could insert them by using View -> New Guide, or you may find this method more convenient.
Why do we want this guide? Well, it should make things easier to explain: by having those rulers enabled, I can tell you how big and where my widget is. I situated my basic shape from around 85px to 340px wide to 70px to 400px high. So if you put those guides on those coordinates, you can draw a shape as big as mine. Don’t worry if it’s not in the middle, because we’ll fix that later on.
To actually draw the shape, let’s select the Rounded Rectangle tool. Set the drawing mode to Shape Layers and the radius to 6px (see the image below). Select #f0f0f0 as your foreground color, or something white/​grey. I never use full white or full black, shades and tints are far more interesting — and realistic.

We can now draw the rectangle. If you use the rulers and guides, just draw the shape from the top left corner to the bottom right corner. If not, try to make a shape like the document size, only smaller. Here’s my result:

Now to finish our basic shape, let’s add a little triangle on the bottom. You can select the Polygon Tool for that:

Set the Sides to 3, so that we have 3 sides and thus have a triangle. Now draw the triangle at any size/​angle you want. When you’ve done that, press CTRL+T to free transform it: try to make one of the sides completely horizontal, so that you have a triangle pointing down. When finished, select the Move tool (press V) and move it to the bottom of the widget. To align them perfectly, we’re going to use Photoshop’s align: CTRL+click on both the triangle and the rectangle layer, so that you have both of them selected, make sure you have the Move tool  still selected and click this icon:

That icon means Align Horizontal Centers, which means that it will align the centers of the selected layers (our triangle and rectangle). If everything worked, you should have something like this:

Now, merge the two layers so that you have one white shape. And with that, our basic shape is finished.

The Orange Shape

On top of our white basic shape, there’s an orange shape: the border.
Instead of duplicating the white layer and deleting the middle part, I’d like to use one of the primitive techniques. Why not duplicate? Because in this case, we’d get an ugly white border around the orange shape. Of course there are other ways around it, but I’ll use my way to explain this. So, grab the Rounded Rectangle tool again, set it to Shape Layers again and pick the RSS orange I was talking about as your foreground color: #f48229. Now zoom in on the top left corner of the white shape, and draw a nice rounded rectangle over it, like this:

Now duplicate that orange shape and put the new one on the right of your white shape. Secondly, put a bigger orange shape on top of the white shape, like this:

Duplicate the upper bar as well and put it in the bottom of the white shape. Thirdly, try to reconstruct the triangle in the bottom with the orange color. Lastly, and this is why we didn’t duplicate it, let’s shift everything a little: move the two big orange bars up and down, the small sides to the left or the right and the rectangle down, so that the orange shape fully covers the white shape. Note: this may not be necessary, because you might have done everything right in the first place. Also make sure you don’t shift the orange shape too much: we should be able to see the shadow of the next step afterwards. So if you think your orange border looks great already, forget everything about the shifting.
Finally merge all of the orange layers and name it Orange Shape or something like that. Our final orange shape looks something like this:

The First Shadow

Now let’s add a little drop shadow to the white shape.

Result:

The Second Shadow

Now let’s add an inner shadow to the orange shape — there’s an example of applying a modern web design technique. What I mean by that is using detail, adding shadows with 100% opacity and some other tricks. By adding this drop shadow, you can create a little bit of depth. The color is darker than the shape itself, to make it pop up.

The result of the drop shadow:

Adding Inner Shadow

And by using another modern web design technique, we can get even more detail: an inner shadow for our orange shape. The orange we’ll use is lighter than the original shape, representing a shiny edge.

The result:

Noise Can Make Things Beautiful

Sometimes texturing certain elements of a design doesn’t have to be that hard. There’s a very underestimated filter in Photoshop, called noise. If you’re not familiar with it, get to know it — it’s very useful.
We’re going to add noise to the orange shape, just to make the whole more interesting and to add a little texture. So select the orange shape layer and select Filter -> Noise -> Add Noise. Just a little bit, though:

Now we have something like this. Better, eh?

Adding the Last Pieces of Detail for More Depth

To make the orange shape even more complete, we’re going to add some more lines and colors. I’m going to use another ‘primitive’ technique: select + fill. Instead of creating lines with shapes or paths, I’m going to create lines by selecting a row of pixels and fill it up with a color. Why? I don’t know. I just did this once and I liked it, so I kept using the technique. Sometimes, it’s just faster.
Our first two lines will be on both sides of the white rectangle. The color will be darker than the orange of the shape, so something like #b97038. So select that color as your foreground color. Zoom in on the design so that you have quite big pixels. Then grab the Select Tool and make a 1px wide selection, starting somewhere around the dropshadow (see image below). Make sure to make a new layer on top of every layer so far and press Alt+Backspace to fill the selection up.

Although the line may not seem very visible when zooming out, the eventual viewer’s eye will register it in just the way we register almost imperceptible details that tell us something is — or looks — real.
Now, duplicate that layer and move it to the right to the same location on that side, so that we have the line on both sides:

Then we add a bigger line on the bottom of the white rectangle, to add more depth and make the white box feel like a real box. Set your foreground color to a lighter orange, like #f8a25f and select a 3px high row, from the left line we just created to the right line we just created, like this:

Create a new layer and then fill the selection with Alt+Backspace again.
We now have something like this:

What you probably notice now is the lack of depth in the bottom triangle. Let’s fix that.
Zoom in on the triangle and select the Line Tool. Set the line to 1px and set set your foreground color back to #b97038. Now just draw a line along the edges of the triangle and move and shift them a little until they look something like this:

Merge the two lines (if you have two separate layers for them) and add a little shadow to those lines through layer styles, for the same shiny effect as we had with the complete orange shape:

We now have more detail, and that looks like this:

Adding the RSS Icon

Now a very important step: adding the icon, so that it’s clear that we’re dealing with an RSS widget, and not with a Facebook or  Twitter or some other widget.
Instead of searching for hours to find an RSS icon with a transparent background, we’re going to use one last ‘primitive’ technique: covering an existing icon with the pen tool.
But, first things first: this is not my design, of course. It’s the official RSS logo (although it comes in many forms) that we’re going to use. I found this image, that you can copy+paste into our Photoshop document:

Credits go to classicinternational​.eu. Scale the image down until you have a proper size and move the image to the top of the widget, like this:

Be sure to center-​​align it: select both the RSS image and the orange shape OR the one of the background layers, go to the Move Tool again and press the Align Centers Horizontal button again I mentioned earlier.
Now let’s overlay it. Select the Pen Tool for this one. If you don’t really know how to handle the Pen Tool, I advise you to check out some tutorials, as it is a fairly advanced tool. But this task is not too hard, so give it a try. Select #f0f0f0 as your foreground color again and be sure to set the mode of the Pen Tool to Shape Layers again. Then just follow the outlines of the white bars in the RSS logo – something like this:

Two notes: it’s easier to create the two bars and the ball in four separate paths. So when you’ve closed one path, hit Esc to delete the path and then advance to the next bar. You’ll end up with three new layers, each containing one white part of the logo.
Secondly, it’s advised to lower the opacity of the layer after starting with a path, because then you have full overview of the shape you’ll have to trace. If you do this, remember to put the opacity back.
If you traced all three parts, you can delete the original RSS logo image from your layers and you should have something like this:

Now merge the layers, so that you have one layer containing the white RSS icon in the middle of the widget.

Adding Some Drop Shadow to the Icon

To make it look like the icon is actually in the orange shape, let’s use a modern design technique, similar to the drop shadow technique we used earlier. By making a drop shadow, 1px in size with full opacity, on top of the icon, it looks like it’s ‘stamped’ into the background. So add this layer style to the icon:

This technique is used many times in buttons, websites and user interfaces.

1. 12.   Adding text

One of the easier parts of this tutorial is adding text – when making a design like this, it’s nice to have some text to show what it would look like if this was actually being developed. So let’s start with selecting the Text Tool.
I used three examples of actual RSS updates, found on http://​www​.environmentalhealthnews​.org/​r​s​s​e​x​a​m​p​l​e​s​/​x​s​l​/​e​h​n​_​x​s​l​.​html, to make it look like an actual RSS Feed. To deal with the text efficiently, I decided to slice it up in three parts, instead of creating one textbox.
The first text:

Bisphenol A, under a health scandal. Archives are often ruthless. For those who plunge into scientific journals, the case of bisphenol A (BPA) has all the features of a global health scandal, potentially one of the most serious of the past decade. Paris Le Monde 2011 – 10-30T09:00 – 05:00

The second text:

China coal mine blast kills 29. A gas explosion at a coal mine in central China has killed 29 miners, according to state media, the latest in a series of deadly accidents to hit the country’s mining industry. Agence France-​​Presse 2011 – 10-30T09:00 – 05:00

The third text:

Drilling debate turns personal. The debate about fracking has pitted neighbor against neighbor, and has often set people who live in suburbs or villages against the farmers and landowners who live outside them. New York Times 2011 – 10-30T09:00 – 05:00

Now, the third one may seem chopped, but that’s because it is: I’ll save you the little effort of deleting unnecessary text later on. So create three text boxes with the Text Tool: one below with text 1, one above the first one with text 2 and a third one with text 3 – all of them Arial, 10pt. Next, make sure these text layers are beneath the orange shape layer. Also, to make things more legible and pretty, make sure you put some margin space between the edges of the text boxes and the orange shape.
We have something like this:

1. 13.   Styling the Text

It’s nicer to have some colors to the text, and it’s useful too: it helps the reader distinguish separate elements of text.
First of all, let’s style the title of the examples: select “China coal mine blast kills 29.” and “Bisphenol A, under a health scandal.” and make them Bold (you can do that next to the font selection). Give them #212121 as a color to make them stand out.
Then the source and time: select “New York Times 2011 – 10-30T09:00 – 05:00” and “Agence France-​​Presse 2011 – 10-30T09:00 – 05:00” and “Paris Le Monde 2011 – 10-30T09:00 – 05:00” (one at a time) and make them Bold Italic, with #9e541a as the color.
Lastly, select what’s left of the text and make that Regular, #767676. We now have this:

Make sure that no text overlaps the orange shape and that the text layers are beneath the orange shape layer. Also make sure no text comes out of the top of the orange shape.
Almost done!

Lines and Shadow

To help the reader distinguish separate news items, let’s add two lines. We’ll just add one and duplicate that; select the Line Tool again and set it to 1px, #4b4b4b. Hold shift while drawing the line to get a perfect straight line and draw it between the news items.
Duplicate the layer and put the new line in the other open space. Use the Move Tool (V) to move them around a little, until you are quite certain they are exactly between the news items. If it looks like this, you’re doing great:

Now, to add a certain depth, let’s add a shadow on top of everything: create a new layer (call it Shadow or something like that) on top of all of the layers, and select an area beneath the orange shape on top:

Now select a deep black as your foreground color and open up the Gradient Editor. In there, there should be a gradient in there looking like this (see image below). If not, press the little arrow on the upper right of that gradient and select Reset Gradients. Be sure to save your gradients if you have made any new ones!

Make sure to have Linear Gradient selected, and not Radial Gradient, and draw a gradient in the selection we just made (on our new layer):

Now tone it down by lowering the opacity of the newly made layer to around 50%. We now have this as a result, and there’s only one thing left: a scroll bar.

The Scrollbar

The reader needs to be able to scroll up and down through his news feed, of course, so that’s why we’ll add a scroll bar. Let’s make it clean and simple.
Zoom in on the right bottom corner of the widget, so that you can add more detail to the scroll bar:

Go with your designer’s instinct while positioning: make sure there’s some room on the left and some room between the text and the scrollbar. Also try to align it a little bit with the text, so that the bottom of the scrollbar matches the bottom of the text.
Using the Rounded Rectangle Tool once more, with a radius of 2px this time and #776e67 as a color, draw the scrollbar (not too long):

And to add some detail to it, select the Line Tool  with a 1px size and #cbc5be as the color to create two, tiny horizontal lines on the bar. It will look like this:

Change the opacity of the scrollbar to around 50% and… we’re done!
We just created a beautiful and impressive RSS Feed Widget mockup using simple, modern and effective Photoshop techniques.

Result

This is what I created: I hope you achieved the same result!

If you have any questions, don’t hesitate to ask them in the comment section below.
Thanks for reading!