Home / IOS Development / Design and implement macOS document icons – Discover

Design and implement macOS document icons – Discover

A good document icon helps identify your file on the desktop, in a Finder window or in an open dialog, especially when previews are not available. These icons can be displayed on the screen as small as 16pt or large enough to display all the brilliant design details.

Depending on the file type and personal preference, document icons may also display document previews. If someone has chosen not to show document extensions in System Preferences, these icons can also provide additional context when they indicate the file type and their own program.

With macOS Big Sur, you can customize and control how the app̵

7;s document icons appear across the entire system. We show you how to design a great icon, integrate it into your Xcode project, and assign document types and type identifiers.

Design a document icon for your app

If you do not specify a document icon for a file type in your app, macOS will automatically create one for you by composing your app icon along with the correct extension name. This is a common pattern for imported document types or non-proprietary file formats that your application can open, such as MP3, JPG or PNG.

Both the Music and Preview apps use system-generated document icons for document types such as JPG and MP3.

You can also create a custom document icon if your app supports multiple file types and you want to distinguish them visually. For example, a drawing program can open a jpg file, a project file, a library of drawing components, a plugin, or a swatch.

When creating a custom icon, we recommend keeping the design simple. Try to portray what your icon represents as closely as possible and with as few details as possible. Think also of other document types that the document can often be next to, and use different shapes and colors that can be identified even in smaller sizes.

If you are planning to create multiple custom icons for different file types, it is important to make each design clear and understandable to help people know what to expect when they open them.

The elements of a custom document icon
Starting with macOS Big Sur, you can generate a new custom document icon with a set of images and a text string.

To create a new custom document icon, you can specify a background fill, center image, or text string. Each of these three elements is optional, so you can use just one element or any combination of the three to customize your icon. From there, macOS will automatically store, place and mask these elements, and then assemble them into a side icon with a right corner fold.

You can download Sketch and Photoshop templates from Apple Design Resources to help you generate pixels of any size you need.

Apple Design Resources

Fill in the background
The wallpaper allows you to customize the background of your icon. The art should fill the entire drawing area, as shown below, and the system automatically masks it to the document shape in all sizes.

Wallpapers can not only be used to change the background of the document, but you can also use them to create custom designs that fill the entire page.

The background image must be drawn in the following sizes:

  • 512×512
  • 512×512 @ 2x
  • 256×256
  • 256×256 @ 2x
  • 128×128
  • 128×128 @ 2x
  • 32×32
  • 32×32 @ 2x
  • 16×16
  • 16×16 @ 2x

The Xcode Project icon and Rich Text Format icons use nothing but the background fill element to create a custom look.

Add a center image
The center image is always half the size of the document. For example, the center image is displayed at 16pt on a 32pt icon size.

The bulk of the artwork for the center image should be drawn with ~ 80% of the canvas size. For example, on the 256×256 version, the drawing should be within a 205×205 area, as shown in the image below. Curves and dots may extend into the margin to adjust for optical alignment.

The shape of the artwork should be simple to make it easy to identify in smaller sizes. However, rendering can be as simple or as rich as you like.

The center image can be specified in the following sizes:

  • 256×256
  • 256×256 @ 2x
  • 128×128
  • 128×128 @ 2x
  • 32×32
  • 32×32 @ 2x
  • 16×16
  • 16×16 @ 2x

Add some textual context
The icon’s text string will often be an extension of the document, but can also be somewhat more descriptive. For example, “SCENE” is more descriptive – and easier for some to understand – than “scn.”

The Swift and Metal document icons both use text strings to clearly identify document types.

The system will capitalize and scale the text to fit the icon, so it is important to keep the length of the string as short as possible to prevent it from becoming too small. The text will also automatically change color to remain legible against a flat background.

Build document icons in your app

To create document types, you must integrate these elements into the Xcode project.

Take pictures in the asset catalog
First, add the background fill image and / or center image to the asset directory as generic icons.

  1. In Xcode, click + button in your asset directory.
  2. Select macOS> macOS generic icon.
  3. Drag your belongings into their respective size slots.

If your assets are named using the format icon_[size]x[size][@resolution].png (e.g. icon_32x32@2x.png or icon_32x32.png), they can all go at once and will automatically be assigned the appropriate track.

Configure the document type identifier
Click the import / export type identifier disclosure triangle to add a new document type identifier or open an existing one.

  • Icon image (optional): Select a center image from the app’s asset directory.
  • Icon fill (optional): Select a background fill image from the app’s asset directory
  • Icon text (optional): Enter the text you want at the bottom of the document icon. This can be the same as the extension or something more descriptive. For example scn extension can use stage as the text.
  • Legacy icon : If an older icon was specified in the Document Type section, it will override this.

Declaration of new uniform identifiers

Configure your document icons

To specify whether to display an older document icon, a custom icon, a programmatic option.

  1. In Xcode’s project navigator, select the project file.
  2. Choose yours the app’s goals from the target list.
  3. Select Info category.

Click the document type triangle to add a new document type or open an existing one.

You have two options here for iconography:

  • Legacy icon (optional): This is either an .icns file or a generic icon in your asset directory. macOS uses older icons if you deploy your app to macOS 10.15 or earlier, or if you do not provide any custom items for your icon. If you have specified an older icon in the document type identifier, it overrides it in the document type.
  • Use system-generated icons: Check this box if you have defined an icon fill, image, or text in the document type identifier for use with macOS 11 and later, or if you want the system to use the app’s icon and extension name as your icon. If you do not check this box, macOS will use your Legacy icon for that type of document, even when running macOS 11 and later.

Development of a document-based app

Validate your app document icons

You can test your new document icons in your app by building and running your app. Here’s what you need to do.

  1. Remove all other versions of your app from the test system and empty the Recycle Bin.
  2. Open your app project in Xcode
  3. Build and run your app
  4. Collect test assets by creating a new folder and adding one of each document type.
  5. Open the test asset folder in the Finder.
  6. Go to the Finder View> View display options to open the “Display Options” window for the test material folder.
  7. Make sure “Show Icon Preview” is unchecked.

Bring some life to your documents

Document Icons in macOS Big Sur is an excellent way to further develop the app’s design on Mac and help people quickly identify the correct file. For more support on creating these icons, check out Apple Design Resources and the developer documentation.


Apple Design Resources

Development of a document-based app

Uniform Type Identifier Concepts

Declaration of new uniform identifiers

Adopt uniform type identifiers

Introduction to uniform type identifiers

Source link