Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 29 2014


How to Use UI Kits – Plus Free UI Kits to Choose From!

UI kits can be seen anywhere on the Web. But what is this UI kit thing? Do you know how to use UI kits? You can see a lot of resources with beautiful interface elements such as buttons, sliders, breadcrumbs, media players, forms and the likes. Perhaps it crossed your mind how these elements came to be.

Let me give you first a brief introduction about UI kits. A UI kit stands for “User Interface Kit”, which are PSD files that are composed of user interface elements. These come in a variety of colors, patterns and asl files that are being integrated on web and mobile designs. Though sometimes there are UI elements that are included on the package that you don’t think you will be using. That being said, UI kits will vary according to your web design needs. Usually the premium versions of UI kits come with a lot of user interface elements than the free ones.

Using UI kits is all about improving and speeding up the workflow without giving a lot of time thinking what to design. This allows you to focus more on the functionality and usability of the website you are working on.

OK, enough for introduction. I know you’re all fired up and want to know how to use UI kits. So let’s rock!

Choosing a UI Kit to Use

There are a lot of UI kit resources on the Web that you can use, depending on what you need. But for this tutorial, we will be using Flat UI PSD format by since it has a lot of user interface elements that we can choose from.

Feel free to check these out too!

Flat UI Pro, a professional design framework

1.  Flat AP UI Kit

From: Andrew Preble

2. Featherweight UI – A free, vector based and retina ready UI kit

From: Sara Hunt

3. Flat Design UI Kit Vol. 1

From: Bloom Web Design

4. FREE flat UI kit.


5. UI Kit

From: Abhimanyu Rana

Opening the UI Kit PSD File

Unzip the file first to view the contents of the folder. You can see four folders and 2 .txt files inside. Open the UI folder and then view the flat-ui-free.psd file in Adobe Photoshop.



By default, there are three folders on the Flat UI PSD file:

  • Basic Elements – consists of a series of individual UI element folders.
  • Samples – consists of the actual application design of the UI elements.
  • Background – the white background of the UI elements.


Using the UI Kit Elements

Now that the Flat UI PSD file is opened, we can now go on and use the UI elements. Click Auto Select on the Option Bar (on the top left section of Photoshop near the menu. Make sure Group is selected instead of layer) and then open the Basic Elements folder.



Next, select the UI elements that you want to use. For this example, we will select the menu, share status buttons, radio buttons and checkboxes. Click on the selected UI elements and then move them to a new Photoshop document file.


Resizing UI Kit Elements

To resize UI elements, click on the Direct Selection Tool on the toolbar on the left section of the Photoshop.


And then select the path on the right side of the UI element you want to resize. For this example, we will resize the menu element, press shift and drag the path to the right to resize.


Changing the UI Element Color Scheme

To change the color scheme, you need to select the specific element you want change then click on the shape and select your preferred color on the color picker. For this example, we will change the background color of the menu. Go to the Menu folder and look for the shape layer that has the same background color of the menu. Change the background color of the menu to hexadecimal color: #00acc0.


Using Vectors and Glyphs

Vectors and glyphs add a touch of  creativity to web design elements. Let’s use the existing vectors and glyphs of the Flat UI kit. Create a new Photoshop document file. Next, create a box using Rounded Rectangle Tool with the dimension of 372px by 372px.  Now drag the retina vector icon and static green button on the box you created. Then drag the round check icon glyph to the left of the static green button. You just use the vectors and glyphs of UI elements.


Exporting UI Elements for Web

Now that we already know how to resize and change the color scheme of UI elements, let’s export them for web use. Simply drag your preferred UI element in the new Photoshop document file with a transparent background. Make sure you will only select the layers of that UI element, not the whole folders themselves. For this example, let’s use the paginator. Drag the UI element in the new Photoshop document and go to Image then choose Trim.


The Trim window will then appear. Next, select the Transparent Pixels radio button and make sure that all of the checkboxes are selected on Trim Away section (Top, Bottom, Left, Right) and then click OK.


Then Go to File > Save for Web & Devices. In the Save for Web & Devices Window, select the type of preset you want to use. For this example, PNG-24 is used since high quality image with no transparent background is preferred. Click Save to place it on your preferred location.


Congratulations! You just learned how to use, resize, change color scheme, apply vectors and glyphs and export UI kit elements for web used.


UI kits are very helpful to both web designers and web developers. If you are a freelancer, using UI Kits will save you a lot of time since you don’t need spend more time thinking for the design. It can please your clients too because you can deliver the project faster. You can explore more UI kits here. The web is composed of hundreds of UI Kits, both in free and premium versions. You just need to choose the UI kit that suits your needs. You might also want to try to apply it on your actual web or mobile design and then later on code it using HTML and CSS.

May 13 2013


How These 11 WordPress Scripts Will Stop North Korea And Improve Your Blog

In this post you will get 11 WordPress scripts that will help improve your blog’s performance and that may or may not stop North Korea from terrorizing us.

Either way, you will find these little WordPress hacks very useful for your daily blogging needs, which can help you save lots of precious time!

If you’re eager to enhance or improve the functionality of your WordPress site, then below are powerful WordPress scripts that will definitely give you a great head start.

How These 11 WordPress Scripts Will Stop North Korea

Okay, these probably won’t stop North Korea from wreaking havoc, but you can’t blame a man for trying!

11 WordPress Scripts to Improve Your Blog…Right Now

On a serious note, these WordPress scripts will help you work smoothly on the back-end and will make your front-end more comfortable for your readers.

1. Add Post Meta Descriptions

WordPress does not support the use of meta description tags by default. Though metas have lost their significance in SEO, they can still influence the ranking of your blog in the search engines. To make your site search engine friendly, you should open the header.php file of your theme and copy and paste the code below to the space between the opening <head> and closing </head> tags.

<meta name="description" content="
 <?php if ( (is_home()) || (is_front_page()) ) {
 echo ('Your main description goes here');
 } elseif(is_category()) {
 echo category_description();
 } elseif(is_tag()) {
 echo '-tag archive page for this blog' . single_tag_title();
 } elseif(is_month()) {
 echo 'archive page for this blog' . the_time('F, Y');
 } else {
 echo get_post_meta($post->ID, "Metadescription", true);

As simple as it seems, this hack can help you enhance the SEO performance of your site today.

2. Split WordPress Content into Multiple Columns

Sometimes, you may want to create additional columns in your pages, but as we know, WP does not support this from the back-end. The best way of doing this is to use snippets to split page content. Locate your theme folder and add the following block of code within the opening and closing php tags.

// split content at the more tag and return an array
 function split_content() {
 global $more;
 $more = true;
 $content = preg_split('/<span id="more-d+"></span>/i', get_the_content('more'));
 for($c = 0, $csize = count($content); $c < $csize; $c++) {
 $content[$c] = apply_filters('the_conte
 t', $content[$c]);
 return $content;

Once you do this and save the edited file, you will need to locate the specific theme files and comment out both the_content() and call split_content() function.

3. Redirect 404 Pages to Home Page

Although 404 Error Pages are an integral aspect of WordPress, they lower your page rankings significantly, thus making your blog or site ineffective. To help you out of your predicament, I suggest you copy the following snippet code to the .htacess file to redirect the 404 error pages to your home page.

< IfModule mod_alias.c >
RedirectMatch 301 ^/search/$
RedirectMatch 301 ^/tag/$
RedirectMatch 301 ^/category/$
< /IfModule >

This hack will redirect search engine spiders way from the 404 error page to the home page and in the process, improve your rankings and site’s reputation online.

4. Define Posts Displayed in Home Page

Majority of bloggers display posts in more or less them same way on the home pages of their blogs. This is understandable since WordPress does not feature a default option to define how posts should be displayed. Fortunately, you can surmount this problem by using custom fields. To define posts in your home page, you can use either the full post or post excerpt only. You will need to access your index.php file and replace the default loop with the following custom code:

<?php if (have_posts()) :
 while (have_posts()) : the_post();
 $customField = get_post_custom_values("full");
 if (isset($customField[0])) {
 //Custom field is set, display a full post
 } else {
 // No custom field set, let's display an excerpt

5. Insert Google Maps into Pages

Have you been using iframes to embed Google maps in your contact page or sidebars? If so, chances are high that it will be rendered poorly because of the interference of the visual editor. To save yourself the trouble of using iframes, I recommend that you copy and paste the following short codes into the function.php page.

//Google Maps Shortcode
 function fn_googleMaps($atts, $content = null) {
 extract (shortcode_atts (array (
 "width" => '640',
 "height" => '480',
 "src" => ''
 ), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>';

Once you copy and paste the above code to your function.php, you will need to copy the short code below into the exact place where you want Google Maps to be displayed.

[googlemap width="200" height="200" src="[url]"]

6. Display Page Categories in a Drop Down Menu

Sometimes, you may want to add a cool drop down menu that will show all existing categories in your WordPress site. Here is a simple way of doing it. Copy and paste the code below into the index.php or sidebar.php file.

<form action="<?php bloginfo('url'); ?>/" method="get">
 $select = wp_dropdown_categories('show_option_none=Select category&show_count=1&orderby=name&echo=0');
 $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
 echo $select;
 <noscript><input type="submit" value="View" /></noscript>

7. Display Similar Posts without Plugins

It’s also possible to display similar posts in your blog so as to draw the attention of visitors and engage them. I know you will be tempted to use a plugin to display similar posts, but there is no need to overload your WordPress blog with plug ins when you can use tags and custom codes. Here is a powerful code to do display related posts quickly. Copy and paste it to the functions.php file.

 //for use in the loop, list 5 post titles related to first tag on
 //current post
 $tags = wp_get_post_tags($post->ID);
 if ($tags) {
 echo 'Related Posts';
 $first_tag = $tags[0]->term_id;
 'tag__in' => array($first_tag),
 'post__not_in' => array($post->ID),
 $my_query = new WP_Query($args);
 if( $my_query->have_posts() ) {
 while ($my_query->have_posts()) : $my_query->the_post(); ?>
 <p><a href="<?php the_permalink() ?>" rel="bookmark" title="
 Permanent Link to <?php the_title_attribute(); ?>">
 <?php the_title(); ?></a></p>

8. Change WP Login Logo

If you are tired of seeing the same old default “log in” logo, then you can change that to display a logo of your choice. To change the logo, you need to create and copy the new custom logo.png image into the image file in your root folder then copy and paste the following code into your functions.php file.

// login page logo
 function custom_login_logo() {
 echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/companylogo.png) 50% 50% no-repeat !important; }</style>';
 add_action('login_head', 'custom_login_logo');

9. Display Number of Facebook Fans

If you have a Facebook fan page then chances are high that you are thinking of displaying the total number of Facebook likes to visitors who access your WordPress site.

 $page_id = "YOUR PAGE-ID";
 $xml = @simplexml_load_file("".$page_id."") or die ("a lot");
 $fans = $xml->page->fan_count;
 echo $fans;

In order for this code to work, you only need to replace your current page ID with your personal Facebook page id.

10. Create Custom Widgets

As much as WordPress themes come with various widgets, some users may want to add custom widgets that meets the needs of their blogs. If you are one of them, then here is a handy snippet for this purpose. Copy and paste the following code into your functions.php file.

class My_Widget extends WP_Widget {
 function My_Widget() {
 parent::WP_Widget(false, 'Our Test Widget');
 function form($instance) {
 // outputs the options form on admin
 function update($new_instance, $old_instance) {
 // processes widget options to be saved
 return $new_instance;
 function widget($args, $instance) {
 // outputs the content of the widget

11. Display Google Users’ Search Terms

Have you been trying to monitor and understand the search patterns of prospects and visitors who access your website from Google Search?If so, then you need a script that will display all terms that were searched by clients who came across your site. Paste the following code outside the header section.

 $refer = $_SERVER["HTTP_REFERER"];
 if (strpos($refer, "google")) {
 $refer_string = parse_url($refer, PHP_URL_QUERY);
 parse_str($refer_string, $vars);
 $search_terms = $vars['q'];
 echo 'Welcome Google visitor! You searched for the following terms to get here: ';
 echo $search_terms;


Though these codes appear simple, they are powerful code snippets that you can use to customize WordPress websites. You can use these codes to change the layout and functionality of your theme instantaneously and save yourself the trouble of line-by-line coding.

Do you know any WordPress scripts I have missed?

April 25 2013


Build a Custom WordPress Home Page with Custom Widget Areas

In this video tutorial I will teach you how to build a WordPress website with custom widget areas the easy way. Even if you haven’t touched a single line of code before, this tutorial is simple enough to walk you through every code.

This tutorial goes hand in hand with Christian’s video tutorial on how to create a website from scratch using HTML5 and CSS3. The goal is to help you understand how easy it is to create the same layout (from Christian’s tutorial) in WordPress using custom widget areas. Although you will need to put the pieces together a little, it’s a fun and learning experience nonetheless!

Resources for this tutorial:

  • Canvas - (important) it’s a paid WordPress theme from WooThemes but the video tutorial below can still be applied using other themes.
  • Responsive Theme – a free alternative, really great theme with millions of downloads monthly.

Video Tutorial: Custom WordPress HomePage with Custom Widget Areas

Visit us at for more learning materials that can get you started with freelancing as a web designer, inside you will get: an eBook, tons of video guides, source codes, child theme, forum support, and most of all the knowledge of how you can start earning $300 in just 3 Days!


December 12 2011


Create Elegant Tags With Sliding Post Count For WordPress

Tired of the boring category style being always same, like a mini menu? Tired of items arranged horizontally or vertically, styled always the same way? Yes, I’m tired of it too. So let’s make things more interesting now.

Our starting point will be a cool sliding tags design made by Thomas Bosée. Then we’ll learn how to use WordPress wp_list_categories function, how to edit its result, how to code CSS and finally a little of jQuery “Black Magic”.

So, let’s rock!

Demo first, please

So our goal is to achieve the effect seen on this demo. As usual you can download our sample files and edit as you want!


Wp_list_categories is a function that gets all categories and has a few useful parameters. We’ll be using a few of them:

  • echo – whether the results should or shouldn’t be displayed. This is quite useful because we’ll have to adjust results a little bit
  • show_count – this one toggles the display of current post count in each category
  • title_li – since the default value is a big <h2>Categories</h2> we’ll change it
  • depth – It’ll be better not to have children categories this time. But if you want it just put it as zero and change ‘hierarchical’ to false

Our php will be like this:

	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	$variable = wp_list_categories($args);
	echo $variable;

And this PHP outputs this HTML:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> (17)</li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> (9)</li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> (3)</li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> (25)</li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> (8)</li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> (12)</li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> (1)</li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> (6)</li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> (15)</li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> (21)</li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> (10)</li>

Oops, HTML is not quite right yet

As you may notice, the default post count is simple text with parenthesis. Well, in our original design we have count as a separate element, so we’ll need to change this default behavior. A simple way of doing this is with str_replace, we’ll search for “(“, replace with “<span>” and then search for “)” e replace with “</span>”.

This is how your category listing function will be:

	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "<span>", $variable );
	$variable = str_replace ( ")" , "</span>", $variable );
	echo $variable;

And now we’ll have right HTML, as follows:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> <span>17</span></li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> <span>9</span></li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> <span>3</span></li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> <span>25</span></li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> <span>8</span></li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> <span>12</span></li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> <span>1</span></li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> <span>6</span></li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> <span>15</span></li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> <span>21</span></li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> <span>10</span></li>


(A.K.A. CSS3. Yeah, a really bad joke)

Now we’ll do this with a few cool CSS3 implementations. This is what will help us:

  • Before and after pseudo elements – instead of putting a lot of additional spans we’ll just use them to create pretty effects
  • Border-radius - we’ll need slightly rounded corners
  • Content - this CSS property will be especially useful because we’ll insert an image as content of before count and after count
  • Element positioning - we’ll have to be aware of positioning since before and after have to always be with our main span element

Let’s go step by step. Basic CSS for background and main div positioning. Nothing really major in here:

body {
	background: url(bg.png);
	#container {
		position: relative;
		width: 500px;
		margin: 50px auto 0;
		padding: 10px 0 20px;

With #category and li rules we’ll achieve that side-by-side listing.

#category {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
	#category li {
		float: left;
		position: relative;
		padding: 0 10px;
		margin: 0 15px 10px 0;

Our link styling will create that “white” part of our little tag. Background is a 1px wide soft gradient:

#category li a {
	float: left;
	padding: 4px 10px 0;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-decoration: none;
	border-top: 1px solid #d3d0cf;
	border-left: 1px solid #cac7c7;
	border-bottom: 1px solid #aeadad;
	background: url(bgTag.png) repeat-x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;

Now we need to create the orange part of our tag. Since we’ll animate just the “middle”, we’ll have to do it in a way that our before and after elements will be “inside” of span but will go to right / left as our main element expands. So this will do the trick:

#category li span {
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0 0;
	margin-top: 1px;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-align: center;
	background: url(bgCount.png);
	overflow: hidden;
	#category li span:before, #category li span:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 30px;
		content: url(bgBeforeCount.png);
		overflow: hidden;
	#category li span:after {
		left: auto;
		right: 0;
		content: url(bgAfterCount.png);

jQuery Black Magic

First of all, we need to include jQuery, right? So we’ll do it with a really cool technique that I’ve seen at jQuery boilerplate:

<script src="//" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write("

February 20 2011


All About BIG and BOLD Typography: Tips and Inspiration

There are many ways to attract viewers’ attention when it comes to web design.Flash techniques, awesome photography & catchy color schemes are just some of the many methods used to create visual interest. There is something even simpler that can create a big impact…kick-ass Typography. Specifically, I’m talking about big and bold typography. When used correctly it can stand alone in a layout and still attract a lot of attention.

In this article I will be sharing:

  • Tips
  • Fonts
  • Tutorials
  • Examples

How to Make Typography Stand Out

1. Choose Your Fonts

This is crucial, because you need to match your font to your message and layout. Mismatched fonts can lead to a misleading and confusing message to the viewer if you just carelessly pick any font.

2. Creative Color Schemes

It used to be a big deal if you used mismatched colors. In this new generation, stepping out of the box may be the best thing you’ll ever do. So keep it unique when choosing color schemes for your typography. You may also want to consider the background of your layout. So just put in the right blend on your design.

3. Don’t Over-do it

Just put in the right amount of effects, colors and patterns.Over done Typography may just ruin the concept of your design. If you go for very characterized fonts, you may want to take it easy on using patterns and/or effects.

4. Put in Emphasis

You may want to make certain words pop out and get noticed. This way you convey a message that would really make the whole design memorable. Balance the font size and position in a way that it is not distracting from your “big word”. You can also use quotation marks, apostrophes or other punctuation marks  like (“,! or ?) to place emphasis on words.

5. Harmony

Make every element in your typographic design harmonious. Check if it goes well & looks good with all the other objects on your layout. Sometimes, you may end up having  the typography will be more distracting than pleasing.

Fonts for Good Typography

1. Diavlo

2. Nevis

3. Fertigo Pro

4. Alte Haas Grotesk

5. Honey Script

6. Romeral

7. COM4t

8. Diogene Bold

9. Bleeding Cowboys

10. Riesling

Bold Typography Design Tutorials

1. Photoshop Tutorials: Colorful Light Burst Text

2. The Sugar Bag Effect – Photoshop Typography Tutorial

3. Smashing Your Creative Block – Photoshop Tutorial

4. Create a Steampunk Typography  – Part IPart 2

5.Smoke Type in Photoshop in 10 Steps

6.Trendy Grunge Type – Photoshop Tutorial

7. Create a Cool Wet Ink Typography Effect in Photoshop

8. Horror Style Typography Effect with Dirt and Splatter Texture in Photoshop

9.  Super Easy Neon Style in Photoshop – Screencast

10.Tutorial: Photorealistic Perspective

Inspirational Typography

1. Getfinch

2. N. Design Studio

3. Mohanbalaji

4. Four24

5. Ryan Keiser

6. Carsonified

7. Wearecupcake

8. Kyle Steed

9. Fajne Chlopaki

10. Cool

11. We Shoot Bottles


13. Hull Digital

14. Benlind

15. YISY


17. Crowley Webb

18. Stackoverflow Carsonified

19. Maurivan Luiz

20. This by them

21.Alpha Multimedia

22. fl-2 Blog

23. Pallian Creative

24. Gummisig

25. Denise Chandler

26. Wordit


28.Lorem Ipsum


30.Household Design

Big & bold Typography gives a web design that great bang and makes its approach more aggressive. Amazing, how a bunch of over-sized letters can convey a great message to viewers.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!