Publicious Links: The Better Edition

I feel better. Thanks to the CVS-brand version of Zyrtec, I can breathe, sleep and surf the Web for the usual graphic goodies. With all the money I’m saving on tissues, I might even buy a new laptop. 

Kungfugrippe has a hilarious take on SnowLeopard and the cult of Mac.

Speaking of SnowLeopard, wikidot has a SnowLeopard compatibility list, so you can see if anyone else has got SoundJam to work in OS X 10.6 😉

If you’ve ever wanted to try out Adobe apps, but not actually go through the trouble of installing them, you can use Runaware to check out demos from within your browser. Not all apps are available, but Photoshop, Framemaker, and a few others are.

Discovered a cool RIA today, Fractal 4D. With it, you can draw some really cool vector shapes and export them to Illustrator.

Picture 4

Speaking of Illustrator, didja know that the Illustrator team at Adobe has their own blog, with the cool moniker Infinite Resolution? You do now.

Jostens.com sponsored a contest where kids could design their own high school yearbooks using InDesign. Judging from the looks of the winners (and even the honorable mentions) there are some scary-talented young InDesigners out there. 

ContentServ offers some interesting-looking Web to print solutions for InDesign.

ZenTextures has hundreds of cool, free textures for Photoshop 

Know those hip “painting with light” effects used the Sprint ads and elsewhere? Well, if you ever wanted to try your hand at it, check out Designmag’s post on Light Effect Brushes

On the other hand, if you’re designing a logo, Tripwire magazine has a huge set of logo design tips and tutorials.

Adobe wasn’t satisfied with just buying Omniture. They also scooped up online business solution Goodbarry. and rebranded it Business Catalyst. It’s not too hard to imagine a web designer clicking an Export to Business Catalyst button in Flash, Flex, or Dreamweaver soon. TechCrunch has more details.

Working on PSD files without Photoshop? Blasphemy! Yet, there is more than one way to skin a pixel.

I love restoring old photos with Photoshop. TipSquirrel has some good info on bringing back ancient faded photos.

If you ever need to illustrate a professional quality map, definitely check out Ortelius.

Lastly, Halloween season is here, and with it the Nightmare Before Christmas Soundtrack will once again be playing in our house nonstop. If you know any kids (of any age) who are fans of Jack Skellington (and you don’t mind a bit of über commercialism) check out Create Disney, where they have Flash drawing apps where you can make all kinds of creations with the Pumpkin King, and many other minions of the Mouse.

Advertisements

Publicious Links: The Squirrel Bombing Edition

OK, let’s just get it over with.

squirrel-falls

squirrel-fenway

squirrel-soldiers

squirrel-bull

squirrel-nana

squirrel-beachroad

Ever since he was first spotted, that damn rodent’s been following us around all summer. Now on to the links.

First up, my latest post at InDesign Secrets, Document Differencing.

Layers Magazine has an article on using Conditional Text in InDesign. Aside: ten years later, I still hate the phrase, “in InDesign.” AwKward.

What do you get when you cross Mad Men with Illustrator? Sketchpad, a 1963 computer illustration program created by Ivan Sutherland at MIT.

Thanks to mehallo.com for the heads up.

Let it snow, let it snow, let it snow (leopard, that is). Here’s a PDF on Adobe’s Creative Suite compatibility with Apple’s new version of OS X.

Elpical has a product called Claro Layout (which I haven’t tried yet) which gives you the ability to optimize and enhance your photos from within InDesign.

Vectorsonfire.com has a vintage Ford Thunderbird drawn in Illustrator that is so awesome it’s either going to inspire me to refresh my vector skills or make me never touch the Pen tool again. Too soon to tell which.

Examiner.com has a story about some members of the UK Parliament considering a ban on Photoshopped images for ads targeting kids. They’re upset about the widespread Photoshopping of already attractive people into poreless, wrinkleless monuments to Barbie-doll perfection. Here’s an interactive example of the typical process. Of course, this has been going on for a long time, witness the these pics of 18th century First Lady Dolly Madison:

Before

Dolly-1.0

After

Dolly-2.0

Prompting Ben Franklin to say, “M’lady, thou art a hottie.”

Designussion (i.e. Design Discussion) has 13 Amazing Vector Cartoon Tutorials.

If that wasn’t enough for you, Designreviver has 50 Illustrator Cartoon Tutorials.

Ever heard of Flash cookies? AKA cloud cookies? Apparently some sites now keep cookies on your surfing habits on their machines. Thus removing the last shred of a hint of the illusion of privacy. Might as well just post your browser history on your Facebook wall.

Wish you knew more about CSS? Existingvisual.com has 250+ Resources to Help You Become a CSS Expert. Hmmm, wonder if those resources include six months off from real life and a fresh brain.

Stumbleupon has the definitive list of Adobeans on Twitter.

Finally, if you just didn’t get enough rodent, here’s more squirrel bombing and an automatic squirrelizer app.

Publicious Links: The Dude, Where’s My Blog? Edition

And we’re back.

Sometime Monday the domain mapping that transforms mild-mannered “pubtech.wordpress.com” to it’s super hero identity “publicious.net” expired. Silly me, forgot to pay the bill. For about 48 hours, I was thinking I had offended some very important bots in Internetland. All the incoming links to Publicious disappeared and traffic was down more than 90%. It felt like Publicious had been put in solitary confinement.

After the inital shock, I said, “Oh well, whatever. Home alone at last. Now that everyone’s gone, I have all the time in the world and the whole internet to myself. Maybe I’ll just put on some Carpenters, kick back with bag of Cheetos, and check out SpongeBob On Demand.”

Every sha-la-la, Every whoa-o-oh, still shines.

patrick-carpenter

But then I got lonely. I finally figured out I should check one of the sites that links here and see what happens. Bingo. A hop, skip, and credit card payment later, I am once again master of my domain. Now, help yourself to some Cheetos. On with the show.

Might as well start with my latest post at InDesignSecrets.com, Snippet Style InJectors. I stumbled on this idea when I was preparing for a presentation last fall, and noticed that all the document resources used by a snippet get placed before the snippet itself. I said to myself, “Self, this could be useful someday.”

Drawn! the cartoon and illustration blog has an interesting video of an artist laying out a comic book in InDesign. You’ll never look at the Pencil tool the same way again.

Miverity has a tutorial on how to build a Flash XML slideshow app for a website.

Smashing Magazine has an article on Ten Simple Steps to Better Photoshop Performance. Life is short, no time for beachball cursrors.

The Wall Street Journal’s Digits blog has an good article on ebook format wars. Which one will end up the Betamax of the 21st century?

Speaking of which…

InformationWeek weighs in on the same ebook format issue, with a Sony v. Amazon angle.

Gigaom is ready to declare a winner: Adobe, because of Sony’s embrace of EPUB.

Relatedly (is that a word? if not, I just made it one) Digital Media Buzz has the scoop on Adobe’s Open Source efforts.

Thinking of using an online word processor? Read Linux.com’s comparison of GoogleDocs, Zoho, and Buzzword.

Quick, how do you make a dotted line in Photoshop? Sitepoint has some nice quick tips about using Photoshop brush options for dotted lines and such.

One NYTimes.com writer thinks the bloom is off the Rich Internet App rose already, with the arrival of Google’s Chrome. Please, don’t be evil, Google. Please.

Graphics.com has some ‘tony tutorials (as in duotone, tritone, etc).

Finally, if you’ve ever wished to see Photoshop and Illustrator battle to the death as giant transformer robots with foul language (and who hasn’t?) I recommend checking out GoMediaZine’s ongoing Photoshop vs. Illustrator series.

Publicious Links: The Whiteboard Massacre Edition

Some time ago, I was walking to work along one of the seedier streets in Boston, and passed by an alley which was the scene of utter devastation. I wanted to turn away from the carnage, but my eyes were glued to the horror before me.

There, lying against the grimy graffiti-covered bricks was a pile of…discarded whiteboards. But discarded is not the right word. These whiteboards were not discarded. They were murdered. Ripped from the walls (screws and chunks of drywall still hung from the hooks) and destroyed. Crushed. Smashed and torn. Stomped into oblivion. Thrown from the windows above. Someone had even impaled one of the whiteboards on its own metal frame.

Yes, this was a rage killing. A whiteboard massacre. Al Capone’s hitmen had nothing on the perpetrators of this crime. Somewhere, there is a group of middle managers with their fingers stained red with dry erase dust that just won’t wash off.

I tried to picture the scene of the crime: what kind of a presentation could be so horrible and offensive, so endless and tiresome, so stupid and dull, that the enraged audience rose up out of their swivel chairs, tore the whiteboards down, and stomped them to bits? I closed my eyes and saw the melee. Muffins and bagels were trampled into the carpet like innocent bystanders. Handouts flew through the air like frightened chickens. The walls of the meeting room were scalded with Starbucks. A venti vendetta.

The presentations were still on the whiteboards, though the violence had left them fragmented, unintelligible hieroglyphics. All I could make out were disjointed circles and arrows, dates and dollar signs, and a few three-letter acronyms.

Mind you, I have been in meetings where the thought of “getting medieval” has crossed my mind. But I never got above an angry doodle. Though I once rolled my eyes so hard that I hurt them. Perhaps our muffins were laced with sedatives to gain our acquiescence.

So to those dearly departed whiteboards, who could not be blamed for what someone presented on them, I dedicate this week’s links.  And to you, dear reader, may you never come up with an idea that gets stomped. Literally.

Photoshop Roadmap has a boatload of tips, tricks, and tutorials (OK, 64 to be exact) that will keep you busy for a while.

Not to be outdone, Web Design Ledger has 22 Adobe Illustrator tutorials.

Seattle Social Media Examiner has a review of 12 Twitter Desktop Clients.

The New York Times (are THEY still in business?;) has an interesting interview with Adobe CEO Shantanu Narayen.

Our awesome InDesign Guru Down Under, Cari Jansen has a short and sweet tip for Photoshop masking screenshots.

Gizmodo has a pretty funny Photoshop set of Totally Impractical Gadgets. It kills me that I never have time to play like this.

Core77 is an industrial design magazine/website that’s chock full of inspiration and information.

Type in Photoshop: Good or Evil? I tend to think evil, but it’s not going away anytime soon, so you might as well be good at it. Check out Sitepoint’s 5 Type Tips for Photoshop.

Sensacell is a company selling “modular sensor surfaces” I call them Giant Pixel Fun Factories. Imagine painting a mask in Photoshop with your hands, using pixels as big as your head, and you’ll get the idea. Or just watch the video. .

DesignFreebies.org has more resources than you can shake a creative stick at.

Adobe is continuing to embrace Open Source as a path to glory, releasing TLF (Text Layout Framework) and OSMF (Open Source Media Framework) to the world.

Graphics-Illustrations.com has yet another smorgasbord of resources for Illustrator and Photoshop. You’ll be so busy collecting all these goodies, you won’t have any time to use them.

While you’re at it, you might as well collect some of those oh-so-trendy painting with light brushes for Photoshop.

See you next time, kids. Till then, if you see any flying whiteboards, duck!

The Non-Designer’s Design Checklist

About a dozen years ago, as I embarked upon my journey into the realm of publishing, I bought a book called The Non-Designer’s Design Book by Robin Williams. I’m pretty sure it was recommended to me by the guy who taught my first Quark XPress class. I remember thinking it was a fine and fun book. It may have taught me just enough about design to be dangerous. I made up business cards, and took on a couple freelance jobs designing flyers and the like. Years later I had enough confidence to take a side gig designing newspaper ads. Not exactly the peak of the design profession, but it was fun to at least be the guy picking the fonts. I left that job after I’d made enough to buy a second family car, and then spent the better part of a decade forgetting everything I learned from the Non-Designer’s Design Book. So I was happy to stumble upon a copy of the brand new, 3rd edition a few weeks ago.

Continue reading

Family Cookbook: Can I Borrow A Cup of CSS?

Still a few things left to do before our cookbook project is cooked.

First thing is to get some Cascading Style Sheets (CSS) to give the cookbook some personality on the Web. As you probably guessed from the fact I’m using a canned WordPress theme, I’m not a web designer. But I want to be one when I grow up. I’ve read my share about CSS and played around with it, but never actually used it to build myself a real live website. The last public website that I built was with Adobe PageMill, and I think about 5 people saw it. I did make another with GoLive, but didn’t use CSS.

So I need some inspiration. Something to sweeten up the content. I’ll check some recipe websites and see if I can borrow any good presentation ideas from them. It’s like going to your neighbor and borrowing a cup of sugar. No need to be obscure, so I’ll check some sites like allrecipes.com, epicurious.com and foodtv.com.

Here’s an example from epicurious, which I’m sure is packed with wholesome nutrients, the Devil Dog Cake.

So, if I wanted to ape this style, how do I go about figuring it out?

I know of one indispensable tool for this job, and that is The Web Developer Add-on for Firefox by Chris Pederick. It is an absolute-must-have-go-get-it-now-you-won’t-regret-it kind of thing. If you are trying to learn web design this add-on is priceless, and incredibly it is free. By itself it is reason enough to use Firefox. The Web Developer Add-on allows you to reverse engineer a web page, by isolating every piece of the page, showing the code that styles it, letting you play with it, and save it. To quote Peter Griffin, it’s “friggin’ sweet.”

Saying all that, now I feel shamed into donating something to Chris. Maybe I’ll buy him something off his Amazon wishlist. I’ve got my eye on a Radiohead CD.

Loading the Web Developer Add-on in Firefox gives you twelve menus’ worth of choices to dissect and analyze every aspect of a page. Not surprisingly, we’re most interested in the CSS menu for now.

Choosing View CSS gives you a window with expandable listings of all the CSS a page uses.

With Show Style Information you hover over elements and they become outlined and you get a bread crumb trail showing you exactly where you are in the page model, including class and id info.

If you click, you get a new window pane with all the all the declarations that are making the selected object look the way it does.

And if you really want to play, or if you just like asking “what if” questions, you’ll get a kick out of Edit CSS. It opens a pane where you can change the CSS and instantly see the results. So if I wanted to see what it would look like with my recipe titles in bold red, I just go to the declaration, type in the change and voila.

What if you want to lift the color scheme from a page? No prob, go to the Information menu and pick View Color Information. You get a swatch list of every color used on the page.

You can validate the CSS code with the W3C’s Validation Service to find if there’s anything broken in there that needs fixing. On the Devil Dog Cake page, there’s a div that’s supposed to be gray, but it’s misspelled in the style sheet, “grey.”

One more toy to play with and that is the Edit HTML command in the Miscellaneous menu. This is the flip side of Edit CSS. Now you can change the content and see how the styles look applied to other stuff. I suggest these modest changes.

Now that we can shine an X-ray on any web page, we can find looks that we like and tweak them, preview our changes, and copy and paste the code into our own style sheets. Of course, we’ll also have to change the selectors to fit the structure we got out of InDesign and Dreamweaver. But now we’re really cooking. Mmmm, smell that code.

Family Cookbook 2.0, part 3

Has it been more than a week since we left off with the cookbook project? My how blog time flies. Let’s continue.

During the first two posts on this topic, we converted the old XPress file, and tagged the content in InDesign and exported it. Right now we have XML masquerading as HTML. Let’s open it in Dreamweaver.

First off, we’ll format the source code, so we can actually read it. We’re OK doing this because we aren’t taking this content back into InDesign. If we were, right now the robot from Lost in Space would be yelling, “Danger Will Robinson!” The problem is that Dreamweaver doesn’t give a hoot where it places the whitespace characters to format the code. They end up everywhere, including inside every element tag. So if we re-import this into InDesign we get…a huge mess.

Orginally, the title element of Richard’s Pancakes was very tidy with just one return in the right place.

clean XML in InDesign

Now, it has 4.

Nasty extra whitspace

Who left the bumbling Dr. Smith in charge of our content? Oh, the pain.

Happily, we’re on a one way street to the Web, where those whitespace characters won’t be as troublesome.

Start off by adding the some infrastructure at the top:

<!DOCTYPE HTML>
<html>

<head><link href=”cookbook.css” rel=”stylesheet” type=”text/css”>
</link> <title>Ethan’s Family Cookbook</title>
</head>

And wrap everything else in <body>

Then let’s get rid of the Story (capital S) elements, wrapped around the recipe cards, an artifact of those pesky inline frames. We’ll just Find/Replace with nothing, making sure to check “Case sensitive”, since we do have story, (lower case s) elements we want to keep: the chefs’ stories about their recipes.

Now we’ll replace all the names of the tags that came from InDesign style names with valid HTML tags, plus class declarations for hooking into CSS.

To give credit where credit is due, this idea is straight out of chapter 9 of A Designer’s Guide to Adobe InDesign and XML by James Maivald.

So the opening tag <group> gets replaced with <p class=”group”> and the closing </group> becomes plain old </p> Lather, rinse and repeat for <story>, <title>, <chef>, <ingredients>, and <step> elements. I’m also going to lively up the <div> around the recipe card, by adding class=”card” to distinguish it from the other <div>s.

clean code

Validate to check our work. And we get Dreamweaver’s idea of praise for our hard work: “Complete.” Nice. This is a program tossing compliments like manhole covers. How about, “Adequate.” or “Nice job, for a human.”

We preview in the browser, and things look cool with the exception of the degree symbols. So we’ll go back and replace all those with an entity.

Next time, some CSS to finish this sucker off.