We Are Pixel8 » Tips & Tutorials

Use a Conditional Statement to show WordPress Pagination

Erik Ford — Wed, 18 Jan 2012 18:01:42 +0000

If you have ever developed a WordPress theme, you have inevitably come across having to add some sort of pagination to the WordPress loop. Whether in your “index.php”, “archives.php” or “search.php”, you end up adding some code that looks like the following:

 endwhile; ?>
 

	 next_posts_link( __( '« Older Posts', 'wap8' ) ) ?>
	 previous_posts_link( __( 'Newer Posts »', 'wap8' ) ) ?>

 
 endif; else : // no posts found ?>

So what’s wrong with this code? Technically, nothing at all. You are simply hooking into the next_posts_link() and previous_posts_link() to show the “Older” and “Newer” post links. But, when you check out your source code, in the browser, you will notice that there is an empty div tag at the end of your posts. And, if you are anything like me, you hate empty div tags!

Well, fear not. There is a simple way to avoid those pesky empty divs from destroying your otherwise beautiful markup with a simple function and conditional statement.

Step 1: The function

I like to keep my development workflow and simplistic as possible. So, instead of writing extra lines of code every time I need to check if pagination is needed, I created a simple function to do the job for me. Open up your “functions.php” file and add the following. I recommend placing this at the end of the file, right before the closing tag.

/*-----------------------------------------------------------------------------------*/
/* Pagination test
/*-----------------------------------------------------------------------------------*/
 
function wap8_show_posts_nav() {
	global $wp_query;
	return ( $wp_query -> max_num_pages > 1 );
}
code>

In a nutshell, all we are doing here is checking if there is more than one page to display with this loop. Nothing fancy or complicated here. Same the file and let’s move on.

Step 2: Add the condition to the loop

Remember the block of code I showed you at the beginning of this post. Well, we need to modify this to work with our function. Change that block of code to the following:

 endwhile; if ( wap8_show_posts_nav() ) : ?>
 
	
		 next_posts_link( __( '« Older Posts', 'wap8' ) ) ?>
		 previous_posts_link( __( 'Newer Posts »', 'wap8' ) ) ?>
	
 
 endif; else : // no posts found ?>

As you can see, after the endwhile, we add a conditional check using our function. If there is more than one page, show the div, if not, move on and do nothing.

That’s it. Happy WordPress developing!

Use the WordPress Excerpt for Simple SEO Meta Descriptions

Erik Ford — Tue, 25 Oct 2011 19:13:47 +0000

The All in One SEO Pack is, by far, the most popular WordPress plugin for optimizing your WordPress website for search engines. We have continually recommended its usage to clients who are looking for granular control over every aspect of your website. In fact, we were running this powerful little plugin up until this iteration of our site.

But, as I was going over every aspect of our site in preparation for the redesign, I realized that we were only using the plugin to generate meta descriptions. This was overkill if we weren’t going to use the plugin to its fullest potential.

Luckily, I can achieve the exact same goal, without the use of the plugin, by using the built in WordPress post excerpt and the get_the_excerpt() function.

Note: This tutorial is written exclusively for WordPress 3.2.1 and has been tested with that version of the application.

Step 1: Add excerpts to your WordPress pages

WordPress allows you to manually write your own excerpts for posts. When you create a new post, you normally will see the Excerpt meta box appear on the editor screen for that post. This is not the case for pages natively. In order for this to work, we first need to hook into the add_post_type_support() function to add the Excerpt meta box to pages as well.

Open up your “functions.php” file and add the following:

add_action( 'init', 'wap8_page_excerpt' );
function wap8_page_excerpt() {
	add_post_type_support( 'page', 'excerpt' );
}

Once you have saved your file, go ahead and test it by adding a new page. You should now see the Excerpt meta box appear on page editor screen. You are now free to add your excerpts to your pages and posts.

Step 2: Dynamically add meta descriptions to your site

If you were developing an HTML website, you would simply add your meta descriptions to the section of each page. But, as I am sure you are aware, there is only one template, “header.php”, that generates this code for the entire site. Now that you have added all of your excerpts, you will need a function to dynamically add them to the section of your site.

In order to accomplish this, we need to conditionally check if WordPress is displaying a post or page and have it return a meta description based on the results. You might think it easiest to add this condition directly to the “header.php” template and you are not totally off base. But, I like to keep this template as tidy as possible, so I am going to add another function to my “functions.php” file. In order for this to work, you need to make sure that your “header.php” template has just before the closing tag.

add_action( 'wp_head', 'wap8_meta_descriptions' );
function wap8_meta_descriptions() {
	if ( is_page() || is_singular( 'post' ) ) {
	?>
 echo strip_tags( get_the_excerpt( $post->ID ) ); ?>" />
		
	}
}

Save your file and you are done. Take a look at your post or page source code and you should see your newly added meta description. You can extend this function by conditionally checking for is_home() or is_front_page() for the home page.

Five Reasons to Have a Content Calendar

Jeanette Fernandez — Wed, 19 Oct 2011 18:58:09 +0000

For anyone who has their own website, or is in charge of overseeing content for a company website, you know by now that creating new content is constant. It can be overwhelming at times to come up with new topics, especially on the fly. This is why I highly recommend using a content calendar. Content (or editorial) calendars have been a staple at print magazines for years. Here are five good reasons it should be a staple for you:

Helps Save Time – Having your topics ready in advance, with set publish dates, goes a long way in keeping you on track. No more fumbling around for ideas at the last minute means more time can be spent on the actual writing.
Keeps You Connected With Your Users – Because you have a content calendar, you have fresh content ready to be posted. The more new content to post, the more opportunity you give your users to interact with you.
A Schedule Saver – For websites with multiple content writers, a content calendar is a must when it comes to coordinating who is writing what and when. It makes everyone involved responsible for their particular content role.
Establishes Your Site’s Tone – Utilizing a content calendar is a great way to be consistent in your editorial style, whether it be professional, humorous, inspirational,or a myriad of others. Your users will get to know you via your style and come to rely on it.
Helps Your Traffic – Users love fresh content. Keeping a constant stream of new content flowing on your website is a surefire way to gain the interest of users, return and new. New content means increased traffic. It’s as simple as that.

Need some tips on coming up with you editorial calendar? Let me know!

Remove or Add WordPress Widget Sidebars in a Child Theme

Erik Ford — Wed, 05 Oct 2011 20:18:11 +0000

Many of our premium WordPress theme customers have asked us how to add or remove widget sidebars from any of our products. The process is quite simple and I thought others may find this tutorial helpful. As always, any customizations to a WordPress theme should only be done in a child theme and never in the core files themselves.

How to remove sidebars in my child theme.

You may find yourself not needing all of the sidebars made available by a particular theme. You can easily deactivate any of the parent theme’s sidebar by unregistering them in a child theme’s function.php file. All you will need is the sidebar’s ID and your own custom function. Using Periodic as an example, the theme has a total of 6 widget sidebars whose ID’s are “home”, “right”, “left”, “footer-column-one”, “footer-column-two”, “footer-column-three”.

Let’s say that you have no need for the 3 columns in the footer. In your child theme’s function.php file, you would add the following:


 
// My Child Theme Setup
add_action( 'after_setup_theme', 'wap8_child_theme_setup', 11 );
 
function wap8_child_theme_setup() {
 
	// Remove those useless sidebars
	add_action( 'widgets_init', 'wap8_child_theme_sidebars' );
 
}
 
// Unregister 3 Periodic Footer Widget Sidebars
function wap8_child_theme_sidebars() {
 
	unregister_sidebar( 'footer-column-one' );
	unregister_sidebar( 'footer-column-two' );
	unregister_sidebar( 'footer-column-three' );
 
}
 
?>

Let’s take a look at what we are doing here. WordPress has a handy after_setup_theme hook. This hook will run after the theme’s functions.php has been included. According to the codex:

“This hook is called during a themes initialization. [It is] generally used to perform basic setup, registration, and init actions for a theme.”

With that in mind, I created a function called wap8_child_theme_setup(). Within this function, I can now add all of my customs actions and filters in one sweep, so to speak. What you should take important notice of is the number “11” inside of the action. This sets a priority for this particular action, with “0” being most important.

The reason I have set this to “11” is because a child theme’s function.php file will load before the parent theme’s function.php file. With that in mind, I know that I need to give my wap8_child_theme_setup() function a lower priority insuring that it loads later. If I do not set a lower priority for this action and allow it to fire first, the function will attempt to unregister a function that does not yet exist. Note: You can set priorities for each of the actions and filters within this function as well.

Next you will notice that I have a function called wap8_child_theme_sidebars(). Inside of this function, I am using the unregister_sidebar( $id ) function to remove the sidebars I no longer need. Save the file to your child theme’s directory and you have now successfully removed three of the parent theme’s widget sidebars without touching the core files.

How to add sidebars to my child theme.

You can add sidebars to your child theme in the same manner you would in a parent theme. All you will need is a custom function that fires the register_sidebar() function inside of your wap8_child_theme_sidebars() function. Let’s say you want a sidebar just for a contact page. Edit the child theme’s function.php file to look like the following:


 
// My Child Theme Setup
add_action( 'after_setup_theme', 'wap8_child_theme_setup', 11 );
 
function wap8_child_theme_setup() {
 
	// Remove those useless sidebars
	add_action( 'widgets_init', 'wap8_child_theme_sidebars' );
 
}
 
// Unregister 3 Periodic Footer Widget Sidebars
function wap8_child_theme_sidebars() {
 
	unregister_sidebar( 'footer-column-one' );
	unregister_sidebar( 'footer-column-two' );
	unregister_sidebar( 'footer-column-three' );
 
	// Register child theme sidebar for Contact Page
	register_sidebar(
		array(
			'id' => 'my-child-contact',
			'name' => __( 'Sidebar for Contact Page', 'periodic' ),
			'description' => __( 'Drag, organize and save widgets for the sidebar that will appear on your Contact page.', 'periodic' ),
			'before_widget' => '',
			'after_widget' => '
',
			'before_title' => '',
			'after_title' => '
'
		)
	);
 
}
 
?>

If you have ever added widget ready sidebars to a WordPress theme, this is all very familiar to you. If not, take a look at the array inside of the register_sidebar() function and its arguments.

id: Give your sidebar a unique ID. The ID must be in lowercase without any spaces.
name: Give your sidebar a name that will appear on the Widgets settings page.
description: Give your sidebar a description (optional).
before_widget: This is the markup that will appear before the widget. The %1$s and %2$s are text substitutions that allow WordPress to assign a unique variable to each active widget so it may keep track of them. I added another class of sidebar-widget for styling purposes and is completely optional.
after_widget: The markup that will appear after the widget.
before_title: The markup that will appear before the widget’s title
after_title: The markup that will appear after the widget’s title

All that is left now is to save your file and upload it to your child theme’s directory. With your child theme activated, visit your Widget settings page and view all of your changes.

Add a Home Page Link to your Logo in WordPress

Erik Ford — Tue, 27 Sep 2011 16:22:17 +0000

Over the years, as WordPress developers, we have become accustomed to adding a link to our home page by using the provided template tag, bloginfo('url'). This is not entirely incorrect and, according the the WordPress Codex, it is recommend. But, this method becomes problematic when WordPress is installed in a sub directory of the root (ex. yoursite.com/wordpress).If we use this template tag, the link will point to this URL and not the root URL, yoursite.com.

At this point, you are probably saying to yourself, why not simply hard code a link to the root? Technically, again, you are correct. A quick fix would be to add the desired URL to the href and call it a day. It would require less than two seconds of work and you got the job done. But, did you know there are two template tags, home_url() and site_url(), that will not only do the work for you, but return the correct protocol?

You first need to understand the differences between the two tags. You would use home_url() to get the website address, as defined in the General Settings by the administrator. On the contrary, you would use site_url() to get the WordPress address, as defined in the General Settings. I know. It sounds the same, right? Let’s say you have WordPress installed in your root directory and you want to link your beautifully crafted logo back to the home page. Let’s also say you have both the Site and WordPress address settings set to the same URL. You could use the following to return the needed URL.

 echo home_url(); ?>" title=" bloginfo( 'name' ); ?>"> echo get_template_directory_uri(); ?>/images/logo.png" alt=" bloginfo( 'name' ); ?>" />

Seems simple enough. This code will return the URL from the website address settings. Done. End of story. Mission accomplished. But, wait. We said that both the website and WordPress settings were identical. This means we could also use this bit of code to accomplish the same thing.

 echo site_url(); ?>" title=" bloginfo( 'name' ); ?>"> echo get_template_directory_uri(); ?>/images/logo.png" alt=" bloginfo( 'name' ); ?>" />

Is your head spinning yet? I know mine was when I was first trying to understand the usage of these two tags. I eventually decided to determine the usage based solely on the URL I needed returned. In this particular case, linking the logo to the website’s home page, regardless of the directory WordPress is installed in, would require the usage of home_url() exclusively.

Write a Simple Plugin to remove the Excess 10px added to WordPress Image Captions

Erik Ford — Sun, 28 Aug 2011 14:56:16 +0000

If you are a WordPress theme developer, or have ever used the WordPress image caption shortcode, you have inevitably noticed that the shortcode returns an inline CSS style that adds an excess 10px width to the wrapping div. I’m not well versed on why the core WordPress developers decided on this direction, but have run into occasions when this is in direct conflict with my designs.

Let’s say you want to apply a caption to an image in the WordPress editor, whose dimensions are 300px wide. The inline style the shortcode will add to the wrapping div will be style="width: 310px" but I need the style to match the exact width of my image. How do we accomplish this without touching the core files?

Well, you can definitely add a new function to your functions.php file. But, if you are like me, you like to keep that file tidy and compact. Plus, I tend to want to write as few lines of redundant code as possible. Adding a function to this file means I would have to do so every time my theme design requires this bit of functionality. I am admittedly a bit too lazy for that which led me to the decision to come up with a simple plugin that the user can install and activate.

But the added beauty of this solution is its portability. The user can change themes but, as long as the plugin is activated the function is still active.

Write your simple plugin.

The code necessary to achieve our end goal is quite simple. We are going to use the add_filter hook to modify the image shortcode output. (Note: You can refer to the WordPress Codex for detailed information about this particular hook and its usage.) We are also going to make this a drop-in plugin, so we will need to include the standard plugin headers that will provide the meta information about the plugin.

Step 1: Add your header information.

Open your favorite code editor and create a new file and name it whatever you would like. In our case, we will name our file “wap8-imagecaption.php.” As far as file naming conventions go, I find it best to be as precise as possible. I also always append a prefix, which is just an abbreviation of the studio’s name, so I keep track of files I’ve created.

In your newly created file, you are going to add the following:


 
/*
Plugin Name: Image Caption Shortcode Fix
Plugin URI: http://www.wearepixel8.com
Description: This plugin will remove the additional 10px added to the WordPress image caption shortcode.
Version: 1.0
Author: We Are Pixel8
Author URI: http://www.wearepixel8.com
*/
 
?>

This is all pretty straight forward information. We have the plugin’s name, version number and author. If you were to upload this file now to your plugin directory, you will see that it has been added to the list of available plugins.

This is great, but we still need to tell WordPress what to do with this plugin once it is activated.

Step 2: Add the function.

Just below the header information, add the following function before the closing PHP tag:

add_filter( 'img_caption_shortcode', 'wap8_img_caption', 10, 3 );
 
function wap8_img_caption($nowt, $attr, $content) {
	extract( shortcode_atts( array(
		'id' => '',
		'align' => 'alignnone',
		'width' => '',
		'caption' => '',
	), $attr ) );
 
	if ( 1 > (int) $width || empty( $caption ) ) {
		return $content;
	}
 
	if ( $id )
		$id = 'id="' . esc_attr( $id ) . '" ';
 
	return ' . $id . 'class="wp-caption ' . esc_attr( $align ) . '" style="width:' . ( (int) $width ) . 'px;">' . do_shortcode( $content ) . '' . $caption . '
';
}

As I mentioned earlier, the function would be short, sweet and to the point. In an oversimplified explanation, we are adding a filter to the WordPress img_caption_shortcode function with our own wap8_img_caption function which tells WordPress to return the exact width of the image for the inline style.

All you have to do now is save the file and upload it to your plugin directory.

Activate your plugin

With your newly minted plugin uploaded, navigate to the Plugins settings of your WordPress installation and activate. You can test the plugin by inserting and image, with caption, to a post or page and publish. View your published page and make sure to inspect the source code of the page. You should now see something like the following:

You will now notice that the wrapping div’s inline style width matches the exact width of the image. We have successfully removed the additional 10 pixels added by WordPress.

That’s it. I hope you find this to be useful. Happy developing and happy publishing.

Why Your Home Business Needs a Designer

Jeanette Fernandez — Fri, 05 Aug 2011 20:01:00 +0000

In our tech-savvy world, the internet is it. More than likely, if you don’t have an online presence, you’ll lose business to a company that does. Case in point: I needed to hire a local contractor. I went online (not the yellow pages directory) and searched for contractors in my area. I hired one that performed the service I was looking for and received stellar reviews. Now, this doesn’t mean that there wasn’t another local business that did the same. It just means that the latter didn’t have an online presence.

There’s no way around it, if you’re going to start a home business, you’ll need a website. Let me rephrase: you’ll need a GOOD website. If the cost of investing in a website makes your cringe, think about all of the revenue you’ll be losing to a company with an existing site. And, your business may not need all the bells and whistles from the start.

So, let’s talk designers. This is definitely not the time to think you can design a logo and a site by reading a couple of books. Or, rely on your very limited Photoshop skills to get the job done. This is an investment in your business and should be treated as such. A professional experiences web and graphic designer can create a smashing logo and website that will meet your needs and provide you with the internet presence you require.

Of course, it can be a bit scary to rely on someone else to design your vision and represent your business. The last thing you want it to have a logo and/or website that looks nothing like you or meets your goals. Here are a few things you think about when searching for a graphic designer:

A local designer you can meet in person will always be a plus, but don’t limit yourself. You may be surprised to find the designer/design studio you’re looking for to live in another state, or maybe even another country. Just because they’re local doesn’t mean they’re the best person for the job.
What types of services do they perform? And, are they good at it? Some designers prefer to do one type of service (website, logo, etc.). You’ll want to hire someone who is working with their strength. This can mean hiring a web designer to design and develop your website and a graphic designer to create your logo.
Is it all about you or them? Make sure your designer “gets” you and understands your vision and goals.
Perform your own background check by contacting their previous clients to get personal reviews and feedback. Some designers look good on paper but not so much when it comes to the actual work, customer service and client collaboration.
Never hire a designer/design studio without a working, signed contract. They should provide one to you before any work begins. Don’t shy away from having a lawyer look it over if you’re uncomfortable with any type of formal contract.

Remember, if you can’t be seen online, you can’t be seen. Your business deserves to have a presence.

Change Image Opacity, on hover, with jQuery

Erik Ford — Thu, 05 Aug 2010 00:59:31 +0000

Not long ago, I wrote a post about how you can create a filterable portfolio, in WordPress, using a jQuery plugin. And, since I love the ability to create subtle nuances for the user, I decided to extend this tutorial and show you how to include a hover effect animation for your thumbnails.

The goal

What I want to achieve is actually quite simple and I am sure you have seen the effect before. When a user hovers over a thumbnail in the portfolio, I want the opacity value of the remaining images reduced to a percentage of my choosing while leaving the hovered image opacity at 100%. I first set out to conquer this subtle animation using CSS only but, with poor cross browser support for opacity, I only ended up with really bad hacks and workarounds.

Once the CSS experiment proved to be a failure, I knew that jQuery would be perfect for the task. And, how right I was. The code ended up being minimal (less than 10 lines) and I could retain my clean and lean markup.

View Demo

Step 1: Get the latest version of jQuery

The first thing you want to always do is make sure you are running the latest version of jQuery on your site (version 1.4.2 as of the publication). You can do this by either downloading the most recent version and uploading the file to your server or by hotlinking to the latest version directly from a CDN (Content Delivery Network) like Google Ajax API. I prefer the latter. Simply add the following code between the opening and closing tags of your document.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Note, if you are going to implement this tutorial, in a WordPress theme, you need to make sure you are correctly enqueueing jQuery and not following this particular step.

Step 2: Write the HTML Markup and CSS Styles

There is no need for me to spend much time designing and coding a complicated layout for this demo. Suffice to say, your portfolio list should semantically be wrapped in an unordered list. The design and presentation of your portfolio is left up to your imagination. For demo purposes, I have written the following HTML code:

<ul id="portfolio-list" class="clear">
     <li><a href="#" title="Koopon Website Design"><img src="images/koopon.jpg" alt="Koopon Website" width="210" height="140" /></a></li>
     <li><a href="#" title="Patriot Pride Corp Logo Design"><img src="images/ppcorp.jpg" alt="Patriot Pride Corp Logo" width="210" height="140" /></a></li>
     <li><a href="#" title="Mazaif Packagin Design"><img src="images/mazaif.jpg" alt="Mazaif Packaging" width="210" height="140" /></a></li>
     <li><a href="#" title="Women Working Logo Design"><img src="images/womenworking.jpg" alt="Women Working Logo" width="210" height="140" /></a></li>
</ul>

There is nothing overly special here. The

.clear { display: inline-block; }
.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
#portfolio-list li { float: left; margin: 0 10px; }
#portfolio-list li a, #portfolio-list li a:visited { display: block; border: 5px solid #4f8603; width: 210px; height: 140px; }
#portfolio-list li a:hover, #portfolio-list li a:active { border-color: #315301; }

All I have done here is float the list items to the left and given them a margin of 10px on the left and right sides. All of the list item links will have a 5px border of green that will change to a darker hue on hover. Lastly, you will notice my little “clearing fix”, which is most definitely a hack, but it works and I never leave home without it.

Step 3: Write the jQuery to animate the portfolio

The amazing part of this entire journey is that it will only take 8 lines of code to accomplish our goal by using the new jQuery.delegate() method. Add the following code to your javascript file and I will explain what is happening afterwords:

jQuery(document).ready(function() {
     jQuery("#portfolio-list").delegate("li", "mouseover mouseout", function(e) { 
          if (e.type == 'mouseover') {
               jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "0.3"}, 300);
          } else {
               jQuery("#portfolio-list li").not(this).dequeue().animate({opacity: "1"}, 300);
          }
     });
});

As you can see, we are targeting all of the

tags inside of #portfolio-list and attaching the mouseover and mouseout events using jQuery.delegate(). Now, if the user hovers over a list item, animate all of the of the other items by reducing their opacity to 30% over 300 milliseconds. The else statement returns the opacity back to 100%.
Normally, I would use .stop(), which would literally stop firing the animation if the user quickly hovered over another image causing all of the images to flicker. But Phil Salesses discovered some unwanted behavior when using my snippet in conjunction with the filtering plug in and discovered that .dequeue() would also halt the animation without interfering with the plug in.
Conclusion
There you have it. A very simple way to add a little interactivity to your portfolio with minimal amount of code. Be sure to check out the demo to see the script in action. Also, if anyone has a better script for this type of animation, please share in the comments.
View Demo

3 simple Image Enhancements in Photoshop

Erik Ford — Fri, 22 Jan 2010 23:10:29 +0000

Imagine this scenario. You have spent countless hours designing the perfect mock-up page for a client using placeholder images. Now it’s time to drop in the client’s assets to get that final approval so you can get down to coding. You extract the zip file that was just now delivered and your heart sinks. All of the photos were shot by a non-ace on a snap-shot digital camera! Some were out of focus (completely unusable) while the remaining photos were dull in color.

Let’s face it. It happens. Not every client can afford a professional photo shoot with a photographer that will deliver high quality images. And though you may have sternly recommended using a skilled individual for the task, it just may not be in their budget. And that is where you, as a designer, have to step in and work up some minor divination on those lifeless images.

I’m going to show you three very simple ways to enhance a digital photo in Photoshop. These are meant for screen use only and not intended for print production. Unless you are adept at photo retouching, I wouldn’t recommend using these methods on a document that is intended for print.

If you would like to follow along, download this “Country road” stock image from stock.xchng, but feel free to use any image you like. I am using this image for demonstration purposes only and am not saying the image represents what was described in the imagined scenario.

Method 1: Use blending modes to enhance the color.

Of the three methods, this one is the simplest. Open your image in Photoshop. From your Layers Palette window, drag a copy of the “Background” layer over the “Create a new layer” icon at the bottom of the palette window. This will automatically create a “Background copy” layer above the “Background” layer.

Now, select your “Background copy” layer and change the Blend Mode to Overlay. You should see a dramatic change in the colors of your image. In fact, the image might now be over saturated. Simply reduce the Opacity to about 70%, or until you reach your desired effect.

Now you can see the differences between the original source image and the end result. You can adjust the effect by increasing or decreasing the Opacity slider. You can also play with other Blend Modes like Soft Light to quickly add a color pop to a drab digital image. It all depends on how dramatic of an effect you want in the end.

Method 2: Change the mood of an image with a Curves adjustment layer.

Here is a method I just picked up from a photographer and master photo retoucher that is often used in fashion photography (but in a more detailed manner than what I am going to show you). We are going to drastically boost specific colors by using a Curves adjustment layer.

First, let’s boost up the saturation of the image by clicking on the “Create new fill or adjustment layer” icon and selecting “Hue/Saturation…” from the Layers Palette window. In the newly opened dialog window drag the Saturation slider to 25.

Return to your Layers Palette window and click on the “Create new fill or adjustment layer” icon again and select “Curves…”. This will add another adjustment layer directly above your Hue/Saturation adjustment layer.

For this image, I want to enhance the blue colors in the photograph. To do so, I will select the Blue channel from the drop down menu and create an “s” shaped curve. Make sure you have your Preview option on. Once I am happy with the output, I will click “Ok” and I am done.

The beauty of this method is that it is non destructive to your source image. If you don’t like the effect, simply delete the adjustment layers and begin again.

Method 3: Use High Pass filter and Blending Modes to sharpen a black & white photo.

You can quickly sharpen a dull black & white photo, in Photoshop, using the High Pass filter. I am going to first desaturate this image to convert it into a black & white photo by choosing Image > Adjustments > Desaturate. And just as we did in the previous method, I will create a copy of the “Background” layer.

With the “Background copy” layer selected, I will choose Filter > Other > High Pass which will open a dialog window for this filter.

Make sure you have your Preview option checked so you can see what you are doing. Depending on how dramatic of an effect you want, adjust the slider and hit “Ok”. I set mine to a Radius of 6 pixels because I want to really bring out the shadows and midtones.

Now, with your “Background copy” layer selected, change the Blend Mode to Soft Lift leaving the Opacity at 100%. Make another copy of this filtered layer and change the Blend Mode to Hard Light and reduce the Opacity to 15%.

Conclusion

There are other, more detailed methods of enhancing your digital images in Photoshop. These are some of my quicker methods that can result in desirable final images. Play around with them on your own and see what you come up with. I firmly believe that experimenting always produces the best accidents.

Styling a simple Form using CSS3

Erik Ford — Fri, 15 Jan 2010 19:06:36 +0000

Recently, I had a simple project of designing and developing a newsletter subscription form that was only going to be viewed on and iPhone or iPod Touch device. The form, and all of the inputs, would have nice rounded corners (which I am an admitted sucker for) and subtle gradients.

Normally, we would achieve all of these effects by slicing up our Photoshop mock-up into individual background images that would later be implemented using the CSS background property. But, since I knew this particular form would only been seen on the iPhone and iPod Touch Safari browser, I decided to have have some fun with CSS3 properties, via Webkit, and replicate the entire mock-up without using any images at all.

The end result came out quite nicely. If all current modern browsers supported CSS3 properties, we would have significantly quicker page loads and would need less images to do our presentational dirty work.

In this little tutorial, I will show you how I accomplished these effects and take it one step further to include the 3.6a version of Firefox.

View Demo

Step 1: Mark up your form

There is nothing spectacular about the mark up for the page. In fact, it is a simple form with three inputs (two text fields and a Submit button). There is also a

tag for the title of the ~~form~~ page which is completely optionally. Open up your favorite code editor and add the following code to your page:

<div class="wrapper">
     <h2>Sign up for our Newsletter</h2>
     <form id="simple-form" action="" method="" name="">
          <label for="input-1">Name</label>
          <input id="input-1" type="text" name="input-1" />
 
          <label for="input-2">E-mail</label>
          <input id="input-2" type="text" name="input-2" />
 
          <input id="submit" type="submit" name="submit" value="Submit" />
     </form>
</div>

As you can see, there is nothing new here. You have your form, which we are assigning an id of #simple-form, form labels and inputs with assigned id’s of #input-1 and #input-2. We are going to target each of these id’s in our next steps to produce gradients, rounded corners and a shadow.

Step 2: Add some basic styles to your page.

I recommend using a CSS reset file so you are always starting with a clean slate. If you do not have a reset file of your own, download ours and insert it into ~~the head of your document~~ the top of your stylesheet before ~~the call for your own stylesheet~~ the styles for the form. Once you have done this, add the following to your own stylesheet:

body{
     background-color: #ececec;
     color: #565656;
     font: 62.5% Helvetica, Arial, sans-serif;
}
 
.wrapper {
     margin: 0 auto;
     position: relative;
     width: 320px;
}
 
h2 {
     font-size: 2em;
     margin: 25px 0 0;
     text-align: center;
}

You will notice that I’ve also given the page a background color of light gray and set the typography to a universal font-size of 62.5% using Arial, Helvetica or next available sans-serif font. I’ve also set a universal color of dark gray for the all of the type. The .wrapper is here for demo and the tutorial purposes only.

Step 3: Add the CSS3 magic to your form.

Here is where the fun begins. To create the rounded corners, gradients and shadows that are available in CSS3, we have to use vendor specific extensions in conjunction with our original properties. Let’s add a background color of white to our form and a subtle shadow surrounding it. I am also going to give my form a width, margin and padding that is specific to this tutorial. What you want to pay attention to are the extensions that begin with -webkit- and -moz- targeting the Safari and Firefox browsers respectively.

form#simple-form {
     -moz-border-radius: 20px;
     -moz-box-shadow: 2px 2px 10px #ccc;
     -webkit-border-radius: 20px;
     -webkit-box-shadow: 2px 2px 10px #ccc;
     border-radius: 20px;
     box-shadow: 20px;
     background-color: #fff;
     margin: 25px auto 0;
     padding: 25px 10px;
     text-align: center;
     width: 260px;
}

What we’ve done here is set the border-radius of all four corners to 20 pixels which will give us a nice round edge. What may not be as obvious is the box-shadow property. The shorthand declaration takes four attributes:

The distance of the shadow on the x-axis (2px)
The distance of the shadow on the y-axis (2px)
The amount of blur radius to apply to the shadow (10px) with 0 being sharp
The color to apply to the shadow (very light gray)

Now, let’s style the labels and inputs for the form. We are going to be using border-radius once again, but this time we are going to apply a gradient to the inputs as well.

With the -moz-linear-gradient and -webkit-gradient attributes, we can replicate the gradients created in Photoshop right in the browser without any images. The two are slightly different from one another on how you implement them, but the effect is exactly the same.

For the -webkit- extension, you must establish the type of gradient (linear), the starting point (left top), the ending point (left bottom), the color-stop, color value and origin point of the first color (white starting at the very top), and the same for the second color (gray starting that the end). For the -moz- extension, you can either use -moz-linear-gradient (in this case) or -moz-radial-gradient. For a simple gradient like this one, state the origin point and two colors and you are done.

The Demo

If you are browsing with either Safari 4 or Firefox 3.6a, you will be able to see CSS3 wizardry in action, which leads me to the caveat of this post. As of now, these properties are experimental and only a part of the CSS3 draft. Therefore, they are subject to change at any time. So, when you combine this with the lack of universal support, I recommend sticking to your tried and true methods for now or use them sparingly with a graceful degradation for unsupported browsers.

View Demo

We Are Pixel8 » Tips & Tutorials

Use a Conditional Statement to show WordPress Pagination

Step 1: The function

Step 2: Add the condition to the loop

Use the WordPress Excerpt for Simple SEO Meta Descriptions

Step 1: Add excerpts to your WordPress pages

Step 2: Dynamically add meta descriptions to your site

Five Reasons to Have a Content Calendar

Remove or Add WordPress Widget Sidebars in a Child Theme

How to remove sidebars in my child theme.

How to add sidebars to my child theme.

', 'after_title' => '

Add a Home Page Link to your Logo in WordPress

Write a Simple Plugin to remove the Excess 10px added to WordPress Image Captions

Write your simple plugin.

Step 1: Add your header information.

Step 2: Add the function.

Activate your plugin

Why Your Home Business Needs a Designer

Change Image Opacity, on hover, with jQuery

The goal

Step 1: Get the latest version of jQuery

Step 2: Write the HTML Markup and CSS Styles

Step 3: Write the jQuery to animate the portfolio

Conclusion

3 simple Image Enhancements in Photoshop

Method 1: Use blending modes to enhance the color.

Method 2: Change the mood of an image with a Curves adjustment layer.

Method 3: Use High Pass filter and Blending Modes to sharpen a black & white photo.

Conclusion

Styling a simple Form using CSS3

Step 1: Mark up your form

Step 2: Add some basic styles to your page.

Step 3: Add the CSS3 magic to your form.

The Demo