Archive for December, 2012

Introduction to JavaScript templating using mustache.js

Published by | Thursday, December 27th, 2012

Recently I built a small website for an event in my area. This type of project required me to manage small amounts of data—information about speakers, bios, titles, and a description of the talks. I wanted to have a speakers page, but I also wanted a rotating promo built as a component I could use on the homepage, and on other pages to highlight the event’s speakers. That meant two different views for the same data.

This was the kind of problem I used to throw a quick SQL database at, but it really wasn’t worth the pain for this project as the amount of data was so minimal.  However, I didn’t want to resort to HTML because I knew the information would change often and be a pain to update. To solve the problem, I used a library called mustache.js. It’s pretty easy to use, and solves the problem with just a few lines of code.

Why mustache.js?

Mustache is a library that allows you to read in JSON formatted data and display it using templates you design with JavaScript. There are lots of similar libraries, such as underscore.js, handlebars.js, and dust.js. So why did I choose mustache?

InDesign Secrets: Ten secrets of the Story Editor in Adobe InDesign

Published by | Thursday, December 20th, 2012

In this week’s free InDesign Secrets video, Anne-Marie Concepción reveals 10 secrets of the Story Editor feature in Adobe InDesign. The Story Editor is designed so you can read text in a window that’s separate from your layout file, away from the distractions of the formatting and graphics.

But the Story Editor can also be handy in other situations, especially when it’s difficult or downright impossible to see in layout. If you encounter any of these scenarios in InDesign, Anne-Marie can show you why the Story Editor may be exactly what you need:

1. Changing text color
2. Sideways text
3. XML tags
4. Footnotes
5. Notes
6. Hyperlinks
7. Tracked changes
8. Inline or anchored objects
9. Overset text
10. Overset tables

All of which are easier to read, grab, and move around in the Story Editor. Check out the video above to see the Story Editor in action.

Adobe InDesign Story Editor

Meanwhile, Anne-Marie’s partner in InDesign secrecy, David Blatner, has an exclusive video for members in which he shares 10 ways to move an object in InDesign. The movie is aptly named Moving an object: Ten ways! and lynda.com members can find the video with the entire collection of InDesign Secrets.

Suggested courses to watch next:
InDesign CS6 Essential Training
InDesign New Features
Creating Long Documents with InDesign

Deke’s Techniques: Hobbit-inspired text

Published by | Tuesday, December 18th, 2012

In this week’s free Deke’s Techniques video—inspired by the movie poster for The Hobbit: The Unexpected Journey—Deke McClelland starts with the unsuspecting, decidedly unheroic text and takes it on a Middle Earth–inspired adventure into the lands of Adobe Illustrator and Photoshop.

The result is that this ordinary-ish text in the before image below ends up looking as though it’s been chiseled and chewed all the way there and back again, with all the seasoned character one would expect, and as you can see in the after image:

Before and after of the final Hobbit inspired text effect.

Deke starts his project in Illustrator, where it’s easier to manipulate the shapes and sizes of the letterforms. The first step is to turn the text into outlines with editable paths that can be manipulated by Deke’s wizardry. He stretches the T, shrinks and adds an embellishment to the E, and adjusts the Q’s swash:

Using Adobe Illustrator to manipulate the shapes and sizes of the letter forms.

After swapping the stroke and fill colors and reducing the stroke width, Deke roughs up the edges with the aptly named Roughen effect. Choosing Effect > Distort and Transform > Roughen, he sets the Size set to an Absolute 1.2 points and the Detail (i.e., the number of roughening wiggles) to 17 per inch:

Using the Roughen effect in Illustrator.

Having suitably stylized the text shapes, Deke copies the outlines and pastes them into Photoshop. Note that when you bring this path in from Illustrator and use the Paste command, Photoshop gives you four choices for the type of Paste you want to perform. For this project, picking the Shape Layer option means you will retain the path outlines.

Bringing the text shapes into Photoshop.

If the task of Illustrator is to help create the shapes, then the destiny of Photoshop is to provide the texture. After changing the fill to white to improve visibility, Deke applies a layer effect, Gradient Overlay, using a couple of orangish shades for the gradient:

Using Photoshop Layer Styles to add texture.

To give the letterforms some volume, the next step is to add a Bevel & Emboss layer effect using the Chisel Soft technique option and appropriately adjusting the blend modes of the highlights and shadows (to Linear Burn and Linear Dodge, respectively.)

Using Layer Styles and the Chisel Soft technique.

The chiseling effect is a good start, but to really sell effect, Deke adds a texture layer (created from a photograph) and clips it inside the letters. Then he duplicates the texture, flips it around, and creates another clipping mask. After supplying a Color Overlay effect and dose of the Noise filter, along with some blend mode tweaking, the result is letters that look like they’ve survived a battle or two:

Adding a texture layer and a color overlay.

To really distress the text, Deke uses the Pen tool to draw some paths that look like proper battle scarred, dwarf-bitten divots, then uses the Subtract Front Shape command in the options bar to remove those areas from the shape layer.

Using the Subtract Front Shape command.

To keep the larger holes from boring all the way through the letters, Deke fills in the backs of the letters with a perfectly registered layer of colored texture, masked to take care of the letters’ more violent wounds:

Making the final touches to the text including colored texture and masking.

Finally, Deke adds in some supplementary, self-deprecating text, and voila:

The final poster in the style of The Hobbit.

The background of this image, by the way, is not Middle Earth or even the stand-in for Middle Earth known as New Zealand. It’s actually the Cliffs of Moher on the west coast of Ireland (which stood in for the Cliffs of Insanity in the movie The Princess Bride, so it’s still a motion picture worthy locale).

Deke has a lynda.com member-exclusive video called Enhancing a landscape photo in Camera Raw 7 that demonstrates how he enhanced a regular vacation photo to make this cinematic background.

Deke will be back in the new year with another Deke’s Techniques episode.

Suggested courses to watch next:
• The entire Deke’s Techniques collection
• Photoshop CS6 One-on-One: Intermediate
• Illustrator CS6 One-on-One: Intermediate

InDesign FX: Showing graphics as tiles

Published by | Wednesday, December 12th, 2012

In this week’s InDesign FX video, I show how to create the effect of an image printed on a set of ceramic tiles.

Create the effect of an image printed on a set of ceramic tiles.

The key element of this effect is a set of frames that are identically sized and equally spaced.

A set of frames that are equally sized and spaced.

There are a few different ways you could go about creating these frames. You could use the Step and Repeat feature. You could hold Option/Alt and drag an existing frame. You could even use a script that comes with Adobe InDesign called Make Grid. But by far the quickest and easiest way to make this set of frames is to use the Gridify feature. You simply start drawing a rectangle by clicking and dragging with the Rectangle tool, and before you release your mouse button, tap your keyboard arrow keys to split the rectangle into multiple copies. Tapping the up/down arrow keys adds or removes rows of frames.

Use the Gridify feature to create frames.

Tapping the right/left arrow keys adds or removes columns of frames.

Tap arrows right or left to add columns of frames.

You can adjust the spacing between the frames by holding the Command/Ctrl key while tapping your arrow keys. You can also hold Shift while you release your mouse button to create a set of perfect squares. If that all sounds like a lot of complicated keyboarding, I suggest you just try it out. It’s actually quite intuitive.

Of course, the frames are just the start of this effect. After you have created them, you then need to make them act as a single object before you can place a photo into them. This is a perfect use for the Compound Path feature. Then you’re ready to place a photo into the compound path so a small portion of the image appears in each tile.

Use the Compound Path feature and place a photo into the compound path.

Finally, a few finishing touches are needed to create the look of ceramic tile. First, I like to round the corners a bit, using the Corner Options in the Control panel. Then I add some transparency effects like Bevel and Emboss and Drop Shadow to finish the look of the tile.

Create the look of ceramic tile.

If you want to take the effect even further, you can create a texture that looks like grout holding the tiles in place. For that, I use a frame filled with gray, enhanced with a large Inner Glow. The key for creating the texture is to add a lot of noise to the Inner Glow.

Adding the appearance of grout to the tiles.

I also have a member-exclusive movie in the lynda.com library this week called Simulating chalk. In it, I show how to make live text or any object you create in InDesign look like it was written on a chalkboard.

Chalkboard effect

See you here again in two weeks with another InDesign effect!

Interested in more?
• The entire InDesign FX biweekly series
• Courses by Mike Rankin on lynda.com
• All lynda.com InDesign courses

Suggested courses to watch next:
InDesign Secrets weekly series
InDesign CS6 Essential Training
• InDesign CS6 New Features
Deke’s Techniques

Three ways to connect with customers during the holiday season

Published by | Wednesday, December 12th, 2012

Marketing during the holidays can feel more like a “holidaze” for business owners and marketers. The busyness of the season can make connecting with new and prospective customers seem like a challenge. Since the holiday season is a unique time of year, let’s look at opportunities to make your marketing unique and authentic as well:

#1: Focus on your brand experience through service
Keep in mind, a brand, more than just a name and logo, is an overall customer experience composed of your products, messaging, promotions, pricing, points of distribution, service, and more. Customer service is an important lever through which consumers can form positive associations with your brand and products. Fortunately, a good customer service experience can turn even potentially negative brand or product experiences into positive ones, such as creating positive word of mouth and building a compelling story of authenticity for your brand.

This holiday season is an ideal time of year to make first-rate customer service a priority. Promotions via email, social media messages, and online ads create a lot of noise on the web. Instead of trying to scream above the promotional noise, look at how you can quietly step up service. Give extra attention to the customers you have in your funnel with the best service possible. Service can be as simple as emailing your customers and providing them with relevant tips for this busy season, or asking them if there are ways you can help them.

#2: Focus on building relationships
Your best customers are often your current customers. Have you critically looked at opportunities to build the business with the business you have? Take time to identify your best customers and make sure those customers feel appreciated during the holiday season. If you choose to give gifts, make sure they are meaningful gifts unique to your relationship or your company. If you don’t have a large gift budget, I have seen framed certificates with “Customer of the Year” awarded to customers, and simple team photos emailed with a personal greeting. You can make a big difference by sharing positive news on your website, blog, or newsletter that can remind customers why they chose to work with you in the first place.

#3: Say “thank you”
If you are struggling with marketing messaging, then just focus on a heartfelt thank-you. A thank-you message can be shared as a blog post, delivered as an email, snail mailed as a personally written card, delivered on social media, and posted to your website.

Make your marketing matter this holiday season and approach things uniquely and authentically from the inside out. Bridge the art and science of marketing with a little heart to warm up your marketing!

Interested in more?

• Courses by Lorrie Thomas Ross on lynda.com
• All lynda.com Business Skills courses

Suggested courses to watch next:

• Insights from an Online Marketer
• Brand Building Basics
• Sales Skills Fundamentals

New Adobe Muse features for Q4 2012

Published by | Tuesday, December 11th, 2012

Right on schedule Adobe has released another update to Adobe Muse and this time the focus is on creating mobile friendly sites. While the last update had bits and pieces for a variety of users, this time the update is mainly focused on adding the ability to create tablet and smartphone optimized websites from Adobe Muse. We have updated Muse Essential Training again to help you stay on top of the latest features and enhancements that have been added. For a more detailed look at what has been added, please read the following list of new features, changes, fixes.

Mobile Friendly Features

Mobile friendly features

• Swipe within widgets: This provides gesture support within widgets; that is, swipe to move through a slideshow when Horizontal transition is selected.

• Menus: This includes menu and submenu selection via touch (bug fixes)

• Touch Support: Widgets and links work on tablet and phone devices; tapping on the link shows the Mousedown state. On Android devices, it shows the Mousedown state while your finger is on the item, and shows rollover when your finger leaves it. iOS devices show the rollover once your finger has stopped touching it, which is native behavior.

• Hyperlinks: Automatic redirects to device-specific layouts. When you browse a Muse site on a smartphone or tablet, the code generated by Muse will automatically load the appropriate layout for the device. You can also explicitly link to a page designed for a different device (i.e., a link for “Show Mobile Site”).

• Pinning Tablet/Smartphone Layouts: Due to lack of support on some tablet and smartphone browsers, pinning is disabled in Muse for tablet and smartphone layouts.

• Sticky Footer option: When selected this option maintains the minimum height for the page as the browser window height. There the page footer “sticks” to the bottom of the page until/unless the page is taller than the browser window. It is available in a separate Site Plan and in turn unique layouts for Master and Page Properties dialogs. Default behavior is off for existing .muse files from prior Muse versions and on for all new sites created in Muse.

• Site Plan: Now includes the ability to create a separate Site Plan and in turn a unique layout for Desktop, Tablet, and Phone layouts. There may or may not be a one-to-one relationship for pages between these layouts.

• Add Layout: This option offers support for copying Site Plan and Master/Page backgrounds when creating second and third site layouts for a tablet and/or smartphone.

• Viewport Scaling: Sites generated from Muse will rely on Viewport Scaling to ensure that a webpage will “fill” the width of the current screen of tablet or smartphone devices, both in landscape and portrait orientation.

• Device Preview: Muse Preview now has the ability to reflect the dimensions of a target device (smartphone or tablet). Multiple device types are included in a Preview Device dropdown. Note that Preview displays the height and width of the device, but does not attempt to simulate device-specific features or nuances for the browser on a given device.

Forms

CAPTCHA verification

•  CAPTCHA — The Forms widget now includes a CAPTCHA field option to prevent automated form submissions (spam). Form widgets in general and the CAPTCHA option require server-side support and thus require hosting on Adobe Business Catalyst.

Hyperlink UI

Hyperlink UI

• Search/filter: Hyperlink dropdown menu (consistent with Font dropdown menu) allows search and partial filtering.

• Device specific: Hyperlinks dropdown has been revised to differentiate between pages in Desktop, Tablet, or Phone layouts.

• Link support for mobile: Phone numbers (e.g., tel:2065551212) and email addresses (e.g., mailto:dani@adobe.com) result in touch-enabled links to a smartphone dialer or mail client.

Go To Page

Go To Page

•  Go to Page (Command + J): Quickly go to any page on your Adobe Muse site. Press Command+J, then type in the page name you want to go to.

Updates to Muse Essential Training:

Introduction

• 00-04 What is New in the December 2012 Update

Chapter 9

• 09-01 Creating a hyperlink (update)

Chapter 11

• 11-09 Exploring the Muse Widget Gallery (new)

Chapter 12

• 12-04 Working with Twitter (update)

Chapter 14

• 14-01 Creating a Mobile site (new)
• 14-02 Adding a tablet site (new)
• 14-03 Adding a mobile phone site (new)
• 14-04 Previewing mobile sites (new)
• 14-05 Linking between alternate layouts (new)

Interested in more?

• View the entire Adobe Muse Essential Training course on lynda.com
• Courses by James Fritz on lynda.com
• All Adobe Muse courses on lynda.com

Suggested courses to watch next:

Photoshop for Web Design
• Designing a Porfolio Website with Muse
• Fireworks CS6 Essential Training
• Dreamweaver CS6 New Features

Converting Photoshop designs to HTML

Published by | Tuesday, December 11th, 2012

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers
When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics
The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS
Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next:
• More courses by Chris Converse
CSS: Core Concepts
CSS: Page Layouts

InDesign Secrets: Using the Gravity setting to simulate perspective

Published by | Thursday, December 6th, 2012

In this week’s free InDesign Secrets episode, David Blatner reveals how to use the Gravity setting for Type on a Path in order to simulate perspective. The key is to create a handle-like arm of your path that you can use to manipulate the center of the path, because it’s the center that determines the faux perspective of the type.

Using the Gravity setting for Type on a Path

Moving the end point of the angled line shifts the perspective of the type. Given that Adobe InDesign doesn’t have a true perspective ability like Illustrator, this is a pretty cool workaround if you need something quickly and InDesign native.

For members of lynda.com, David’s partner in InDesign Secrecy has an exclusive video this week called Fixing the overflow text problem in EPUB.

David and Anne-Marie will be back in two weeks with more InDesign Secrets.

Interested in more?
• The entire InDesign Secrets biweekly series
• Courses by David Blatner and Anne-Marie Concepción on lynda.com
• All lynda.com InDesign courses

Suggested courses to watch next:
• InDesign CS6 New Features
InDesign CS6 Essential Training
InDesign FX weekly series