Design and implement macOS document icons – Discover

Design and implement macOS document icons – Discover

  • Apple
  • January 11, 2021
  • No Comment
  • 67
  • 15 minutes read


MacOS Document Icon Grid 11

A good document icon helps identify your file on your desktop, in a search window, or in an open dialog, especially when previews aren’t available. These icons can be displayed on the screen as small as 16 dots or large enough to show all the details of the glorious design.

Depending on your file type and personal preferences, document icons may also show document previews. If someone has chosen not to display document extensions in System Preferences, these icons can also provide additional context for decrypting their native file type and program.

With macOS Big Sur, you can customize and control how your application’s document icons are displayed on your system. We’ll 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 application

By default, if you do not specify a document icon for a file type in your application, macOS will automatically create one for you by composing the application 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 application use system-generated document icons for document types such as JPG and MP3.

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

Additionally, you can create a custom document icon if your application supports different file types and you want to distinguish them visually. For example, a drawing application can open a jpg file, a project file, a drawing component library, a plugin, or a color swatch.

When creating a custom icon, we recommend that the design be simple. Try to represent what your icon represents as closely as possible and in as little detail as possible. Also, think of other types of documents that your document can usually be next to, and use different shapes and colors that can be identified even in smaller sizes.

If you plan to create multiple custom icons for different file types, it’s important that each design is different 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.

Breakdown of document icon composition

Breakdown of document icon composition

To create a new custom document icon, you can provide a background fill, center image, or text string. Each of these three elements is optional, allowing you to use only one element or any combination of the three to customize your icon. From here, macOS will automatically place, place, and mask these items, and then compose them into a page icon with a fold in the right corner.


You can download Sketch and Photoshop templates from Apple Design Resources to help you generate image resources in all the necessary sizes.

Apple design resources


Fill in the bottom
The background image allows you to customize the background of your icon. The artwork should fill the entire drawing area, as shown below, and the system will automatically mask it to the shape of the document in all sizes.

Document icon background

Document icon background

Not only can background images be used to change the background of the document, but you can also use them to create custom layouts that fill the entire page.

The background image should be drawn to the following sizes:

  • 512 x 512
  • 512×512 @ 2x
  • 256 x 256
  • 256×256 @ 2x
  • 128 x 128
  • 128×128 @ 2x
  • 32×32
  • 32×32 @ 2x
  • 16×16
  • 16×16 @ 2x
The Xcode project icon and rich text formatting icons use nothing but the background fill element to create a custom look.

The Xcode project icon and rich text formatting icons use nothing but the background fill element to create a custom look.

Add a central image
The center image is always half the size of the document canvas. For example, the center image is displayed at 16 pts with an icon size of 32 pts.

Most of the artwork for the central image should be drawn at ~ 80% of the size of the canvas. For example, in the 256×256 version, the drawing should be within an area of ​​205×205, as shown in the following image. Curves and dots can be extended to the margin to fit the optical alignment.

The shape of the artwork should be simple to make it easily identifiable in smaller sizes. The representation, however, can be as simple or as rich as you want.

The center image can be specified in the following sizes:

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

Adds some textual context
The icon text string will often be the extension of your document, but it can also be more descriptive. For example, “SCENE” is more descriptive and easier for someone to understand than “scn”.

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

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

The system will capitalize and scale the text so that it fits within the icon, so it’s important to keep the length of the string as short as possible to prevent it from shrinking too much. The text will also automatically change color to remain readable on flat colored backgrounds.

Create document icons in your application

To create your document icon types, you’ll need to integrate these elements into your Xcode project.

Enter images in the asset catalog
First, add your background fill image and / or center the image in the asset catalog as generic icons.

  1. In Xcode, click + button within your asset catalog.
  2. Choose macOS> generic macOS icon.
  3. Drag your resources to their respective size slots.

If your assets are named with the format icon_[size]x[size][@resolution].png (for example icon_32x32@2x.png o icon_32x32.png), can be dragged all at once and will be automatically assigned to their slots of the appropriate size.

Asset catalog with a set of central image images.

Asset catalog with a set of central image images.

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.

Example: Document type settings

Example: Document type settings

  • Icon image (optional): Select an image from the center of your application’s asset catalog.
  • Fill icon (optional): Select a background image from your application’s asset catalog
  • Text icon (optional): Enter the text that you want to display at the bottom of the document icon. This may be the same as the extension or something more descriptive. For example, the scn you can use the extension scene like your text.
  • Legacy icon (optional): This is an .icns file or a generic icon in your asset catalog that will be used if you deploy your application to macOS 10.15 and later or macOS 11 if the icon image, l icon fill and icon text are left blank. If you do not provide a legacy icon, macOS 10.15 and earlier will create a component icon for your application within the old-style document sheet. If an inherited icon is specified in the Document Type section, it will replace it.

Declaration of new uniform type identifiers

Configure the icons for your documents

Here’s how to show if you want to display an inherited document icon, a custom icon, or a programmatic option.

  1. In the Xcode project browser, select the project archive.
  2. Select yours the purpose of the application of the goal list.
  3. Choose the Information tab.

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

Document type configuration panel

Document type configuration panel

Here are two options for iconography:

  • Legacy icon (optional): This is an .icns file or a generic icon in your asset catalog. macOS uses legacy icons if you are deploying your application to macOS 10.15 or earlier, or if you want a custom icon in macOS 11. If you do not provide a legacy icon, macOS 10.15 and earlier will create a component for the application icon. inside the old style document sheet. If you specified an inherited icon in the document type identifier, the document type icon will replace it.
  • Use system-generated icons: Check this box if you have set an icon, image, or text fill in the document type identifier for use in macOS 11 and later, or if you want the system to use the icon and the name of the document. application extension as icon. If you leave this box unchecked, macOS will use your legacy icon for this document type even when you are running macOS 11 or higher.

Development of a document-based application

Validate application document icons

You can test new document icons in your application by creating and running your application. Here’s what to do.

  1. Remove all other versions of your application from your test system and empty the trash.
  2. Open your Xcode application project
  3. Build and run your application
  4. Gather test the assets by creating a new folder and adding one of each document type.
  5. Open the test assets folder in the Finder.
  6. In the Finder, go to View> Show display options to open the “Show Options” window in the test resources folder.
  7. Make sure “Show icon preview” is unchecked.

Bring your documents to life

MacOS Big Sur document icons are a great way to further refine your Mac application design and help people identify the right file at a glance. For more support for creating these icons, be sure to check out Apple’s design resources and developer documentation.

Updated January 11, 2021 to provide more information about legacy icons.

Resources

Learn more about document icon design

Apple design resources

Development of a document-based application

Uniform type identifier concepts

Declaration of new uniform type identifiers

Adoption of uniform type identifiers

Introduction to uniform type identifiers



Source link

Related post

EDUCAUSE 2022: How Data Collection Can Improve Student and Faculty IT Support

EDUCAUSE 2022: How Data Collection Can Improve Student and…

At Indiana University, Gladdin said, to make life easier for students and faculty, they implemented a course template for the Canvas…
UGC, AICTE warn students against online PhD programmes offered by EdTech platforms | Latest News India

UGC, AICTE warn students against online PhD programmes offered…

The University Grants Commission (UGC) and the All India Council for Technical Education (AICTE) on Friday issued a joint advisory against…
UGC, AICTE warn students against online PhD programmes offered by EdTech platforms | Latest News India

UGC, AICTE warn students against online PhD programmes offered…

The University Grants Commission (UGC) and the All India Council for Technical Education (AICTE) on Friday issued a joint advisory against…

Leave a Reply

Your email address will not be published.