User Tools

Site Tools


Creating a Workspace for CE4

The CE4 series plugins are unlike any other Web plugins for Lightroom, and some of the series' most powerful features may not be immediately apparent. To make the most of what CE4 has to offer, you should take a moment to setup your workspace before diving into the design of your galleries.

Setting Up the Web Module's UI

The Web module's user-interface (UI) has got a lot of parts. Some of them we'll be using a lot, and others not so much. The things we're not planning to use, we should hide. And the things we'll be using a lot, we should ensure are easily accessible.

To begin, right-click anywhere in the righthand control panel to bring up the context menu, pictured below.

Ensure that all of the control panes are enabled, as CE4 uses all of them. The only exception is Upload Settings; we don't use it, we don't want it, and you should turn it off forever.

Also, enable Solo Mode. This will make it a lot easier to get around the plugin's lengthy UI.

On the left, we have a panel containing the Preview, Template Browser and Collections pane:

Important stuff, but it's occupying valuable real estate and we don't need to be looking at it all the time. On the extreme left, vertically centered on your display, you will see a triangle icon. Click this to hide/reveal the lefthand panel. For now, we want to hide it.

At the top of the screen, we have the Identity Plate and Module Picker. You can keep them if you'd like, but I usually prefer to hide them by clicking the centered triangle at the top of the window.

At the bottom of the screen, the filmstrip. Again, I like to hide it. If I need it, I can bring it back again. Click the centered triangle at the bottom of the screen to toggle the filmstrip display.

At the top of the Web preview, you may see a (generally useless) toolbar:

It seems pretty harmless at first, but can actually be a real problem later on. To toggle it's display, press the backslash key, “\”. You should go ahead and toggle this bar OFF, and then maybe just forget that it exists.

Of far greater use, we have the toolbar at the bottom of the Web preview:

I often like to set Use: Selected Photos, and then to do my design work with no more than 5-to-10 images selected. The fewer selected images, the faster our work will go in the Web module. Then, before exporting, I will Select-All or set Use: All Filmstrip Photos.

It doesn't matter whether you hide or show this toolbar; it's never a problem. You can use the “T” key to toggle its visibility. I will often hide it, then recall it as necessary.

Finally, press Shift-F a few times until Lightroom is in full-screen mode.

At this point, I've maximized my workspace. My screen looks like this:

But we can take things further …

Setting Up a Responsive Workspace

Using CE4 Viewport Sizer, we can create a responsive workspace that will allow us to reasonably approximate how our galleries will look on tablets, phones and other mobile devices. I like to use the iPad and iPhone as my benchmarks.

CE4 Viewport Sizer allows us to measure the pixel-dimensions of our Web preview. It's a free download, so if you haven't already done so, checkout CE4 Viewport Sizer from our shop, get it installed, and then come back here.

CE4 Viewport Sizer is also included in our bundles, so if you've purchased either bundle, then have probably already installed it.

Larger displays are preferable when working in Lightroom, as the application lends itself better to larger workspaces. But we recognize many users nowadays run Lightroom on smaller laptops. When using CE4 plugins in Lightroom, you will find the optimal experience on displays 1440-pixels (a 13“ Macbook Air) or wider.

To get started, select CE4 Viewport Sizer from the Layout Style panel.

Using your mouse cursor, then grab the left edge of the righthand control panel. The mouse cursor will change to a resize-cursor. Drag the panel to its maximum width of 360-pixels. On my 13” Macbook Air, that gives me a preview 1000-pixels wide:

Now grab the left edge of the righthand panel again, and shrink the width by 10-pixels. The width measurement in the preview will update in realtime, so just pull back until you've added 10-pixels to the viewport's width:

This is our “standard display” preview.

To get a wide-screen preview, we simply close the righthand panel:

So far, so good. Now let's start thinking about how to preview mobile display sizes …

Return to the “standard display” preview by recalling the righthand panel into view. Then press Shift-F once to enter windowed screen mode.

Now grab the righthand edge of the application window and reduce its width until the viewport width reads 784.

Why 784? That's the iPad's 768-pixel width in portrait orientation, plus 16-pixels to accommodate Lightroom 5's scrollbar. And that leaves us looking something like this:

This is our iPad preview.

Now let's create a preview for an iPhone.

Held in portrait orientation, and iPhone's display is 320-pixels wide, plus 16-pixels for the browser scrollbar in Lightroom 5.

Reveal the lefthand panel, then grab the edge and pull it to full-width. When it stops, our viewport will still be too wide, but there's a trick to fix this. Hold the OPTION key, and keep pulling the lefthand panel wider until the viewport's width reads 336-pixels.

Now reveal the filmstrip. You can resize the filmstrip's height to whatever you're happy with. Then grab the bottom edge of the application widow and pull it upward until the height of the viewport reads 568-pixels, the display height of the iPhone 5s.

This is our iPhone preview:

Using the Responsive Workspace

We now have a responsive workspace! But how do we use it?

Well, let's load a gallery and I'll walk you through it.

Here's my standard preview:

When I want to preview my design for wide-screen, I collapse the righthand panel:

When I want to preview my design for iPad or similarly sized tablets, and reveal the righthand panel and press SHIFT-F to enter windowed screen mode:

The height is wrong, but its the width that's important. If this makes you unhappy, then just pull the window taller.

When I want to preview my design for iPhone or similarly sized mobile devices, I enter windowed screen mode and reveal the lefthand panel:

To return to standard preview, I hide the lefthand panel and entire full-screen mode again.

So that's the responsive workspace, giving you a reasonably good idea how your gallery ought to look on the wide variety of modern, Web-enabled desktops and handheld devices. You are ready to DESIGN.

ce4_creating_a_workspace.txt · Last modified: 2014/07/03 09:50 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.