web 2.0

Sunday, May 23, 2010

PSDTUTS Updates

Posted by Damass at 5:09 AM

PSDTUTS Updates

Link to Psdtuts+

How to Create a Social Media UFO Icon

Posted: 22 May 2010 05:45 AM PDT


When we design websites or user interfaces, often times we need to create unique and creative icons. Most websites these days have some sort of social media presence; with a link to their Facebook or Twitter pages prominently displayed on their front pages. With so many sites linking to their social media profiles, it’s not surprising that many sites are simple regurgitating the same icons. In today’s tutorial we will demonstrate how to create a completely unique UFO inspired social media icon based on a theme. Let’s get started!

Resources

The following resources were used during the production of this tutorial:

Step 1

Create a new file 600 x 450 pixels and fill the background with black. Then apply a radial gradient using a layer style with the center color #353535 and the edges black #000000.

Step 2

Create an oval shape layer that will become the base of our UFO.

Step 3

Go to Layer > Duplicate Layer and duplicate the oval but make this one a darker gray color.

Step 4

Now duplicate the layer again but distort its upper area as shown below.

Step 5

To create a polished metallic texture use an Angle and scale it up to 150%. Double click the gradient bar and open the Gradient Editor window.

Step 6

Use 2 tones of gray; #CCCCCC and #666666.

Step 7

Place the center of the gradient towards the top of the shape to reinforce the conic shape of the object.

Step 8

To create a 3D extrusion of the upper oval, use an inverted Inner Shadow (this means a –90º angle) with a black color and an Overlay blend. Drag the Choke to 100 and reduce the Size to zero.

Step 9

Include a thin Inner Glow that will allow the upper oval to receive the light reflected on its inner edge.

Step 10

Now let’s work on the central oval. Add a Gradient Overlay using the settings below and place the gradient just below the center of the shape.

Step 11

Use a white Drop Shadow to simulate a glow over the bottom oval.

Step 12

Apply the same layer style to the bottom saucer by copying and pasting the layer style.

Step 13

Reduce the opacity of the bottom layer’s gradient.

Step 14

Now we need to create an insert over the upper oval.

Step 15

Apply a gradient to this layer as shown below.

Step 16

Also add a stroke in gradient mode, using colors white #FFFFFF and grey #CCCCCC.

Step 17

Now it’s time to create a glass dome of our UFO. To do this draw a shape as shown below. Use a blue #1D408A color.

Step 18

Edit the anchor points as shown below. By pressing the Alt key (Windows) you can separate the anchor points and transform each segment of the oval independently.

Step 19

Let’s add some layer styles. First, a Satin effect with the values shown below.

Step 20

Now apply an inner glow using #1D408A.

Step 21

Add a radial gradient color #000000 and #76B9FD using Linear Dodge (Add).

Step 22

Then add an inner shadow but used as a light over the dome. Use the values as shown below.

Step 23

Finally add a Drop shadow to lighten up the bottom edge of the dome.

Step 24

Now let’s add a reflection to the sphere. Use a smaller oval and edit the anchor points as shown below.

Step 25

Apply a layer style to the reflection and add a gradient that starts from #44A9FE and ends with black. Set the Blending Mode to Screen as shown below.

Step 26

Add an inner shadow using the values shown below.

Step 27

Download the Facebook Logo in EPS or, if you prefer Twitter, you can download it from here as well.

Step 28

Open the vector logo directly into Photoshop. This will open a raster.

Step 29

Use the settings below to set the logo to a larger size.

Step 30

Make a selection of the letter "f." Once it is selected go to Edit > Copy o Cmd + C.

Step 31

Paste the letter "f" onto the canvas and reduce its size to fit within the sphere.

Step 32

Apply a gradient as shown below.

Step 33

Create an illusion of 3D by adding a small stroke as shown below.

Step 34

Intensify the stroke using Bevel & Emboss.

Step 35

Apply an inner glow using to the "f" as shown below.

Step 36

Use the dome to hide part of the "f" by selecting the path and by converting it into a selection.

Step 37

Return to the Layers palette and mask the letter.

Step 38

Hide all the effects inside the mask by clicking the “Layer Mask Hides Effects” in the layer styles dialog box.

Step 39

Use different brushes to paint the perimeter lights depending on their distance. Try to make them as symmetrical as possible.

Step 40

Add an Outer Glow using #0099FF.

Step 41

Group all the layers in a folder.

Step 42

Name the folder.

Step 43

Duplicate the folder to keep a safe copy of your work.

Step 44

Convert the group into a Smart Object or select the option Merge Groups. The aim is to have the whole UFO on one layer so we can reduce the size without affecting the proportion of the layer styles.

Step 45

Reduce the UFO to 65% of its original size and place it as shown below.

Step 46

Now create the ray of light that the UFO will project onto the floor. To do this, draw a rectangular shape layer with the same width as the dome.

Step 47

Edit the anchor points of the shape layer as shown below.

Step 48

Add an anchor point to make a curve as shown below.

Step 49

Convert the vector into a selection using the Paths Palette.

Step 50

Soften the selection by going to Select > Modify > Feather.

Step 51

Set the Feathering to 3 px.

Step 52

Paint inside the selection with more intensity near the source of light (the UFO). And with the same softened selection technique, paint the floor of the scene.

Step 53

Now add light to the floor.

Step 54

Add the following image to our artwork. Or find another one that you feel appropriate.

Step 55

Cut it out from its background and reduce its size as shown below.

Step 56

Create a shadow of the character by duplicating, inverting, blurring, and distorting it as shown below.

Step 57

Download this font and include it in our composition.

Conclusion

For some finishing touches, apply a drop shadow to our text with the color set to #0099FF and its blending mode set to screen. Then add an Outer Glow with its Blending Mode set to Linear Dodge. For the Background, paint a blue glow to give the icon more visual appeal.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Apture