If you do any kind of graphic design, you might appreciate the value of unique fonts. The resource I like to use, is over at dafont. They have a list of the Top 100 fonts, and that tends to be the one I check out.

I believe most of the fonts located here are free for personal use. I would be careful if you are interested in designing something for production, as it may not be considered free and the creator may need to be compensated.

Head on over to dafont and check out the fonts available. Many of them are spectacular.

Posted By: Scott


Web 2.0 is all the rage it seems. It's a very simplistic, easy to use design style that's taking over the web. Today I'm going to show you how to make a Web 2.0 style button for your website using Photoshop.

If you do not want to design your own styles or gradients, you can check out this website for some very nice premade styles. I am going to be using them for this tutorial(it also makes this possible to be done in under 5 minutes).

Start out by creating a new document in Photoshop 300 pixels wide and 140 pixels high. (You can vary the size depending on how big you want the button.)


Create a new layer (CTRL+SHIFT+N) and, using the styles you imported to Photoshop from the website specified, choose a color scheme for your button.


Select the Rounded Rectangle Tool (U) and create a rectangle on the page. Make sure you have the style selected from the top.



Adding Text

Now add some text. You can choose what kind of text you want to use, its up to you. Next, duplicate that text by right clicking it and selecting Duplicate Layer. Press CTRL+T and right click the box to flip it vertically. Align the text up so it is directly underneathe the other text. Now grab the eraser tool and mouse over your text. You will see an error like icon, click anywhere on the text and it will ask you if you want to Rasterize this layer. Choose yes. Basically this turns the layer into plain pixels, rather than the text format. You can edit it just as you would brushstrokes now.



Now, to add the mirror effect, get out the eraser tool and set the Hardness to 0% by right clicking and moving over the slider. Set the size to around 70px. Now hold SHIFT and make a streak across the text, near the bottom to give it a faded effect. Adjust the opactiy of the layer in the Layers menu to around 25-50% depending on how visible you want the mirror effect to be.


For some finishing touches, right click your Original Text and click "Blending Options". From the right menu, choose "Drop Shadow" and add a drop shadow with around 25-50% opacity. Do this with the Button background as well.

There it is! All done, and in no time at all!


Enjoy your shiny new web 2.0 style button! As always, feel free to leave comments, questions, or hit us up with an email at thetechjuice@gmail.com.

Have you ever noticed those little icons on the address bar and thought, "Hey, my blog sure could use one of those"? Sure you have.

These little guys are known as Favicons, and they do more than you might think. They can improve traffic and make your site look much more polished and professional. Today I'm going to show you a very simple way to make one using Photoshop and a little creativity.

So first thing's first, go ahead and open up Photoshop. NOTE: This technique will also work for similar programs such as GIMP if you do not have photoshop.


With Photoshop open, go to File > New and create a 64x64 pixel image. Set the color mode to 16 bit. The reason we are using a 64 x 64 pixel canvas is because using a canvas size of 16 x 16 is far too small to create an image. We will resize it to the actual icon size later.



The next thing to do is design a simple icon to be used as your favicon. Keep in mind that this image is going to be very small, so try to keep it as minimal as possible, nothing too fancy here folks, you'll thank me later. Here is an example of the one I created for this tutorial:


Again, nothing special, just a simple logo.



Once you are happy with the design, we are going to go to Image > Image Size... (or ctrl+alt+i) and set the Pixels to 16 x 16.



Go ahead and save the file as "favicon.png". Saving it with the filename "favicon" is highly recommended, as it will allow the best possible cross-browser compatibility. This means that users who run Opera, Firefox, IE, etc, will be able to see it.

Save the favicon as "favicon.ico" at this time as well, as you will be needing both in order for it to function properly. If you can't save as .ico in Photoshop, download and install the plugin from this website for your OS. This will let you save .ico files in Photoshop. Once you have both saved, upload them. I recommend using Ripway to host them.

So now that you have both the Favicon.png and the Favicon.ico, it's time to put the favicon on your blog. Open up your Blogger dashboard, and go to Template > Edit HTML. Hit CTRL+F and search <head>, and paste the following code right underneathe the head:



<!-- Favicon -->
<link href='http://h1.ripway.com/svodka/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://h1.ripway.com/svodka/favicon.png' rel='icon' type='image/png'/>



Replace 'http://your.username.googlepages.com/favicon.ico' and 'http://your.username.googlepages.com/favicon.png' with your uploaded file URL.

If you are not using Blogger, you only need the .ico file, so save it and host it, then insert this code into the <head>.


<link rel="Shortcut Icon" href="/favicon.ico">


Click on 'Save Template' and your done! Click view blog and check out your shiny new favicon!