There are a lot of cool and effective ways to call attention to portions of a design. When writing 6 Ways To Take Your Webdesign From Good To Great I used a simple blur technique that proved to be quite popular. I’ve seen the effect a lot of places before, so in no way can I take credit for it.

In this post I would simply like to show you a quick and easy way to accomplish a similar effect. I’ll use this photo I found on Flickr to illustrate the effect, but you are welcome to use whichever photo you’d like.

Step 1 – Open & Duplicate

Open up your photo in photoshop and duplicate the background layer by selecting it in the layers palette and pressing ‘cmd + j’.

Step 2 – Gaussian Blur

Add a gaussian blur to your photo with a radius of about 5 to 10 pixels. To do so, click Filter->Blur->Gaussian Blur.

Step 3 – Layer Mask

Add a layer mask to the blurred layer (Layer->Layer Mask->Reveal All). Then grab the Elliptical Marquee Tool and draw out a circle of the area that you’d like to highlight. For a perfect circle, hold down shift as you drag out your selection. Double check that you have the layer mask selected and fill your selection with black by selecting Edit->Fill then choosing black.

Step 4 – White Stroke

Don’t deselect the circle selection just yet, you will need it for the stroke and shadow. If you have deselected your circle, the best way to redo the selection is to ‘cmd + click’ on the mask, then select the inverse (’shift + cmd + I’). Add a new layer to the top of the layers palette (Layer->New->Layer). Now click, Edit->Stroke. Choose a width of 4px, and a color of white, then click ok.

Step 5 – Shadow

Add another layer, and place it just below the white stroke layer you created. Add another stroke, this time make it 6px, and black.

Step 6 – Blur The Shadow

Add a gaussian blur to the black stroke to soften the shadow. You can go through and add the gaussian blur through the filters, or just hit ‘cmd + f’ to repeat the last filter (which in our case was the gaussian blur). I hit ‘cmd + f’ twice to make the shadow quite subtle.

Step 7 – Finishing Touches

In this last step, I added a sketchy arrow and some text. I also added a very subtle drop shadow to both. Here is the final result.

Parting Thoughts

As you can see, this is a very simple way that you can add some interest to blog images, and focus the readers attention. Don’t hesitate to drop me a comment and let me know what you think of the effect, or make mention some other techniques that you use, or that you have seen in action.

This is part 2 of the Design Toolbox Series where I ask top designers what design tools they use to help them complete their work. This series was largely inspired by Grace Smith’s “Show Me Your Dock Series.” It’s my hope that you can gain insight into what other designer’s are using, and hopefully find some new apps/tools to check out.

About Tim Smith

Tim Smith is the editor of Fuel Your Blogging. He has a passion for writing and loves to share his thoughts and experiences for the benefit of others. Here are the tools that he uses to design and create.

Computer/OS

I use an Apple 17″ iMac. My computer is ancient though. I’m always joking around that it’s going straight to a museum when I’m done! It’s still running Tiger! I’ll hopefuly be upgrading soon.

Printer

Actually, I just bought a new printer. I’m using a Brother MFC 6490. I love it. It does everything. It scans, copies and prints. I definitely recommend it.

Browser

I use the latest version of Firefox. Version 3.5, right? One of my favorite features of Firefox is Personas. You can have a different skin for the browser everyday if you want.

Code Editor

I’m more of a graphic designer than a web designer but I love to get my hands dirty with code. I use a very simple app called Smultron. It doesn’t have a lot of features like Coda or Espresso but… it works for me.

Mail Client

I use Postbox. I love Postbox. I started using it when it was still in beta and I just love the features and UI. Even though it’s features are sophisticated, I like that the user experience is simple.

Billing App

I use Billings. I love apps that are simple to use and Billings saves me of a lot of work and headaches.

FTP Client

I use CyberDuck. Again, I love simple apps and CyberDuck lets me setup my FTP information quickly and without hassle.

Twitter App

I’m using TweetDeck. I love using it. I can have my various groups, accounts and I can also update Facebook from it. However, what I don’t like is that it hogs a lot of my RAM and it limits the apps I can have open at once. As soon as I upgrade to a new Mac, I most certainly will begin to use Tweetie if TweetDeck doesn’t make some major changes.

RSS Reader

I don’t use an RSS reader right now. But, I do think that I should start using one. I usually send all my feeds to my inbox. It makes a mess because I’ll wake up to over 80 messages; only counting the feeds. Starting the day with the number 110 on the Postbox icon isn’t really great.

Task Organizer

I love Things!! I recently wrote a review on their app and I gave it 5 out of 5. Again, the app is simple to use and I love that. I was able to learn all of the features of Things in like five minutes. That’s great! It has helped me be a lot more productive.

Photo/Design Editor

Photoshop of course! I use Photoshop everyday for Fuel Your Blogging. I make thumbnails, lead images for our articles and recently I’ve been doing some photo retouching.

Vector/Illustration Program

Illustrator. I make sure I use it everyday. I’m usually working on a logo, some text for a wallpaper or just messing around. I love it!

Parting Shots

Feel free to add your tools of choice for any or all of the categories above. I’d also love to hear your suggestions for genres that I should add to the next designer’s toolbox.

Introduction

MyInkBlog’s Flickr Group has grown to 400 awesome members! At this point, every 100 new members will result in a Flickr group showcase; this is the sixth such showcase. If you missed the prior ones, be sure to check out I, II, III, IV and V.

Some Quick Stats

I love the inspiring work that comes from this group. Here is a quick look at the group statistics; with a shout out to the top five contributors.

• Group Members – 400 Artists
• Total Art – 1776 Inspiring Artworks
• Top Five Contributors – Créations du Net (126), Simon’s Flickr junkyard (113), RUGRLN (93), Astro Marus (71), Ivan Kasaj (57)

MIB Around the Interwebs

I also like to use these Flickr showcases as a shameless plug for some other places on the web where you can find me. Be sure to check out MyInkBlog on Twitter and more recently onFacebook

The Showcase Already!

Ok, enough stats and intro… onwards to the showcase! The artwork is awesomely inspiring once again. If you would like to be a part of the next one, please consider joining the group. Enjoy!

Explosive Typography by Angie Bowen

Future by estheticcore

Design Is Vintage by sthursby

Hidden – Have A Nice Day by Nuok (Dario)

Digital Abstract: Sailing by Tanaka13 – Créations du Net

Las Raices del Rock by mrhash

Legend by DTH/CLR

Lost in Space by fudgegraphics

Memories by colaja

The Fiery Dove by jadgraphics

Tutorial Overview

In this tutorial, I will show you the steps I took to create this Surreal, Ancient Fantasy Scene in Photoshop. We will take several real world objects and seamlessly blend them together to form this artwork. We will also use a number of Photoshop brushes to spice up the effect. Together we will explore the power of Photoshop image adjustment options, filter effects and layer blending modes. Have a try!

The Files

To complete this tutorial, you will need the following stocks:

Stock Images:

• Moutain in the Mist by ~ Momotte2stocks
• Sunset by ~ night-fate-stock
• Fantasy Castle by ~nixie04
• Mysterious Gate by ~rensstocknstuff
• Stormbringer 14 by *Iardacil-stock

Photoshop Brushes

• Cloud Brushes by ~JavierZhX
• 11 Photoshop Bird Brushes by ~ahoberer78-stock
• Fractal Brush Pack 02 by ~above-and-beyond
• Winter Breeze Brushes by =Axeraider70

Step 1

Create a new document sized at 1400px by 800px (in fact size doesn’t really matter here, I chose this size because it fits my screen the best).  Load the Moutain in the Mist by ~ Momotte2stocks in Photoshop, copy and paste the entire image onto your document, use free-tranform (ctrl + t) to fit it to the canvas size.

Name this layer “misty moutain”. Duplicate it twice, resize and position each duplicated layer as shown below.

Add a layer mask to each of the duplicated layers. On the mask, use a big, soft and round brush to gently erase the edges so those three mountain layers seamlessly join together, as shown below.

Step 2

Now, let’s add some lighting contrast to the mountain. To do this, duplicate the original mountain layer once and drag it to the top, apply the following Gaussian Blur settings to the duplicated layer.

Secondly, add a layer mask to this layer like the one shown below.

Change the blending mode of this blurred layer to “Color Dodge” and reduce its opacity to around 75%, you should have the following effect.

Step 3

Now, let’s add some lighting dynamics and alter the colour of the image a bit to make it look more surreal. To do so, add the following adjustment layers on top of all the previous layers you made. (Please make sure you set the blending mode and opacity according to the screenshot for each adjustment layer)

Curves - Blending Mode: Normal, Opacity – 65%

Layer Mask

Color Balance 1 – Blending Mode: Soft Light, Opacity: 35%

Layer Mask

Color Balance 2 - Blending Mode: Multiply, Opacity: 65%

Layer Mask

Vibrance - Blending Mode: Normal, Opacity: 90%

Brightness and Contrast - Blending Mode: Soft Light, Opacity: 100%

And here is the effect so far.

Step 4

Now, we can add some more texture to the centre portion of the scene to give it a bit more motion. So load the Sunset by ~ night-fate-stock image into Photoshop, and use the rectangular marquee tool to cut out a bright portion of the sky, as shown below.

Copy and paste it onto your document and name it as “centre highlight”, position it in the centre (a bit lower right) of the canvas, use a soft brush to erase the edges and add the following Motion Blur to it.

Hit Ctrl + F a few times to re-apply the motion blur filter, then change the layer’s blending mode to “Soft Light”, with 100% opacity. You should have the following effect.

Step 5

Now load the Fantasy Castle by ~nixie04 into Photoshop, use whichever selection tool you perfer to cut out the castle. (Hint: don’t worry if the selection is not perfect the first time, you can use the Refine Edge tool (Ctrl + Alt + R) to adjust it, try out different options within the tool to get the best results). Copy and paste the selection onto the canvas, name this layer “Castle” and position it as shown below:

(Make sure you use a big soft brush to erase the edges so it blends with the surroundings)

Change the layer blending option of this layer to “Soft Light”. You can see the building blends itself into the surrounding lighting environment, which is exactly what we want for this work.

Duplicate this “Castle” layer twice, drag the duplicated layers to the positions shown below: (use the free transform tool to adjust their size a bit)

Keep their blending mode as “Soft Light”, and make sure you take care of the edges so they blend into the mountain background as well.

Step 6

Now, add some nice cloud texture onto your work. Create a new layer called “cloud”, use the Cloud Brushes by ~JavierZhX brushset to paint some cloud on the upper portion of the canvas. (Hint: adjust the flow and opacity of the cloud brush to add depth to the cloud.)

Let’s also add some flying birds to the scene to make it look a bit more fantasy and surreal. Create a new layer called “Birds” and use the 11 Photoshop Bird Brushes by ~ahoberer78-stock to paint some birds on top of the castle (set the brush opacity to a relatively low level so the birds are not too visible)

Step 7

Now let’s add an ancient gate to our artwork. Load the Mysterious Gate by ~rensstocknstuff into Photoshop, cut out the gate and copy and paste it onto your document, name this layer “gate” and set its blendng mode to “Hard Light”, opacity to 50%. Make sure you erase the edges of the gate with a soft brush. You should have the following effect.

Add the following Black and White adjustment layer to it, as a clipping mask:

Duplicate the “Gate” layer and drag it to the top, set its blending mode to “overlay”, opacity 100%. You should have the following effect.

Create a new layer called “abstract effect”, use the Fractal Brush Pack 02 by ~above-and-beyond and Winter Breeze Brushes by =Axeraider70 to add some abstract effects around the gate, as well as the castle. Also make sure you vary the flow and opacity of the brush a bit, for more depth.

And this is the overall effect so far.

Step 8

Now let’s load the Stormbringer 14 by *Iardacil-stock into Photoshop, cut out the lady and copy it onto our document, name this layer “lady” and resize it into the position as shown below. (Set the opacity to around 80%)

Like the previous step, use those abstract brushsets to paint around the lady’s body, make sure you cover the her feet.

Step 9

Ok we’re pretty much done here. Add some final adjustment layers to the artwork for some fine-tuning.

Curves - Blending Mode: Normal, Opacity 75%

Mask

Colour Balance - Blending Mode: Color, Opacity 90%

Mask

Levels - Blending Mode: Normal, Opacity 100%

Mask

Vibrance - Blending Mode: Normal, Opacity 100%

Here is the effect so far.

Step 10

Before we finish up, I think it would be a good idea to tidy up the image a bit by reducing some noise. So save your current work as a different file, flatten the image, and apply the following Reduce Noise filter to the image.

Optionally you can add a glowing effect to the image. To do so, simply duplicate the background layer and apply the following Gaussian Blur settings to the duplicated layer.

I also adjusted the colour balance and saturation a bit, here is the final effect I have for this tutorial.

Final Thoughts

I find from personal experience that it sometimes helps if you simply walk away from your work for a few mintues, play some games or have a cup of tea, then return. Ok that’s it for this tutorial! Hope you enjoyed and found it useful!

The cool folks at CodeSublime approached me about offering a giveaway on MIB that could really show off there coding skills. After some brainstorming we devised a unique PSD to Wordpress Contest Giveaway. I’ve seen quite a few PSD to HTML style giveaways, but I can’t recall any that go the extra mile of offering a full Worpress Theme.

The Details

This is a awesome chance to win a fully coded Wordpress theme from just your PSD files. In total it’s a $600 value. Even, if you don’t win the big prize, everyone who submits a design will receive a 10% voucher code should they decide to get their site coded by CodeSublime.

Given that this is such a unique giveaway, we wanted to do something different than the traditional comment/tweet to win type thing. For this contest we are asking you to submit your designs to be judged by a group of five designers, with the top design getting the prize. Your site design can be for an upcoming project, or something from scratch that you think up just for this contest.

Meet The Judges

The contest will be judged by 5 awesome designers… well, 4 awesome designers + myself. Here is the list.

Submission and Deadline Details

Please submit your designs to the PSD to Wordpress Contest Flickr Group that I’ve started just for this contest. All submissions must be in no later than January 4, 2010 to be considered. Their is no limit to the number of submissions you can make.

I can’t wait to see the designs everyone sends in. Let the contest begin!

Intro

Blogging, as we all know is much more than writing an article. In most posts, you need to take screen captures, edit, copy, paste, format, etc.. Basically, there is much more to it than meets the eye. Any decent article will take at least an hour to write and may take several. Here I am going to show you how to set up a simple action that can streamline your blogging by creating the main post image or “title image” for you.

Often times a blog will use the same exact style for each and every title image, or something relatively similar. This is a guide on how you can create an action to do this for you dynamically. You can also find a link to download this action, at the end of this post.

Step 1

Open up your image of any size. Just make sure it’s the size that you’d like your blog title images to appear. Ours is 550px by 350px.

Step 2

In your Action Pane, click the folder icon. This will prompt you for a name, which will be for your new Action Set. Name this “Blog Actions”, as this is where you can store all of the actions that you will regularly use on your blog.

Step 3

Click the folded page icon in your Actions Pane, which will prompt you for a name for your new action. You can also assign an action a function key, which will simply make it easier to access this action in the future. Once you press record, your every completed move is being logged by your action. You can hit the stop button at any time to stop recording. Just remember to press record again or you will end up with a half completed action and have to repeat your steps all over again.

Step 4

Once you’ve hit record, create a new layer and draw a rectangular marquee across the lower-middle of your layer. Fill this with black(#000000) and lower the opacity to somewhere between 70-80%.

Step 5

Grab your Type Tool with a relatively large and bold Slab Serif or Sans Serif font, and create your main title. Rename this layer “Title”.

Step 6

Press the Stop button in your actions pane and click the actions menu button in the upper right hand corner. Select Insert Stop… This will insert a stopping point in your action to give you or anyone else a chance to change something. In this case, it would be the actual text of the title font you just got done inserting. For things of this nature, where a change must be made by the user to successfully complete the rest of the action, make sure that the Allow Continue radio button is not checked and give a description of what the user needs to do before pressing play again.

Step 7

Press the Record button in your Actions Pane to resume your action. Right click your type layer and go to Blending Options. Change your Blend Mode to Soft Light.

Step 8

Click on Inner Shadow and give it a small sharp shadow, like the settings shown below.

Step 9

Depending on your background image, you may need a little brighter type for your title. If so, just duplicate the layer you just made. Change it’s Blend Mode to Normal and give it an Opacity of 50%.

As you can see, you have a nice little pressed lettering look for your title. Now we can move on to the next step.

Step 10

Create a new type layer. This time with a much smaller bold type. Something easy to read like a basic sans serif font. Lower the opacity on this layer to around 80%.

Step 11

Stop your action once again, and create another stop point to allow you, or someone else to edit the small description text.

Step 12

You can again hit record if there are other things would like to do with your action, but for this guide our action is completed. Now any user can easily create a title image from just a single graphic. The action will do the rest of the work for them. Remember that for any action you create for you or yourself to not merge layer or flatten your image. Unless of course you don’t want to be able to change anything after the action is played.

Here is what our action panel looks like at this point:

Here is our completed title image:

Grab This Action

The possibilities for improving your workflow with actions are abundant. We have made this particular action available for download if you’d like to use it in your own projects.

Content Jump

1. Make Subtle Use of Gradients
2. Add White Space
3. Stay On A Grid
4. Improve Your Typography
5. Have Clear and Effective Navigation
6. Use An Awesome and Useful Footer

Intro

The difference between good and great webdesign is relatively small. The average person may not be able to explain the tangible differences that make up great design, but they can usually spot a design they like. By examining some awesome sites, I’ll attempt to put my finger on some of the small details that make up the difference.

A little while back I wrote an article about the 4 Principles of Good Design for Websites, this article is somewhat of a continuation of those principles. In that article I went into detail about the important roles that contrast, repetition, alignment and proximity play in webdesign. This article will piggy back on those principles as I examine 6 ways you can take your webdesign from good to great.

This post is chock full of awesome examples. I made a conscience effort to only pick sites that were great all the way around.

1. Make Subtle Use of Gradients

I’m not sure if there is an effect that can be butchered and make your site look more amateurish than poor use of gradients. Nothing screams bad design quite like a rainbow gradient (well perhaps blinking text is of equal prowess). That being said, the use of subtle gradients will go a long way toward making your site look great. The key is using them sparingly within the flow of the design.

Gradient Meets Bokeh Effect

The Newism site features a colorful, but subtle gradient that is seamlessly mixed with a faint bokeh effect. It’s visually stunning. Just as a side note, if you are interested in recreating a bokeh effect in photoshop, be sure to check out Abduzeedo’s tutorial on it.

Subtle Gradients, Shadows and Textures… Oh My!

The guys at OnWired flat-out make awesome websites, so it stands to reason their personal site would be top notch. To go along with plenty of personality throughout, the design itself is spot-on. Check out the use of subtle gradients and shadows in the design. I also love the touch of grunge and texture that is sprinkled in.

2. Add White Space

The term white space is often misunderstood to literally mean white space. In terms of design it is more accurately described as the space between elements. To break it down even further here is how the folks at A List Apart define it.

“Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between major elements in a composition is “macro whitespace.” Micro whitespace, is—yes, you’ve guessed it—the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.

It cannot be understated just how important it is to let elements breathe in your design. This is probably the single biggest issue for young designers. It’s human nature to try to cram every design element into a small area, fortunately for webdesigners (despite every clients unrelenting belief) there is no such thing as a fold in webdesign, that’s what scroll bars are for… /* end rant */

Excellent Spacing & Subtle Line Breaks

Snook provides a comfy level of padding to break up all the post entries. Also notice the faint line breaks that provide separation, but are easy on the eyes and flow with the overall design.

Beautiful Minimalistic Approach

Made By Sofa features a beautiful minimalistic approach. The spacing is fluent, and they use an image with no background or clutter to speak loudly.

3. Stay On A Grid

The inspiration for grid based designs can best be attributed to newspapers, but if you look closer you can find grids in all kinds of things. From most websites to traffic grids.

The 960 grid and Blueprint are probably the two most popular grid frameworks. I personally love the 960 grid, it’s simple, light weight and a nice starting point. I design with it a lot of the time, but a grid just means that you have some rhyme and reason to your site elements. Alignment plays an intricate role in making your site look refined. Nothing in webdesign should be placed without purpose or alignment to another element.

Griding A Portfolio

Poccuo features their portfolio on their home page. They use a beautiful mix of a 3 column and 5 column look. It’s well spaced and visually appealing.

Columns Within A Design Blog

I love how Web Design Ledger presents their posts on their home page. The newest post is large and featured at the top, the next few are shown in a 3 column grid.

Lots of Equal Length Columns

Ecoki is a beautiful grid design layout. The 4 column, 2 row layout is obvious, but the slideshow/thumbnails and latest reviews are also on a grid.

4. Improve Your Typography

Typography is an artform that is obsessed on by most good designers. It is of prime importance when trying to bring your designs to the next level. Of course it plays an important role in readability, but it’s also quite important to design and mood.

Using Contrast To Direct Attention

SimpleBits does a wonderful job of varying contrasts to direct the viewer’s attention. In typography contrast can be altered through font choices, color variances, and size differential.

Nothing Says Typography Like Ampersand Signs

This site looks so nice and effortless, but you can tell a lot of thought and reason went into the whole process, and that’s especially evident with the typography. The spacing and font choices are flawless, and I’m enamored with the clever use of Baskerville on the ampersand signs.

5. Have Clear and Effective Navigation

Good navigation is so important in design. If a user can’t find what they are looking for quick enough, they are probably moving onto the next site. It’s something I’m very weary of, and I know that MyInkBlog could use some improvement on, and it should be drastically improved in the coming redesign.

Blog Navigation Via Categories

Far too often, blog navigation focuses on pages and leaves the categories as a secondary thought somewhere along the sidebar. Tutorial9 does a fantastic job of realizing users care much more about finding out where their photoshop tutorials are, than where their about us page is. Check out their flawless 2 level navigation with active category highlighting.

Effective Icon Hover Effect

Icons can definitely be hit or miss on websites. The web is filled with the remnants of this web 2.0 trend, but not all trends are completely bad. The reason web 2.0 got ugly was because of it’s overuse and amateur use. As with most things, when done properly it really can be quite effective. Carsonified displays a clever icon hover effect for it’s navigation. It’s simple and monochromatic and ties in flawlessly with the rest of the site design.

6. Use An Awesome and Useful Footer

When the web first started footers were tossed into the junk pile of useless things. They were minor, but necessary evils that needed to be displayed, but little thought went into the design of them. Now they’ve become more and more important to the overall design of a site. Don’t miss out on the opportunity to brand and complete your design through the use of a good footer.

Lots of Info & Credentials

The main purpose of a footer is to display necessary info about the site and copyright info. Brian Hoff adds more personality and interest to his through a 3 column look that displays everything from what he’s working on to books he recommends.

Search Functionality In A Footer?

Elliot Jay Stock’s site features an oversized search form in his footer. It’s definitely not a typical place for one, but I think it works for his site. He is also one of the many designers who have taken to featuring their tweets in the footer.

Final Thoughts

I’d love to hear your thoughts on the subject. What separates great design? What little things do you key on?

I know I say this often, but I really can’t believe that another month has already passed. This month the trail was an eclectic grouping that ranged from CSS3 to an SEO rant.

Articles

Tutorials

Compilations

Freebies

Featured Stuff

Having a good Content Management Systems (CMS) doesn’t mean you will be saved from all the possible security risks your site can face. WordPress is usually the leading choice for a publishing platform because it allows you to add security plugins and edit them for fixing loop holes and more. However, for that reason hackers and phishers often choose Wordpress sites for vulnerable attacks.

Hackers can gain access to your site through specific access points. In many cases just by displaying your Wordpress version information and error messages your site could be left vulnerable. For instance there are “minor” attacks when hackers use site scraping tools to copy your content, allowing them to duplicate it on their own site in order to steal your traffic, as well as obtaining the possibility of diminishing your Google Ranking.

Below we will review a few steps that you can take to stop your WordPress site from being taken over or flooded with malicious attacks. Please join the discussion by leaving a comment with your own tips along with your thoughts.

AntiVirus for WordPress

AntiVirus is exclusively for use with WordPress as a smart and effective solution to preventing any hostile exploits and spam being injected onto your blog. You will be able to monitor possible platform vulnerabilities, viruses, malicious links, worms, and more. You can also set it up so that it can send you important email notifications and whitelistings.

Updating WordPress

As simple and basic as this step may seem, a large portion of WordPress users forget to update their site on a regular basis. You don’t always need to upgrade to the latest version as soon as it’s released, in fact you should wait a while, so that you’re able to download a version that has most of the bugs fixed. If you don’t update you’re definitely taking some unwanted risks that could come back to hurt you in the long run. We recommend not letting your WordPress blog go past 1-2 versions old.

Forbidding Users Access to your Server

No one should have access to search your entire server. This could cause severe problems such as the pirating of content. Use this code:

<?php bloginfo ('home'); ?>

You can also Block WP- folders from being indexed by search engines by blocking them in your robots.txt file. Make sure you add the following in your code:

Disallow: /wp-* 

Securing Your wp-admin Folder

Individuals who intend on attacking can easily use bots for a forced attack that can guess the admin password until they eventually aquire the correct one and login. Here, in this section, you will find a few solutions to this possible issue.

You can prevent a security break-down within the wp-admin folder by limiting the IP addresses that can access it through an .htaccess file. To do this you’ll need to create a new text file and add the following:

order deny, allow
allow from 123.456.78 #Your IP Address
deny from all

Save this file and place inside your wp-admin folder for a stronger combat against unauthorized access to your site.

Turning Off Visitor Registrations

Once you install a new blog with WordPress it allows visitors to register for a guest account on your site, unless you choose not to. If you wish to build a community around your site then I could see how advantageous it would be, however, it’s best to keep registration turned off if possible, due to a majority of the latest exploits being done from within a WordPress account.

Mysterious Passwords

Your WordPress site can easily be hijacked if you use a password that’s too simple, very easy to remember, and repeats numbers or letters. Many users are so busy installing several security plugins, that they pay little or no attention to the importance of choosing a complex password. You can use a variety of tools that can test the strength of your password online. The most recommended would have to be Microsoft’s Password checker.

Backing-Up Your Database

Remember to always back up your site files and database because you never know what the next few moments may hold. It would be ideal if you could regularly back-up your MySQL database. You can do this by exporting your MySQL data in the form of a .sql file that you can store in an easy to access location. You can also download a plugin called WordPress Database Backup to automatically have your site back-up the neccessarry info to keep your site running in case of an emergency.

Further Reading

• Hardening WordPress
• 9 Best WordPress Security Plugins
• 16 Excellent Wordpress Security Plugins To Secure Your Blog
• 20 Wordpress Security Plug-ins And Tips To keep Hackers Away

This is the 1st part of a new series here on MyInkBlog. We’ll be asking top designers what design tools they use to help them complete their work. As a guy who loves to discover new apps and find new and easier ways to accomplish my job, I’m really looking forward to the insight that we receive. I must admit that this idea was partially the result of admiring Grace Smith’s “Show Me Your Dock Series.” So in honor of that, and the awesome work that she does, I’ve decided to have Grace bat leadoff in this series

About Grace Smith

Grace Smith is a talented blogger, designer and the owner of Postscript5. She was kind enough to take the time to share some of the tools she uses and some insight into why she’s chosen them. Check out her thoughtful responses below.

Browser

At the moment it would be Safari 4, however I’ve been testing out Google Chrome over the last few days (having downloaded the developer preview for OSX) and I think once it’s in Beta I will be switching. While I appreciate how useful Firefox can be, I switched to Safari because of the stability problems I was experiencing with Firefox, It was just one crash too many!

Code Editor

I’ve used both CSSEdit and Espresso but always come back to Coda. It integrates everything that I need; namely a code editor, css editor, preview pane, SSH Terminal, website management and an FTP client.

Mail Client

I run all my mail accounts through Google Apps as a desktop app using Fluid, with all my accounts streaming into a single inbox. Previously I used the native Mail app, however I switched to Google to better streamline my email and process.

Billing App

I was a Freshbooks user for several years but recently switched to Curdbee as I needed a simpler, more cost effective solution. Curdbee is an excellent service, offering the necessary functionality and features which suit my needs perfectly.

FTP Client

Coda, although I had been using Transmit for some time before getting into Coda. I do love it’s simplicity and functionality, a great standalone FTP app. I still make use of the ‘droplets’ which are great for recurring uploads.

Twitter App

I use Tweetie because of it’s speed and slick interface although I long for it to add the ability to create groups as that’s the feature I miss most since switching from Tweetdeck earlier this year.

RSS Reader

Google Reader
as a standalone app using Fluid and styled with the exquisite Helvetireader. It’s simply a beautiful and useful piece of kit.

Task Organizer

After longing for a super simple, ‘get your stuff done’ to-do list app, I knew my search was over once I found TaskPaper. No bloated complex software, just a fast, simple app that makes sure I keep up to date with my tasks.

Photo/Design Editor

Photoshop – I’ve been using it since the days of Photoshop 6 and can’t see myself usng any other app. It’s where every design I work on is created and polished.

Vector/Illustration Program

Admittedly I don’t use Illustrator all that often, but when I work on a logo or illustration, it’s my app of choice.

Final Thoughts

Feel free to add your tools of choice for any of the categories above. Also, I’d love to hear your suggestions for the categories I should add to the next designer’s toolbox series (I already have a couple of ideas).