Photoshop Srbija
REGISTRUJTE SE I ISKLUCITE REKLAME!
Pogledajte http://photoshopsrbija.forumsr.com/t82-donirajte-i-pomognite-sajtu-samo-100din-ce-pomoci

Takodje, morate biti registrovani i ulogovani da bi videli celokupan sadrzaj foruma. Klknite na "Register" ispod. Nije potrebna email potvrda.
Photoshop Srbija
REGISTRUJTE SE I ISKLUCITE REKLAME!
Pogledajte http://photoshopsrbija.forumsr.com/t82-donirajte-i-pomognite-sajtu-samo-100din-ce-pomoci

Takodje, morate biti registrovani i ulogovani da bi videli celokupan sadrzaj foruma. Klknite na "Register" ispod. Nije potrebna email potvrda.
Photoshop Srbija
Would you like to react to this message? Create an account in a few clicks or log in to continue.


Uci, skidaj, konsultuj se, pokazi svoje znanje! Sve na jednom mestu! Sve na Photoshop Serbia!
 
HomePortalLatest imagesRegisterLog in

 | 
 

 Download button

View previous topic View next topic Go down 
AuthorMessage
Rappix
Admin
Admin
avatar

Join date : 2011-01-08
Age : 29
Posts : 105

Download button Empty
PostSubject: Download button   Download button I_icon_minitimeThu Jan 27, 2011 4:01 pm

Step 1


Let’s start our new document by setting the background color to #303030. Then create a circular shape using the Ellipse tool (U), keep holding Shift while dragging outwards to create a perfect circle. Start dragging from the center of the canvas while holding down Alt. This way the shape is centered around the initial position of your mouse. Fill this shape with #bcbcbc, and name the layer "ring 1."



[You must be registered and logged in to see this image.]

Step 2


Duplicate the "ring 1" layer. Then use the Free Transform Tool (CMD+T) to re-size the circle slightly, so that it matches the one created previously. I’ve named this layer "ring 2."


CTRL + Click on the "ring 2" layer to create a selection around the smaller circle. Then navigate to select > modify > expand. Then use an expansion radius of 3 pixels. Go back to the "ring 1" layer and hit the Add Layer Mask button in the layer palette, as illustrated below. This cuts out the part that is covered by the "ring 2" shape.



[You must be registered and logged in to see this image.]

Step 3


Next apply layers styles to both "ring 1" and "ring 2" layers. Follow the instructions in the image below. A gradient overlay is generally used on the ‘outer shell’ of a web graphic to give it depth. It can be used to inset an image when contrasting gradients are used. This is an old technique, which is not necessary for our image. Furthermore, inner glow, when used with dark colors will create a sort of ‘inflated’ look. It gives the illusion of a shadow being present all around the shape, thus causing the shape to rise up from the canvas.


[You must be registered and logged in to see this image.]

Step 4


Select "ring 2" again, and on a new layer drag down a gradient. Set this layer to hard light.



[You must be registered and logged in to see this image.]

Step 5


On a new layer, create another ring and apply the same layer style as was used on "ring 2" (see step 3). I called this layer "ring 3." It may seem unorthodox to stack the same elements over and over again, but the layered effect is a time saving technique used to create something complex looking.


[You must be registered and logged in to see this image.]

Step 6


Duplicate the "ring 3" layer and call it "fill." Our icon is going to be blue, so fill it with #446fce. Then change the layer styles, as shown in the image below.



[You must be registered and logged in to see this image.]

Step 7


Duplicate the "fill" layer. Then set the fill to 0% (Not the opacity). Then call it "highlight ring," and apply the layer styles shown below.



[You must be registered and logged in to see this image.]

Step 8


Create a new layer, call it "highlight brush." Then set it to soft light. Next, using a soft white brush gently tap the top of the blue part until it starts to light up.


[You must be registered and logged in to see this image.]

Step 9


Go to the custom shape tool. Then at the top, select the arrow that I marked in the image below. Drag this arrow out while holding shift for a nice even shape. Rotate it, so that it faces downwards, use free transform (ctrl/cmd + t) to do this. Then duplicate the layer, move it up a bit (you can use the arrow keys), and again use free transform to make it slightly smaller. Hold shift when making the element smaller so that it retains the correct proportions.



[You must be registered and logged in to see this image.]

Step 10


I merged these two shapes and called the layer "arrows." Next, add the following layer styles to this layer.


[You must be registered and logged in to see this image.]

Step 11


Time to add the gloss, I called this layer "glossy". First, I drew out a shape. Then I set the opacity of that layer to 30%. Next, I ctrl/cmd + click on the blue layer. Then I select the circle outline. Hit the mask button (like in step 2), and everything outside of the selection is masked away. Use a soft black brush on the mask, and go right along the edges to soften them up. This is a matter of taste though.



[You must be registered and logged in to see this image.]

Step 12


Lastly, let’s add a shadow on a new layer below all of the other layers we just created. Use a soft black brush and tap in such a way that just the edges of each brush stroke are visible. Our final image is below.


[You must be registered and logged in to see this image.]

Conclusion


What have we learned in this tutorial? We’ve learned to stack elements upon themselves to create depth. We’ve learned to use layer styles to create depth and 3d shapes. We’ve learned that simple objects can be turned into complex images easily. We’ve learned that simple glossy effects should be used properly. Don’t abuse them. Web 2.0 is much more than just gradients. Enjoy, and thanks for reading!

Back to top Go down
https://photoshopsrbija.serbianforum.info
 

Download button

View previous topic View next topic Back to top 

 Similar topics

+

Jump to:  
Free forum | ©phpBB | Free forum support | Report an abuse | Cookies | Forumotion.com