I ♥ WordPress! It’s a fantastic Open source blogging and content management system. There’s a great community of people behind the design & development of the WordPress system itself as well a huge number of designers & developers who share their knowledge through blog posts, tutorials and the creation of thousands of themes & plugins.

When I was first starting with WordPress though, I was disappointed that there was no user manual or simple guide to get me started. True, there are heaps of articles within the WordPress Codex that go into great detail about all sorts of topics and this is great if you want to get really involved in developing your own WordPress theme or creating plugins, but it can be a bit daunting for those users who just want a simple guide to using the Content Management side of WordPress. A quick look through the online documentation on the WordPress site can have you scratching your head within minutes as to what to read first.

When you create custom designed sites for your clients, it’s not always possible to physically go to a their location to provide them with hands-on training. So, rather than simply sending people a bunch of different links in the hope that they’d use them to learn WordPress themselves, I decided to write an easy to follow manual that I could provide them.

My aim for the Easy WP Guide was to write something that was easy to read and that covered the basics in regards to editing & updating your site content. You’ll find that some topics within the guide are only touched upon lightly. My intent wasn’t to cover setting up your WordPress site or editing theme files, there’s plenty of information on those topics within the WordPress Codex and on the web. I’ve created the site so that I can share my documentation with anyone who may be in the same situation. The documentation is available as a PDF and a Word document on the download page. Feel free to rebrand the Word doc and pass on to your clients if you find it useful. Alternatively, send them to the Easy WP Guide site where they can read the documentation online.

The site itself was designed and developed by yours truly. It was developed using HTML5 & CSS3 and of course, it also runs on the power of WordPress. Font replacement is courtesy of Font Squirrel, an awesome resource for 100% free for commercial use fonts. I’m using PT Sans for all the main site copy and menus and Journal for all the headings. I also made use of the awesome HTML5 Boilerplate.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

HTML5 Boilerplate gives you the best of the best practices: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file sets you up with caching rules and preps your site to serve HTML5 video, use @font-face and gzip. It’s cross-browser compatible, HTML5 ready, provides iOS, Android, Opera Mobile-adaptable markup and a CSS skeleton as well as .clearfix and .visuallyhidden classes to style things wisely and accessibly. If you’re thinking of getting into some HTML5 development, I suggest you do yourself a favour and check it out.

I hope that you find the Easy WP Guide useful, either for yourself or for passing onto your clients. If you feel that something is missing, incorrect or not covered adequately, drop me an email and I’ll look into it.

I’d love to hear if you think you’ll be able to get use out of it, so leave a comment below. Thanks.

As part of the site redesign, I’ve taken the opportunity to turn it into a complete branding exercise. I’ve redesigned the site, including creation of my very own logo, created some new business cards, updated my invoice templates and updated my html email template that I use for emailing out quotes.

Previously my site was a bunch of static php files and I was only using WordPress to power my blog. This time around I developed a completely customised WordPress theme from the ground up to manage the whole site. My theme is widget ready for complete customisation of the sidebar and footer and includes a number of different page templates for customising the Homepage, Blog and several of the other pages within the site. One of the benefits of WordPress and one of the reasons why it is so popular, is the ease of customising sites. It truly is a complete Content Management System now and not just a simple blogging platform.

I’d love to hear what you think of the new design, so if you’ve got a minute, please leave a comment

To get the best effect, it’s advisable to use an image that is looking down on your subject. An image such as a busy street scene viewed from a multi-story building or where the camera is above the horizon line, works perfectly. Alternatively, you can also download the image I’ve used in this tutorial.

Step 1: Increasing the color saturation

We’ll start off by increasing the color saturation. This makes the effect more noticeable.

After opening your image, create a new Vibrance Adjustment Layer. You can do this by selecting the half-filled circle at the bottom of your Layers palette or from the Layer > New Adjustment Layer > Vibrance… menu option. The amount you increase the Vibrance & Saturation will depend on your particular image. For this image though, I’ve increased both to +40 to really exaggerate the colors.

Step 2: Adjusting the curves

Next, add a new Curves adjustment layer. Again, you can select this from the half-filled circle at the bottom of the Layers palette or from the Layer > New Adjustment Layer > Curves… menu option. Increase the highlights and decrease the shadows slightly to provide further contrast between the colors. The amount of adjustment required in the curves dialog may vary depending on the particular image used.

Step 3: Simulate the depth of field

The main effect in a Tilt-Shift image is the shallow depth of field. To simulate this, we first need to blur the image. Select your background layer (or the layer that has your image) and press Ctrl-J (Command-J on Mac) to duplicate this layer. If it’s not already, select this new duplicated layer and then select Filter > Blur > Gaussian blur… menu option. Blur your image with a Radius of 4.5 pixels.

With your blurred layer still selected, add a new Layer Mask by selecting the Add Layer Mask icon at the bottom of the Layers palette or by selecting the Layer > Layer Mask > Reveal All menu option. Make sure your Layer mask (not the image) is selected by clicking on it. Select the Gradient Tool and in the options palette, select Reflected Gradient (4th Gradient icon from the left). Also, ensure that the ‘Reverse’ checkbox is unticked. Next, drag the gradient vertically over a small portion of the image. To make sure it’s perfectly vertical, hold down the Shift key while you drag. What you are doing here is creating a mask on the blurred image so that the original image sitting on the layer below, can be seen. Since we only want to simulate a narrow Depth of Field, the gradient should be quite small. It may take a couple of goes to get the correct effect. Once you’ve added your gradient to the Layer mask, you should find that the area you dragged the cursor over will no longer be blurred.

Step 4: Fine tune your image

To ‘fine tune’ your gradient, click the small “link” icon between the image and the Layer mask (in the Layers palette) to turn it off. Making sure your Layer mask is still selected, select the Move Tool and use the Up & Down arrow keys to fine tune the position of your mask. The subject matter of your image will influence where best to position the mask to get the best effect.

Step 5: Grab a coffee

Once you’re happy with the placement of your mask, your image is complete. You can now sit back and contemplate what you’re going to “miniaturise” next

I’ve also published this tutorial on The Web Squeeze.

If you found this tutorial interesting I’d love to hear so please leave a comment. Thanks.

You can control whether this grid is displayed or not using the View > Show > Pixel Grid menu option.

If you don’t see the pixel grid menu option, then you most likely haven’t got OpenGL enabled in your Photoshop preferences. To fix this, select the Edit > Preferences > Performance… menu option. Make sure that Enable OpenGL Drawing is checked.

I personally find the Pixel Grid really useful. Do you? Leave a comment, I’d love to hear.

Mac – OS X 10.4 or greater (incl Snow Leopard)

Back up

Choose “Wacom Tablet” from your Applications folder.

Double-click “Remove Wacom Tablet”
(Note: the name of this utility will be updated in an upcoming driver release).

After the utility has launched, select “Back-up”.

Choose the name and location of the backup file and click OK.

Restore

Choose “Wacom Tablet” from your Applications folder.

Double-click “Remove Wacom Tablet”.

After the utility has launched, select “Restore”.

Browse to the location of your backup file, select it and click on OK.

Windows – XP, Vista or Win7 (32 & 64 bit)

Back up

Go to Start – (All) Programs – Wacom Tablet.

Launch the “Wacom Tablet Preferences File” Utility.

After the utility has started, select “Back-up …”.

Choose the name and location of the backup file and click OK.

Restore

Go to Start – (All) Programs – Wacom Tablet.

Launch the “Wacom Tablet Preferences File” Utility.

After the utility has started, select “Restore…”.

Browse to the location of your backup file, select it and click on OK.