Article

Setting Up the Advanced Tutorials

Download the tutorial files, and learn about what you’ll create in the three advanced tutorials.

Overview

These three advanced tutorials will help you use some of the advanced design and layout features of Apple News Format. For information on previewing the article bundle examples and choosing a text editor, see Setting Up the Introductory Tutorial.

The images below show some of the design and layout features of Apple News Format, such as inset components and inline HTML styling. You'll use these features in the tutorials that follow to build your own designs and layouts, and Apple News will adapt your layouts to any iOS or macOS device.

Header Techniques

The first advanced tutorial covers some techniques for designing the header of your article.

Layout and Positioning

The second advanced tutorial covers elements of complex layouts, along with other topics.

Video and Dark Theme

Among other topics, the third advanced tutorial will teach you how to include a video as your header background and implement a theme with different colors.

Static Image Fill

Another topic the third advanced tutorial covers is how to cause an image to stay still while article content scrolls in front of it.

Choose an Option for Completing the Advanced Tutorials

Choose one of these options.

  • Option 1: Edit files yourself. (Recommended.) Download the article.json file, and use the instructions in this tutorial to add code to the file. Preview your changes as you go, using the News Preview tool.

  • Option 2: Preview completed files. Follow along by looking at downloadable examples that represent the completion of each stage of this tutorial. Preview the completed articles in the News Preview tool.

Download the Article Bundle Examples

To begin the advanced tutorials, you’ll need to download and unzip one or more Apple News Format article bundles, or use your article.json file from the completed introductory tutorial.

  1. On your Desktop, create a folder named News_Design_Tutorial_Advanced.

  2. Download and unzip the following examples, and then move the resulting folders into your Desktop/News_Design_Tutorial_Advanced folder.

See Also

Advanced Design Tutorial 1: Headers and Parallax Behavior

About Containers

Learn the basic Apple News Format container concepts required for the three advanced tutorials.

Creating a Layered Header

Create a header with a caption that’s layered in front of an image.

Adding Parallax Behavior

Create an illusion of multiple flat layers by causing the article body to overlap the header as the user scrolls.