All posts tagged ‘photoshop’

File Under: Software, Visual Design

Photoshop Contemplates Adding Live HTML Layers

Adobe’s Principal Product Manager of Photoshop, John Nack has posted an idea for a new Photoshop feature on his blog. Nack’s idea is to create a way of rendering HTML and CSS within Photoshop. This means visual designers could work with “live” HTML objects as they’re building websites within a team of programmers, easing the workflow between the designing and coding stages.

Before you get to excited (or disappointed) keep in mind that isn’t a feature, isn’t even part of a plan, it’s simply and idea that Nack would like feedback on.

Nack describes the idea (and workflow) like this: a designer creates a mockup, which he hands off to a programmer. The programmer then renders the mockup in HTML/CSS, at which point he could hand it back to the designer who can open it in Photoshop as a kind of live layer. Resizing and other layer actions would cause the code to respond according to how the programmer has written the code.

What Nack is envisioning is a smart layer that uses WebKit (already part of the Creative Suite) to render what he calls “programmable layers.”

Among the benefits Nack sees are “[live] pixel-accurate web rendering (text and shapes); the ability to style objects via CSS parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics; and high fidelity web output (HTML as HTML).”

The real world example Nack uses is a calendar widget, but that particular example raises an interesting question — what about scripting languages? We don’t know of anyone who writes out calendar code in HTML, that would be insane to update. So if you’re generating the calendar with, say, PHP, where does the script rendering happen?

So far, the comments appear pretty evenly divided between those who think such a feature would be great and those think that either it’s just more bloat in Photoshop, or that Fireworks would be a better home for the idea.

If you’ve got strong opinions one way or the other, head over to Nack’s blog and let him know what you think, either in the comments or by completing this survey.

Just remember that this is not part of a roadmap and may well never happen. In the words of Douglas Adams, “Don’t panic.”

See Also:

File Under: Software, UI/UX, Visual Design

Adobe’s Magical ‘Content Aware Fill’ Bends Pixels to Your Will

pscs4Adobe is already counting down to a new version of its creative suite, with updates for Dreamweaver, Flash, Photoshop and other apps common in the web designer’s toolkit. While the company is characteristically tight-lipped about new features, it is showing off a mind-bending new tool for Photoshop — content aware fill.

Like the content aware scaling (AKA seam stitching) in the current version of Photoshop, content aware fill is about intelligently adding, removing and changing objects in an image based on what’s around them. While that sounds fairly prosaic, seeing it in action will blow you away.

The video above starts a bit slowly (photographers would no doubt argue, realistically), if you just want to see the crazy stuff skip to the halfway point.

As always Adobe isn’t saying the content aware fill will be in Photoshop CS5 (due next month), but that’s really their way of saying it will be in Photoshop CS5 because no company in its right mind would show off these features and not deliver them shortly thereafter.

If you’re interested in learning more about the tech behind the content aware fill features, check out the Adobe website which features another, earlier demo movie.

If the content aware fill whets your appetite for CS5, well you don’t have long to wait. In fact, thanks to Adobe’s CS 5 countdown site we can tell you you only have 17 days, 00 hours, 00 minutes and 49 seconds as of this writing.

Normally we’re not ones for promo sites, but this one is notable because Adobe created the entire site without any gratuitous Flash elements. See, Adobe is embracing the modern web.

See Also:

File Under: Multimedia, Software

Lightroom Tutorial Lesson 2

Welcome to Lesson 2 of our Lightroom walk-through. Now that you have a general idea of how the interface works, it’s time to get down and dirty with the individual modules.

We’re going to start with Library module. As we learned in Lesson 1, each specific task in Lightroom is performed within its own dedicated “module,” and the modules are laid out in a linear fashion to match the typical photographer’s workflow.

Continue Reading “Lightroom Tutorial Lesson 2″ »

Designers, Step Away From the Photoshop

In many cases, web design begins in an image editor. A designer mocks something up in Photoshop (or some similar tool) and that design is eventually translated into HTML, CSS and JavaScript to create a live website.

But why do we work this way? It violates one of the fundamental tenets of good design, that design should follow content. It also means working with static documents. You submit a design to a client, the client likes it, but wants all the corners rounded. Have fun changing the corners in Photoshop — meanwhile, we’ll be adding a single line of CSS 3 to our live mock up.

In the final post to this year’s 24 Ways (see our coverage of other 24 Ways highlights), Meagan Fisher picks up what’s become a popular idea among many of web design’s most respected voices — that web designers should do their mockups in markup. That is, start with a live HTML and CSS page to create your designs.

Citing Photoshop’s shortcomings (not to mention expense) Fisher argues that tools like CSS 3 make writing — and more importantly updating — your mockups pure code just as fast, if not faster than the old Photoshop methods.

But there’s an added benefit Fisher touches on only briefly that bears further emphasis. Working with the code from the begin gives you chance to refactor, refine and improve it before production work ever starts.

Part of the reason lies in something designer Jeffrey Zeldman once posted to Twitter, “design in the absence of content is not design, it’s decoration.”

Starting with content — whether actual content, or simply the markup of the page — will force you to focus more on structure and making sure that your design fits the site from the ground up. In our experience this leads to slimmer, more semantic and easier to maintain code. As with writing in any language, the real process is not writing, but rewriting.

Even if you’re thinking that the world can pry your Photoshop markups out of your cold dead hands, give Fisher’s piece a read and, even better, try starting with code and see what happens. For some it might mean learning a new skill set, for others merely a shift in thinking. Regardless of whether you decide to switch to this method for good, we guarantee you’ll learn something new in the process.

See Also:

File Under: Mobile, Software

Adobe Announces Photoshop for the ‘Droids

With Friday’s launch of the the new Motorola Droid and some slick new features in Android 2.0, Google’s mobile operating system is stealing a bit of thunder from the iPhone.

Now, there’s one more battleground:, Adobe’s online photo service based around its flagship photo editor, has jumped on the Android bandwagon as well. Adobe released a new Android-based photo app Friday that allows you to edit, view, share and upload images directly from your phone. It works with any photos stored on the phone. Mobile is already available for the iPhone and Windows Mobile devices. It’s a free download on all three mobile platforms. The Android version of Mobile has all the features found in its Apple-y and Microsoft-y cousins, but it also packs in a few things that can’t be done on the iPhone — like background image uploads, so you can upload an album and still do other things with the images are being transferred.

As for the editing tools themselves, well… don’t expect “real” Photoshop. But the basic options like cropping, straightening, color corrections and preset image transformations can go a long way toward making your mobile images look much better.

Adobe has a video overview, but for some reason doesn’t offer any way to embed it. You can check it out on the Mobile site. Watch for the subtle iPhone snub about midway through the video, when Adobe’s Corey Barker says, “this particular phone has a really cool feature called background processing…”

If you’d like to give the new Mobile for Android app a try, head to the Android marketplace.

See Also: