Glassy Shapes Signature Tutorial by Narker
Posted: Sun Oct 09, 2005 10:23 pm
I've made a tutorial which goes step by step in depth of how to make one of my signatures. I use this method often, but please, don't whore it.
The finished result will be as followed:
1. Start Adobe Photoshop. (I use 8: CS)
2. Create a new document, using the following dimensions.
3. Right click the 'line' tool and click 'Custom Shapes' until you get the icon that appears here.
4. Click the shapes box, and select a random shape. (For this tutorial, I will use the speach bubble shape)
5. Select a color in your color palette. (I used bright orange here)
6. In your layers box, click the 'Background layer', and delete it.
7. Now, you will see grey and white boxes, signifying that the orange speach bubble is the only layer in the document.
8. Click 'Layer', and go down to 'Rasterize', and select 'Shape'
9. Make sure your color is changed to orange as primary. Click where it says '2' next to the box to change your gradient.
10. Where it's white, double click it, and move the bar somewhat downwards to make the orange a tad darker. If you are doing this for another color, make sure it's darker.
11. Holding 'Shift', drag your mouse from the top of the shape to the bottom of the document, as illustrated in the figure.
12. Right-click 'Rectangular Marquee' and select 'Circular Marquee'.
13. Then, make a circle where it skims the top half of the shape.
14. Press Ctrl+Shift+I to invert the selection.
15. In the 'Layers' palette, click the folded up page to create a new layer.
16. Click your 'Gradient' tool again, and make the colors go from solid white to transparent.
17. Drag your gradient downwards, to make a white sheen on the shape. Make sure that when you release the gradient, there is a noticible stop from where the white ends and where the orange begins. Do not make it smooth.
18. While holding 'Ctrl', click the first layer that the orange speach bubble is on.
19. Then, press Ctrl+Shift+I to invert the selection again.
20. Press 'Delete'
That takes care of the sheen.
21. Now, type in a thick font your desired text. Make sure that this layer is underneath the sheen layer.
22. Now click 'Layer' > 'Layer Styles' > 'Bevel and Emboss'
23. Change every setting to match exactly this following illustration.
24. Click 'Ok' and go back to your document. Now, click your text layer, and apply Bevel and Emboss to it, and use the exact same settings as displayed below.
25. Now, save it as a .PNG. This will make your transparancy show on compatible web browsers. (Firefox, Opera, mb IE 7)
26. Click 'Ok' once more.
You should come out with this:
Sorry about the shoddy example images, they were all taken and saved in paint, which has bad compression.
Post a comment if you find something flawed, or would like to add suggestions, etc. The transparance will NOT show if you are using Internet Explorer and SBC Yahoo browser. I'm not sure what else. I'm posotive that this will work with Firefox and Opera.
The finished result will be as followed:
1. Start Adobe Photoshop. (I use 8: CS)
2. Create a new document, using the following dimensions.
3. Right click the 'line' tool and click 'Custom Shapes' until you get the icon that appears here.
4. Click the shapes box, and select a random shape. (For this tutorial, I will use the speach bubble shape)
5. Select a color in your color palette. (I used bright orange here)
6. In your layers box, click the 'Background layer', and delete it.
7. Now, you will see grey and white boxes, signifying that the orange speach bubble is the only layer in the document.
8. Click 'Layer', and go down to 'Rasterize', and select 'Shape'
9. Make sure your color is changed to orange as primary. Click where it says '2' next to the box to change your gradient.
10. Where it's white, double click it, and move the bar somewhat downwards to make the orange a tad darker. If you are doing this for another color, make sure it's darker.
11. Holding 'Shift', drag your mouse from the top of the shape to the bottom of the document, as illustrated in the figure.
12. Right-click 'Rectangular Marquee' and select 'Circular Marquee'.
13. Then, make a circle where it skims the top half of the shape.
14. Press Ctrl+Shift+I to invert the selection.
15. In the 'Layers' palette, click the folded up page to create a new layer.
16. Click your 'Gradient' tool again, and make the colors go from solid white to transparent.
17. Drag your gradient downwards, to make a white sheen on the shape. Make sure that when you release the gradient, there is a noticible stop from where the white ends and where the orange begins. Do not make it smooth.
18. While holding 'Ctrl', click the first layer that the orange speach bubble is on.
19. Then, press Ctrl+Shift+I to invert the selection again.
20. Press 'Delete'
That takes care of the sheen.
21. Now, type in a thick font your desired text. Make sure that this layer is underneath the sheen layer.
22. Now click 'Layer' > 'Layer Styles' > 'Bevel and Emboss'
23. Change every setting to match exactly this following illustration.
24. Click 'Ok' and go back to your document. Now, click your text layer, and apply Bevel and Emboss to it, and use the exact same settings as displayed below.
25. Now, save it as a .PNG. This will make your transparancy show on compatible web browsers. (Firefox, Opera, mb IE 7)
26. Click 'Ok' once more.
You should come out with this:
Sorry about the shoddy example images, they were all taken and saved in paint, which has bad compression.
Post a comment if you find something flawed, or would like to add suggestions, etc. The transparance will NOT show if you are using Internet Explorer and SBC Yahoo browser. I'm not sure what else. I'm posotive that this will work with Firefox and Opera.
