1. Email - Knowing how to check your email, and how to write an effective email are two entirely different topics – but both are useful to know! Your email provider should have a “How To” on checking your email through webmail and setting up an email client on almost any platform, but if it’s over your head, consider using a flexible, free service like Gmail, and forwarding your old email to your new one. Although almost any email address can be configured so that it’s accessible over the web via browser or smartphone, Gmail apps make it easy for even the non-technically inclined to access their email anywhere.

On the writing effective emails front, check out mindtools.com’s article on Writing Effective Emails.

2. Networks and Wi-Fi – Being unable to connect to the internet can derail a remote worker’s entire day. Being able to troubleshoot basic network and wi-fi problems is a must. Also, consider a backup plan, if a tree falls on the telecom lines outside your house, where is the closest wi-fi hot spot?

C-Net has a good primer video on basic wi-fi troubleshooting, which is worth a view if your productivity (and your paycheck) is dependent upon a wireless
connection.

3. “Instant” Communication, Skype, IM, etc. - Availability via IM can be either a blessing or a curse for a remote worker. Consider separating your business and personal life with separate logins for IM services so that you can tune out the chatter from friends, harness this tool for productivity, and gain a sense of “being there” with your colleagues even if you’re far away.

4. Tele- and Web conferencing – Be sure to familiarize yourself with your client’s preferred method of meeting. You can’t blame it on traffic when you’re late to a virtual meeting, and depending on your field, citing technical difficulties might make you look incompetent.

5. Collaborative Tools – Whether its as simple as Google Docs, or as involved as project management tools like BaseCamp, it’s important that you can effectively use the tools that you have at your disposal.

For more a quick primer on Google Apps, check out Google’s very own Google Apps Training Tutorial, and for some quick tips on how to use Basecamp more effectively, see Flatsourcing’s “We <3 Basecamp. How we use it effectively.”

6. Document creation and sharing – Being able to generate clear and concise documents, create the necessary delivery formats (ie, .doc, .pdf, .jpg), and share them via email attachment, web, ftp, or the collaborative tools mentioned above is an essential skill for any remote worker. A great free tool for creating PDF files is CutePDF, it’s free and, once installed, is as simple as clicking “print”.

7. Digital organization – Since the majority of remote work is digital, your computer desktop and local file structures are just as important as the desktop and filing cabinet you would keep at the office. It’s easy – create new folders by right clicking on the desktop, select “New”, select Folder, name it, put files and other folders in side of it according to the organizational structure that makes sense to you.

8. Screencasts/Screenshots - Sometimes its easier to just show someone what your talking about rather than trying to explain it. Being able to take a screenshot, circle part of the image and write notes can be a helpful way to illustrate a point. For explanations of more in-depth procedures, screencasts can be invaluable.

For more info, see About.com’s How To Capture a Screen Shot of your Desktop or the Active Window in  Windows.

For getting started quickly and easily with screencasts, check out NorthStarNerd.org’s Tutorial on Camstudio.

9. Maintenance - Keeping a good eye on the health of your computer can prevent disastrous delays. Anti-virus and anti-malware are a great start, but your hardware’s health is important too. Don’t ignore noisy fans and cranky sounding hard drives! Most hardware failures give warning signs, don’t ignore them.

For more info on computer maintenance see, Optimizing Computer Performance for Online Work Success, featured previous on the oDesk blog. For more advanced users, consider a hardware monitoring tool like SpeedFan, which can help you monitor CPU temperature, and overall hard drive health.

10. Security - Keep your sensitive data private. Run a good firewall, and keep your OS and browser up to date with security updates. For more security tips see, Securing Your Home Network, featured previous on the oDesk blog.

1. Using Custom Taxonomies to Create a Movie Database

Custom taxonomies in WordPress are similar to tags and categories, but they provide almost endless possibilities. In this tutorial Justin Tadlock shows a practical use for custom taxonomies while working on a movie database website. He shows how to set up custom taxonomies for actor, director, genre, producer, studio, and writer. This will make it easier for visitors to navigate the site as they can click on the actors name and see all of his/her movies. Justin also wrote an introductory post to Custom Taxonomies in WordPress 2.8.

You can also find more about custom taxonomies in Chris Coyier and Jeff Starr’s new book, Digging into WordPress, which I highly recommend.

2. Automatic WordPress Thumbnail Without Custom Field

This tutorial from Pro Blog Design shows how to use DarrenHoyt’s Tim Thumb script and the theme’s functions.php file to automatically grab and re-size the first image used in the post.

3. Design a Client Development Site with Wordpress MU

Another tutorial from Pro Blog Design. This one shows how WordPress theme designers and developers can save themselves some time and improve the process of developing themes for clients. It uses WordPress MU to be able to work on multiple themes with various clients at the same time.

4. Create Custom Single Post Template for Specific Posts or Sections in WordPress

WP Beginner shows how to create a custom single post template for each specific post, specific author, or a specific category. For designers or bloggers who want to use a number of different styles for their posts, this is a good option.

5. Creating Custom Write Panels in WordPress

Spencer from Function wrote a great tutorial that shows how you can create custom write panels in your WordPress themes. An example use for this would be post thumbnails without a custom field, but there are plenty of other ways that you could use this to improve your themes. Spencer has also written a follow up to the orginal article where he makes some improvements the to code being used.

6. Using Action Hooks in Child Themes and Using Filter Hooks in Child Themes

These two posts from Ian Stewart will help you to learn more about using child themes and customizations. Using the information here you can modify parent themes without impairing your ability to upgrade when a new version of the theme is released.

7. How to Make a Control Panel for Your WordPress Theme

Cats Who Code has a nice tutorial that shows how theme designers can create a simple options panel that allows users to make some modifications to the theme. Control panels can make themes more user-friendly and reduce the need to edit theme code. Starscape also has a tutorial for creating a settings page.

8. How to Integrate Pagination in Your WordPress Theme

Pagination is a little more user-friendly than the default “next” and “previous” links. The WP Page Navi plugin is the most popular option, but this post from Cats Who Code shows how you can integrate it directly into the theme.

9. How to Show Related Posts Without a Plugin

Plugins are commonly used to display a list of related posts at the end of a blog post. This post at WP Recipes shows the code for getting a list of related posts without the use of a plugin.

10. Display Thumbnails for Related Posts in WordPress

Still on the subject of related posts, Build Internet has a tutorial for creating a better-looking related post list that included thumbnails. It’s a customization of the Yet Another Related Posts Plugin.

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, we are going to show you how to create five killer effects for your site.

1. Faded Shadow
With a little bit of Blur and Quick Mask we can create shadows that fade out in any direction we want to. With this effect you can make boxes look like they pop out of the background. This example is from mint.com.

Step 1
First thing first, the background. As usual by now, within New Document same dimensions like previous ones.

Step 2
Draw in a white Rectangle.

Step 3
Create a New Layer and place it under the white rectangle layer. Cmnd (Ctrl) + Click white rectangle shape. Fill the empty layer with Black.

Step 4
Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.

Step 5
Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and carefully mask all

Step 6
Now this was pretty easy, don’t you think? Now you can play around with this technique and who knows what awesome results you’ll get.

2. Depth and 3D Space
More and more interesting 3D elements are being used in web design lately. Here you can see how with just few extra layers, you can create an illusion of 3D space. This example is from mosaiko.com.br.

Step 1
New Document filled with Black.

Step 2
With Rectangle Toll draw in rectangle and fill it with #21262a.

Step 3
With same tool selected draw in another, this time smaller rectangle and fill it with #191b1d. These two rectangles will create our space on canvas. It will look like a wall is passing through it.

Step 4
Cmnd (Ctrl) + Click bigger rectangle shape to get a selection. Create a New layer. Choose 300px Soft Brush, color Black and click few times in top center of the selection.

Step 5
Do the same with smaller rectangle but this time click on bottom center part of the rectangle.

Step 6
Now, do the same for the background layer itself just use White as Brush color.

Step 7
Draw in a 85×20 px rectangle, fill it with #555759.

Step 8
Add following effects. Drop Shadow – Color: Black, Opacity: 25%, Angle: 90, Distance: 1px, Size:4px. Inner Shadow – Color: White, Opacity: 7%, Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay, use values provided in the image.

Step 9
Choose Pen Tool and draw in a shape like you see in the image. Fill it with #555759.

Step 10
With a little use of Quick Mask and some Brushing we will create the illusion of 3D space. First add a Quick Mask to the layer and with 100 px Soft Brush mask the sides of the stripe.

Step 11
Next, select the whole stripe and choose 100px Soft Brush again. Create New Layer, set color to white and click few times at the beginning of the path but only with the top of the brush just like shown in the image.

Step 12
I added some navigation links, copied few more stripes, modified the perspective a bit and there we have it.

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, we are going to show you how to create five killer effects for your site.

1. Navigation Menus
The most important part of a website: the navigation. I’ve chosen the example that uses some transparency and fade out effect (taken from legacylocker.com).

Step 1
Open a New Document, same dimensions from previous example. Create a New Layer and fill it with Gradient Overlay using the color hex values you can see in the image.

Step 2
For the purpose of this example I added few clouds

Step 3
Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.

Step 4
Add a Quick Mask to this layer. Choose 200px radius Soft Brush, set the color to Black and mask the ends of this rectangle, like you see it in the image.

Step 5
Draw in another Rectangle, but much higher. Put it under the small rectangle. Use the same color and Opacity. Again add a Quick Mask to this layer

Step 6
Choose 600px Soft Brush and carefully mask bottom of the rectangle os that top line stays visible across the document.

Step 7
Now we can play a bit with the small Rectangle by adding some light and shadows. Cmnd (Ctrl) + Click small Rectangle to make a selection out of it. Go to Select>Modify>Contract and enter 1px. Create a New layer and set Mode to Overlay. Choose 200px Soft Brush, color white and click few times the top part of the rectangle just like you see in the image.

Step 8
Do the same with bottom part just change the Brush color to Black.

Step 9
Here you can see how this looks like. It’s really a subtle effect of light and shadow which you can use wherever you want.

Step 10
With Line Tool draw in a line just the same width as small rectangle. For color choose #8dd1fe.

Step 11
Mask the ends of the line just like we did in Step 4. Copy this line and shift it to the bottom of the small rectangle

Step 12
Finally I added some Navigation items and that’s it!

2. Typography Inset
Even though we’re used to seeing this technique now, it’s still a good skill to add to your toolbox. Please use it only if you have to The example was taken from forabeautifulweb.com.

Step 2
I added some floral brushes just to recreate the same background from the example

Step 3
Choose Type Tool, set font to Times New Roman. Choose color #591e0d and type something.

Step 4
Add Inner Shadow filter and use settings like shown in the image.

Step 5
Add 2px Outside Stroke with color set to #bc9f6c.

Step 6
Done! What, that’s it? Yes, that’s it! Simple and effective.

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, we are going to show you how to create five killer effects for your site.

1. Awesome Buttons
Now what is a site without a great “Call to action” button? The design style and colors will depend on your overall site style and importance of each button. Here is one example of a simple but effective button that we’ll be trying to recreate (taken from transmissionapps.com).

Step 1
Open New Document, set canvas to 470px wide and 350px high. Create a new layer and draw in this shape with Rounded Rectangle Tool with radius set to 80px.

Step 2
Right after that we will add some layer filters to make this button immediately awesome. Drop Shadow – Color: Black, Opacity:65%, Distance: 2px, Size:2px, the rest leave by default.

Step 3
Gradient Overlay. Just copy these hex codes for gradient colors and place color buckets in approximately same position as you can see in the image.

Step 4
Inner Shadow will make this button stand out even more. Notice that this is just a subtle effect.
Inner Shadow – Color: Black, Opacity: 15%, Distance: 0px, Size: 5px;

Step 5
Finally add some Stroke. You will notice that this is a Gradient Stroke with same colors as our buttons Gradient Overlay. The only difference here is that gradient direction is set -90, which is the opposite of buttons Gradient Overlay. With this little trick we made a nice light effect to our button and made it stand out a bit more.

Step 6
Done with effects, time for some shine! Create a new layer above others.

Step 7
Cmnd (Ctrl) + Click on Button shape layer. We have made a selection out of it.

Step 8
Choose Marquee Tool. Hold down the Alt key and Subtract the half from selection.

Step 9
Choose Black to White Gradient Tool, set the layer mode to Screen and pull upwards from bottom of selection to about 30px outside the selection. There you have it! A nice shiny button.

Step 10
Add some text like I did here. Draw in a circle and position it like you see it in the picture. Add a Gradient Overlay with same values like shown in the screenshot. Finally give it a 2px white Inside stroke.

Step 11
Choose Shape Tool. From presets choose an Arrow. Rotate it.

Step 12
Like the image says, position the arrow in bottom direction.

Step 13
Now choose Direct Selection Tool and select the shape. Next, select two points from upper part of the arrow and move them with Arrow Keys few pixels to the right. Do the same with the right top side of the arrow, just shift it to the left. This way our top part will become a bit thiner. With the same tool adjust the bottom part (triangle).

Step 14
This is how it should look like. You can also see the layer structure.

On this post we feature 10 exceptionally useful wordpress resources that might be a good help for your wordpress porject!

Cheat Sheets and Reference Guides:

1. Complete WordPress Theme Guide
Nick La of Web Designer Wall put together a three-part series to help those who want to learn more about WordPress theme development. The three parts are: installing WordPress locally, building a custom WordPress theme, and moving and exporting WordPress.

2.WordPress Theme Development Checklist
This PDF checklist is helpful to make sure that you are not forgetting any steps during theme development. The checklist will help you to know what you have done and what still needs to be completed

Frameworks:

3. Hybrid Theme Framework
The Hybrid theme framework, by Justin Tadlock, has also been created with child themes in mind. It includes 13 page templates for various purposes, 15+ plugins supported within the theme, breadcrumbs, and tutorials to help you get started.

4. Thematic
Thematic is a very popular WordPress theme framework created by Ian Stewart. This framework can be used as-is, or is excellent for using with child themes. In fact, a number of child themes for Thematic are available for free or as premium themes, including the free gallery theme distributed by Smashing Magazine.

Testing WordPress Themes:

5. Using XAMPP for Local WordPress Theme Development
Jacob Gube of Six Revisions shows how to set up a local environment for theme development. This is a detailed tutorial that may be able to save you a lot of time and make your theme development much quicker and easier.

6. How to Set Up a Killer WordPress Testing Environment Locally
NETTUTS also has a tutorial for setting up a local testing environment. If you are designing and developing many WordPress themes you will want to check out one of these two tutorials.

Dummy Content:

7. WP XML Test Data Import
When developing themes one of the biggest frustrations can be the lack on content on a new installation of WordPress. Self Conclusion has put together an XML file with several posts and pages of dummy content with tags, categories, comments, links, lists, and everything you will need to test a theme. You can easily download this file and import it into WordPress to save the time of adding your own dummy content.

8. WordPress Test Post Pack
Think Design Blog also has a pack of dummy content that can be downloaded and imported into WordPress.

Coding Services:

9. WPCoder
If you are a WordPress designer and you would like to save some time in development of the theme, WPCoder is a group of developers that specialize in taking your designs in PSD format and coding them into WordPress themes.

10. PSD to WP
PSD to WP is another coding service similar to WPCoder.

1. Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator

2. Create a Vector Film Slate Icon

3. Windows Vista Folder Icon Tutorial

4. Professional Technique for Creating Icons

5. Create a Vista Error Icon in Photoshop

6. Create a Cute Panda Bear Face Icon

7. How to Make a Calendar Icon

8. Icon Design Tutorial: Drawing a Pencil Icon

9. Create a Scissor Icon in Photoshop

10. Design the iTunes Icon for the iPhone in Photoshop

11. Design Mini Icons

12. Make a 3D Shopping Basket Icon in Illustrator

13. Create a Design Float Icon in Illustrator

14. Creating an XP Style Monitor Icon

15. How to Create an Alarm Clock Icon

16. Create a Custom Mac OSX Style Ring Binder Address Book Icon