In this post, we take a look at a few examples of introduction images, and a quick Photoshop tutorial on creating one.

If you liked this post, please bookmark it on Delicious (with the button below) to let more bloggers know of this. Thanks

Examples of post introduction images

TechZilo – source post

Hongkiat – source post

Creating the image in Photoshop

1. Open a new image of suitable size (for your blog’s post column width) in Photoshop. In this example, I’m using an image of width 500px and height 400px.
   
2. Drag and drop a suitable background into the image, depending on the topic of your post. I’m dropping this Apple wallpaper into the image, since I’m creating an image for an Apple wallpapers roundup post.
3. Crop the image to fit the drag-dropped Apple wallpaper image.
   
4. Use the Marquee tool (shortcut M) to create a small rectangular selection along the bottom of the image.
   
   Create a new layer and fill the selection with black (#000000). Lower the opacity to 40-60%, depending on the background of the image.
5. Pick any font bold and crisp font (I used Delicious). Using type tool, write the caption for the image in 34 pt Delicious Heavy font of white color. Position it within the fill area that we created in the previous step.
6. Double click the type layer and use the following settings for drop shadow.
   
   Enter the color #c8c8c8 (click the square to the right of Blend mode).

   Use the following settings for the gradient overlay (run a gradient #dddddd to #ffffff):
   

7. The final image would look like this:
   

Of course, this is just one style you can adopt – see the example section above for other styles you can use. Typically, you would need only a semi-transparent background, a good, bold font, a gradient overalay and drop shadow on the font for an intro image.

Here are good lists of Photoshop text tutorials – at Listfied, Photoshop Star and Hongkiat. A Google query on best Photoshop text tutorials will provide you with lots more.

Leave URLs to your intro images in comments (remember, we have dofollow comments here) – it would be fun to see what different people can come up with.

Post from: Blog Designed

Beautiful post introduction images: examples and Photoshop tutorial

Post from: Blog Designed

Beautiful Twitter birds, icons, buttons and vectors

If you are not convinced of why you should remove DiggBar, see my post about DiggBar.

DiggBar Remover is smart – it checks visitor’s referrer URL, and only if he is using DiggBar, JavaScript code is used to redirect him to the actual page. This makes it faster than any other plugin/code hack out there.

• Download DiggBar Remover WP plugin.
• Support for DiggBar Remover is provided here (at Blog Designed Forum).
• Subscribe to TechZilo’s RSS feed for the latest updates on the plugin.

Future versions of DiggBar Remover may include an options page to select which frames should be removed (there seems to be demand for removal of Facebook frames, for example).

Post from: Blog Designed

WordPress plugin: DiggBar Remover

For long, I have noticed only a precious few blogs with top notch SEO (usually by SEO-aware custom theme designers), while the majority of free WordPress themes sport less-than-optimal optimization techniques. Although it seemed appealing to keep the little knowledge I have to myself, I believe in a level playing field.

It is with the intention of pointing out such errors that I begin Blogging SEO 101, a weekly series of SEO tips for bloggers and designers. You can find the posts of the series in the Blog SEO tag, and this post will serve as the home of the series.

The first post will come out some time next week, followed by a post every week on the same day. If you have any SEO doubts or tips, please contact me.

I intend to write tips, hacks for WordPress and plugins for proper search optimization. If time permits, I would also review WordPress themes and rate them for their search engine optimization levels.

As I said earlier, I’m not a professional. I request readers to chime in with suggestions and corrections on SEO tips that I will be writing – it will help us (both you and me) to improve our SEO knowledge.

Post from: Blog Designed

Blog SEO 101: our weekly SEO tips series

Post from: Blog Designed

Cufon – an alternative to sIFR

Post from: Blog Designed

Organize and format CSS with Styleneat

Here’s a recent spinoff that I experimented with – adding social media links/badges only on posts where you need to. The display of the Digg buttons will be controlled by a custom field. Note that no code for the social media links have been provided – you can use plugins or your favorite hacks for the purpose. The purpose of this tutorial is to help you check and use custom fields, not use social media links themselves.

In fact, I use the same method to selectively show Tweetmeme badges on posts that are likely to go viral on Twitter.

Using custom fields in your theme

WordPress’ custom fields can be grabbed with the get_post_meta() function.

$check_sm = get_post_meta($post->ID, 'sm', $single = true);
if($check_sm != '')
{
     // Links here
}

In the above code, the custom field named sm is assigned to a variable check_sm for ease of use. We check whether the custom field is not empty, if so, display the social media links. Enter your plugin function call or HTML code for links where it says Links here. You would probably want to use this hack on index and single pages.

Enabling social media links in posts

To enable social media links for a particular post, scroll down to the custom fields section. Add a new custom field with the name sm, and give it the value true.

You can give any value for the key, because in the code above, to display links, we check only if there is some value assigned to the custom field. However, it’d be good practice to use a standard key (true) so that we account for the future (if you need ‘true’ in a future hack, for example).

Post from: Blog Designed

How to show social media buttons only on selected posts

Post from: Blog Designed

Tweetmeme: Digg-like site for tweeted links

Post from: Blog Designed

A guide on CSS conditional comments

On to the blogs then (blogs have been linked from their screenshot, simply click on the screenshot to visit the site in a new tab or window):

Tutzor

Like a few other tutorial blogs, Tutzor is looking for Photoshop tutorial writers and pays them(see submission rules page).

Get started with these posts:

• Sleek phone advertisement flyer
• How to see through your computer monitor using Photoshop

Photoshop Star

Get started with these posts:

• 26 free random vector doodlings (free download from PhotoshopStar)
• Free grunge-style wallpapers (also free download)

PSDLearning

Get started with these:

• Spray paint text effect
• Create grunge portraits

Tutorial9.net

Get started with these:

• Techniques to enhance your banner ad design
• 99 free canvas and metal textures

PSDFan

Get started with these:

• Make your photos more intense
• Awesome light effect and abstract PS brushes

PSDTuts

One of, if not the most popular Photoshop tutorial blog around. Hits Digg on a weekly basis and has a voracious and loyal community that comments(50+ comments on most posts) and submits links to the User Community Link Feed and stunning images to PSDTuts Flickr group.

Get started with these:

• Creating Windows-style monitor icon
• Create a realistic Blackberry-like mobile phone from scratch

Two trends that I have seen from Photoshop tutorial blogs: hiring staff writers from within readers (Tutzor, PSDTuts etc.) and button ads (125 x 125px) that are clean, quick-loading and unobtrusive. In-content ads really do mess up the flow of reading and viewing screenshots within tutorials. Kudos to them for keeping their blogs free of ads within content.

As always, suggest your favorite Photoshop tutorial blogs in comments.

Post from: Blog Designed

Awesome Photoshop tutorial blogs that you should bookmark

Post from: Blog Designed

Adding variables to CSS file using PHP and mod_rewrite

Split category list

BlogohBlog’s post has, among others, a hack to split category list. This is useful when the list is displayed in a sidebar (and you want to save space).

Also see the hack to show your most commented posts in sidebar.

Author bio

Multi-author blogs will find the author bio hack useful. Once the basic code is in place, you can use CSS to style it up.

Exclude ads on specific posts

Many ad management plugins offer this functionality, but if you have hardcoded ads into your theme, you can use the “Hiding ads in posts” hack (instead of switching to a plugin just for this functionality.

Membership directory

WPDesigner has a useful tutorial on creating a few theme files and using plugins to turn WP into a membership directory.

FLIR plugin

23Systems’ free FLIR plugin replaces headings with custom fonts using FLIR technique.

Breadcrumbs plugin

mTekk has a WordPress plugin for breadcrumb navigation.

FeedBurner feedcount PHP code

Hongkiat has the updated PHP code required to display Feedburner feedcount in text (works for any system using PHP). If you have been frustrated by problems with Feedcount plugin, this is a worthy alternative. Note that it requires PHP 5.

Login form overlay

Pro Blog Design features a tutorial on making a login form overlay using a mod of Lightbox.

Automatic Stats plugin

Automatic Blog Stats is a WordPress plugin that gives you shortcodes to embed anywhere in your post and display stats. Most of the common stats like FeedBurner feedcount, post and comment stats, Alexa, Pagerank, Technorati authority and Google/Yahoo/Delicious backlinks count are available.

Twitter bar, random stats

Paul Stamatiou has code snippets required to pull in Twitter status to, and list random stats on your blog, and.

Of course, this is just the tip of the ice berg – there are lots of other useful hacks. Suggest your favorites in comments.

Post from: Blog Designed

10 useful WordPress hacks for every blogger/designer

Active commenters will also be rewarded with links in my links round up posts and/or linked list.

Post from: Blog Designed

BlogDesigned is now a dofollow blog

Post from: Blog Designed

Get a free CakePHP book for Coda

Linked list posts are different from normal, longer posts in that it will have a small paragraph describing/criticizing the page linked to. On the website, clicking on the post title takes you to the destination URL. There is a small “permalink” that leads to the actual post, but my guess is that it will be used rarely.

On the RSS feed also, clicking on the item title takes you to the linked page. Tweaking the RSS feed to indicate that it is a linked list post is complicated, hence I have not done that. However, you can easily recognize linked list posts from the fact that they have only a small paragraph of text (as opposed to the longer articles.

Comments are enabled on the linked posts. You can get to the post page (to comment) by clicking the permalink icon on the site, and the title at the end of a post in RSS/email (see image).

Post from: Blog Designed

Regarding the linked list