This video requires Adobe Flash Player.

1 [CREATE NEW RGB DOCUMENT]
Choose File>New, select Basic RGB from the New Document Profile pop-up menu, and click OK. Open the Symbols panel (Window>Symbols), then click the flyout menu and choose Open Symbol Library>Grime Vector Pack.

2 [DRAG SYMBOL ONTO ARTBOARD]
Next, click-and-drag Grime Vector Pack 09 from the Grime Vector Pack panel onto the artboard. Go up to the Control panel and click the Break Link button. This will turn the art into a regular shape rather than a symbol instance. Open the Swatches panel (Window>Swatches) and choose a bright green color for the shape.

3 [DRAG SECOND SYMBOL ONTO ARTBOARD]
Go back to the Grime Vector Pack panel and click-and-drag Grime Vector Pack 10 onto the artboard. Once again, click the Break Link button to turn it into a regular shape. Then choose a red color for this shape in the Swatches panel.

4 [TURN SHAPES BACK INTO SYMBOLS]
At this point we have two splat shapes: a red one and a green one. With the Selection tool (V), take these shapes and turn them back into symbols by dragging them into the Symbols panel. In the Symbol Options dialog that appears, choose Graphic and give each symbol a name. This will also turn these existing shapes on the artboard into symbol instances.

5 [CHANGE PERSPECTIVE OF SYMBOL]
Select one of the shapes and choose Effect>3D>Rotate. This will allow you to rotate the object in 3D while still being 2D. In the 3D Rotate Options dialog that appears, you can grab the cube and rotate the object freely, or you can input the numbers manually for exact positioning (click the Preview checkbox to see your changes). To rotate the object on a specific axis, place your cursor where any two sides of the cube meet in the dialog. The colored lines correspond to a specific axis, as indicated on the right. As a final touch, set the Perspective to 100° to give it an exaggerated perspective that adds more interest.

6 [APPLY SAME ROTATION TO SECOND SYMBOL]
Repeat Step 5 for the other symbol to apply the same 3D rotation, then position them so they overlap each other, as shown here. If the perspective seems off, you can always modify the 3D settings of either symbol. To do this, select a symbol, open the Appearance panel (Window>Appearance), and click the 3D Rotate effect.

7 [ADD TEXT; CONVERT TO OUTLINES]
Select the Type tool (T) in the Toolbox. While you may use any word you like, we’ve chosen to be obvious and use the word SPLAT! We’re using a very bold font called Rockwell Extra Bold. Switch to the Selection tool, then go into the Swatches panel and choose a color that will go along with the red and green; we’re using blue. Now convert the text to outlines by choosing Type>Create Outlines.

8 [POSITION TEXT]
With the Selection tool, position this text over the 3D splats and resize to taste. Then, choose Effect>3D>Extrude & Bevel. What we need to do here is use the current 3D splats as a guide for the perspective. You can grab the cube and position the text in 3D. Notice we set the Perspective to 125° for a more exaggerated look. Also, set the Extrude Depth to 40 pt. Next, click the More Options button to reveal the lighting controls. Grab the light handle on the sphere and position it so it’s front and left of the sphere in relation to the text itself. Click OK.

9 [ROTATE LETTERS]
We have the text in 3D, but it needs something extra because it looks like it just slammed down on the floor. Because the 3D effect is a live effect, we can modify the original shapes of the text and it will be updated as we change them. Grab the Direct Selection tool (A) in the Toolbox and select any one of the letters. Then grab the Rotate tool (R) and give the letter a slight turn. The 3D effect will redraw based on the new position. Do this to a couple other letters, slightly varying the rotation.

10 [ADD SHADOWS]
Select the Pen tool (P) in the Toolbox and set the Fill color to black up in the Control panel. Draw some shapes at the bottom of the letters that conform to the contour somewhat, as these will be shadows. Once all the shapes are done, choose the Selection tool and Shift-click each shadow area to select them. Open the Transparency panel (Window>Transparency) and lower the Opacity to 50%. Now we need to put these shadow shapes behind the letters. Click on a letter with the Selection tool and choose Object>Arrange>Bring to Front.

11 [MAP ART]
Let’s go back to those colored splats we created earlier. We’re going to make it appear as if some of the color splashed up onto the letters. With the text still selected, open the Appearance panel and click on 3D Extrude & Bevel. In the 3D Extrude & Bevel Options dialog, click on the Map Art button to open the Map Art dialog. The current surface is indicated by a red outline on the art itself. To get to the front face of the letter P, toggle through the numbered surfaces at the top of the Map Art dialog until the red outline selects it.

12 [ADD SPLAT COLORS TO LETTERS]
With the P selected (the outline, not the solid), click the Symbol menu and find the splat symbols. Select the green one and it will apply to the letter. If the graphic comes in really big, click the Scale to Fit button at the bottom, then drag it toward the bottom of the letter. Make sure the Preview button is checked so you can see the result. Use the control handles on the bounding box to resize and rotate the symbol as necessary. Continue to add these splats to other letters and this will result in a cool splash effect on the text.

Final Image

Humble Arts Foundation Open
Humble Arts Foundation is a not-for-profit organization that works to advance the careers of emerging fine art photographers by way of exhibition and publishing opportunities, limited-edition print sales, twice–annual artists grants, and educational programming.

Jon Feinstein sent an email over letting us know that there is an open call for women photographers for an upcoming exhibition! If you are a woman and would love to get your photography noticed, I’d definitely recommend clicking on this link to check out the cast call details for Humbles open call!. Let me know how you do!

onOne Software Releases Plug-In Suite 5
I keep very few third party plugins on my computer – onOne Software is one of those that AUTOMATICALLY gets installed in my machine as soon as I install Photoshop. To that, i’m really happy to announce that they have taken it to the next level announcing the Plug-In Suite 5! For me, its the ability to be able to get things done fast that is the biggest allure. From masking to framing to effects, using onOne just makes for creative and quick – two things that I think really help me out!

In fact, we believe in this software so much, all of us Photoshop Guys actually created a series of our favorite presets for NAPP members!

To see the latest from onOne Software on their newest Plug-In Suite 5 click on this link. Great job guys!!

SXSW Interactive Web Awards: Accepting Entries
The 13th Annual SXSW Interactive Web Awards is happening in Austin (now one of my fav cities.. thanks to buddies Christina and Dan), March 14, 2010. SXSW is just one of those things that can’t really be described in a short amount of words. It’s an experience. Check out the video below to see what’s it all about.

The Interactive Web Awards is a subsection of SXSW and it highlights some of the best websites and really stands as the cutting edge of web showcase. Right now they are accepting entries for the Interactive Awards through Dec 18. Have a great site. Know someone with a kick tail site? Make sure they know about this:

Click here to get more information on the SXSQ Interactive Web Awards

OK.. looks like its getting turbulent here. Have a great day everyone!

Learning the Accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they’re clicked on. In this tutorial, we’ll create a basic animating accordion panel that can be used as the basis for a full Flash website.

1 [EXAMINE THE FILES]
Open the accordion folder (from the download files available at www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you’ll need to open to start the tutorial, and the accordion_final.fla file is a finished version of the tutorial that you can use as a reference. There’s also another folder named gs, which contains an ActionScript animation library called TweenLite that we’ll use to do our animation.

2 [OPEN THE FLA]
Open the accordion.fla file in Flash CS4 (this tutorial will also work with Flash CS3 if you haven’t yet upgraded). On the Timeline, you’ll see two layers: The actions layer will hold all of our ActionScript 3.0 code for this project and the panels layer will contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame rate of 30, and it’s set to publish for Flash Player 9, as we won’t be using any of the new Flash Player 10 features.

3 [DRAW A PANEL]
Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (blue). Drag out a rectangle on the Stage at any size, then in the Property inspector set the following: W(idth) 600; H(eight) 355; X 0; Y 0. (Note: Make sure the chain icon is “broken” next to Width and Height.) Control-click (PC: Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it “panel1,” make sure that Movie Clip is the Type, and click OK.

4 [ADD A TEXT FIELD]
In the Property inspector, give the new movie clip an Instance name of “panel1.” Double-click on it with the Selection tool (V) to enter edit mode. Select the Text tool (T), set the Character Family to Myriad Pro (or another font—make sure it’s a clean, legible font, as it will be rotated 90°), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, “Panel 1.” Switch to the Selection tool, open the Transform panel (Window>Transform), and set Rotate to 90°. Return to the Property inspector and set the type’s X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

5 [DUPLICATE THE PANEL]
Now we’ll duplicate the movie clip panel for each section of the site. In the Library panel, Control-click (PC: Right-click) on the panel1 movie clip and choose Duplicate. You’ll be prompted to give the new clip a name, so let’s call it “panel2.” Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y 0. Give the clip an Instance name of “panel2.” (Obviously, if you were building a real site you could name the various clips based on what they contained.)

6 [MODIFY THE DUPLICATE PANEL]
Double-click on the panel2 movie clip to enter edit mode so you can customize this panel. With the Text tool, change the text to “Panel 2.” Then, select the rectangle and choose another color in the Property inspector. Go back out the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels—that means the third panel will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

7 [IMPORT TWEENLITE]
Select the first frame in the actions layer and open the Actions panel (Window>Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that’s required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

8 [SET LEFT AND RIGHT POSITIONS]
Add the code highlighted here into the Actions panel. In these four lines of code, we’re attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it’s on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

9 [ADD CLICK EVENTS]
Now we need to set up the click events for each of the panels so that they can react when one of them is clicked. Add these next highlighted lines of code to the Actions panel. The first four lines sets up the click events for each panel. All of them will call a function named onClick that’s located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position allowing the user to view the full contents of that panel.

10 [WHO WAS CLICKED?]
Since all of the panels will call the same function when they’re clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named “clicked,” which references the clip that was clicked on.

11 [LOOP THROUGH THE PANELS]
Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a “for” loop. A counter variable is incremented each time the loop is run until it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named “mc” that references the panel clip based on the value of the loop counter i.

12 [ANIMATE THE PANELS]
Enter this highlighted code into the Actions panel at the location specified. First, we check whether the index of the current clip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the left. If not, it needs to be animated to the right. For each case, we’re using the TweenLite.to function to do the animation. The animation length is set to 0.5 seconds and we’re using an exponential ease-out effect. Both of these settings can be customized to change the feel of the animation (see Step 14).

13 [ADD CONTENT TO THE PANELS]
Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content. Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel. Check out the accordion_final.fla file to see an example of a finished panel.

14 [CUSTOMIZE TWEENLITE]
As mentioned in Step 12, you can change some of the values in the TweenLite function call to customize the animation effect. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.easeOut, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for TweenLite at http://blog.greensock.com/tweenliteas3.

Make way, San Diego! Dave Cross and I are bringing our Creative Suite Unleashed Tour to California this Friday. In one day, he and I will talk about how to make the most out of using Illustrator, Indesign, Photoshop, Flash, and even a little bit of Dreamweaver thrown in there for good measure!

I’m a big fan of being able to maximize your use of all of the applications. These days its not enough to do just one thing. If you are a photographer, it’s becoming more and more important to leverage the web. If you are into Video, the advances in photography are making it more and more compelling for you to take a look at it as a craft again. Photoshop is now helping make basic video animations. Indesign lets you create Flash experiences. Now more than ever, the person who can leverage all of these together is the person who gets the callback!

The tour is 49.00 and does not contain a workbook. However, you DO get a copy of Dave’s Adobe CS4 Suite Integration by Dave Cross. That’s almost like us paying YOU to attend.

Make sure you stop by the tour. San Diego is this Friday but we are coming to the following cities after that:

Boston, MA
Tuesday, December 01 2009

Washington, DC
Wednesday, December 02 2009

Atlanta, GA
Monday, December 14 2009

The 12.3-megapixel Olympus E-620 is one of the lightest, most compact DSLRs on the market. It succeeds Olympus’s E-520 and inherits features from the higher end E-30 DSLR. The E-620 has built-in image stabilization that works with any Four Thirds lens, and an articulated 2.7″ LCD that makes shooting with Live View efficient. Buttons on the back are illuminated for easy identification in low-light shooting, and Olympus has added the E-30’s wonderful Creative Art and Multiple Exposure filters to the E-620’s conventional command dial. Curiously, the E-620 bucks a trend by not including video capture—a compelling feature in this very competitive price range.

Click here to read the rest of the review

Back Page Contest Deadline Extended!!!
So, I wrote yesterday about the Layers Back Page Design Contest and how you can win a 1.5-TB Guardian MAXimus quad interface hard drive courtesy of our friends at Fotolia and all of a sudden people are fired up and sending information for the contest. So much so, the editor decided to extend the contest to November 30! I thought that was pretty magnanimous of him considering.. well.. its a 1.5TB drive!! Make sure you go into the Back Page Contest and enter!

Contest Time
Go to the Contact page, select the Layers Blog drop-down, then fill in your name, email address and answer to this week’s following question. Remember, the contest will end Thursday 5PM,. and the winner will be announced Friday morning.

The Contest Question:
One of my favorite web ladies, Janine Warner, wrote a cool piece about something in the latest Layers magazine. What did she write about?

The Prize:
A copy of Photoshop CS4 Beauty & Portrait Retouching Kit with David Cuerdon The stuff you will learn there will amaze you.

Have a wonderful week everyone! We’ll see you guys back here tomorrow morning!

The designer is the first person to get blamed when a website is sludgy. The engineers start asking about the rounded corners, the product manager wonders about the choice of fonts, and the client starts noticing a dip in sales or retention. A designer who isn’t armed with knowledge about performance can often fall into the trap of blaming the rounded corners—they remove important design elements or engaging features, just hoping the site will get faster.

With clients demanding more video, Flash, and interaction from our websites than ever before, how do we fit in all that functionality and have a fast site that users will love? After reading the 10 tips in this article, you’ll know what matters to performance (and what doesn’t!) and be ready to design fast websites.

Speed Tip #1: Create library of smart objects
Duplication can happen in any project when we lose sight of the designs we’ve already created and add new features that are just too similar and don’t add value. The rule of thumb is that if two designs are too similar to be used on the same page, they are too similar to be used on the same site. Choose one. [Insert Image_01] CAPTION: Rounded corners from Yahoo! Personal Finance are too similar. Most users aren’t sophisticated enough to notice the subtle variation. Each rounded corner module requires additional images and CSS, which slows the page.

A library of smart objects can be used to design new pages in your website. The goal is that new designs should only be created when the existing objects are insufficient. Perhaps you’re wondering what I mean by objects? Imagine that all the different parts of your designs were like LEGO bricks that you could mix and match to create new and interesting pages. If contours, backgrounds, block headers and footers, tabs, drop shadows, and lists could all be combined in different ways, it would allow tons of flexibility in page layout and design. The library allows you to quickly find out what objects already exist, and how they were intended to be used. Rather than hunting around in multiple Photoshop and Illustrator files on different designers’ computers, a library is a one-stop-shop where you can store these building blocks as smart objects.
The library should be something like a style guide, but less formal, and the objects should be stored in such a way that we can quickly grab an existing rounded corner box, stretch it to a different height and width, and pop it into a mockup for a new page. New objects should be added to the library when the design has stabilized, and stale objects should be removed so they aren’t inadvertently used. A library can help you avoid unnecessary duplication.

Speed Tip #2: Use consistent semantic styles
When a new site is born, the style goals are usually clear. As the site evolves, things tend to get a bit muddled as more people touch the design and the client changes direction multiple times. The more consistent your styles, the leaner the code will be. Explain to developers not only what something looks like, but when and how it should be used (semantics), and the code will be much more efficient.

A Web developer might call a title “bigGrayHeading,” then a few months later, the client prefers blue. If the developer understands your intentions, she can call it “section” or “product,” which will be very clear to people building new HTML pages. Naming layers is helpful, but your thought process won’t always be obvious from the PSD. Nothing can replace good communication.

Speed Tip #3: Separate contour and background color
Photoshop naturally makes modules that are transparent on the outside. You choose fill and stroke colors, and it does the rest. On the other hand, you can achieve truly fast websites only if you separate contour from background and content. The goal is to be able to combine any contour with any background color, header, footer, image, or other content.

The same basic glow combined with a transparent (left), blue (middle), and gray striped (right) background. A contour that’s transparent on the inside requires careful selection of pixels and progressively enhanced PNG8 to keep the curve as smooth as possible.

The same contour can also be combined with different headers, footers, or even content and images. Because it’s transparent on the inside, the design has loads of flexibility and is very fast.

Unless you’re willing to have square corners in Internet Explorer, you can’t have a module that’s simultaneously transparent on the inside and outside. A module that’s above a variable background like an image, gradient, or text won’t be as flexible and the site may be slower.

Speed Tip #4: Optimize images and sprites
Most designers know about the Save for Web feature in Photoshop, but you may not know that you can make images even smaller using techniques that cause absolutely no loss in quality. Pixel for pixel, the image is exactly the same, except the file size is smaller. First, choose a reasonable quality via Save for Web. Next, upload images to http://smush.it, and any wasteful image bloat will be removed. Most sites can remove between 10–40% of the total weight by putting their images on a diet!

Speed Tip #5: Avoid nonstandard browser fonts
One of the main complaints I hear about designing for the Web is the lack of typographical control. You want beautiful fonts, but for the moment, the Web makes that impossible. As a workaround, designers often create headings, buttons, and other elements with the text baked into the background graphic.
This can slow the site to a crawl. Even good ideas, like combining background images into CSS sprites, can have unintended consequences when we make seemingly innocuous design decisions. Sprites grow and grow as more text and background color combinations are created. Text should be real HTML text, not images. This is one of the first things to check when a site is exceptionally slow.

Amazon sprites include text as images, a practice that makes their sprites larger.

Speed Tip #6: Avoid height alignment
Height alignment with CSS alone isn’t really viable, and still requires expensive JavaScript. Every time your script jumps through the elements on an HTML page, the site will get slower. The more times it happens, the slower it will be. Height alignment requires a lot of these jumps. Insofar as it’s possible, avoid designs that require height alignment.

Speed Tip #7: Choose your bling carefully
Every site tries to have something special—a design element or feature that sets it apart from other sites in the same space. Unfortunately, if you add too many special touches, frustrated users will only notice how slowly the site loads. Most of the design should use shared elements that are common and consistent across the entire site. Save the exceptions—the bling—for high-impact situations that really make your site stand out.

Avoid large images or Flash below the fold and in secondary tabs, few users will make it that far, particularly if your site is slow. Every time you consider adding bling to the site, ask yourself how that particular element will impact the user experience? Is it worth making the site slower?

Keep in mind that tolerance for both latency and visual decoration are often market dependent. Users don’t always distinguish Web and desktop applications, so their expectations will be higher. They may also be more or less tolerant of slow pages depending on their motivation for visiting the site, for example, PBS Kids versus Mint.com. Be aware of market constraints, and avoid one-size-fits-all bling.

Speed Tip #8: Be flexible (height and width)
Output from tools such as Photoshop is fundamentally different than webpages, and in some cases, this makes it more challenging to design for the Web. In Photoshop, you create a box, set its stroke, choose the radius of its rounded corners, and specify a height and width of, say, 393px. On the other hand, for the Web, most container objects should be height and width agnostic. Why is that?

Changes in module width, background color, or background image are an excellent example of module reuse on Yahoo! Personal Finance. The module can even contain a carousel.

Setting height or width in pixels limits the ways that you can reuse an element. Reusing the same element in different ways is great for performance; the user already downloaded the images and CSS, so it’s very fast. Grids should control the width and content should control the height. That way, when you add another paragraph, the rounded corner box will grow taller to accommodate it. More about grids in the next tip.

Speed Tip #9: Learn to love grids
Website performance is all about abstracting reusable elements. Grids are a great way to do just that. Familiarize yourself with the grids used on your websites. Sometimes a few pixels larger or smaller means your element will fit an existing grid and you can avoid slowing the site with custom code.

Grids may be used to divide any area into subsections. Gutters are sometimes included.

When choosing a grids system for a new site, it can be tempting to choose fixed pixel widths, but consider using percentages as they respond better to changes in overall site width when, for example, the number of columns varies or a redesign widens the overall layout. Try the liquid grids from my Object-Oriented CSS open source project to see this effect in action (http://wiki.github.com/stubbornella/oocss).

The same thirds grid divides the main column of the page and arranges the content, in this case, photos of sweaters on La Redoute. Using grids consistently throughout a design helps the page load faster as the CSS file stays lean and efficient.

Speed Tip #10: Count your suitcases
Weigh them, too. Part of figuring out how to make your websites faster is accurately assessing how bad things have become. This is easier than it might seem. There are two simple things that are responsible for most performance problems:

• Too many components is kind of like arriving at the airport with four pieces of checked luggage and three carry-ons. Each JavaScript, CSS, image, Flash, sprite, etc. counts as one component. Having around 50 components is normal, but if you want to fit more functionality into a faster page, you’ll need to bring this number down.
• Out-of-control page weight is like the traveler who arrives at the airport dragging suitcases so heavy that the baggage handler can’t even get them onto the belt. Websites that are too heavy will always be slow; keep in mind that most of our users don’t have the fancy computers and fast connections that we take for granted. Page weight is usually measured in kilobytes (which can be abbreviated KB or K). The average site is around 350K, but with the techniques in this article, you can do far better than that.

First, install Firebug (http://getfirebug.com), a free extension to Firefox. In Firebug, click on the Net tab, make sure All is selected, and scroll to the bottom. You’ll see total weight and number of components listed in the last row. Compare with industry averages or competitors’ websites to know where you stand. Dreamweaver shows file size and estimates download time, but components aren’t measured properly, so it’s best to use Firebug.

Firebug lists total components (called requests) and page weight (KB) for the Yahoo! search results page.

The designers I’ve been fortunate enough to work with have been amazing user advocates, relentlessly focused on creating a more interesting and valuable experience. After reading the 10 tips in this article, you’re ready to make lightning-fast speed and interactivity part of that user experience.

Hey everyone! Just wanted to get one more post in there before I took off for the weekend. We are presently running a Layers Back Page Design Contest that is scheduled to end on November 30, 2009 – and the winner of it get’s a sweet drive, courtesy of our friends at Fotolia. Our editor, Chris Main shares with us the details of this contest. Now, obviously I can’t win the contest, but I thought it be fun to make up something to share of what I would like an AR thing to do, conceptually:

The Mission

In the “How’d They Do That?” cover story in the September/October 2009 issue of Layers magazine (p. 30), we learn about augmented reality (AR). Most of the AR examples mentioned in the article use a printed marker to trigger the AR experience. Your mission is to create an AR marker for a fictitious movie appropriately titled The Marker. You can give your movie any theme you desire (i.e., science fiction, action/adventure, drama, comedy, etc.). For marker examples, check out the one for District 9 at www.multinationalunited.com/training.

More information on the contest here! Good luck everyone!!!

Dreamweaver makes it easy to add Flash Video to your webpages, but if you want to display your video in QuickTime format, you’ll have to take care of the various settings and other options yourself. In the following steps, you’ll learn how to easily control and customize your QuickTime videos in Dreamweaver. (Note: This tutorial works for both Adobe Dreamweaver CS3 and CS4. The instructions will also work with Windows Media video and other formats, but the parameters will have to be adjusted for those formats).

1 PREPARE QUICKTIME VIDEO IN A VIDEO EDITOR
Although you can insert many different types of video into your pages in Dreamweaver, you’ll first need to edit and convert the video in a video editor, such as Adobe Premiere Pro (shown here).

Click here to read the rest of the tutorial

1 PREPARE QUICKTIME VIDEO IN A VIDEO EDITOR
Although you can insert many different types of video into your pages in Dreamweaver, you’ll first need to edit and convert the video in a video editor, such as Adobe Premiere Pro (shown here).

2 OPEN THE INSERT PANEL IN DREAMWEAVER
Dreamweaver’s Insert panel (Window>Insert) provides a handy collection of options, including the Insert>Media>Plugin feature you’ll need for adding video in QuickTime, Windows Media, or any format other than Flash. If you’re using Dreamweaver CS4, you have the option to keep the Insert panel at the top of the workspace using the CS3 workspace layout (Window>Workspace Layout>Classic) or integrate it into the panels, as we’ve done here. (Note: In Dreamweaver CS3, this feature is called the Insert Bar and it’s only available at the top of the workspace.)

3 INSERT QUICKTIME FILE
First, place your cursor where you want to add the video in your webpage. Then, with the Insert panel open and the drop-down menu at the top set to Common, click the arrow to open the drop-down menu next to the Media icon and select Plugin (note that the Media icon changes to reflect whatever you last selected). Alternatively, you can choose Insert>Media>Plugin.

4 SELECT THE QUICKTIME FILE
If you’ve used the Insert Flash Video (FLV) options in Dreamweaver, you may be surprised that when you add video in other formats using the Plugin option, you won’t be presented with a dialog that contains settings for size or other video options. Don’t worry; just select the QuickTime file for now (as you would if you were inserting an image into the page—just Control-click [PC: Right-click] on the Plugin icon and select Source File). You’ll get a chance to set the size and other settings in the following steps.

5 SPECIFY SIZE IN THE PROPERTY INSPECTOR
Because Dreamweaver can’t automatically detect the size of a QuickTime file, you’ll need to specify the size after you insert it into the page. To do so, click to select the 32×32 icon that Dreamweaver inserts in place of the video and then enter the actual size of the video in pixels in the W (width) and H (height) fields in the Property inspector. The video file we’re using in this lesson is 720×480 pixels. Once you input the sizes, the icon will expand to the specified size.

6 ADD A PLUGIN PAGE URL
With the video selected, you can also use the Property inspector to add a Plugin Page URL. The Web address you enter in the Plg URL field will be displayed in place of the video if the visitor to your site doesn’t have the QuickTime player installed on his or her system. If you’re using QuickTime video, the Plugin URL is http://www.apple.com/quicktime.

7 ALIGN YOUR VIDEO FILE
Although you can use the Align drop-down menu in the Property inspector to align your video, the better option is to use Cascading Style Sheets (CSS). In this example, we’ve created class styles named .float-right and .float-left using the Float options in the Box category of the CSS Rule Definition dialog. To create a new class style, click on the New CSS Rule icon in the CSS Styles panel, choose Class in the drop-down menu, name your style, and click OK to enter the CSS Rule Definition dialog. (You’ll find lots more information about creating and using class styles on the Layers magazine website in the Dreamweaver tutorials section.)

8 SPECIFY A BORDER, V SPACE, AND H SPACE
To add a border to your video, enter the size you want in pixels in the Border field in the Property inspector. You can also add V Space and H Space (vertical and horizontal space, respectively). When you use H space and V space, you add margins to the top and bottom or left and right. If you define a style in CSS to specify margins and border, you’ll have more options and can choose to add margin space to any or all of the sides of the video, as well as change the color and style of the border.

9 USE PARAMETERS FOR ADVANCED SETTINGS
For more advanced options and settings, you’ll use the Parameters option in Dreamweaver and you’ll need to know the parameter options specific to QuickTime (or whatever video format you’re using). To open the Parameters dialog, click on the Parameters button in the Property inspector (remember, the video must be selected for these options to display in the Property inspector).

10 SET VIDEO TO LOOP WITH PARAMETERS
If you want your video to play in a continuous loop, use the Parameters dialog, enter “loop” as the Parameter and “true” as the Value, and click OK. Most parameters work this way with true being the setting to turn an option on, and false the setting to turn an option off. Thus, if you set the Parameter to “loop” and the Value to “false,” the video won’t loop.

11 TURN OFF AUTOPLAY
To add additional parameters, click the plus (+) sign at the top of the Parameters dialog and then enter each parameter and value on its own line. Another popular QuickTime parameter is Autoplay. To prevent the video from playing when the page loads, enter the Parameter “autoplay” with the Value “false.”

12 MORE PARAMETERS
You’ll find more parameters and Embed settings for QuickTime at www.apple.com/quicktime/tutorials/embed2.html. Another popular option is to include the video controller using the Parameter “controller” and Value “true.” To hide the controller, set the Value to “false.” And here’s an advanced tip: For the controller to display properly, you need to add 16 pixels to the Height of the video in the Property inspector. So the new Height in this example would be 496 pixels.

13 PRESS PLAY TO PREVIEW
Dreamweaver CS4 makes it possible to preview the video in the Dreamweaver workspace. Just select the video and press the Play button in the Property inspector and the video should play much as it would in a Web browser with the QuickTime plug-in. You can also preview your work by using the Browser preview option (File>Preview in Browser). (Note: You must have the QuickTime plug-in installed on your computer for the QuickTime video to play in a Web browser.)