Making a simple font available on a website is a simple matter of adding a line like this at the head or your CSS file (using Arimo as an example):

@import url(http://fonts.googleapis.com/css?family=Arimo);

Google’s website makes it easy to generate the needed code for any number of fonts and styles. And that’s where a little more knowledge is required.

To use the normal style of the font, your CSS just has to assign it to a rule, like this:

font-family: 20px Arimo, sans-serif;

Notice that I’ve included the browser’s default san-serif face as a backup, in case there is something wrong with Google’s servers. At least the user will see a readable version of your site.

And getting to the italic version of the font is straight forward, too, just use:

font-style: italic;

Now you need to be a little more careful for any of the “fancier” available faces, such as the different weights that Exo comes in (100, 200, 300, 400, 500, 600, 700, 800, 900). Obviously simply using:

font-style: bold;

won’t do it alone. The “trick” is to use the font-weight property, like this:

font-weight: 400;

or:

font-weight: 700;

to get at the various font weights any font face may have available (assuming you’ve loaded them all back in the @import step). For font faces with different weights of italics, just combine the two.

To be sure you’re getting the font face you want in the situation you want it, your CSS file will have to be sure to define all the situations in your design:

strong,
b {
font-family: “Lora”, serif;
font-weight: 700;
}

p em {
font-family: “Lora”, serif;
font-style: italic;
}

That’s pretty much it. If you have any techniques to add, please add them in the comments.

The decision on the platform (WordPress) and the framework (Headway) having been made, I did some research on a good portfolio system and didn’t take long to find that NextGen Gallery would more than do the trick. It is very powerful and adaptable, towering above the competition.

Finding a client proofing system wasn’t so easy. Many photographers use services such as PhotoDeck, PhotoShelter, SmugMug Pro and Zenfolio, which means the market for WordPress client proofing systems is small. What I found were ProofBuddy (free for Lite and $150 for Pro), Photography Orders ($200), and Photo Video Store ($83). Each had their strong points and each would handle the chore, but in the end I picked ProofBuddy. I’m using the Lite version 2.0 now, but intend to upgrade to Pro when version 2.1 is released.

I had two main requirements for the client proofing system: it had to be easy for inexperienced clients to use and it had to be adaptable enough to be styled to match the rest of the site. With the blog, portfolio and proofing areas all running together, they needed to look like a unified whole, not three independent parts. ProofBuddy’s theme system fit the bill for adaptability – the CSS was exposed and there were template files for tweaking the HTML and PHP as needed.

While the proofing area is not flashy, it has all the pieces needed for a client to easily view their proofs and order the images they want in the sizes they need. The client gets automatic emails confirming the order and on any status updates. I get emails for the orders and can manage multiple clients easily from the administrative interface. There are options for me to offer discount coupons and the Pro version will allow me to sell photo packages.

ProofBuddy connects easily to PayPal as its only payment system, which is fine with me. Most of my work is local and clients pay me directly, anyway. Others may need the more variety payment systems offered by the other options.

In the end, I’m pleased with the results. My customizations are pretty well isolated from Headway, NextGEN Gallery and ProofBuddy so that updates to those key systems won’t require much design (or redesign) effort. Take a look at the Bob Rockefeller Photography site and see how it all came out.

The most well known of these frameworks are probably Thesis, Genesis and Headway. All of them are powerful and each are used by a great number of professionally done sites. But they are not the same. I have experience with Genesis and Headway and would like to describe how they are the same and how they are different.

The Same

Both Genesis and Headway provide these features in common:

• Advance control for Search Engine Optimization (SEO)
• Personal and Developer licenses
• Complete flexibility of design using HTML, PHP and CSS
• Well structured code (especially well organized CSS classes)
• Available child themes that are ready to go out of the box or that can be modified and customized as needed
• Available custom widgets
• Excellent support forums
• A community of professional developers available for hire
• Online documentation

Different

And they are different in these ways:

• Extras in the developer license – Genesis gives you all their themes, those they have now and any that are developed; Headway provides special developer tutorial videos
• Updates – Genesis provides updates free for life, Headway requires a yearly subscription
• Design approach – Genesis is text based, Headway is visually based

Text vs. Visual

It is the last of the differences that is by far the greatest differentiator between these two powerful theme frameworks. Developing in Genesis is like programming – you grab your favorite text editor (mine is Coda) and make the modifications and adjustments you want. Headway shares a lot in common with the web platform Squarespace, but is based on WordPress. While you always have the option to break out the text editor and dive head first into the HTML, PHP and CSS code, the primary intention is that the bulk of your development efforts will be spent in the Visual Editor.

The Headway Visual Editor allows a designer to start from scratch and design a site using drag and drop techniques to place the building blocks of the site (the header, content, widget area, footer and such) and then simply click on the options to set the style of the elements used (fonts, colors, alignment, headings, link hovers, borders and so on). Or you can start with a child theme and modify that with the same approach.

The Visual Editor allows a lot of control, but not all of the control. Each block or element can only be modified in the Visual Editor using the tools Headway has created in that environment. If you want a header title to have a graphic background, for example, you can do that in the Visual Editor.

Headway Version 3.0

For the comparison in this article, I have discussed the just released version 3 of the Headway framework. The basic concept of Headway has not changed – it wants to be a visual design environment. Version 3 has just picked up where version 2 left off and provided more power in the Visual Editor. But version 3 is still a work in progress and does not yet include all the features of version 2. They are coming.

Notably, version 3 has no upgrade path for web sites from version 2. That, too is coming.

New with version 3 is the licensing and pricing model. Gone is the lifetime support; now its a yearly renewal. Lucky for me I got a developer’s license before the release of version 3 so I am grandfathered in for support for life.

Drag-and-Drop vs. Code

I’m not a big fan of the way Headway version 3 stores CSS in the WordPress database instead of in text files that can be easily edited in Coda. And I’ve been a somewhat vocal critic of the organization and user interface of the Visual Editor. The good news, at least for me, is that you can do all your layout work (which can be very tedious in pure text) in the Visual Editor and then do your design work (CSS) in a text editor – a tip I got from Headway Expert.

There’s more for me to learn since I’ve been using Genesis, and liking it, for a while now. But I started work on a new web site for my photography work and decided to use Headway together with Gallery+ and ProofBuddy. So far so good and it has let me really get down into the HTML and CSS behind the scenes. I’m doing most of the work using Espresso version 2 as a change of pace from Coda and a way to compare those two strong development tools.

So I may have a more in-depth blog post about Headway and Espresso when that project is complete.

One of those ways is to use the LensAlign system from Michael Tapes Design. I have that system and I guess I should just say that I don’t use it. For me, it’s just too big a hassle getting it all set up and aligned to the camera. Not that it doesn’t work or it’s not accurate, because I believe that it is.

So my lenses have ended up unadjusted in the settings of my camera. And the LensAlign sits in its box on the shelf.

On Twitter I started seeing tweets about something called the Focus Pyramid from Allure Multimedia. The Focus Pyramid is much simpler in both design and use compared to the LensAlign. For one thing, the Focus Pyramid is made out of cardboard that you fold up into a pyramid yourself!

To use it, you just put it on a flat surface, aim your camera at it, and shoot some frames to identify where the focus point of your combination is. Give that lens a little + or a little — in the focus adjustment menus of your camera, and take another shot to confirm focus at the center of the target. They have a video to show you how it works.

The wildest thing? It cost just $9.99 as its introductory price. I couldn’t pass it up, at that price, and ordered one.

It works as advertised and takes just a few minutes to get a lens set up for your camera. All my lenses have been checked and adjusted (it just so happens that they all needed some about of + correction). I need to take more pictures to prove this all out, but the one’s I’ve shot so far have been focused right on the first shot at the widest lens apertures.

Now you surely know that a $9.99 system can’t be “just the same as” a $79.95 system. I suspect that the Focus Pyramid is less accurate because it is made of flexible cardboard and doesn’t have any system to be sure that it is, in fact, level and square to your camera’s focal plane. But it worked fine for my lenses. I don’t have any lenses with maximum apertures greater than f/2.8, so there could be trouble with f/1.4 or f/1.2 lenses, I suppose.

Anyway, for $9.99, you can’t lose much by trying one.

When I wrote that article, I thought there were a few key things missing for photographers:

Version 2.0 has closed the gap somewhat by adding:

And as extras, we now have:

RadioPopper PX Receiver

Different than some photographers, my style of flash photography benefits from TTL control of the off camera flashes. I know many stick to manual control, but TTL works for what I do. And so I want a TTL based system that does not depend on line-of-sight or the “right” ambient light conditions.

I am using the RadioPopper PX system with my Nikon speedlights (SB-900s) and used them, before my switch to Nikon, with Canon speedlites (580 EXs). They work very well and provide all of the native Nikon (i-TTL) or Canon (E-TTL) system features because they work by intercepting the pre-flash signals, translating them into radio signals, transmitting those signals to the receiver and then decoding the radio signals back into light. Here is a past article of mine about the RapioPopper PX system for Canon.

The main reason I chose the RadioPopper PX system for my Canon flashes was due to the RF interference problems the PocketWizard ControlTL system has with Canon flash (which is not true of their PocketWizard Plus II or MultiMAX systems). Now that I’m using Nikon flashes, the PocketWizard ControlTL system is again an option as there is no such interference problem. So I wanted to document my research comparing the two systems for Nikon flashes. I don’t have the PocketWizards, so that information is based on online research.

PocketWizard MiniTT1

A key difference in the systems is that the PocketWizards use their own flash control “language” called ControlTL (Control The Light). They work by taking the camera’s TLL signal from the camera’s hot shoe and converting that to ControlTL, transmitting that to the receiver and then sending commands to the flash through the flash’s hot shoe. Either a MiniTT1 or a FlexTT5 can be the transmitter while only the FlexTT5 can be a receiver.

As best I can tell, there are no radio interference problems with the Nikon flashes. That’s good because, for me, that was the no-go problem with using the PocketWizard system with Canon flashes.

PocketWizard FlexTT5

Because PocketWizard uses ControlTL to control the remote flashes, there is not a one-to-one correspondence between Nikon i-TTL commands and ControlTL commands. In practice that means:

ControlTL Can Do Some Things i-TTL Can’t

• HyperSync—allows studio flash and some hot shoe flashes to sync at faster than x-sync speeds and up to 1/8000 second.
• Simple hot shoe connections—no need for the special brackets the RadioPoppers use to line up with the flash control sensor on the speedlight.
• Work without an on camera flash controller—no need for an SU-800 or a speedlight.
• Change with firmware revisions—both the MiniTT1 and the FlexTT5 can have firmware updates (to correct bugs or to add features) made using your computer and the USB port on the devices.

i-TTL Can Do Some Things ControlTL Can’t

• Separate exposure compensation and flash exposure compensation—Nikon’s i-TTL system let’s you control one separately from the other.
• Use the SB-900 light patterns—using the Center or Even light patterns available with the SB-900 will casue exposure errors using PocketWizards.
• Work in mirror up mode—ControlTL just won’t.
• Allow flash repeat mode—ControlTL just won’t.
• Mix radio and pre-flash—RadioPoppers don’t interfere with the pre-flash as PocketWizard does.
• Control flash zones from the camera menu—you’ll need a PocketWizard AC3 Zone Controller for that.
• Future “proof”—PocketWizard firmware may have to be updated for future flash and cameras.

PocketWizard AC9

Of course, PocketWizard’s upgradable firmware means that its abilities can expand with revisions.

PocketWizard also offers matching radio controls for studio strobes that allow the strobe power to be controlled from the camera (although not in TTL):

• AC9 AlienBees Adapter
• PowerST4 for Elinchrom RX
• PowerMC2 for Einstein E640 Flash

So, will I be selling my RadioPopper gear and buying PocketWizard equipment? Maybe. But probably not right now. I’d like to see if RadioPopper will make another firmware upgrade to allow more of i-TTL’s features into ControlTL. Or even surpass them.

Laura points out that many follow the advice of Bruce Fraser and Jeff Schewe in their book Real World Image Sharpening and apply sharpening in three stages: Capture, Creative and Output. Capture sharpening is used to offset the inherent blurring effects of digital capture devices such as cameras and scanners. Creative sharpening lets the image adjuster make overall, or more commonly localized, sharpening changes. The last step, output sharpening, is done at output and should take into account the output medium, the output device, as well as the intended viewing distance.

The RAW Fine Tuning Adjustment Brick

Capture Sharpening

These concepts apply equally to any image adjustment software. It is the execution that is different. Let’s start at the beginning of the process with capture sharpening. Aperture’s capture sharpening is done in the RAW Fine Tuning adjustment brick.

You’ll see the two control sliders. Sharpening (how much of a sharpening effect should be applied) and Edges (what in the image should be considered an edge and be sharpened). A setting of 0 Sharpening creates no sharpening while a setting of 1 provides the maximum effect. For Edges a setting of 0 means nothing should be considered an edge and 1 means almost everything is an edge and should be sharpened.

Something to note here is that Aperture is very gentle in its application of sharpening in general. And this is especially true of RAW Fine Tuning sharpening. Its a very subtle effect. Also true is that sharpening effects are best viewed at 100%—so use the loupe or the Zoom To Actual Size commend in the View menu.

Because capture sharpening is meant to offset the softening effect of the image capture device, one set of sharpening parameters will be “right” for any given device. Aperture lets you set those parameters as defaults for each device independently by using the Save As Camera Default command under the gear menu of the RAW Fine Tuning adjustment brick.

Creative Sharpening

The Edge Sharpen Adjustment Brick

First a comment. Aperture version 3 offers two adjustment bricks for creative sharpening—Edge Sharpen and Sharpen. The Sharpen brick is left over from earlier versions for compatibility, but I advise against using it because the Edge Sharpen brick is so much better and more powerful. Forget there is a Sharpen brick.

The Edge Sharpen brick offers three control sliders. Again there is the Sharpening slider as well as the Edge slider. Both work the same way as the matching sliders do in the RAW Fine Tuning brick. But now there is the added slider for Falloff (the amount of sharpening done on the second and third of Aperture’s three pass sharpening technique). A setting of 0 Falloff means that no sharpening is applied during the second and third sharpening passes while a setting of 1 means that 100% of the first pass sharpening effect is applied on the second pass and 100% of the amount of the second pass is applied in the third. This is pretty clever because a setting on 0.5 means that 50% of the first pass sharpening effect is applied on the second pass and 50% of the amount of the second pass is applied in the third. Said another way, the third pass would use 25% of the first pass effect.

Output Sharpening

Printers and paper will both cause a slight blurring of the image on output . Also, images are meant to be viewed a different distances; you’d rarely expect someone to look at a 30″ x 40″ print up close, but a 3″ x 4″ web image will be seen from just a foot or two. Therefore some sharpening is often needed at this stage.

The Image Adjustment Brick of the Print Dialog

Aperture has an Image Adjustment brick in the print dialog box to control print sharpening. Unfortunately it does not have sharpening controls in its export controls.

For printing the sliders change names to Amount (just like the Sharpening slider elsewhere) and Radius (the distance, in pixels, that Aperture uses to evaluate sharpness). Frankly, it makes no sense to me that the print sharpening controls should be named differently and have different effects than in the Edge Sharpen adjustment brick.

Here a setting of 0 for Radius means there will be no sharpening while a setting of say, 3 would mean that sharpening would be applied up to 3 pixels away from an edge. If you want to judge the sharpening effect on screen, use the loupe tool next to the Amount and Radius sliders.

If you want to apply sharpening for exporting files formats such as JPEG or PNG, you’ll need to get the free export plug-in BorderFX. It, too, has Amount and Radius sliders.

In General

Sharpening is a very subjective adjustment, and double so for capture and creative sharpening. So you’ll have to apply the effects to your own taste an creative vision. But a good thing to remember is that less is often more for sharpening. Don’t over do it. And Aperture will help with that as all of its controls, but especially its RAW Fine Tuning sharpening, are subtle.

Here’s a couple of simple (and ugly) shots to show you what I mean. All of them were shot with my Nikon D300s and one SB-900 at 1/125 second and f/5.6. The off camera flash is just to the right of the camera, at the same height and the same distance from the subject.

On Camera SB-900. Exposure is “OK.”

Off Camera SB-900 Triggered By The Master SB-900 On Camera. Underexposed by about 1 EV.

Off Camera SB-900 Triggered By The Master SB-900 On Camera. +1 EV Exposure Compensation On The Camera. Exposure is “OK.”

As long as the flash is on camera and is the light source for exposure, the exposure is “OK” with 0 EV exposure and 0 EV flash compensation. Using the on camera flash as only the master to trigger the off camera SB-900, the exposure is about 1 EV under. Dialing in +1 EV exposure compensation on the camera gets us back to the exposure provided by the on camera flash at 0 EV compensation.

Now why don’t we hear anything about that from the famous CLS flash instructors? I’m looking at you, Joe McNally. :)

Nikon D300s DSLR

The first Canon I owned was a 350D and I really didn’t like the controls and the small size of the body. Sticking with it, I later upgraded to a Canon 30D which I liked much better. And then came a 50D and finally a 7D (which is a wonderful camera). Along the way came lenses and even the fabulous Canon EF 70–200 f/2.8L IS. So I was pretty deep in the glass and didn’t want to take the monetary loss in selling and switching.

But all along I remembered how the D70 handled. And I kept up with the advances in the Nikon world by reading web news and reviews. Once I started getting more advanced with my off camera flash work, I learned more about how the Nikon flash system worked (particularly the SB-900) compared to the 580EXs I was shooting. Its a highly personal thing, but the Nikon approach to photography just seems to fit me better.

Nikkor AF-S 70–200 f/2.8 VRII

So the short of it is that I contacted Adorama’s used camera department for a quote on my Canon gear and decided to swallow hard and make the switch. Now in hand is the Nikon D300s with the MB-D10 battery grip, two SB-900s, the AF-S DX 18–200 VRII (a great walk-around lens), the wonderful AF-S 70–200 f/2.8 VRII, the new-ish AF-S 100 VR Micro and the Sigma DC 17–50 f/2.8 OS. As you can see, I still love the IS/VR/OS lenses. And that’s the only reason I did not get the Nikon AF-S DX 17–55 f/2.8.

That’s a pretty big switch. And its not because Canon is a poor system—quite the contrary, its first class stuff. The auto-focus system of the Canon 7D is tremendous and clears Canon of all the bad press and bad reviews of their auto-focus. And what can you say bad about the EF 70–200 f/2.8L IS? So why did I do it?

Nikon SB-900

It was a very subjective call. For me, the way Nikon uses switches for such things as metering and auto-focus modes just “feels” better than Canon’s button-and-dial approach. Their menu structure makes sense to me. And iTTL makes better flash exposures for me (not to mention the fact that the redesigned user interface on the SB-900 is very easy to use).

There are, of course, technical details that differ. For the most part, its a trade off—the D300s has 51 auto-focus points to the 7D’s 19, but the 7D shoots at 8 fps while the D300s does only 6 (unless you get a special battery and the battery grip), the D7 has 16 megapixels to the Nikon’s 12, but the D300s has dual memory card slots, and on and on.

You’ll note that none of this has anything to do with video. I don’t do video.

Lots of my lighting gear will work with either system, so at least I avoided the costs of changing out something. My RadioPoppers just needed new plastic mounting brackets, but the light stands, Honl light modifiers, Westcott equipment and miscellaneous hardware all still works.

I have my eye on a few more things, once I recover from the initial expense. I’d like another SB-900 and the SU-800 wireless flash commander (which will make my RadioPoppers that much more capable). And I’ll be keeping my eye out to see when, or if, Nikon adds VR to their AF-S DX 17–55 f/2.8.

In the end, the camera does not take the picture, the photographer does. Either system will make breathtaking photographs—just scout through 500px and see who shoots what with which system. Or better yet, see if you can guess which system was used to take which picture. Good luck with that!

In making the changes, which included switching from the Prose to the Focus theme, I reminded myself how much I like the web development application Coda. Since I don’t use the themes just as they come from StudioPress, I need to muck around with the CSS and PHP that forms the theme template. Coda is so good for that.

Coda comes from the folks at Panic, who make a number of other very nice Macintosh apps. Coda’s claim to fame is that it is a single window application that handles FTP file transfer, text editing, CSS editing, browser previews and even terminal commands. As a bonus, it will display reference material, right in the app, from web-based resources that you can add to. Its smooth, very Mac-like, and allows web development to move easily from task to task. Instead of using programs such as BBEdit, Transmit and CSSEdit to do different tasks, you use Coda to do them all. I own all those, and I use Coda.

The sites panel. Click all the screen shots for a bigger view.

Coda’s integration is wonderful. And it is an exception to the rule that stand-alone applications are better at what they do then an integrated application can be. That’s not to say the others don’t have features that Coda doesn’t, its just that those features are nice-to-have features and not the things that you must have to do rapid web development.

The CSS editing panel.

Working on a web site with Coda starts off with the sites panel where I keep the links to sites that I work on most often. Once I connect to a site, Coda gives me an FTP file list view on the left and the contents of a selected file (or files) on the right. Multiple files open in multiple tabs and individual files can have multiple views (such as both the CSS editor and the text editor views of a CSS file or both the text editor and browser preview views of an HTML file).

The books panel.

From there its pretty much smooth sailing. Double-click a file to edit, make some changes, save it, see the effect in the preview panel or in a separate web browser and then make some more changes. Coda opens and saves file straight to and from your server so there’s no need to download, edit and then re-upload. Because I do most of my web development in WordPress, I use a separate browser window to preview changes since Coda’s preview panel is only for static HTML.

The text edit panel.

The books panel allows you to quickly review web-based reference material and Coda comes with quick references for HTML, CSS, JavaScript and PHP. Its easy to add more—just load in its URL.

The CSS editor is very nice with easy to use and clearly broken down access to all the CSS attributes available. It has lots of buttons and entry fields to make what can be tedious easy. Using very nice syntax specific text coloration, the text editor works well and is full of the little things you need to make it more than a plain text editor (things like Un/Comment Selection, Balance punctuation, and auto complete for common syntax). For my work, I haven’t wanted for features.

I’ve been very pleased with Coda and the workflow that it allows. Like a lot of programs these day, there is no separate Users Manual, rather it is incorporated into Coda’s help menu. That has worked fine for me partially because there’s plenty of information in there and partially because Coda is a real Mac app—you can find your way around pretty easily with no manual. Coda is available on the Mac App Store for $99.