A couple of weeks ago Amanda (@amlight) published a few articles showing stylish posters and albums with a very retro style, very simple but at the same time really cool. The articles really inspired me so I decided to create an Abduzeedo poster for myself just to play with Illustrator and Photoshop.

So in this tutorial I will show you how to create a very cool poster in just 10 steps. We will use Adobe Photoshop and Illustrator, but you may use other tools. I'm working on the Pixelmator version as well.

Inspiration and Sketches

Step 1

After a few ideas on paper it's time to start designing it. For the base of the typography I used Illustrator. So I searched on Google Images for "Avant Garde" and select an image that had the "A" with the style I wanted. Then in Illustrator, using the Pen Tool (P) create the "A". You can hold the SHIFT key to make sure the lines are straights.

With the "A" done, select the Type Tool (T) and type the BDZ using the font Avant Garden.

Step 2

Select the text created and go to Type>Create Outilines. Then with the Direct Selection (A) select the vertices of the base of the Z and the move them down like the image below.

Step 3

Now open Photoshop and create a new document, I used A4 for the size. Then fill the Background layer with a brown (#573E2A). After that copy the text created in Illustrator and paste it in Photoshop as Shape Layer. That way we can keep playing with the vectors using the Path Selection Tool (A) and Direct Selection Tool (A).

With the Direct Selection Tool (A) move the base of the A, the straight one move all the way down until it reaches the base of the "Z" (1) and the other move all the way to the edge of the document (2). Using the Pen Tool (P) and create some points at the top of the B and make it go all the way to the top (3).

Step 4

With the Direct Selection Tool (A) select the B element and copy and past it in a new layer. Then with go to Layer>Layer Style>Color Overlay. Use #FC9E1D for the color.

Step 5

With the Lasso Tool (L) select the area below the A exactly like the image below. Then create a new layer and fill it with white. Just the selected area.

Step 6

Go to Layer>Layer Style>Color Overlay. Use green for the color #6F7A38 and Multiply for the Blend Mode. Then select Pattern Overlay. For the Pattern select the Graph Paper. It's under the Color Papers preset. Also increase the Scale by 300%.

Step 7

Now let's add some text. For the font I used Dirty Headline, you can find it at dafont.com. Place the text in the green area like the image below. Also you can add a very subtle shadow. Go to Layer>Layer Styles>Drop Shadow. I used 35% Opacity, 2 pixels for the Distance and 10 pixels for the Size.

Step 8

It's time to add some textures. The one I used is from Shutterstock and you can download it here http://www.shutterstock.com/pic-35221027/stock-photo-old-paper.html

Place it in your document on top of the other layers, then change the Blend Mode to Multiply. Also go to Image>Hue and Saturation and reduce the saturation so the image won't get it to yellowish.

Step 9

Now you may add some dirty elements using Brushes like to make the lines less uniform for example. I used some brushes from Eduardo Recife's Misprintedtype site.http://misprintedtype.com

Conclusion

In less than 10 steps we're able to create a really cool retro style poster, very stylish. The secret is simplicity, color and textures. Of course you might like it without the brushes and dirty effects, or you want to try different colors, I created 2 other versions with cold colors and also playing with a photo in the background. Now it's all about playing and testing different variations. I'll print a copy for me, and hang it on my wall. :)

Version 1

Version 2

Version 3

Apple is about to release their new version of Mac OS X, code-named as Snow Leopard. With this new release there will be a totally new version of Quicktime. One thing that is really cool is the new icon for the app. Because of that I decided to play a bit with Photoshop to reproduce the effect.

Step 1

Open a new document in Photoshop, I used 512x512 pixels. Then start adding some guides using squares for references. They will be useful to create the circles. With theEllipse Tool (U) create a circle.

Step 2

Go to Layer>Layer Style>Gradient Overlay. Use Normal for the Blend Mode, and for the colors use #242e3c for the dark and #b4c1d4 for the light. Also change the Angle to 90º.

Step 3

After the gradient overlay, select Stroke. Then change the Size to 1 pixel and for the Fill Type use Gradient. For the colors use #7f8a98 for the dark and #e9f1f4 for the light. Also use 90º for the angle. The light colors will be at the top.

Step 4

Click on Bevel and Emboss. For the Style use Inner Bevel. For the Technique use Smooth, for the Depth use 20%, for the Size use 45 pixels, for the Soften use 15 pixels. Now for the Shading use -90º for the Angle, 65º for the Altitude, then for theHighlight Mode use Color Dodge, with white and 100% opacity and for the Shadow Mode use black, Multiply and 100% opacity as well.

Step 5

That's the effect you will have after the Layer Styles.

Step 6

Again with the Ellipse Tool (U) add create another circle. Then click over the Layer Palettes, click with the right button of the mouse over the big circle layer and select Copy Layer Style. The click on the new circle layer click with the right button again and selectPaste Layer Style.

Step 7

Over the Gradient Overlay, change the colors a bit, make them darker and add another spot of color. Use the image below for reference.

Step 8

Select Inner Shadow. For the Blend Mode use Multiply, for the Opacity use 55%. For the Distance and Choke use 0 pixels, then for the Size use 6 pixels.

Step 9

Now for the Stroke, the colors will change a little bit, we will add some transparencies. Use the image below for reference. And look how I added a 0% opacity right in the middle of the color scheme.

Step 10

Now this is is the effect you will have after the layer styles. Now it's time to add another circle.

Step 11

Once again with the Ellipse Tool (U) add another circle that will be the glossy part of the icon.

Step 12

Go to Layer>Layer Style>Gradient Overlay. Use a dark blue and a light blue for the colors. Then for the Style use Linear, and 90º angle. Use the image below for reference.

Step 13

Select Inner Glow. Change the Blend Mode to Overlay. For the Opacity use 75% and black for the color. Also change the Choke to 0% and the Size to 18 pixels.

Step 14

Now add a Drop Shadow. Change the Blend Mode to Multiply, and the Opacity to 75%. Also change the Angle to -90º, the Distance to 4 pixels, and 10 pixels for Size.

Step 15

This is the effect you will have after the layer styles.

Step 16

With the Ellipse Tool (U) create an ellipse using white for the color, also change theopacity to 30%.

Step 17

With the Elliptical Marquee Tool (M) create an ellipse like the image below, then with the white ellipse layer selected go to Layer>Layer Mask>Reveal Selection.

Step 18

Go to Filter>Blur>Gaussian Blur. Use 30 pixels for the Radius.

Step 19

Add another circle, now more at the top of the middle part. Then apply a Gradient Overlaythrough Layer Styles. For the colors use white and white, and change the opacities to 0 and 100%. Also the Angle use 90º and the Style Radial. Move the gradient a bit to the top like the image below.

Step 20

Click holding Command (mac) or Control (PC) over the Vector Mask thumb in the layer palette. That will create a marquee selection. Then go to Layer>Layer Mask>Reveal Selection. Now select just the layer mask and go to Filter>Blur>Gaussian Blur. Use 2 pixels for the Radius. That will soften the edges of the effect.

Step 21

Create a new ellipse again, now at the top of the icon. Then holding Command (mac) or Control (PC) click on the thumb of the big ellipse. That will create a marquee selection of the whole circle. After that, again holding command or control but now with Alt, click on the middle ellipse. That will subtract that area from the marquee selection. Then just go toLayer>Layer Mask>Reveal Selection.

Step 22

Now apply the same Gradient Overlay we applied in the step 19. Just change a little bit of the presets, like in the image below.

Step 23

Duplicate the layer for the top highlight and with the marquee selections still active, go toFilter>Blur>Gaussian Blur. Use 30 pixels for the Radius. After that change the Opacity to 80%.

Conclusion

For this tutorial we basically used the Ellipse Tool, with Layer Styles and a few blurs. It's all about playing with gradients, shadows and strokes. You can even try different colors for the middle part instead of the blue scheme. The best thing when trying to recreate existing icons is that you learn quite a few new ways to create effects.

Other Versions

Hungry for the new design elements for your website? I have a new one for you. Hope it will be useful in your new design.

Let’s begin! Make a new document with the resolution 500×300 for this tutorial and fill this canvas with white color. Then select the Rounded Rectangle Tool (Radius: 30 px) and draw the next shape using the color of #d61d23.

After that apply following layer styles to this layer:
• Inner Shadow
• Gradient Overlay

Your button should look as mine:

Now, time to bring reflection to the button. Duplicate current layer using Ctrl+J, then create a new one and flip it with copied layer to get all layer styles in one layer. After that flip it vertical with Edit > Transform > Flip Vertical as on my picture below:

To make reflection more transparent at the bottom of the picture apply Quick Mask Mode with gradient as below:

Then go back to Standard Mode. Now we have some selected area. Press Delete to clear image into the selected area.

Remove selection with Ctrl+D. Go to the next step. I would like to add some glare to the button. To do this select the Rounded Rectangle Tool (Radius: 80 px) and create a new one form using white color.

Rasterize this layer with Layer > Rasterize > Shape. After that apply Quick Mask Mode one more time and fill the next gradient:

Go back to Standard Mode and we received selected area again. Press Delete to clear selected part of image.

Deselect chosen area with Ctrl+D and change layer mode to Overlay for current layer.

We are done with the button. Now, move to the next step. I think it will looks better when we will put some design elements on it. To do this get out the Ellipse Tool and create rounded shape as on my picture below using white color:

After that apply such Blending Options to this layer:
• Inner Shadow
• Inner Glow
• Gradient Overlay
• Stroke

See the result below:

Time to bring some picture to our rounded design element. Find some picture of the Earth on the Google Images or use mine or find it somewhere. Open it and reduce a little bit, then place the picture as shown below.

Good, then make it black and white using Image > Adjustments > Desaturate (Ctrl+Shift+U) and change layer mode to Overlay for this layer:

Select the Sharpen Tool (Brush: 100 px, Mode: Normal, Strength: 40%) to make this fragment more sharpen.

And the last one thing that we need to do. To finish off the tutorial let’s add some text. Get out theHorizontal Type Tool and write out something with white color like on my picture below.

In the above image I’ve used Segoe UI as my font of choice, and I’ve used white color. Actually, it is commercial font, but if you don’t have it, you can easily find a good alternative, for example, Arial Black. After that apply the following layer style to this layer:
• Drop Shadow

Now, we have something like this.

Great! Our work is done! Enjoy your own cool globe button. Also you can change it color.