Hub of Tech: January 2010

Thursday, January 28, 2010

Photoshop Glass Button

The following steps are required to give a glass effect to buttons:

Select two appropriate colours (for gradient shades)
Select Rounded Rectangular tool:
Draw a simple ellipse:
Create a new layer:
Ctrl + Click on the vector mask in the first shape layer so that you can select only the ellipse:
Select the Gradient Tool:
Make sure that the gradient consists of the two colours you have already selected (you can find this in the top left corner under the menu):
Select the new layer while the ellipse marquee is still highlighted, and draw a gradient from top to bottom:
Optionally, an inner glow can give a nicer effect to the shape by right clicking the second layer, and selecting "Blending Options":

You can tweek the above settings for colour, size, and opacity of the glow.
Click OK, and review the effects of the blend:

Note: the ellipse marquee selection should not be un-selected at this point.
Create a new third layer:
Select the Elliptical Marquee tool:
From the top-left settings under the menu, select the intersect option:
Draw an ellipse marquee selection outside the image to intersect with the top half of the image:
Change your primary colour to white, then select the gradient tool with the white to transparent setting in the top-left corner under the menu:
Draw a gradient on the new layer from top to bottom as shown below:
Finally, deselect the marquee and review the image:

This can now work as a button image as shown in the below example:

Wednesday, January 20, 2010

Html and Javascript basic practices

Developers get tempted to embed <script> tags within their html or aspx pages as shown below:

<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        <script type="text/javascript">

            function testFunction(element)
            {
                alert(element.id);
            }

        </script>
    </body>
</html>

This inevitably creates grief when trying to debug script code, and also makes it harder to find javascript code when a new developer starts working on your application. On top of all that, maintenance starts becoming an issue.
A better example would be to separate javascript code from your web page:

// javascript file testJavascript.js

    function testFunction(element)
    {
        alert(element.id);
    }

<!-- html file testHtml.html -->
<html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        <script type="text/javascript" src="include/testJavascript.js"></script>
    </body>
</html>

Friday, January 1, 2010

Back in action!

Fellow internet scrapers. I am back with a vengeance from the void of the online social networking in my life (having said that the next post will probably be in the next 3 years!).

I'll be making sure that I don't waste too much of my time spilling my guts out and writing a proverbial diary with the inner workings of my soul exposed through the bits and bytes in the digital world out there.

I mean who cares right!? So long as the information is useful to you, my devoted reader, then that is all that matters. Plus it would be good for me to keep track of all the little technical quirks and issues I've faced that could help me along the way whenever I face a problem and cannot remember for the life of me how I did it.

So it's almost like a reference manual for all the times I've smashed my head against the table trying to figure something out :)

It will definately be easier since I'm using a Laptop with roaming internet rather than my prehistoric desktop machine :)

Happy reading!!

Styles