Web Design Trendz & Tutorial
Objective of the blog: When ever I found any good information on internet I just collect and put on this blog. And share with friends. In case I need that information again then I can easily find out on this bog…
Friday, June 24, 2011
Free Raster to Vector
Wednesday, June 22, 2011
How to Choose The Right Color For Your Brand
Color is a Powerful Branding Tool
What is the color of your brand? Color plays an important role and says a lot about you and your brand. Take as an example the Google logo. We can instantly recognize it from its characteristic colors.
What would the Google logo be without its current colors? What if it was colored gray?
While Google’s logo gallery features 1002 logos that include all these humorous cartoon modifications that we see on holidays, and major events, we all know that the combination of the blue, yellow, red and green letters is the distinctive symbol of this major search engine.
Color Bolsters Your Branding Attributes
Think of IBM, a company that is synonymous with Big Blue. Blue shows a sense of security and reliability. IBM’s blue logo, designed in 1972, makes a distinctive statement about the company’s expertise, innovation, service and trust, thereby reinforcing its strength in the industry. It is a great example of a simple, yet attractive and powerful emblem.
Color Enables Brand Recognition
How do you recognize your favorite brands? The color establishes the identity of business in the eyes of the client more than the actual letters within the logo. Think for a moment a few well-known brands, like Hertz, Avis, National Car Rental and Alamo. You instantly recognize their logo from a long distance because of their unique color.
Color Evokes Emotion
How true is that, indeed! A woman’s heart rate is said to increase when she is holding a Tiffany light blue box. Tiffany’s color is so important to the brand, they trademarked it.Tiffany’s Blue Book catalogue was first published in 1878. It’s unique color is now known worldwide as Tiffany Blue, and has become an international symbol of style and sophistication.
Color Helps You Stand Out of Competitors
UPS is instantly recognized by its brown trucks. “What can brown do for you?”, was UPS’ former advertising slogan. The question is synonymous to “what can UPS do for you?”.Companies use colors to express their brand attributes. You can do the same for your personal brand. However, be careful, the question you need to ask when choosing your brand’s color is not: “What is my favorite color?” Instead, the right question is: “What color best expresses my personal brand attributes?”
When I started my diet blog which have diet coupons and discounts I thought I would use a blue colored theme because that is my favorite color. I later realized that using a green color would better convey my message of health, relaxation, healing, weight loss, and youth.
So, What Color Is Your Brand?
Use BLUE, if your brand expresses authority, reliability, truth, intelligence, confidence, loyalty, integrity, wisdom, peace and/or trust.What famous candy brand used the color blue to revitalize an aging product? M&M’s has been producing their colorful button-shaped candies in brown, yellow, green, orange and red colors since 1941. In 1995, they first introduced the blue color in their candies as an expression of their brand’s continuity, loyalty and authority in the market.
Use GREEN, if your brand expresses optimism, growth, relaxation, fertility, spring, nature, rebirth, luck, healing, youth and/or environment.
What brand boasts weekly sales of millions of bright green bottles filled with fresh-smelling hair care products? Garnier Fructis hair care products are designed to protect and strengthen the hair to reveal its life, beauty, and shininess. They are widely known for their green color that communicates growth, fertility and rebirth.
Use YELLOW if your brand expresses happiness, energy, caution, sunshine, warmth, joy, intellect, light, warning, and/or vision.
What city is often associated with yellow, thanks to the high number of its taxis? New York City of course! Over 12,000 yellow cabs have linked NYC to the color yellow.
Use ORANGE if your brand expresses competition, energy, force, success, encouragement, determination, productivity, potency, and/or vitality.
When my brother Alex, a certified residential energy performance inspector, launched his online venture of energy performance certificates in N. Ireland, he deliberately chose orange as the brand color of his business. He never regretted it!
Use RED if your brand expresses action, desire, passion, determination, power, potency and/or love.
What brand’s red color can be seen on vending machines, billboards and ads all over the world? Coca-Cola’s red color is instantly recognized everywhere.
Use PURPLE if your brand expresses royalty, ambition, spirituality, mysticism, dignity, mystery, inspiration, wealth, magic, and luxury.
What popular rock star uses purple to brand his name? Prince, of course. In fact, his 6th album is named “Purple Reign” and is ranked among the best albums in the rock music history.
Tuesday, June 21, 2011
Before Hiring A Graphic Designer
Very often companies can rush into getting a design or brand set up. Time is normally of the essence and as time is money mistakes can be made in haste.
A quick checklist has been compiled that could save time tears and trouble:
1. Research
Have a look at different designers, look through portfolios and see what you like. Get the opinions of others, what looks good to you may not look good to others, so getting the opinions of others for designers you like the look of is a wise move. Have a browse through designers portfolios, check out the range of their expertise. Creative designers like to showcase the range of their work as they are proud of it.
2. Budget
What is the budget you have to allocate to your design/brand. Be realistic, if you are approaching a top design agency with a small budget then you are wasting their time and yours. Great design does not have to cost the earth, but it does take some searching for.
If you are working to a budget, perhaps approaching the project in bite size stages could be best; spreading the cost over a few months of design to allow you to get the best designer possible but giving them the time to work on your campaign.
3. Competitors
What are your competitors doing? How are they presenting themselves, what angle are they taking and what is working for them. With design and branding, fitting into the industry/market is important, but so is standing out in the crowd. Great designers know how to get the balance of making you fit in, yet stand out.
4. Timescale
Honesty is the best policy; once you have found the designer you like the look of you need to be honest about the timescales they have to work with. Most great designers are in demand, and they will need to fit you in. If a designer has lots of spare capacity and free time, the question needs to be asked as to why.
Designers cannot be expected to come up with award winning designs for you if they only have a couple of weeks to research, design, and produce ideas (which then would need to be reviewed by you and whittled down). Sometimes taking a bit more time will pay dividends rather than rushing in like a bull in a china shop.
5. Partnership
Relationship is the key to business, if you have a close relationship with your designer then all the better. Not to say that you need to go around for meals with the family; but having a close working relationship will only add value to your finished product. For you to understand how they work (as designers are creative creatures thought to come from a different planet) and how they understand you (do they really know your business and market place) and your objectives.
By following these practical guidelines you should be able to find the right designer for your project. The world is well stocked with graphic designers, of all shapes and sizes; local, national and global. Choosing a designer based on their ideas, creative skill and background is more important than choosing someone local or cheap.
Marketing Quotes Is a free resource to help UK businesses get help and advice from local graphic designers.
Install Joomla in 2 minutes
Assuming you have a working Apache web server, with PHP and a MySQL Database, you are on your way to installing Joomla.
When you have finished uploading the files and folders, go to your homepage (http://www.yoursite.com or http://yoursite.com/joomla_folder). You should now see a pre-installation check page generated by Joomla.
Pre-installation check
If you don't see the Check page please verify the following:
- Was everything uploaded to your web site?
- Did you remove (and back up) your old web site?
- Do you really have an Apache / MySQL / PHP Web server?
- Do you have a configuration.php file in your Joomla directory?
- If everything checks out ok, and you still don't see the Check page, try: http://www.yourpage.com/installation/index.php This is the direct address for the Check page. If it doesn't show up, or you see a lot of errors and techno mumbo-jumbo, you probably don't have an an Apache / MySQL / PHP Web server.
The pre-installation check page is in three parts. The first checks that your system is able to run Joomla:
The second part are some PHP settings:
The thrid part checks several file and directory permissions:
If everything checks out ok click the "Next button".
If there are some items highlighted in red, please ask your web service provider to correct them. If it is not possible to correct them yourself, you can still click "Next", and see what happens.
The next page displays the license for Joomla.
Licence
If you agree with the terms, click the checkbox next to "I Accept the GPL License" and the click the "Next" button. You will not be able to proceed unless you agree to the license terms.
The next page configures the MySQL database which Step 1 of the installation process.
Installation - Step 1
Enter the configuration of your MySQL Database. The hostname of your database is usually localhost. This means the database server is running on the same computer as your web server. On occasions where localhost is not a usable database server, you will need to contact your administrator.
You are given the option to delete the existing tables in the nominated database and also to backup the tables. You may also install come sample data. If this is your first installation we recommend you check this option.
When you have entered your database information properly, click the "Next" Button. You will be asked to confirm the database operation.
Click OK if you are satisfied that you can proceed. The database will be populated between this and the next step. Any errors that occurred during initialisation of the database will be displayed on the next page.
Installation - Step 2
Step 2 is simply a page where you enter the name of your site.
Enter a name for your site and click the "Next" button. Please note that special characters are usable in this information area.
Installation - Step 3
Step 3 is a page to confirm the installation directory, the url to the Joomla site, your email address and the administrator password.
The email address is for your Super Administrator email. This user account is automatically created for you. The password you enter will be used for your "admin" account. The username for the Super Administrator is "admin". You may change the randomly generated password if you desire.
The permission settings will be used while installing Joomla itself, by the Joomla addon-installers and by the media manager. If you are unsure what flags shall be set, leave the default settings at the moment. You can still change these flags later in the site global configuration.
Click the "Next" icon. The final page confirms the status of the installation and the Super Administrator login name and password.
Installation - Step 4
Do not forget your Super Administrator login name and password as it is not possible to enter the admin section without this. If you lose this information, you must the restart the complete set up procedure.
For security reasons you are reminded to delete the installation folder, and then refresh the page. Until this is done, Joomla will not work.
There are two buttons that will take you to either the Joomla Site or the Site Administrator. If this is your first installation click the "View Site" button. You should see your new Joomla site. Take a moment to explore some menu options. When you are ready, click the "Administrator" link in the Main Menu. Enter the user name and password as you saw them on the Step 4 page.
If this is not your first time then you will know what to do next.
Your set up has now been completed, and you are ready to JOOMLA!
Secret #1 to Facebook fan page design
You don’t have to squeeze your Facebook profile picture into a little box. You have more room than that! You don’t have to use all the space, but it is there for your use.
To claim maximum real estate, design your image so that it is 200 pixels (px) wide and 600px high. You can use that space to have calls to action and interesting design elements.
To add a new profile photo or graphic:
- Login to Facebook
- Switch to use Facebook as page (the page you want to update)
- Click the Edit Page button which is found near the top right corner of your fan page
- From the menu on the left, choose Profile Picture
- It’s all down hill from here. Just Browse to where your new profile image file is stored on your local computer
- You are done!
- Starting after step #2 above, hover your mouse over your current profile pic. You will see a new button appear over your existing image called Change Picture.
- Click that button, and you can continue with step #5 above.
If you know of any Facebook tips and tricks, send them to me at howto@HowTutorial.com. I’ll be sharing more tips as time goes on.
Beautiful jQuery Accordion Tutorial
1. HTML
In this section, we use UL List to form the structure. The first level UL will be the navigation menu, and the second level UL that resides inside each first level UL's LI will be the submenu.
There is some rules over here about the classes and rel attribute, let me explain:
- .popular, .category, .comment Classes in the anchor element (first level) are used for the styling of the menu.
- Rel atribute in the anchor element (first level) is used by javascript to add and remove "selected state" aka change the menu image after it was clicked
- .last Class is used to remove border bottom for the last item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < ul id = "accordion" > < li > < a href = "#" class = "popular" rel = "popular" >Popular Post</ a > < ul > < li >< a href = "#" >Popular Post 1</ a ></ li > < li >< a href = "#" >Popular Post 2</ a ></ li > < li >< a href = "#" class = "last" >Popular Post 3</ a ></ li > </ ul > </ li > < li > < a href = "#" class = "category" rel = "category" >Category</ a > < ul > < li >< a href = "#" >Category 1</ a ></ li > < li >< a href = "#" >Category 2</ a ></ li > < li >< a href = "#" class = "last" >Category 3</ a ></ li > </ ul > </ li > < li > < a href = "#" class = "comment" rel = "comment" >Recent Comment</ a > < ul > < li >< a href = "#" >Comment 1</ a ></ li > < li >< a href = "#" >Comment 2</ a ></ li > < li >< a href = "#" class = "last" >Comment 3</ a ></ li > </ ul > </ li > </ ul > |
2. CSS
CSS is pretty simple, we are using two UL Lists. So, what we do is, style the first level UL, skin it with images, and after that, style the second UL List and hide it.Have you heard about CSS Sprite? CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment. Yes, this is the image we are using for this tutorial:
And, if you wish to learn more about CSS, you can read my previous posts:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | /* First Level UL List */ #acc ordion { margin : 0 ; padding : 0 ; list-style : none ; } #acc ordion li { width : 267px ; } #acc ordion li a { display : block ; width : 268px ; height : 43px ; text-indent : -999em ; outline : none ; } /* Using CSS Sprite for menu item */ #acc ordion li a.popular { background : url (menu.jpg) no-repeat 0 0 ; } #acc ordion li a.popular:hover, .popularOver { background : url (menu.jpg) no-repeat -268px 0 !important ; } #acc ordion li a.category { background : url (menu.jpg) no-repeat 0 -43px ; } #acc ordion li a.category:hover, .categoryOver { background : url (menu.jpg) no-repeat -268px -43px !important ; } #acc ordion li a.comment { background : url (menu.jpg) no-repeat 0 -86px ; } #acc ordion li a.comment:hover, .commentOver { background : url (menu.jpg) no-repeat -268px -86px !important ; } /* Second Level UL List*/ #acc ordion ul { background : url (bg.gif) repeat-y 0 0 ; width : 268px ; margin : 0 ; padding : 0 ; display : none ; } #acc ordion ul li { height : 30px ; } /* styling of submenu item */ #acc ordion ul li a { width : 240px ; height : 25px ; margin-left : 15px ; padding-top : 5px ; border-bottom : 1px dotted #777 ; text-indent : 0 ; color : #ccc ; text-decoration : none ; } /* remove border bottom of the last item */ #acc ordion ul li a.last { border-bottom : none ; } |
3. Javascript
There are two major sections in this javascript click event:- First section: Reset everything back to default. What it does, hide all the submenus and also reset all the arrow to default position.
- Second section: Display the selected item and change the arrow direction
It gets a little bit tricky in resetting the arrow back to default position. I'm using for each method to loop thorugh the menu, grab its REL and and remove the classes. I think there are different ways to accomplish it. If you do know a better way, please let me know and I will ammend it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | $(document).ready( function () { $( '#accordion li' ).click( function () { /* FIRST SECTION */ //slideup or hide all the Submenu $( '#accordion li' ).children( 'ul' ).slideUp( 'fast' ); //remove all the "Over" class, so that the arrow reset to default $( '#accordion li > a' ).each( function () { if ($( this ).attr( 'rel' )!= '' ) { $( this ).removeClass($( this ).attr( 'rel' ) + 'Over' ); } }); /* SECOND SECTION */ //show the selected submenu $( this ).children( 'ul' ).slideDown( 'fast' ); //add "Over" class, so that the arrow pointing down $( this ).children( 'a' ).addClass($( this ).children( 'li a' ).attr( 'rel' ) + 'Over' ); return false ; }); }); |
Conclusion
Like this tutorials? You can express your gratitude by visiting my sponsors on the sidebar, bookmark it and help me to spread this tutorial to our friends! :) Thanks!
Monday, June 20, 2011
5 Principles of Effective Logo Design
Now that you know what a logo is supposed to do, and what it should represent you now must learn about what makes a great logo aka; the basic rules and principles of effective logo design.
1. A logo must be simple
A simple logo design allows for easy recognition and allows the logo to be versatile & memorable. Good logos feature something unexpected or unique without being overdrawn.
2. A logo must be memorable
Following closely behind the principle of simplicity, is that of memorability. An effective logo design should be memorable and this is achieved by having a simple, yet, appropriate logo.
3. A logo must be timeless
An effective logo should be timeless – that is, it will stand the test of time. Will the logo still be effective in 10, 20, 50 years?
4. A logo must be versatile
An effective logo should be able to work across a variety of mediums and applications. For this reason a logo should be designed in vector format, to ensure that it can be scaled to any size. The logo must work in just one colour too.
5. A logo must be appropriate
How you position the logo should be appropriate for its intended purpose. For example, if you are designing a a logo for children’s toys store, it would be appropriate to use a childish font & color scheme. This would not be so appropriate for a law firm.
For further reading on the rules and principles of great logo design I highly recommend to read the logo design tips from Logo Factory before continuing and also the article