Tutorial Outpost

So you want to make a posit-it note? A note, a photo, anything - but posted on a wall for example. The basic technique to do this is quite simple. Let me show you how. First, make a shape you want to turn into a posted item on a special layer called “message”.

Now go to Edit > Transform > Warp. You’ll get nine points on your item. Dragging them around give your item a little perspective, so it does look more three dimensional.

Now duplicate the “item” layer and name the new duplicated layer “message shadow”. Drag this layer beneath your original “message” layer. Now, right click on “message shadow” and choose blending options. In these options under the drop shadow tool choose the look of your item’s shadow. Preferably, put “0” under distance so you get the shadow all around your item.

This is what you get.

If you look at your layers window, this is what you should have.

With the “message shadow” layer selected go to Layer > Layer Mask > Reveal All. Make sure you have the new layer mask of the “message shadow” layer selected.

Now using the gradient tool (with a selected default white to black gradient”) make a gradient from the top to the bottom of your message.

This is what you should have looking at the layers window.

Now you have the basic form of a posted item.

As you can see, the “magic” is in the shadow. Since shadows act up if you try to use this gradient technique on the top layer, you always need to use a special shadow layer. With a bit more work, a few more drops of color and some text, you can make a very nice stick-it note.

Download the PSD used for this tutorial.

by Ivan Brezak Brkan

Photoshop has become a tool that most designers as well as artist rely on for their day-to-day workflow. Web design, graphics, illustrations, Photoshop is a very versatile tool. There is one type of graphic that intimidates a lot of people. Thats icons! Those nifty little graphics that form the basis of any good GUI. Well, no more vectors people. If you need a basic icon for your site or application and don’t want to beat around the bush, I’ll show some basics in creating a good Mac style icon. As a case study, I will be recreating the .Mac icon which is simple, yet beautiful…

First, open a new PSD file, a 200 x 200 PX canvas will work nicely. The thing with icons is to to things big, because when minimized, they can and should look awesome. Luckily for us, a not so great detail in the big picture can look awesome when shrunk to the size of the icon.

Step 1

First make a new layer over your background layer and name it “base”. Make a nice big circle by holding shift (to make it perfectly round) while draging it. Right click the layer you made the circle and right click ”blending options”. Here you can adjust various things, including gradients which I used for this icon. Now you have a nice blue canvas.

Step 2

Now you need to “brighten” up the lower part of the icon to make it look more realistic. Take your brush and set it up like I did, activating the airbrush feature with the flow set to 50%. Now control click the “base” layer (to get a selection) and create a new layer called “highlight” not deactivating the selection. Click “highlight”! Now you can work on that layer with the selection from “base” so get your brush and start easily brusing to get the look just right.

Step 3

Now we go on to the lines. Select your eliptical marquee tool (right click on the rectangular marquee tool so you can select it) and use it to make a selection that has the outer broder in the shape of the line you want to draw (you may also prefer using the pen tool) and then go to Edit > Stroke (select white and inside, as well as 1px) to finish it. The only problem now is that the line goes outside the circle. Control click the “base” layer and go to “Select > Invert” to invert the selection. Now you can delete the part of the line you don’t need. To get the faded edges of the line right it is best to use the eraser set up like the airbrush (just select the right brush type and flow) and work around the edges.

Now repeat the process for each line to get the desired effect.

Step 4

As far as the dots go, it’s pretty easy. Just draw a little circle and use Photoshop blur filter on it. Use more blur for the bigger circles. Don’t worry to much about perspective, just be sure to have not too many and not too little circles.

Step 5

Now it’s time for a little more highlighting… Control select “base” again and drawing on a new layer, highlight the top with white using the airbrush.

Create another layer on top and using dar blue and the “base” selection brush in some dark blue edges to get a nice realistic perspective.

Step 6

Now for the blue edge. Control select “base” and make a new layer in which you’ll Edit > Stroke a 3 pixel dark blue border inside.

Having that layer selected go to Layer > Layer mask > Reveal all. Now use the default “white to black” gradient in the layer mask to make a portion of the blue border visible and a portion invisible.

Step 7

Now to finish the icon. Merge all the layers to one layer (by selecting all the layers and then using Layer > Merge layers). Copy that “master” layer (We’ll need it later). Open the “blending options” of the top layer and apply a small inner glow. Obcourse, you want that glow only at the lower edge, so use the technique which we used to make just a portion of the blue border visible here as well. Since you have the same layer (except for the glow) under it, it will look nice and finished.

Step 8

But… We musn’t forget the shadow and reflection. Copy the icon and lower it… Using the “white to black” layer visibility technique you can make quite a realistic reflection.

Now just use the airbrush style eraser to finish it up and make it look more natural. Lower the opacity of the layer to finish it up.

Now for the actual icon shadow. Now make an oval and give it a shadow effect like I did. Now just put that under the actual icon but over the reflection.

The finished product:

Now that your work is finished, you need a way of exporting it into an icon, expecially if it’s for an application. I suggest using IconFactory’s Icon Builder. It’s a Photoshop plugin which you can use (and misuse :)) to give your icon that extra edge.

In the following video tutorial I’ll show you a quick and easy way to create a neon satin effect.