Create an interesting icon in Photoshop

When we create websites or user interfaces, most often we need to create a unique and creative logo. Most websites today are in one way or another connected with the presence of social media with a link to their Facebook or Twitter pages, which are prominently displayed on their front pages. This is not surprising and there are a lot of sites with links to their profile, because it is very convenient to use such logo icons. In today’s lesson we will demonstrate how to create a completely unique Social MEDIA Icon – UFO.
Here it is.

And now let’s start creating!

Images that we need:

Facebook Logo

Twitter Logo

3D Character

Font Edit Undo Line

Step 1. Create a new 600 x 450 pixel document and fill it with black background. Then in Layer styles (layer style) apply Gradient overlay (Gradient Overlay), select a radial gradient with a color from # 353535 before # 000000.

Step 2. Create an oval shape that will become the base for our UFO.

Step 3. On the menu Layers we will press Duplicate layer (Layer – Duplicate Layer) and thus duplicate the oval shape. The color for the second shape is dark gray.

Step 4. Now duplicate the layer with the figure again, but distort its upper part, as shown below.

Step 5. To create a polished metal surface, use an angular gradient with a scale of 150% in layer styles. Double-click the gradient panel and open the Gradient Editor window.

Step 6. Use two shades of gray – # A and 666666.

Step 7. Place the center of the gradient at the top of the shape to give it a conical shape.

Step 8. To give a 3D view of the upper oval, use the option Inner shadow (Inner Shadow) with an angle of -90, black and blending mode Overlap (Overlay).

Step 9. Customize Internal glow (Inner Glow), which will give the upper oval shape a reflex from the light reflected from its inner edge.

Step 10. Now let’s set the style settings for the central oval shape. Add Gradient Overlay (Gradient Overlay) with the settings below, and shift the gradient just below the center of the shape.

Step 11. Use the white shadow to simulate the glow below the shape.

Step 12. Apply the layer styles from the top shape to the bottom oval shape, by copying and pasting the layer style. Copy Layer Style – Paste Layer Style (Copy layer style – Paste – layer style).

Step 13. Decrease Opacity (Opacity) gradient bottom layer.

Step 14. Add another shape.

Step 15. Apply a gradient to this layer as shown below.

Step 16. In addition, add a stroke in gradient mode using colors # Ffffff white and gray # A.

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

Step 18. Change the pivot points as shown below. By pressing and holding the key Alt, You can edit guides independently of each other.

Step 19. Let’s add some layer styles for the glass dome. The first will be Gloss (Satin) with the values ​​below.

Step 20. Now add Internal glow (Inner glow) with this color # 1D408A.

Step 21 Add a radial gradient with color from # 000000 before # 76B9FD, overlay mode set to Linear clarifier (Add) (Linear Dodge (Add).

Step 22 Then add Inner shadow (Inner shadow), use it as a light above the dome. Use the values ​​as shown below.

Step 23 Finally add Shadow (Drop shadow) to highlight the bottom edge of the dome.

Step 24 Now let’s add a reflection to the dome. Use a smaller oval shape and edit the control points as shown below.

Step 25. Apply a layer style to reflect by adding a gradient from # 44A9FE before black. Set the blending mode to Screen (Screen).

Step 26. Add Inner shadow (Inner shadow) using the values ​​below.

Step 27. Download Facebook Logo or Twitter if you prefer.

Step 28. Open the vector logo directly in Photoshop. In Photoshop, it will of course become a bitmap.

Step 29. Use the settings below to make the logo larger.

Step 30. Highlight the letter – F Magic wand (Magic Wand) and copy by clicking Ctrl + C.

Step 31 Insert the letter “F” in your document under the layer with the flare and reduce its size to match the size of the sphere.

Step 32 Apply a gradient to the letter as shown below.

Step 33 To create the illusion of 3D, add a small stroke, as shown below.

Step 34 Add a setting Stamping (Bevel Emboss). The settings are below in the screenshot.

Step 35 Apply Internal glow (Inner glow), as shown below.

Step 36 Use the dome to hide part of the letter “F” by selecting the outline and converting it into a selection.

Step 37. Return to the layers palette and add a layer mask to the letter.

Step 38 Hide all effects inside the mask by clicking the button, Layer mask hides the effects (Layer Mask Hides Effects) in the Layer Style dialog box.

Step 39. Use different brushes to paint the headlights. Try to make them as symmetrical as possible.

Step 40. Add External glow (Outer Glow) with color # 0099FF.

Step 41 Merge all layers into a group.

Step 42 Give the name of the created group.

Step 43 Duplicate the group to leave your work layered, turn off the original and leave a copy.

Step 44. Convert a copy of the group to Smart object (Smart Object) or select an option Group mergers (Merge Groups). The goal is to have the whole UFO image on one layer so that we can reduce the size without affecting the layer styles.

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

Step 46 Now create a beam of light that the UFO will emit to the floor. To do this, draw a rectangle with the same width as the dome.

Step 47. Change the nodal points of the shape as shown below.

Step 48 Add an anchor point to make the edge of the rectangle arc, as shown below.

Step 49 Convert a vector rectangle to a selection with Contour palettes (Paths Palette).

Step 50. Fill the selection by going to the menu Selection – Modification – Feather (Select> Modify> Feather).

Step 51 Set the feathering radius to 3 pixels.

Step 52 Draw light inside the selection with greater intensity near the light source (UFO). Now, using the same technique of fluffy selection, draw the lighting on the floor.

Step 53 Now add light to the floor.

Step 54 Add the following image for our work. Or find the image that will fit your idea.

Step 55 Separate the figure from the background, and reduce its size, as shown below.

Step 56 Create a shadow by duplicating the original with the figure, a copy Flip Vertically (Flip Vertical), blur and distort as shown below.

Step 57 Download this font and use it in our composition.

Conclusion
The final touches will be the addition Shadows (Drop shadow) to our text with color # 0099FF and blend mode Screen (Screen). Then add External glow (Outer Glow) with blend mode Linear Dodge (Linear Dodge). For the Background, set the blue glow to give the icon more visual appeal.
That’s all, our work has come to an end, and we have made just such a beautiful icon.

Thank you for your attention, I wish you success and see you soon!

Like this post? Please share to your friends: