Sand on Patio

Photoshop Tutorial – Creating a New Brush

There is a large variety of brushes available in Photoshop already, but it is still fun to create your own.  Which brushes you use when creating artwork largely depends on the type of artwork you wish to create.  For example, if you want your artwork to look futuristic you may choose smooth brushes with sharp edges.  If you are creating a sketch on canvas artwork in Photoshop, you will probably want to use brushes that have more texture including uneven edges and voids in the middle.  When you create a brush in Photoshop, you can design a brush that is uniquely yours.  There are several different methods you can use to create a brush.  Here is one of them.

Texture is an important element in a brush.  There is texture all around to take inspiration from.  Carpet, fur, and even an old sweater are some examples of places you can look to find texture.  Take a pictures of texture whenever you find something that interests you to use for projects like making brushes.  For this example I am going to use a picture I took of my back patio after my kids spilled sand all over it.  Sometimes messes can have perks!

Sand on Patio

Select the Clone Stamp Tool.

Clone Stamp Tool

Choose a clone brush that works best for the new brush you would like to create.  I used the Chalk 23 Pixels brush and used the slider to change the Master Diameter to the largest size possible (2500px).

Select a portion of you image with the clone tool.  Then open a new document with a white background.  Paste your cloned image into the new document.

Cloned Image

Desaturate your image to remove all color.  Desaturate can be found under Images>Adjustments in the top menu bar.

Desaturate

Now select Curves by going to Images>Adjustments>Curves.  The curves dialog box is used to adjust levels.  I am going to add contrast to my image by darkening the dark areas of the picture so they contrast more with the lighters area.  I do this by moving the dark point in the bottom left towards the center.  You can also move the white dot in the top right to the center to adjust the light area of the image.

Curve Dialog Box

This is the result of adjusting curves.

Adjusted Image

Crop the image you created to remove extra space around it.   Save your new brush by going to Edit>Define Brush Preset.  A window will appear in which you can name your brush.  Click OK.  You have now added a new brush to your library.

Name Your Brush

Lets see how this brush appears for selection and how it looks in action.

Grainy Brush

As you can see by the number 1401 under the brush,  this brush I created is HUGE!  I could have resized the brush before saving it for easy use, but that is really unnecessary because any brush can be scaled up or down to any size by sliding the Master Diameter slider. 

Grainy in Action

This texture is now ready for use on any project and in any color.

wp-themes-directory

Installing and Activating a WordPress Theme

Ever wonder how to install and activate a WordPress theme?  Here’s your answer.

[This tutorial applies to WordPress blogs running in a self-hosted environment, meaning that you’ve installed WordPress on a web host of your own.  It doesn’t apply to blogs hosted on free WordPress.com accounts.]

Installing a WordPress theme is very straightforward.  WordPress themes available for download from various places on the Internet are typically packaged in .zip files (i.e. theme-name.zip).  Installing a WordPress theme involves nothing more than unzipping the .zip file into the appropriate directory of your WordPress installation, and activating the theme from your WordPress administration console.

Structure of a WordPress Theme
In order for you to install your new WordPress theme correctly, you need to understand the basics of how the WordPress system interacts with themes.  A WordPress theme needs three essential files in order to work correctly with the WordPress administration:

·         An index.php file:  This file is the controller of a WordPress blog.  Most WordPress themes also have other PHP files that represent various sections of a WordPress page, but index.php is the only truly necessary PHP file.

·         A style.css file:  This file controls the look and layout of the WordPress-based website using style definitions.  It also contains the information that is used in the Manage Themes section of WordPress to display the theme name, version, author, and description

·         A “screenshot” image:  This image is used to create preview of the corresponding theme in the Manage Themes section of the WordPress administration. It can be any of the common web graphics files (png, jpg, gif), but it needs to be named screenshot.  For instance, screenshot.png, screenshot.jpg, or screenshot.gif.

If you’ve gotten your theme from a designer who knows what he’s doing, you don’t really need to worry about making sure the theme is set up correctly.  If you’re not sure, you might just want to double-check that you’ve got the basic files needed to install your theme.

WordPress Directory Structure

The WordPress directory structure contains three folders in the root directory:

·         wp-admin

·         wp-content

·         wp-includes

Under the wp-content folder there is a folder called themes.  Inside this folder is where you need to deposit the folder that contains your theme.  Here’s an example.  Say I’m installing a theme for a recipe blog.  The theme is called Recipe, and its folder structure looks like this:

recipe-blog/
            index.php
            style.css
            screenshot.png

This theme would normally be packaged in a .zip file.  To use the theme, I would need to unpackage the file, then upload it (probably using FTP) into my WordPress themes folder.  If I have WordPress installed on my web server under a directory called blog, my directory structure would look like this:
            /wordpress/wp-content/themes/recipe-blog/
                                                                                    index.php
                                                                                    style.css
                                                                                    screenshot.png

Activating a WordPress Theme
After I upload the theme to the correct directory, I can now go to my WordPress administration to activate it.  After logging in to the WordPress admin section, I go to Appearances->Themes.  I can see that my new theme is installed correctly and ready to be activated, because I can see it in under Available Themes on the Manage Themes page.

At this point, all I have to do is click on the Activate link associated with my new theme.  My new theme is now active on my WordPress blog.

recipe-blog-minima

Why You Should Use a Custom Blogger Template For Your Blog

A picture is worth a thousand words, they say.  Why is that?  Because the ability to quickly visualize the details in a graphic representation is a much more efficient way to process what’s being communicated.  Reading blogs, especially ones that are well-written, is a fulfilling way to spend time.  However, there are obvious advantages to mixing well-written advice, stories, or journal entries with a theme that has been designed to enhance the content on your blog.

Continue reading

Search Engine Optimization: Should I Use www For My Website or Not?

Have you ever found yourself providing links to affiliates or other link partners, stopping momentarily while you create your link URL to think, “Should I include the www. before my domain name, or should I leave that part off?  Does it even matter for search engine optimization?”  The short answer is yes, it does matter.   The long answer is a matter of consistency.  If you’re going to use the domain name without the Worldwide Web prefix, you need to be consistent.  The same thing applies if you want to market your domain name with www included.

Continue reading

Design Websites to Display Properly in Internet Explorer and Firefox

If you are a web designer, you can no longer just design websites to display correctly in Internet Explorer.  Although most internet users still use Internet Explorer, Firefox is on the rise.  To make sure your websites display correctly regardless of the browser people use you should test your site in both browsers.  Here are a couple of fixes for adjusting your CSS code so your website displays correctly in both IE and Firefox.

As you can see from these snippets of code, I have created a website that has a mainwrapper with a vertically repeating background.

CSS Code

Div Tags

This displays correctly in Internet Explorer, but the background does not display in Firefox. 

Internet Explorer
Internet Explorer – Displays Properly

Firefox
Firefox – Displays Incorrectly

The reason for the incorrect rendering by Firefox is because Firefox requires either a specified height or content to vertically stretch a div tag.  Although I do have two divs inside the mainwrapper which seems like content to me, Firefox still does not display the background.  I could add a specific height as a property to the mainwrapper tag, but I want the background to be dynamic and grow with the content on the page.  Luckily, the fix is simple.  Add overflow: hidden to the style for mainwrapper and magically the background appears.

Overflow Hidden

Firefox
Firefox – Displayed Correctly

This next template illustrates another difference between Firefox and IE.  As you can see, the horizontal spacing of the two inside sections is not consistent in the two browsers. 

 Firefox
Firefox

Internet Explorer
Internet Explorer

There’s a difference in the horizontal spacing between the two browsers because I added a margin-left property to the column floated to the left and a margin-right to the column that is floated to the right.  IE and Firefox both recognize these properties; however they sometimes display different amounts of space. 

Code with Margins

Div Tags

Instead, remove the margin properties from the tags and add padding to the contentwrapper tag.  As you can see, this little change made my web page display the same in both browsers.

Code with Padding

Internet Explorer
Internet Explorer – Displays Correctly

Firefox
Firefox – Displays Correctly

blogger

Blogger.com or WordPress: How They Compare

This article was written by Richard Robbins. 

Bloggers:  Should You Use Blogger.com or WordPress?

Blogger.com (also known as Blogspot) and WordPress are the two most commonly used blogging platforms today.  Blogger.com was a pioneer in the blogging industry, allowing users to set up accounts and blog for free beginning in 1999.  Blogger.com was purchased by Google in 2003, which enabled it to grow using Google’s resources.  Today, Blogger.com has an undisclosed number of millions of users blogging on their system.

 

 WordPress began in 2003 as the successor to another (now relatively unknown) blogging system.  It has since become the blog platform of choice for most blogging professionals.  There are currently over two million people who are active users of WordPress.com, and there are millions of others who have downloaded various versions of the WordPress code.

 

Continue reading

Adobe Photoshop Tutorial: Magic Wand Tool

The Magic Wand Tool allows you to select areas with consistent colors without tracing the outside of the area. Rather, you can control the amount of color variance allowed in the selection by adjusting the Tolerance of the Magic Wand.  This, along with other options is available in the Magic Wand menu bar.  Here are the options in order as they appear in the menu.

 Magic Wand Tool

Using Magic Wand
This image shows the Magic Wand being used to select the blue jersey.

There are four options for the type of selection you can choose.  The default option is New Selection.  This allows you to select a new area with the Magic Wand.  If you need to deselect a portion of the selected area, choose Subtract from Selection and draw around the area you want deselected.  Likewise, Add to Selection increases the selected area.  You can also add to your selection by pressing shift while selecting regardless of which option you have active.  Intersect with Selection allows you to draw two areas and the overlapping portion will be the selection area.  You can continue to draw as many overlapping shapes as you would like until you have the correct area selected.

 Selection Options

The next option is Tolerance.  This adjusts the color variance that will be added to the selection when clicking on an area.  A lower value selects colors more similar in color to the pixels clicked on; a higher number allows a broader range of colors.  Anti-alias smoothes the edges of the selection.  If selected, contiguous only allows the Magic Wand to select similar colors that are touching the area selected.  If not selected, similar colors in the Tolerance range will be selected anywhere in the image.  Sample All Layers allows you to select from all layers rather than just the currently selected layer.

 Magic Wand Menu

For more control over the edge of your selection, click on the Refine Edge button.  The Refine Edge button allows you to refine your selection and view your selection against a neutral background so you can more clearly see how your selection will look.  Select a portion of your image, and then click on this button.  By default when you choose this, everything outside of your selection will appear white so you can more clearly see what you have selected.  You can then use the sliders to adjust the selection area.  Make sure Preview is checked so you can see the results of your changes.

 Refine Edge

Radius controls the size of the area inside the selection boundary where the edge refinement occurs.  The higher the number the more contracted from the original selection area.  Contrast sharpens the edges of the selection.  The higher the Contrast number the more defined the edges will be.  Smooth controls irregularities in the selection boundary.  The higher the number, the more smoothed out the selection boundary will be.  Feathering the selection will create a faded transition from the selected area to the area outside the selection.  The higher the number, the larger the feathered area up to 250 pixels.  Contract/Expand enlarges or minimizes the selection boundary.  Positive numbers expand and negative numbers contract.  This tool in conjunction with others can help fix problems in your selection boundary.  For example, if some of the background is still visible around the edge of your selection, contract the boundary.  Below the sliders are five options that allow you to adjust how your selection is previewed with descriptions below that describe each option.

Adobe Photoshop Tutorial: Quick Selection Tool

The Quick Selection Tool is a relatively new tool in Photoshop that is fast and easy for selecting items.

Quick Selection Tool

After selecting this tool simply paint the area you want to select with the curser.  You can adjust the brush in the menu bar depending on the size and contrast of the object you wish to select.  You can change the diameter, hardness and spacing of the brush and even have the option of changing its angle and roundness.  If you need to change your brush size while making a selection, press the right bracket (]) to increase the size and the left bracket ([) to decrease it.

Quick Selection Menu 

There are three selection options.  The default option is to select a New Selection.  Once you have made an initial selection, the option automatically switches to Add to Selection to increase the selection area.  If you need to deselect a portion of the selected area, choose Subtract from Selection and paint on the area you wish to deselect.

Using Quick Selection

Sample All Layers allows you to select from all layers rather than just the currently selected layer.  Auto-Enhance automatically smoothes out the edges of the selection boundary.

For more control over the edge of your selection, click on the Refine Edge button.  The Refine Edge button allows you to refine your selection and view your selection against a neutral background so you can more clearly see how your selection will look.  Select a portion of your image, and then click on this button.  By default when you choose this, everything outside of your selection will appear white so you can more clearly see what you have selected.  You can then use the sliders to adjust the selection area.  Make sure Preview is checked so you can see the results of your changes. 

 Refine Edge

Radius controls the size of the area inside the selection boundary where the edge refinement occurs.  The higher the number the more contracted from the original selection area.  Contrast sharpens the edges of the selection.  The higher the Contrast number the more defined the edges will be.  Smooth controls irregularities in the selection boundary.  The higher the number, the more smoothed out the selection boundary will be.  Feathering the selection will create a faded transition from the selected area to the area outside the selection.  The higher the number, the larger the feathered area will be up to 250 pixels.  Contract/Expand enlarges or minimizes the selection boundary.  Positive numbers expand and negative numbers contract.  This tool in conjunction with others can help fix problems in your selection boundary.  For example, if some of the background is still visible around the edge of your selection, contract the boundary.  Below the sliders are five options that allow you to adjust how your selection is previewed with descriptions below that describe each option.

Adobe Photoshop Tutorial: The Lasso Tools

There are three lasso selection tools.  The first of these tools is the standard Lasso Tool.  This tool allows you to draw your selection area freehanded.  For more control select the Polygonal or Magnetic Lasso Tools.  The Polygonal Lasso allows you to draw straight lines to create a selection area in any shape.  Hold the Shift key down to draw 45 degree angles and the Alt Key to draw freehanded.  The Magnetic Lasso Tool is one of my favorites.  It works best if you are trying to select an object that contrasts well with its background.  Click on the edge of the object and move your curser around the outside of it.  The magnetic lasso will automatically create anchor points around the outside of the object.  You can manually add anchor points where necessary by clicking on a specific spot.  If your lasso takes the wrong path simply press delete to erase the previous anchor points, then redraw the lasso or manually add anchor points where you want them.

Lasso Tool
Here is a flower cut out with the Lasso Tool.

Polygonal Lasso

Here is a flower cut out with the Polygonal Lasso Tool.

Magnetic Lasso

Here is a flower cut out with the Magnetic Lasso Tool.

The Lasso Tool and Polygonal Lasso Tool have the same options available to them in their menu bars. There are four selection options.  They are New Selection, Add to Selection, Subtract from Selection, and Intersect with Selection.

Selection Options

 The default option is New Selection.  This means that if you draw with the lasso tool on your image, it will draw a new selection area.  If you need to deselect a portion of the selected area, choose Subtract from Selection and draw around the area you want deselected.  Likewise, Add to Selection increases the selected area.  You can also add to your selection by pressing shift while selecting regardless of which option you have active.  Intersect with Selection allows you to draw two areas and the overlapping portion will be the selection area.  You can continue to draw as many overlapping shapes as you would like until you have the correct area selected.

The next option on the menu bar is the Feather option.  Feathering the selection allows you to create faded edges around the selected area.  Say you decide that you would like to feather the selection by 20px and then draw a lasso on the area you want selected.  You will not see any changes to the image you selected.  You will not see the difference feathering makes until you do something with your selection.  If you move your selection or copy and paste your selection you will see the difference feathering makes.  Anti-alias smoothes the edges of the selection.

Feathered Selection

This flower was selected with a 20px feather.

The Refine Edge button allows you to refine your selection and view your selection against a neutral background so you can more clearly see how your selection will look.  Select a portion of your image, and then click on this button.  By default when you choose this, everything outside of your selection will appear white so you can more clearly see what you have selected.  You can then use the sliders to adjust the selection area.  Make sure Preview is checked so you can see the results of your changes. 

Refine Edge

Radius controls the size of the area inside the selection boundary where the edge refinement occurs.  The higher the number the more contracted from the original selection area.  Contrast sharpens the edges of the selection.  The higher the Contrast number the more defined the edges will be.  Smooth controls irregularities in the selection boundary.  The higher the number, the more smoothed out the selection boundary will be.  Feathering the selection will create a faded transition from the selected area to the area outside the selection.  The higher the number, the larger the feathered area will be up to 250 pixels.  Contract/Expand enlarges or minimizes the selection boundary.  Positive numbers expand and negative numbers contract.  This tool in conjunction with others can help fix problems in your selection boundary.  For example, if some of the background is still visible around the edge of your selection, contract the boundary.  Below the sliders are five options that allow you to adjust how your selection is previewed with descriptions below that describe each option.

The Magnetic Lasso Tool has the same options as the other two lasso tools along with some additions.  The first extra option is Width.  This option adjusts the amount of pixels the Magnetic Lasso tool considers for finding contrast. In other words, the Magnetic Lasso will only detect edges within a certain distance of the curser.  It is best to use a large number for areas that contrast greatly, and a low value for tight areas without as much contrast.  If you need to change the width while making a selection press the right bracket (]) to increase the width and the left bracket ([) to decrease it by 1 pixel.

Magnetic Lasso Menu

The contrast value is a percentage between 1 and 100.  This determines the lasso’s sensitivity to the edges.  A higher value only detects edges that contrast greatly from the rest of the image.  A lower value detects edges that do not contrast as much.

The frequency value is a number between 1 and 100 that determines how often points are placed as you move the cursor around the object. A higher number anchors the selection border more quickly.

The pen icon is for Stylus Pressure.  You only need to worry about this option if you are using a Stylus Tablet.

Adobe Photoshop Tutorial: The Marquee Tools

The first selection tool in the Tools Menu is the Marquee Tool.  There are four marquee shapes you can choose from.  To select a portion of an image with this tool click on the image and drag to create the size of the shape you want.  Once you have drawn an area with this tool, you can use the arrow keys on your keyboard to adjust the location of the marquee area before actually making the selection. 

Marquee Tools

To reposition a marquee while you are drawing it, click and drag to start drawing the marquee, keep the mouse button depressed then hold down the spacebar while continuing to drag.  You will see that this repositions the marquee.  Once the marquee is in the correct position, release the spacebar.  You can then continue to drag your mouse to change the size of the marquee.   Remember that you will only actually select objects that are in the layer(s) you currently have selected.

As with every tool in Photoshop, a tool bar for the Marquee Tool will appear at the top.  This tool bar allows for additional options.  Let’s go through this tool bar from left to right.  The first icon on the tool bar shows the marquee shape you have selected.  This is followed by four selection options.  They are New Selection, Add to Selection, Subtract from Selection, and Intersect with Selection. 

Selection Options

The default option is New Selection.  This means that if you have the rectangular marquee selected and click and draw on your image, it will draw a new marquee rectangle selection area.  If you need to deselect a portion of the selected area, choose Subtract from Selection and draw around the area you want deselected.  Likewise, Add to Selection increases the selected area.  You can also add to your selection by pressing shift while selecting regardless of which option you have active.  Intersect with Selection allows you to draw two areas and the overlapping portion will be the selection area.  You can continue to draw as many overlapping shapes as you would like until you have the correct area selected.  Use these tools in conjunction with each other to easily select portions of your image.

The next option of the menu bar is the Feather option.  Feathering the selection allows you to create faded edges around the selected area.  Say you decide that you would like to feather the selection by 20px and then draw the marquee on the area you want selected.  You may see that the shape of the selected area looks different (smaller and rounded corners if you are drawing with the rectangular marquee), but no changes will be made to your image.  You will not see the difference feathering makes until you do something with your selection.  If you move your selection or copy and paste your selection you will see the difference feathering makes.  Anti-alias smoothes the edges of the selection.

Rectangular Marquee
Rectangular Marquee without Feathering

Feathered Marquee
Rectangular Marquee with 20px Feathering

Feathered Image
Selection with 20px Feathering

Moving on to style you will see a dropdown menu.  Normal allows you to draw your marquee freely.  But, say you know that you want your selected area to be an exact size.  If you choose Fixed Size and enter the dimensions you want when you click on your image the correct marquee size will appear.  You can then move the marquee to the correct location on your image. 

Fixed Size

Fixed ratio allows you to draw your marquee at fixed proportions.  For example, you could enter the width as 1 and height as 2.  No matter how large or small you draw the marquee on your image, the height will always be two times the width.  Unlike when working with pixels, with ratios you can use numbers with decimals.  If you click on the two arrows between the height and width it will switch the numbers.

Fixed Ratio

The Refine Edge button allows you to refine your selection and view your selection against a neutral background so you can more clearly see how your selection will look.  Select a portion of your image, and then click on this button.  By default when you choose this, everything outside of your selection will appear white so you can more clearly see what you have selected.  You can then use the sliders to adjust the selection area.  Make sure Preview is checked so you can see the results of your changes. 

 Refine Edge

Radius controls the size of the area inside the selection boundary where the edge refinement occurs.  The higher the number the more contracted from the original selection area.  Contrast sharpens the edges of the selection.  The higher the Contrast number the more defined the edges will be.  Smooth controls irregularities in the selection boundary.  The higher the number, the more smoothed out the selection boundary will be.  Feathering the selection will create a faded transition from the selected area to the area outside the selection.  The higher the number, the larger the feathered area will be up to 250 pixels.  Contract/Expand enlarges or minimizes the selection boundary.  Positive numbers expand and negative numbers contract.  This tool in conjunction with others can help fix problems in your selection boundary.  For example, if some of the background is still visible around the edge of your selection, contract the boundary.  Below the sliders are five options that allow you to adjust how your selection is previewed with descriptions below that describe each option.