How to Create a Social Media UFO Icon
Tutorial Details
- Program: Adobe Photoshop CS3
- Difficulty: Intermediate
- Estimated Completion Time: 1 Hour
Download Source Files
Final Product What You'll Be Creating
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Alberto Sosa
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice! Good tut for lights-effects and reflections!
I think you may not distribute the .psd of the tutorial that you followed. The original source file is exclusive to premium users, and creating this file for yourself doesn’t give you the right to give it away in your portfolio.
Alberto “Kaiser” Sosa
Sorry but i just hate comments like you just did.
Greedy mf, If you put it on internet its a free source for every one. If you dont like it dont share it!
Alyila I invite you to read this terms from this blog:
http://psd.tutsplus.com/about/terms/
PSDTuts paid me for this tutorial and is now property of them, and I’m just defending the interests of those who hired me. So you should wash your mouth and must learn about legal terms.
Amazing tutorial! I loved it! Thanks!
Wow, very nice tutorial, it looks great!
Great idea. Very original.
Great final result, and very simple to do. Thanks!
So kool ~ ! i really like it
That’s a genius icon. Ya, I’ll admit that it’s a great icon, but I think the idea behind the icon far exceeds the greatness of the icon it self.
Spammers or phishers might use one that says “Take me to you followers…”
Agreed. Very nice idea and nicely done as well.
good tutor
Love the dude floating up… looks hilarious!
Nice effect that can be applied to many other pieces. Great result!
Very Good….I Like This…
Thanks for your tutorial… nice…. :D
One of the best tutorials on PSDtuts in my opinion.
Great Tutorial!! But “In Facebook”???? “on”????
Great Tutorial. Thanks.
That’s pretty cool :D nicely done.
Love it! Very very cool tutorial. One that I actually might make time to do in fact :)
Great tutorial, thank you. I will try this out asap. Good JOB!
Amazing tutorial, make more for the other social networks :P
Cool! Although the experience you captured in the icon is kinda frightening (Facebook is slowly but surely kidnapping everybody).
This is such a cool icon. I love it. Very creative piece :)
Thank you guys for your feedback!
am i the only one who feels that the angle is slightly (only slightly) weird? Maybe it is just me… however, i love the overall feel and look, very nice
very good tuto!
wow what a fantastic outcome!
So awesome, love it =D
awesome tut, i absolutely love it!
great tuts, i love it so much.
Great job. Congrats.
Very nice Illustration!
Interesting idea
It looks very nice :) thanks for the tut is really useful for me !
Muy buen tutorial!!! y super creativo, te felicito, manejas muy bien el photoshop, espero algún día manejarlo así yo también :D
SALUDOS!!!
Gracias por tu comentario!
Nice, i like it!
Nice ！ but i am not quite follow Step 52 。how to paint lights as you do ? I tried to use bush ,but it is not work well …
Maybe you forgot to set the brush with a 10% flow.
Congratulations, Master!
hmm… at step 7, i guess i shld “unlink” the color from the shape layer right, before moving the center of gradient right? not sure i used the right terms but anyways. when i try to move the color/gradient, it always snaps to its original position. need some help
Actually you don’t need to unlink the gradient in this step.
I have trouble with steps 50-51 – 52 – 53, Is there another way to get that light is projected??
Sure, you can use the gradient tool (from left toolbar) to paint directly with a gradient instead to paint it manually. If you use white in toolbar’s foreground color, when you open the Gradient picker (in top menu) you’ll find a gradient from white to transparent.
psd tuts is back !!!
really nice job man…
Great tutorial, very nice icon. Here is my result: :))
http://img338.imageshack.us/img338/8559/ufoc.jpg
Nice outcome, congrats!
so nice …………………………
…………….
I LikE iT…………
that’s cool
Thanks a lot
Very nice tutorial, here’s my outcome
http://i157.photobucket.com/albums/t41/Invisible_2007/AdAIW.jpg
Thanks for tour feedback! Maybe your logo is too wide to insert into this icon.
Hi,
Mind blowing tutorial.Thanks!, but i want to say that i have completed this tutorials & i want to say the author about step 25. After applying gradient layer with blend mode to screen still it is white rather than reflection. when i applied its layer to “multiple” then the reflection applied.Is it right what i am saying that a multiple layer style is needed with 256 step.
Thanking you
Shwet
You must to set the shape layer opacity to 0%. Thanks for your feedback!
Very nice tutorials…Thanks! here is my result :-
http://www.coroflot.com/shwet/tutorials
Nice thank you card! :)
very creative design
very useful tutorial how do i create facebook icon blended with Mafia Wars?
Super! thx!
Nice tutorial, I tried it and the result is very similar. Just a little less clear with the explanation on steps 52- 53 and so on with the light, but it works!
Alberto, I have removed this user’s comments. Please send me an email and let me know if you notice any links like this in the future. Shimansky, redistributing our Psd files is against our terms of use. Please do not do this again. Thank you.
Great, thank you. I wish to remove all comments about this issue, including my last 2 comments and one from the user called Alyila, because he’s insulting me by the complaint that I’ve done.