1 } Press and hold the back or forward buttons in the browser to see a list of pages you’ve been on, then select from that list to jump to a page rather than hitting the back or forward button repeatedly.

2 } F5 reloads/refreshes the page. Much easier than groping for where they’ve moved the reload button to this time with your mouse! (And a fun key to pound upon – easy to reach!)

3 } CTRL-F5 forces the cache to be emptied and the page loaded entirely afresh.

4 } CTRL-clicking a link will open that link in a new tab.

5 } CTRL-NumberKey will open the tab corresponding to that number.

6 } CTRL-Tab will move through the tabs sequentially. CTRL-Shift-Tab moves you backwards through them.

7 } Similarly, CTRL-Page-Down moves you forward through the tabs, and CTRL-Page-Up moves backwards through them.

8 } CTRL-W will close the current tab

9 } CTRL-T opens a new tab

10 } CTRL-N opens a new window entirely

11 } Still new to many people are the basic keyboard shortcuts for undo, cut, copy, paste, select all, bold and italic. So, here they are:

Undo – CTRL-Z
Cut – CTRL-X
Copy – CTRL-C
Paste – CTRL-V
Select All – CTRL-A
Bold Selected Text – CTRL-B
Italicize Selected Text – CTRL-I

12 } Clicking at the beginning of where you’d like to make a selection (or end!) and then holding down the Shift key and clicking at “the other end” will select everything between those clicks for you.

13 } The “End” key takes you to the end of a line. The “Home” key will take you to the beginning of a line. CTRL-End goes to the end of the document, while CTRL-Home goes to the top of it.

14 } Holding the Shift key and hitting “End” selects from where you are to the end of the line. Shift-Home does the same but from where you are to the beginning of the line. CTRL-Shift-End selects everything from where you are to the end of the document, and CTRL-Shift-Home selects everything from where you are to the top.

15 } Firefox’s Firebug and Chrome’s Inspect Element tools will allow you to edit HTML and CSS elements live in the browser and see immediately what the results will look like. Once you have the code working the way you like it, copy what you’ve come up with and paste it into your actual web programming software or CMS templates.

16 } If you set the CSS settings for an image or other object to position:relative; then you can move in negative directions using the margin settings and employ the z-index for layering/overlapping things. You also can watch the position of the image move to where you want it by double-clicking on the setting and hitting the up and down arrows to sequence through numerically on the setting you’ve double-clicked upon.
(See the video below this article for a demo)

17 } Chrome has an add-on called Pendule that adds many very useful functions to Chrome and are great additions to the capabilities of the Inspect Element tool.

18 } Chrome’s Inspect Element tool, when arrived at via right-clicking on a spot on your page and selecting “Inspect Element”,  will zap you right to the section of HTML where that element’s code exists, so you don’t have to first open the editor and then use the magnifying glass (like Firebug’s selector tool) to get to the element. Currently in Firefox, the right-click on an element and selecting “Inspect Element” brings up a differently formatted viewer, where you have to click the HTML or Style buttons to see all the info for that element. However, selecting “Inspect Element in Firebug” performs the same feature as Chrome does.

19 } Both Chrome and Firebug have a very powerful selector tool that helps you find where in the HTML your code is sitting. Additionally, clicking on a DIV or any other element in the code will expose its CSS settings for you to play with or add to in the right-hand column.

20 } Both Chrome’s Inspect Element tools and Firefox’s Firebug will open their toolbox when pressing the F12 key. They also respond with “Inspect Element” tools when pressing CTRL-Shift-I.

21 } Both Chrome and Firefox will allow you to view the browser window full-screen using the F11 key. This removes the tabs, bookmarks and other toolbars, the URL window and all menu items. The Firebug and Inspect Element tools remain! The above-mentioned CTRL keyboard shortcuts still work to move through the tabs or close them, and CTRL-clicking a link still opens the link in a new tab.

22 } WordPress and several other CMS platforms having built-in editors often have a full-screen option that further empties the clutter out of your way for writing or coding. WP has this for both their visual and HTML raw code editors. Talk about uninterrupted focus! The WordPress HTML editor will allow you to insert a link and an image or media item, but that’s about it. The Visual editor has bold, italics, ordered/unordered lists, block-quote, insert media and  link make/break, but that’s it (though I’ve installed Syntax Highlighter Evolved and the sister Syntax Highlighter TinyMCE Buttons, and the PRE and CODE buttons appear even in this sparse editor!) Again, the CTRL-key combo shortcuts still work for navigating through your tabs, so you don’t have to leave this environment to switch to the page after saving your code or writing to view the results on a refreshed (F5) page.

Getting your writing done in the HTML editor in WordPress and a few others is cleaner code as hitting the return key does not insert “ ” place holders between paragraphs – just auto-generated paragraph tags. Clean!

(EXTRA: Many people don’t realize that in WordPress the HTML editor will insert <p>paragraph enclosures</p> around paragraphs written there – oh, yes it does! Check out your page’s source! But it can and usually will figure out when you’ve placed code in there and it doesn’t do that to your code.)

23 } ALT-left-arrow will take you back to a previous page, while ALT-right-arrow will take you forward one page. Same as hitting the back or forward buttons, but faster than a mouse can do if you’re typing already.

24 } Shift-Enter will often insert a soft-return via a “break” <br /> tag rather than a full </p> paragraph closure with a new <p> paragraph on the next line. Makes for tighter, truly single-spaced lines of text or other elements when that is what is needed or desired.

This
is
an
example (hitting Shift-Enter)

This is a new paragraph (hitting Enter)

25 } Sometimes viewing the raw source code for a page is the best way – especially if you use find/search on the page. So, for the final ones, you get a two-fer: CTRL-U brings up the source code, and CTRL-F brings up the Find search box.

That’s enough to keep you busy for a while! Use the shortcuts often and they will become new habits that can really save you time and wrist-agony in the long run!

Here is a video that demonstrates the keyboard arrow keys trick in Firebug and in Chrome’s “Inspect Element” tools:

Best watched full-screen at 720p, either from here or at YouTube.

Have fun!

Terry

Thanks to WordPress automatically adding new CSS classes of its own to the navigation structure since WP3.0, color-indicated “breadcrumb” navigation is now possible, not only via the navigation bar, but using widget menu links or even links within an article! Dynamic Navigation Link Coloration is easy, now!

Here are the new classes we’re getting to play with in the navigation now:

li.current-menu-item a { }
li.current_page_item a { }
li.current_page_ancestor a { }
li.current_page_parent a { }
li.current-post-ancestor a { }
li.current-post-parent a { }
li.current-menu-ancestor a { }
li.current-menu-parent a { }
li.menu-item-object-category a { }
li.menu-item-object-post a { }
li.menu-item-object-page a { }
li.menu-item-type-taxonomy a { }

Note that some of the above use underscores, and others use hyphens.

“Parent” usually indicates that a parent had been assigned when creating the page, while it refers to the category when referring to a post. It gets pretty hairy – when selecting a post from a category archive menu item, the resulting page displays “current-post-ancestor” “current-menu-parent” AND “current-post-parent” as that menu item’s new classes, each presenting a different opportunity for coloring that category-archive menu item’s link! (I present how it is done with category archive links in the video.)

“current-menu-ancestor” is more to do with drop-down menus (sub-menus), indicating all of the higher menu item(s) in the hierarchy. “current-menu-parent” is the immediately higher menu item in a sub-menu, mostly useful with two or more levels cascading sub-menu items.

Make your code affect only the first element using the greater-than “>” sign.

I first read about WordPress adding these new classes at this site: http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/

But, frankly, it took me a while to comprehend what on earth the author was driving at (and how to actually USE that information!)

Here we have a video that explains some things, and I’ve included example code below.

And the Addendum #1 recorded almost immediately after watching the first one:

The order of items is important, as they “cascade”. It is important to always remember that CSS ALWAYS reads from top-to-bottom on both the HTML page and in your CSS definitions, sequentially taking in each of your design items one after the next, with ones lower on the page superseding higher ones. Thus, the initial “fallback” items are at the top. On the web page itself, the same rule holds – it reads from top-to-bottom, so you always have to find relevant “selectors” that come BEFORE the class, ID or element that you want to ultimately affect.

And here are the code examples. (The videos cover how to get the best selectors for your theme.)

/* Table of Contents */
/*-------------------------------------------------------------*/
/* Navigation Background Color */
/* Default colors for all navigation bar links */
/* Current Page Ancestor - the parent page's link on the nav bar */
/* Current Page Item */
/* Sub-menu Current Menu Item */
/* Sub-Menu Current Page Item */
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
/* Highlight Main Blog Posts Link on Single Pages */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* Navigation Background Color */
 .yourBestSelectors(NavBar) {background:white !important; }
/*-------------------------------------------------------------*/
/* Default colors for all navigation bar links */
 .yourBestSelectors ul li a { color:gray !important; font-weight:bold !important; }
 .yourBestSelectors ul li a:hover {color:red !important; }
 .yourBestSelectors ul li a:active {color:blue !important;}
 .yourBestSelectors ul.sub-menu li a { color:green !important; font-weight:bold !important; }
 .yourBestSelectors ul.sub-menu li a:hover { color:red !important; }
 .yourBestSelectors ul.sub-menu li a:active { color:blue !important; }
/*-------------------------------------------------------------*/
/* Current Page Ancestor - the parent page's link on the nav bar */
 .yourBestSelectors ul li.current_page_ancestor a {color:orange !important; }
/*-------------------------------------------------------------*/
/* Current Page Item */
 .yourBestSelectors ul li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Sub-menu Current Menu Item */
 .yourBestSelectors ul.sub-menu li.current-menu-item a {color:gray !important; }
/*-------------------------------------------------------------*/
/* Sub-Menu Current Page Item */
 .yourBestSelectors ul.sub-menu li.current_page_item a {color:yellow !important; }
/*-------------------------------------------------------------*/
/* Highlight Category Article Posts Link on Single Pages (but not Blog Posts link) */
.yourBestSelectors ul li.menu-item-1905 > a {color:#1a91a1;}
/*-------------------------------------------------------------*/
/* Highlight Main Blog Posts Link on Single Pages */
.yourBestSelectors ul li.current_page_parent.menu-item-1820 a {color:#1a91a1; font-weight:bold;}

Those last two examples are handy when landing on a page that is arrived at via a widget menu item or an on-page link reference. Naturally, the menu-item-## will change from theme-to-theme. Analyze your page source to get that info.

(The videos also cover using Firefox’s Firebug, or alternatively Chrome’s and other’s “Inspect Element” right-click menu item, which work very similarly. The videos additionally expose the fact that using Child Themes are not for the rich and famous only. Anyone can – and should – edit their theme’s CSS styles this way.)

Sometimes you have to force the color changes using the !important command inserted before the semi-colon of each color. (That’s an exclamation mark before the word “important” there.) Especially in cases where the definitions were applied to an ID rather than a class, you’ll need that !important item to override its settings. Basically, whenever something that should be working isn’t working, try this, but also look for missing commas, semicolons, or selectors and/or elements like I managed to miss LIVE on both videos at one point or another…

Note the ancestor code is at the top of this CSS definitions section, followed by the page item and category menu items. You’ll sometimes find that matters a lot.

So, how do you determine what .yourBestSelectors are? That can be tricky! For that, view the videos!

I will tell you that targeting IDs as opposed to classes is easier, since you don’t have to worry about the context. By definition, an ID is only supposed to appear once on a page, so it is always unique, whereas a class is permitted to be used in multiple locations on the same page, so it needs some information accompanying it to give the reference as to which instance you are using it in.

Also, you can combine a couple of items that will have the same settings using commas. Be aware, however, that things like two ID-defined items may both need the ID, as in a situation I just encountered:

Didn’t work correctly:

#block-22 ul.special-nav li.current-menu-item, li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

Worked correctly:

#block-22 ul.special-nav li.current-menu-item,
#block-22 ul.special-nav li.current_page_item a {
    color:lightBlue !important; text-weight:normal;
    }

This example needed to override the current_page_item setting that affected other nav-bars, but couldn’t affect this special one. If I didn’t include the second #block-22, it would override the default use of the class. Who would have guessed! Both classes are legit for the same menu item! Well, that’s why they call them “Cascading Style Sheets”!

Here is the code that was included in the child theme for the twenty-eleven theme mentioned in the video:

/*
 Theme Name: Twenty Eleven Child Test
 Theme URI: http://terrybritton.com
 Description: Child theme for the Twenty Eleven theme
 Author: Terry Leigh Britton
 Author URI: http: //terrybritton.com
 Template: twentyeleven
 Version: 1.0
 */
@import url("../twentyeleven/style.css");
li.current-menu-ancestor > a, li.current_page_item > a, li.current_page_ancestor > a {
 color: #1A91A1 !important;
 }
 li.current-menu-item > a {
 color: orange !important;
 }
 li.current-post-ancestor, li.current-menu-parent, li.current-post-parent a {
 color: lightBlue !important;
 }

The “Early Morning” Child Theme for the Thematic parent theme by cozmoslabs.com can be found here:
http://www.cozmoslabs.com/

To make life easier on yourself, if you have a theme that supports adding custom classes to your individual blocks , one thing you should do first is name your navigation bar or widgetized menu with a custom name and assign it an allOneWord custom css class under the block’s config. Headway by Headwaythemes.com makes that quite easy to accomplish. (That’s my affiliate link, if you want to purchase it through me!) I probably am going to have a review here about Headway soon.

I really enjoyed this webcast – well, truthfully, because they have validated most of the things I’ve been telling my own clients for about a year now! Please watch this and let me know how you liked the content and ideas! Be sure to view this full screen – the “Full Screen” button is the tiny icon in the lower left corner.

This was inspired by a friend’s need to convert several color photographs to
black and white for printing in their non-profit organization’s plain-paper newsletter, and also by the excellent book Mastering Black and White Digital Photography by Michael Freeman.
(ISBN 1-57990-707-5).

Below I’ve included the download link for the fr’ee “Color-To-B&W Pick Six” action
that converts a color image to black and white using several Photoshop techniques.

It is quite useful for quickly applying the six basic methods for
creating a Black and White image for use in printing applications.

This is a video taken directly from an excellent PDF found at http://www.thelightsrightstudio.com/tutorials-pdf.htm where a couple of techniques using a saturation mask are discussed: pulling back saturation in an image where only one channel was over-exposed (thus clipped or “blown out”) and a second technique to add saturation through the saturation mask to an image already possessing strongly saturated regions that would be over-done if the hue-saturation adjustment layer were applied overall.

This technique obtains its saturation mask from an HSB channel using a filter found on the first of the “Extras” disks that comes with the Adobe CS installation disks (and a similarly working plugin can be found online as well, that works on flattened duplicates only).

With Lewis Carroll being in my mind, as well as Dr. Seuss, several years ago in 2003, I wrote my little “Color Rhyme” below hoping to assist my students. I hope you enjoy it, and feel free to share it! (This is the latest version.)

The Color Rhyme
(Starring Cyan, Magenta, Yellow, Red, Green and Blue!)

By Terry Leigh Britton

Way back in 2005, rutt posted the best summation of how colors work as light I’ve ever seen, at DigitalGrin.com.

Rather than force you over there to read that post, I am replicating it right here, as it required a few edits for clarity.

“In order to understand the relationship of LAB, RGB, and CMYK, we have to understand that the colors are actually defined in terms of one another.

1. Red is a primary in light.
2. Cyan is the pigment opponent of red. It is defined as the pigment that reflects green and blue perfectly but no red at all. So in light, cyan is composed of equal parts green and blue, but no red.
3. Green is a primary in light.
4. Magenta is the pigment opponent of green. It is defined as the pigment that reflects red and blue equally, but no green at all. So in light, magenta is composed of equal parts red and blue, but no green at all.
5. Blue is a primary in light.
6. Yellow is the pigment opponent of blue. It is defined as the pigment that reflects red and green equally, but no blue at all. So in light, yellow is composed of equal parts red and green, but no blue at all.

Given these definitions, we can see why the pairs green, magenta and blue, yellow are called opponents. There can be no green at all where there is magenta, by definition. Shine a green light on a magenta surface and you see black; nothing is reflected. Magenta is defined in terms of what it doesn’t have, namely green.

This is an open-letter to a co-worker that I thought might make a nice warm-up to the full-blown Color Science and Photoshop LAB Mode article that is upcoming. Enjoy and watch for the article!

(Join the newsletter to be notified when I release those big things – this Color Theory one as well as an Actions tutorial video series and a full-on L*a*b series of videos are forthcoming!)

———————————————————————————->>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Dear Libby,

The other day I mentioned colors used in the
L*a*b color mode and which were opposites.

Naturally, being an ART student, you countered me (a former graphic arts college
professor, yet!) in my definition of what opposite colors were. Well, you were right…
historically speaking at least. I didn’t have time to go into it then,
recognizing it as a near universal problem when addressing color science to
those trained in the traditional ways that Art schools portray the issue.

Check this article at Wikipedia to understand what I’m referring to!

I’m busy working on a series of articles and videos I’ll release here soon on using the LAB mode for improving images (or L*A*B mode as some prefer to write it, myself included!)

A friend, Fred Vaughan, has agreed to allow me to use his beautiful photographs taken in Colorado and elsewhere in the western U.S. as my subjects.

Below is a sample done using just some fairly simple curves – all work being performed in the L*A*B color space!

By increasing color contrast (not merely by increasing saturation), we can bring out the natural coloration that the light presented to our eyes, and restore that which is lost by the static interpretation of the camera lens.

Before (Click image for full-screen versions – you can load both into separate tabs to A/B compare them):

And after having the curves shown beneath the image applied (Click image for full-screen version):

Note how the vibrancy of the full daylight is restored from the above version where the camera had “flattened out” the color’s dynamic range.

Watch this space for some nice full tutorials soon! But in the meantime, please try some L*A*B mode moves on your own!

I’ve used this desktop background for years! Over at http://www.hutchcolor.com/Images_and_targets.html, they’ve given public access to download many of their print-specific and monitor calibration-specific targets, images and tools.

One that is a standout is their desktop background, called “CMS 30 128.JPG” (36 K – RGB) (I cannot simply provide a link to the image download due to their own restrictions [which I honor], so go to the link above and get it!)

It looks like this (but is not this – go download it at the above link):

Install it as a desktop background and “tile” it, and it will provide a perfect, even gray, non-distracting background for your color editing work in Photoshop.

HutchColor is a family run business by the Hutcheson family. Check out all their Free and Cool featured stuff, of course, but please do take notice of the great Services and Tools they have that keep their business such a vital service to the printing and imaging industries.

I have no affiliation with them – those links are not affiliate links. I just think this company rocks and has done so for a long time. They’ve been doing this stuff for us for years, so kudos to them!

I mentioned a very prolific poster at DigitalGrin.com naming himself “rutt” (I believe John is his real name). He is a follower, as I am, of Dan Margulis. rutt has offered up his own “DanMargulisPortrait.atn” — a Photoshop action — in the thread  of the Chapter 16 of the Photoshop Lab Color book discussion thread on page 12 (!) of the thread posts. That chapter was the final chapter in Dan’s excellent book, and gave a neat “recipe” for optimizing portraits and any face shots you might have. Rutt’s photoshop action automates the process by stepping you through that same recipe’s moves.

The above is his link to the action from that thread. I’ve also put up a safety backup link on my Amazon S3 server – “backup of DanMargulisPortrait.atn“, mostly in response to the fact that this link has died in the past!

As that link is pretty buried in there (I mean, page 12 – yikes!), I wanted to create at least a couple back-links pointing to the post  so Google might find it easier!

Read the thread and you will see some pretty nice results demonstrated there from using this technique!

That’s all – I really just wanted to share this with you quickly! Enjoy!

So… I’m reading this great tutorial by rutt over at Dgrin (Digital Grin, folks!) called “B&W Conversion Workflow“, and I’m reading through it and see he has included a little Photoshop Action set. As rutt puts it:

“I have an action which aides to to getting to this point. Pick it up here.”

Brief and to the point.

So… I go and download this thing and put it in my Photoshop Actions folder, and load it into my actions pallette with Photoshop running to try it out it on a color photo.

And, lo and behold, this baby not only contains rutt’s two little actions, it also possesses a complete “realization” by Robin L. Holden, Sr. of Greg Gorman and Mac Holbert’s quite innovative B&W conversion action (… as described in the only PDF that exists in Greg’s “Learn” section — titled “Black and White Conversion Tutorial” — find that PDF at http://www.gormanphotography.com/gorman.html under the “Learn” section.)

BTW – That’s THE Greg Gorman – one of the most amazing B&W photographers of all time presenting a how-to tutorial at his website on building a Photoshop Action to be used to create B&W shots from color ones!!!

And Who is this Mac Holbert, you ask? Go look at his stellar website, “Powered by Light” (http://www.rmacholbert.com/).

Well, well! Another one of the greats in B&W photography!

Interesting collaboration to produce a Photoshop Action, eh? Especially one converting color photos to black and white ones. I’d qualify these two as being pretty “picky” when it comes to quality assessments of B&W from Color conversions!

That rutt includes this “realization” action along with his own technique is a very generous offer. His own and the Gorman/Holbert techniques BOTH produce very nice results, and leave the adjustment layers there for finer tweaking after the actions are run.

I suggest you take a look at rutt’s post and at the PDF at gormanphotography.com, download the action set, and give both approaches a try! (Here’s an alternate download link at my Amazon S3 server in case that link above breaks in the future: B&W Action DeLuxe!

I just created this video after a bit of trial and error (and research!) that demonstrates how to set up:

CamStudio 2.6 Beta (official download link)

so that the audio and video stay in synchronization throughout the length of the video.
(Or download the Most Stable Camstudio 2.0 release)
Getting CamStudio to synchronize the video to the audio requires that
the “Playback Rate” in Video Options divides evenly into 1000 milliseconds,
with the result being placed in the entry that goes in the box above it, “Capture Frames Every”. This must be a whole number (no fractions).

This basically means that you have five options for playback rate/frames per second
(as CamStudio does not allow fractional entries in the “Capture Frames Every” box).

You must use, therefore, 40 milliseconds with 25 frames/sec, or
50 milliseconds with 20 frames/sec, or 100 milliseconds with 10 frames per second,
or, if you are a mad scientist, 20 milliseconds with 50 frames/sec or 25 milliseconds with 40 frames/sec.
The first two settings mentioned are plenty adequate for 90% of applications, though.

Any other settings will cause a lag to develop in the audio that will get worse and worse as time passes.

OK, I live to show people how to get the most out of Photoshop.

I taught at the college level three semesters deep on Photoshop alone!
However, I realize not everyone is into the same journey as I am, and would
simply like to get some results from their own photographs they’ve taken with their digital camera!

There are plenty of Photoshop actions out there…

(do a Google search for “Free Photoshop Actions Download”),

as well as Photoshop Filters…

(do another Google Search for “Free Photoshop Filters Download”),

but maybe you don’t even own a copy of Photoshop. After all, it is rather
expensive! I still use Photoshop CS for everything at home and to make my
free actions and tutorials, though admittedly, at work we have CS4 installed.

There is a solution, and it is from the
remarkable optikVerve Labs, home of the FREE

VirtualPhotographer Filter plugin

for Photoshop CS4 and EARLIER.

(or Photoshop Elements, or Corel PhotoPaint, or IrfanView,
or PaintShop Pro, or any other program that can use Photoshop .8bf plugins).

But more importantly for those not owning Photoshop,
they are also the creators of the ALSO FREE software called

VirtualStudio

which includes not only the VirtualPhotographer plugin, but additionally
works with any and all plugins that you can find using a Google search for free plugins.
It can be installed on Windows 7, Vista 32-bit, Windows XP, 2000, ME or ’98 operating systems!!! WOW!!!