Friday, July 11, 2014

Easily create DPS splash screens

Every Adobe Digital Publishing Suite app for the iPad must contain 4 splash screens in the following sizes: 768 x 1024 pixel, 1024 x 768 pixel, 1536 x 2048 pixel, and 2048 x 1536 pixel. For iPhone apps, you must include 3 splash screens sized to 320x480, 640x960, and 640x1136 pixels. These splash screens must be saved in the PNG format. The splash screen appears on the screen momentarily while the app loads.

I’ve created an InDesign template to make creating these various sizes of the splash screens quick and easy. You can download the template here

ScreenSnapz001

The template contains 7 pages in each of the pixel dimensions listed above. Create your desired artwork on the pages corresponding to the sizes that you need, then choose File > Export and export the pages in PNG format. Fill in the Export PNG dialog box as shown below, and PNGs with the exact dimensions required will be output.

ScreenSnapz002

Unfortunately, InDesign only exports PNG-24 images. To save on file size in your app, you should open each of these PNG images in Photoshop, choose File > Save for Web, and save each file in PNG-8 format.

Thursday, June 12, 2014

How to embed video in a DPS scrollable frame

When creating scrollable frame content for Adobe DPS, the scrolling content can be a group of any type of InDesign objects, both static and interactive. You can group together text frames, images, buttons, and multi-state objects, and then make the group scrollable. However, if you try to include video in the scrollable frame group, you’ll find that it doesn’t work. After you paste the group into the “container frame” and go to the Folio Overlays panel, you’ll see that the options for video are displayed, not the options for scrollable frames.

Here’s a workaround that makes it possible to include embedded video in scrollable frames:

1. Group all the content together that you want as scrolling content, except for the video

2. Create a frame the same size as the outer bounds of the scrolling content, and name this frame “Container frame” in the Layers panel

3. Cut the scrolling content group

4. Select the Container frame, and choose Edit > Paste Into

5. In the Folio Overlays panel, choose Scrollable Frame, and select the desired scroll direction and other options

6. Place the video that you want to include in the scrolling content

7. In the Layers panel, drag the video into the Group that is inside the Container frame

ScreenSnapz001

ScreenSnapz002

8.  In the Folio Overlays panel, set your video playback options as desired

9. Position the video where you want it to be in the scrolling content

10. Resize the Container frame so that it is smaller the the scrolling content group.

Wednesday, June 04, 2014

Boat in the pond

This post is a break from my usual digital publishing technology posts. As some of you know, I’m nuts about sailing. I’ve spent the last few days training and consulting at Oracle Corporation headquarters in Redwood City, CA. You may know that Oracle is a major sponsor of the America’s Cup.  

The main Oracle campus features a small pond in the center. This month they delivered USA-17, the trimaran that won the 33rd America’s Cup in 2010, to the middle of the pond. It was airllifted into place by a helicopter. As you can imagine, the trimaran looks gigantic in the middle of the pond.

Some statistics about the boat:

  • The mast is 20 stories high
  • The boat took 150,000 man-hours to build
  • The enormous hull is 90 feet x 90 feet square (bigger than a baseball infield)
Here’s a photo of the mast being trailered in:
 

Oracleboat

The boat in its final resting place:

2014 06 04 16 33 13

2014 06 04 16 39 16

2014 06 04 16 25 57

2014 06 04 16 27 59

2014 06 04 16 31 23

2014 06 04 16 32 26

 

Sunday, June 01, 2014

How to make the Photoshop Crop tool behave like older versions

I did some Photoshop training last week, and was reminded again how much some people dislike the behavior of the “new and improved” crop tool that was introduced in Photoshop CS6.

What people dislike the most is the new behavior where Photoshop continuously centers the crop area on the screen as you resize and reposition the crop boundary. If this bothers you, pick up the crop tool, click on the gear icon in the Options bar, and uncheck the Auto Center Preview option. This will turn off the auto centering behavior, and the crop tool will behave similar to previous versions.

ScreenSnapz001

Another complaint I hear is that people dislike the way Photoshop applies a crop boundary to the image as soon as you click on the Crop tool. If you don’t like where the crop boundary is positioned, it takes longer to move and resize the boundary than to just create a new one. But did you know that you can just ignore the crop boundary that Photoshop creates, and drag to create an entirely new boundary? You don’t need to resize/reposition the boundary that is there.

In case you’ve missed it, I’d like to point out the Delete Cropped Pixels choice in the Options bar. If you uncheck this option, cropping is non-destructive. In other words, as long as you save your image as a layered PSD or TIFF file, the pixels outside the crop boundary are retained, so that you can adjust the crop boundary in the future. 

Tuesday, May 27, 2014

How to add YouTube streaming video to a DPS article (part 2)

There are several ways to add video to Adobe Digital Publishing Suite projects. This blog post assumes that you want to add a video that will stream into the article from YouTube, and you want the video to play full screen when tapped. Video configured this way will require the user to have an internet connection. If you want the video to play within a frame of a specific size within your layout, see this previous post.

1. Create your layout in InDesign, place a high-qulity still image, or a screen shot from a selected frame of the video in the layout. The size and location of this image can be anything you want, since the video is going to play full-screen.

ScreenSnapz001

2. Locate the video on YouTube that you wish to embed.

3. On the YouTube page beneath the video, click on Share, and then click on Embed.

Screenshot1

4. Select only the portion of the embed code that is highlighted in blue below, and copy it to the clipboard

ScreenSnapz004

5. In InDesign, select the frame from step 1, and select the Go To URL action

ScreenSnapz002

6. Paste the text you copied in step 4 into the URL field, directly after the http://

ScreenSnapz005

7. Add some artwork to indicate that the user can tap the image to play the video.

ScreenSnapz006

That’s it. Now when the user taps the image, the web browser that is built into DPS will overlay the page content, with the YouTube video queued up and ready to play. Then the user will need to tap again to play the video.