10 Fonts to design original logos

Are you a designer looking for nice fonts to design high quality logos? Take a look at these 10 free fonts you might use to design impressive logos for your customers.

This collection includes Unit Rounded Bold, Helvetica Neue, Qlassik, Punk's not dead, Chica Monospace, Kyra Lynn, Nicotine, Light Out, Anja Eliane and Danube.


1. Unit Rounded Bold (download)
A rounded font to design Facebook-like logos.




2. Helvetica Neue
Helvetica Neue is absolutely the font I prefer in this collection. Clean and professional:




3. Qlassik (download)
Another font I like very much:




4. Punk's not dead (download)
Punk's not dead is "dirty" font to design grunge logos:





5. Chica Monospace (download)
A font with an optimal legibility and an elegant style:




6. Kyra Lynn (download)
Kyra Lynn is another "dirty" font for grunge logos:





7. Nicotine (download)
A bold font for big logos:





8. Light Out (download)





9. Anja Eliane (download)
Anja Eliane is a bold rounded box. Best result in medium-big size.





10. Danube (download)
A courious font for modern logo design.

 

DJ Mixers Wallpaper

5 Photoshop and Illustrator brushes set for web designer

This collection includes over 60 brushes: pencil lines, grunge Polaroid photos, diagonal lines for webpages background, safety pins and shape tags.


1. Lineart Brush (Download)
This brush for Illustrator will make your strokes look like they were drawn with a pencil. Thin were the stroke begins, wider in the middle, and back to thin were the stroke ends.

Each size comes in two variations - one with the stroke getting wider to the left and one with the stroke getting wider to the right. If you need other sizes just copy one of the sizes and modify it.


2. Polaroid Brushes (Download)
A nice collection of Polaroid brushes, for Photoshop useful to be used in grunge or vintage website style:

3. Diagonal Lines (Download)
This set of 17 diagonal lines brushes useful to design quickly background pattern for your websites.

4. Safety Pin (Download)
This is a set with six nice pin brushes for Photoshop.

5. Shape Tags (Download)
This is another brushes set of 23 shape tag very useful to design original tags in your websites.

If you have an interesting brushes set and you want to share it please add a comment!

Beautiful and free social websites icon set for bloggers

I want to suggest you this beautiful and free icon set of the most popular social websites "in a bottle" for bloggers (for personal and not for commercial use) designed from the guys of Templates.com.

Take a look at Templates.com

Free Icon set for bloggers consists of 10 icons: StumbleUpon.com, Ma.gnolia.com, Technorati.com, del.icio.us, DesignFloat.com, Digg.com, RSS, Twitter.com, Facebook.com, Reddit.com. Each icon is produced in the following sizes: 80х80, 64х64, 32х32.

If you are courious about icon desing, you can learn more about the creation process of this Icon Set here.

Take a look at this link to download this icon set.

Templates.com

Elegant glass style navigation bar using CSS and toggle animated effect

Navigation bar is an important element of website design: this is an example which uses a dynamic submenu to display sublinks of the main tabs. This tutorial illustrates how to design an elegant glass style navigation bar with a nice toggle animation effect, using CSS and MooTools. The result is something like this:

Moving your mouse over a tab in the main menu, the submenu display several links related to the "topic" of the tab. On the right of the navigation bar, clicking on Hide submenu link, the submenu disappears/appears with a nice toggle animation.

Download the full code of this tutorial, ready to be customized and used in your web projects.

Download source code


1. HTML code
First of all, take a look at HTML code I used to design our navigation bar: all tabs are contained into a layer with id="navigation" and I used a list to design them. The structure is:

...and the code is:

<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">

<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Tutorials</a></li>
<li id="s3"><a href="#">Showcases</a></li>
<li id="s4"><a href="#">Freebies</a></li>

</ul>
</div>

The submenu contains, for each tab, several links within some unordered lists:

<div id="sublinks">
<ul id="s1_m">

<li><a href="#">Upcoming</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>

</ul>

<ul id="s2_m">

<li><a href="#">Ajax</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Photoshop</a></li>

</ul>

<ul id="s3_m">

<li><a href="#">CSS Websites</a></li>
<li><a href="#">Flash Websites</a></li>
<li><a href="#">Images</a></li>

</ul>

<ul id="s4_m">

<li><a href="#">Fonts</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Icons</a></li>

</ul>
</div>

Each list is related to a tab in the main menu (for example, ID tab= S1 -> ID list=S1_m). If you want to add other elements to the submenu you have just to add a new <ul> element with a progressive ID such as:

<ul id="s4_m">

<li><a href="#">...your links within li tag... </a></li>
...
</ul>

</div>

How you can see it's not complicated. If you are interested on CSS code download the source code of this tutorial. Now we are ready to take a look at the JavaScript code to enable animated effect.


3. Mootools + unobtrusive JavaScript code
At this point, we can try to implement all animation effects for this navigation bar using unobtrusive JavaScript technique, to separe JavaScript code form the content of the page. How I said, I used MooTools to implement toggle effect, so we have to add a link to MooTools framework copying the following code within the <head> tag of the web page:

<script type="text/javascript" src="mootools.svn.js"></script>

... and copy the following code below the previous code:

<script type="text/javascript">
window.addEvent('load', function(){

// Hide all submenu link
$('sublinks').getElements('ul').setStyle('display', 'none');

// Show by default the first submenu related to the tab "Home"
$('s1_m').setStyle('display', 'block');

$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){

var layer = subLinkId+"_m";

// Display current submenu
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)

);
});

// --------------------------------------- //
// SHOW and HIDE Submenu with MooTools Toggle animation

// Get the layer to animate
var mySlide = new Fx.Slide('sublinks');

// Prepare onClick event for the link with ID="op1"
$('op1').addEvent('click', function(e){

// Get text contained into the link :"Hide submenu"
var textLink = $('op1').innerHTML;

// When an user click on this link update text: "Hide submenu" or "Display submenu"
if(textLink=='Hide submenu'){
$('op1').innerHTML = 'Display submenu';
} else {
$('op1').innerHTML = 'Hide submenu';
}

// Event Toggle for the Submenu
e = new Event(e);
mySlide.toggle();
e.stop();
});

});

</script>

The code is very simple. I used all we already saw in my previous post about MooTools, but if you are a newbie I suggest you to take a look at this post and this post.

For suggests or questions please add a comment! Thanks!

Download source code

5 tips to improve your memory

5 tips to improve your memory: 1: Pay attention to minute details when you go to a place or when you meet a person. For example when you meet a person, observe the size and color of his dress, his height, his complexion, the place where you meet him, the door number of the house, the name of the street, its location etc and try to recall them when you go back to your residence.

Design a stunning Alert Box using MooTools

Do you want to change the default style of JavaScript Alert Box? Do you want to add a nice animation with MooTools? Take a look at this post!

About the Author

Eduardo Sada
Programmer and Web Designer
Coders.me

The Script

This tutorial explains how to design a stunning Alert Box which changes and improves the classic look of JavaScript Alert Boxes.

The result is something like these you can see in the previous picture. Alert box appears on the page, above all other page elements with a nice animation. Try it!

Download source code Take a look here for a live preview


1. How to install this script
Downloading the package you have all do you need to use this nice script. First of all, add a link to MooTools Framework and to sexyalertbox.js within the <head> tag of the page in this way:

<script src="mootools.js" type="text/javascript"></script>
<script src="sexyalertbox.v1.js" type="text/javascript"></script>

...then add this link to the CSS file:

<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />

...and if you want to change the default look of Alert Box you can customize the CSS file how you prefer.

2. HTML Code
Add this line of code within the <body> tag:

<script type="text/javascript">
window.addEvent('domready', function() {

Sexy = new SexyAlertBox();

});
</script>

...and for example create a link which display an alert box with a simple message "Nice!":

<a href="#" onclick="Sexy.alert('Nice!'); return false;">Show a JavaScript alert with a new look!</a>

In this way when an user click on this link an alert box will appear above all other elements of the page. It's all! For other info, please take a look at the documentation you can find at this link.

Related Post
MooTools - Basic Tips for Web Designer
MooTools - Get elements ID using unobtrusive code