Adobe Photoshop Selection Tools

When I look back at when I first started using Photoshop I am amazed how long I used the program before learning how to really use many of the tools.  As someone who jumped into graphic design and taught myself how to use programs like Photoshop, I often did things “the hard way”.  As I become more familiar with Photoshop both exploring on my own and following tutorials, I learn more and more about ways to use tools. 

 

I created this compilation of tutorials about the selection tools to help new Photoshop users (and some long time users who may not fully understand these useful tools) understand how to manipulate these tools to work for them.

 

The selection tools are:

The Marquee Tools

The Lasso Tools

Quick Selection Tool

Magic Wand Tool

The Pen Tools

Extract

 

It is helpful to understand each one of these tools because different selection tools work best for different situations.  Before looking at each specific tutorial, here are a few notes that apply to all selection tools:

 

When making a selection, realize that sometimes it is easiest to select the background around the object you would like to select and then right-click and choose Select Inverse.

 

Most selection tools have a Refine Edge button in their menu bars that allow you to easily adjust the selection border for more advanced selection.

Getting Rid of Joomla! Comment Spammers

I recently downloaded and installed on my Joomla!-based web site (WebsiteTemplateDatabase.com) a Joomla! comment component that allows visitors to my site to make comments on articles I’ve posted.  The component even comes with an image verification code to keep automated spider spammers from going through my site and leaving their annoying trail of links to suspicious websites.  However, precautions be danged, the spammers still came.  Soon after I installed the comment component, I found that spam comments, presumably entered manually, were showing up on many of my site’s articles.

When I checked into how these spammers were finding me, I noticed that they were using Google searches for terminology used in the comments section.  Most specifically, they were searching for the term “powered by !joomlacomment“, which is found at the bottom of each articles where the component shows up.

To remedy the situation, I performed a Linux search from the components/com_comment/ directory for the file containing “Powered by !joomlacomment” by executing this Linux file search command:  find . | xargs grep ‘Poweredsl”.  The result showed me that the guilty section of code was in the insertPoweredBy() function located in the components/com_comment/joscomment/comment.class.php file.  I removed changed the return statement in that function to simply “return ‘’;  That should make it so that those irritating spammers won’t be able to find me so easily.  I may end up having to change other wording or the layout of the comment section to keep them away from my site.

In addition to making it more difficult for spammers to find my site, I also set the Autopublish comments setting to No.  That setting is located under the Security tab of the !Joomlacontent ->Content Settings page.  With that setting in place, at least the spammer comments won’t show up on my site automatically.

I hope this article is helpful for any of you who might need a little extra help staying ahead of that group of society intent on wrecking havoc on the Internet world.

picknewtemplate

Changing the Look of Your Blogger Site Using Templates

Changing the Look of Your Blogger Site Using Templates

When you set up a new Blogger site, you can select from among sixteen default different templates, the majority of which have more than one theme variation you can select.  When I first started blogging, I often tried two or three of the default templates before I settled on one that fit the theme of my site okay.  You can use one of the following methods to change your existing template.

Picking a New Blogger Default Template
After you set up your blog, you may decide that you don’t like the template so much, or you might just want to give it a fresh look.  There are a couple of ways you can change your template.  The easiest way is to simply switch to one of the other default templates provided by Blogger.  You can switch templates by going to Layout -> Pick New Template from your Blogger account dashboard.  You can pick a new template as simply as you selected your initial one.  All the information (posts, pictures, and videos) you have already placed on your blog will be retained.  Blogger’s system separates the actual information (your posts and media) presented on a blog from the way in which the information is presented – your blog’s theme.

When you change your template by choosing Pick New Template, Blogger’s system is intelligent enough to preserve the gadgets you currently have set up.  For instance, if you have added some gadgets using the Add a Gadget link on the Layout -> Page Elements page, those gadgets will be preserved in your new template design.  I’ll discuss later a method for changing your template design that requires more caution.

Editing Your Template’s XML Code
Another way that you can customize your template is by editing the blog’s template file.  You can access the template file by going to Layout -> Edit HTML.  Blogger would probably be more accurate naming the link “Edit XML”, since that’s what you’re actually editing.  What you’ll find in the template file are some variable definitions, some CSS style definitions, and finally the body of the blog page, which contains a bunch of XML tags that look something like this: 

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Header1′ locked=’false’ title=’Blogger Template Tester (Header)’ type=’Header’/>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

In order to effectively edit your template beyond simply changing fonts and colors in the variable definition section, you’ll need to know (or be willing to learn) some things about CSS and the Blogger XML schema.  It will likely take some studying of the existing XML setup and some experimenting to make the improvements you’re looking for.  As you make changes, you might want to keep a backup copy of your last working template so you don’t have to go back to work from the original template file if you mess something up.

Installing a Third-party Blogger Template
The third way to change your blog’s theme is to download and install a Blogger template created by a designer.  There are many free Blogger templates available for download all over the Internet.  WebsiteTemplateDatabase.com provides a variety from which you can choose.  With such a wide selection of free Blogger templates available, you should be able to find something that matches your style and the content of your blog.

To install a third-party Blogger template, save the template XML file to your computer.  Then, from the Layout -> Edit HTML page, click Browse…, and find the template file on your computer.  Then click Open to return to the Edit HTML page.  Click Upload to upload the new template.

Something to keep in mind if you are using a third-party blog template is that if you have added gadgets to your blog (e.g. Followers, Poll, Labels, etc.), you need to be careful when using a third-party template to avoid removing those gadgets.  If you download and install a template that doesn’t support your custom gadgets, they will be deleted when the new template is saved. 

If your new template does have gadget discrepancies, you will receive the following message when you click the Upload button.

Widgets are about to be deleted

Please confirm that the following widgets should be deleted. All the widgets’ configuration data will be lost.

 

The warning message will then list those gadgets that will be deleted if you proceed with uploading the new template.  To avoid losing your existing gadgets, you’ll need to find the XML tags that represent those gadgets in your current template, and merge those tags into the template you want to upload.  Doing so may be a little tricky.  You might be able to get some help from the original template designer.

 

Each of these three methods of changing your existing themes has advantages and disadvantages.  Hopefully this article has helped you understand the issues involved so you can make an informed decision.  Happy blogging!

bloggeruploadimage

How to Use Blogger.com as an Image Host

Most users of Blogger.com think of it as simply a blogging platform.  However, it can also be used to host images that can be referenced from anywhere on the Internet.  Here’s how it works.

When you create a new blog post on your Blogger account, you have access to a menu from which you can upload images.  Since picture illustrations are important parts of blogs, most bloggers have used this feature.  You have a pretty good amount of freedom in adding images to your blog.  With your Google account, which your Blogger account shares, you have access to up to 1 GB of picture storage.

If you want to use your Blogger account as an image host, create a new blog post and upload the image(s) that you want to host on the Blogger server.   If you don’t want to actually publish the post (you probably won’t if you’re simply using the post as a way to upload images), you can choose to save it as a draft instead.  The fact that Blogger doesn’t provide an option for uploading images outside of creating a blog post indicates that Blogger’s intent isn’t to have its system used as an image host.  However, there are some advantages to using Blogger’s setup for hosting images as compared to some of the other free image hosting services.  The main advantage, especially for those whose images will be viewed excessively, is that there is no bandwidth limitation.

Accessing Your Image

After you have uploaded an image through a blog post, you can access it by right-clicking the image and choosing copy link location.  If you then visit the copied link location url into another browser window, you can see where the image is stored. 

To access the direct URL of your stored image that you’ll need to use for hotlinking, you need to right-click on the image from the previous step (Copy Link Location) and select  Copy Image Location.  You’ll notice that there is a slight difference between the two.  The first step produced a url similar to this:  http://4.bp.blogspot.com/_lrZgwwEYjhk/SoCUsz9-WNI/AAAAAAAAADI/ec0DnmwowMg/s1600-h/blogger-edithtml.jpg

The Copy Image Location step you performed afterward creates a URL that removes the –h part of the s1600-h directory to create this:  http://4.bp.blogspot.com/_lrZgwwEYjhk/SoCUsz9-WNI/AAAAAAAAADI/ec0DnmwowMg/s1600/blogger-edithtml.jpg.

Now that you have a URL that shows the exact location of your image, you can reference that URL wherever you want to use the image.

Adobe Photoshop CS3 Default Keyboard Shortcuts

Adobe® Photoshop® CS3 Keyboard Shortcuts

The following keyboard shortcuts are the defaults for Adobe Photoshop CS3 for Microsoft Windows XP.  For Mac users, substitute the Command key for Ctrl and the Option key for Alt.  This list was obtained by going to Edit->Keyboard Shortcuts, and then clicking on the Summarize… button to save the shortcuts in an html file.  Adobe automatically generated shortcut summary file includes all available commands, including those that don’t have shortcuts by default.  All commands that don’t have have shortcuts have been removed from this list.  Adobe also provides a list of the default keyboard shortcuts from the Help menu.

 

Application Menus

Command Shortcut
 
File
  New… Ctrl+N
  Open… Ctrl+O
  Browse… Alt+Ctrl+O
Shift+Ctrl+O
  Open As… Alt+Shift+Ctrl+O
  Close Ctrl+W
  Close All Alt+Ctrl+W
  Close and Go To Bridge… Shift+Ctrl+W
  Save Ctrl+S
  Save As… Shift+Ctrl+S
Alt+Ctrl+S
  Save for Web & Devices… Alt+Shift+Ctrl+S
  File Info… Alt+Shift+Ctrl+I
  Page Setup… Shift+Ctrl+P
  Print… Ctrl+P
  Print One Copy Alt+Shift+Ctrl+P
  Exit Ctrl+Q
Edit
  Undo/Redo Ctrl+Z
  Step Forward Shift+Ctrl+Z
  Step Backward Alt+Ctrl+Z
  Fade… Shift+Ctrl+F
  Cut Ctrl+X
F2
  Copy Ctrl+C
F3
  Copy Merged Shift+Ctrl+C
  Paste Ctrl+V
F4
  Paste Into Shift+Ctrl+V
  Fill… Shift+F5
  Free Transform Ctrl+T
  Transform>
    Again Shift+Ctrl+T
  Color Settings… Shift+Ctrl+K
  Keyboard Shortcuts… Alt+Shift+Ctrl+K
  Menus… Alt+Shift+Ctrl+M
  Preferences>
    General… Ctrl+K
Image
  Adjustments>
    Levels… Ctrl+L
    Auto Levels Shift+Ctrl+L
    Auto Contrast Alt+Shift+Ctrl+L
    Auto Color Shift+Ctrl+B
    Curves… Ctrl+M
    Color Balance… Ctrl+B
    Black & White… Alt+Shift+Ctrl+B
    Hue/Saturation… Ctrl+U
    Desaturate Shift+Ctrl+U
    Invert Ctrl+I
  Image Size… Alt+Ctrl+I
  Canvas Size… Alt+Ctrl+C
Layer
  New>
    Layer… Shift+Ctrl+N
    Layer via Copy Ctrl+J
    Layer via Cut Shift+Ctrl+J
  Create/Release Clipping Mask Alt+Ctrl+G
  Group Layers Ctrl+G
  Ungroup Layers Shift+Ctrl+G
  Arrange>
    Bring to Front Shift+Ctrl+]
    Bring Forward Ctrl+]
    Send Backward Ctrl+[
    Send to Back Shift+Ctrl+[
  Merge Layers Ctrl+E
  Merge Visible Shift+Ctrl+E
Select
  All Ctrl+A
  Deselect Ctrl+D
  Reselect Shift+Ctrl+D
  Inverse Shift+Ctrl+I
Shift+F7
  All Layers Alt+Ctrl+A
  Refine Edge… Alt+Ctrl+R
  Modify>
    Feather… Alt+Ctrl+D
Shift+F6
Filter
  Last Filter Ctrl+F
  Extract… Alt+Ctrl+X
  Filter Gallery…
  Liquify… Shift+Ctrl+X
  Pattern Maker… Alt+Shift+Ctrl+X
  Vanishing Point… Alt+Ctrl+V
Analysis
  Record Measurements Shift+Ctrl+M
View
  Proof Colors Ctrl+Y
  Gamut Warning Shift+Ctrl+Y
  Zoom In Ctrl++
Ctrl+=
  Zoom Out Ctrl+-
  Fit on Screen Ctrl+0
  Actual Pixels Alt+Ctrl+0
  Extras Ctrl+H
  Show>
    Target Path Shift+Ctrl+H
    Grid Ctrl+’
    Guides Ctrl+;
  Rulers Ctrl+R
  Snap Shift+Ctrl+;
  Lock Guides Alt+Ctrl+;
Window
  Actions Alt+F9
F9
  Brushes F5
  Color F6
  Info F8
  Layers F7
Help
  Photoshop Help F1

 

Palette Menus

Command Shortcut
 
History
  Step Forward Shift+Ctrl+Z
  Step Backward Alt+Ctrl+Z
Layers
  New Layer… Shift+Ctrl+N
  Create/Release Clipping Mask Alt+Ctrl+G
  Merge Layers Ctrl+E
  Merge Visible Shift+Ctrl+E
Measurement Log
  Record Measurements Shift+Ctrl+M

 

Tools

  Tools   Shortcut
  Move Tool   V
  Rectangular Marquee Tool   M
  Elliptical Marquee Tool   M
  Lasso Tool   L
  Polygonal Lasso Tool   L
  Magnetic Lasso Tool   L
  Quick Selection Tool   W
  Magic Wand Tool   W
  Crop Tool   C
  Slice Tool   K
  Slice Select Tool   K
  Spot Healing Brush Tool   J
  Healing Brush Tool   J
  Patch Tool   J
  Red Eye Tool   J
  Brush Tool   B
  Pencil Tool   B
  Color Replacement Tool   B
  Clone Stamp Tool   S
  Pattern Stamp Tool   S
  History Brush Tool   Y
  Art History Brush Tool   Y
  Eraser Tool   E
  Background Eraser Tool   E
  Magic Eraser Tool   E
  Gradient Tool   G
  Paint Bucket Tool   G
  Blur Tool   R
  Sharpen Tool   R
  Smudge Tool   R
  Dodge Tool   O
  Burn Tool   O
  Sponge Tool   O
  Pen Tool   P
  Freeform Pen Tool   P
  Horizontal Type Tool   T
  Vertical Type Tool   T
  Horizontal Type Mask Tool   T
  Vertical Type Mask Tool   T
  Path Selection Tool   A
  Direct Selection Tool   A
  Rectangle Tool   U
  Rounded Rectangle Tool   U
  Ellipse Tool   U
  Polygon Tool   U
  Line Tool   U
  Custom Shape Tool   U
  Notes Tool   N
  Audio Annotation Tool   N
  Eyedropper Tool   I
  Color Sampler Tool   I
  Ruler Tool   I
  Count Tool   I
  Hand Tool   H
  Zoom Tool   Z
  Default Foreground/Background Colors   D
  Switch Foreground/Background Colors   X
  Toggle Standard/Quick Mask Modes   Q
  Toggle Screen Modes   F
  Toggle Preserve Transparency   /
  Decrease Brush Size   [
  Increase Brush Size   ]
  Decrease Brush Hardness   {
  Increase Brush Hardness   }
  Previous Brush   ,
  Next Brush   .
  First Brush   <
  Last Brush   >
edit-keyboardshortcuts

Using and Customizing Photoshop Keyboard Shortcuts

[The examples used in this article were written using Photoshop with Windows XP.  For Mac computers, substitute Command for Ctrl and Option for Alt]

One of the marks of a truly expert user of any software program is the ability to keep his or her hands off the mouse once in awhile when navigating menus and toolbars.  Photoshop provides keyboard shortcuts for most of its functions:   saving a file – Ctrl-S, creating a new file Ctrl-N, toggling the palette windows off and on – TAB, selecting the Move tool – V, etc. Not only can users take advantage of the built-in default keyboard shortcuts, they can customize the keyboard shortcuts to adapt the setup to their own needs.

Keyboard shortcuts are typically created through some combination of the Ctrl, Shift, and Alt keys along with a letter.  Some shortcuts, the most common being the ones for the standard toolbar, involve simply pressing a letter on the keyboard.  To select the Paint Bucket Tool, you’d press G.  Other shortcuts are much more complex.  To pull up the Save For Web and Devices window (which allows you to save a graphic optimized in a smaller file size so that it loads on a web page more quickly), you have to press Alt -Shift- Ctrl –S all together.  Web designers use this command often, since they’re constantly saving their images optimized for the web.  That shortcut can take some getting used to.  Don’t worry, though.  You can change it.  Here’s how.

Under the Photoshop Edit menu, there is an option for Keyboard Shortcuts.  [Oddly enough, the shortcut for Keyboard Shortcuts is one of the complicated ones: Alt-Shift-Ctrl-K.  You can change this one too if you’d like.]

To change the Save For Web and Devices shortcut, find that command under the File menu section.  Then click on the line corresponding to the shortcut.   You’ll notice that the keystroke section for the shortcut becomes editable.   At this point, rather than typing out the letters (C-t-r-l, for instance) representing the keyboard shortcut you want to use, you simply press the keys you’d like to use as a shortcut.  In our example, since we use the Save For Web and Devices tool so often, we want to change the shortcut for this command so that it’s not so complicated to use.  I’m going to choose Ctrl+. (the Ctrl key and the period) as my new shortcut.

Because there are so many tools and functions in Photoshop, it can be hard to find a simpler shortcut for than what is already used as the default.  Most of the easier shortcuts are already in use for other commands.  If you can’t find a shortcut that works well for you that isn’t already in use, you might consider overriding an existing keyboard shortcut that you don’t use or don’t expect to use very often.  You may have to experiment a little to see what works best for you.  Each time you try to enter a shortcut that is already in use, you are notified by Photoshop so that you can consider whether to try out a different shortcut.

You can create a new keyboard shortcut set based upon Photoshop’s default set by clicking the middle icon of the three next to the Set dropdown box.  By creating a new set of shortcuts and making your shortcut changes on the copy, you can reset your shortcuts to the default later.

Like a pilot in the cockpit of an airplane (sometimes Photoshop can feel the same), you should feel comfortable maneuvering around Photoshop’s toolbars, palettes, menus.  Understanding, using, and customizing the default shortcuts to suit your taste will help you work more efficiently.

noedudomain

Why Can’t I Register a .edu Domain Name?

This article was written by Richard Robbins 

Registering domain names is generally pretty easy if you’re looking for something that ends in .com, .net, .org, or one of the many other domain suffixes available out there.  However, it you want to register a .edu domain, you’ll have to do more than just find a name nobody else has yet.  If you’ve tried to register a domain ending in .edu through one of the rank and file internet registrars, you’re likely quite aware that they’re not so freely available.

 

Domains ending in .edu must be registered through Educause, a non-profit organization that was set up to promote higher education and information technology.  The United States Department of Commerce awarded a contract to Educause in 2001 that makes them the governor of handing out .edu names for now.  Setting up a website on a .edu domain requires you to have a postsecondary institution that has been accredited by one of the US Department of Education’s recognized accrediting agencies.

Regarding .edu domains and search engine optimization, it’s noteworthy that Google gives special consideration (more weight) to links that come from .edu domains.  Knowing that the requirements (an accredited college or university) to obtain a .edu domain are significantly more stringent than those (a valid credit card and billing address) for purchasing a .com, .net, or .org domain, it makes sense that links to your website from an educational site carry more weight than those from a more watered-down content base.

 

By the way, in case you’re wondering, the same principle applies to .gov domains as well, which have to be registered through dotgov.gov.

 

bloggeraddgadget

Blogger Trick: How to Make a Post Sticky on Your Blogger Account

Blogs are great formats for sharing information.  When you create a blog entry, the typical blog setups, Blogger and WordPress, put your most recent entry at the top.  The older entries are moved down the page.  After awhile, the older blog entries typically move off the main page of a blog, and they’re archived.  The older posts can still be accessed, but they’re definitely not as prominent for readers or search engines as the most recent post.

Sometimes you want to keep a piece of information in one place, normally at the top of your home page.  Often you’ll want to keep a summary of your blog or an important notice at the top of each page on your blog.  This is referred to as keeping the information sticky.  The “sticky” post or block of information doesn’t move from its position on your blog.  Here’s how to do it.

Blog posts are included on a Blogger account using what’s referred to by Blogger as a widget.  A widget is a piece of code included in a Blogger template that tells the Blogger system to include some text or some kind of functionality. If you use one of the default templates from Blogger, you will find this section of code in the XML file for your blog setup, which can be accessed by going to Layout->Edit HTML from your Blogger control panel

      <div id=’main-wrapper’>

        <b:section class=’main’ id=’main’ showaddelement=’no’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

      </div>

 

These lines of XML tell the Blogger system to include your recent blog posts in the main section of the page for your blog.  When you are creating posts, there is really no way to convey to the widget that you want a particular post to stay at the top of the page.  Instead, you have to use a different widget, separate from the main “Blog Posts” widget described above.

 

For a blog I recently created, I wanted to have such a setup – a sticky post that would keep an overview of my blog at the on top of every page.   I accomplished this by using a Blogger widget that actually doesn’t deal with what’s normally considered a “post” at all.  Blogger has a widget called “Text” that suits the purpose well.  If you click on any of the “Add a Gadget” links from the Layout page of your Blogger control panel, you can select the Text widget and enter the information you want to show up in your “sticky post”.  After you click Save, you are returned to the Layout page, where you can drag and drop the new widget so that it appears above your blog entries.

Click Add a Gadget and choose the Text gadget.

After adding the gadget, you can drag and drop it to a location above the Blog Posts section.

bloggernavleft

Blogger Trick: Hide that Gaudy Blogger Navigation Bar using navbar-iframe Style

You can spot the rank and file Blogspot blogger from a mile away when you come across a site that has this…

…across the top of the toolbar.  By default, Blogger places its own navigation bar at the top of each of the blogs it hosts.  The problem with this generic navigation bar is that it looks somewhat awkward, and it just doesn’t fit with most themes on most web sites, and most bloggers would rather not have its imposing presence glaring from the top of their carefully constructed masterpiece.

So how do we remove the nuisance navigation menu?  Your first response might be, “Just find the place in the template XML file where that particular “widget” is added, and remove it.  The problem is Blogger secretly puts the navigation bar into your blog outside of what can be edited using widgets.

If your Blogspot blog still has one of these clumsy headers, you can find out who the culprit is by viewing the source for your blog.  You will notice a line that looks like this:

<iframe src=”http://www.blogger.com/navbar.g? […] marginwidth=”0″ marginheight=”0″ scrolling=”no” frameborder=”0″ height=”30px” width=”100%” id=”navbar-iframe” title=”Blogger Navigation and Search”></iframe>

 

You notice that Blogger magically inserted an iframe at the top of your blog.  To get rid of the navigation bar, you need to get rid of the iframe.  Well, you can see that the iframe uses a style called navbar-iframe.  To turn off the navigation bar, we can simply change the style definition for navbar-iframe.  Changing the style definition is something that can in fact be done from the Blogger Layout->Edit HTML menu.

There are a few different ways you can tell the navigation bar iframe not to display itself.  Among the most popular is to place this style definition in your Blogger template XML file:

#navbar-iframe{ display:none !important;}
 

This style definition does two things.  First, it tells the iframe tag not to display itself.  Second, it tells the browser (!important) that this style doesn’t want to be overridden by another definition.  You may have also noticed when you viewed the source for your offending blog that there was already a style defined for  navbar-iframe:

<style type=”text/css”>#navbar-iframe { display:block }

</style>

 

This style needs to be trumped by our don’t-display-the-navigation-bar style, so we use the !important attribute.

If you paste the CSS style above into your XML template file (put it with the rest of the style definitions), save the updated template, and refresh your blog, you’ll notice the navigation bar is gone.

One thing to consider if you’re building a Blogger template without the navigation bar is that it might be handy for the bloggers using your template to have a quick way to edit their particular blog.  A good way to accommodate this is to include an Edit link that takes the user to his Blogger dashboard.