Design and implement macOS document icons - Discover

Design and implement macOS document icons – Discover Leave a comment


A great document icon aids within the identification of your file on the Desktop, in a Finder window, or in an open dialog, particularly when previews aren’t out there. These icons could also be displayed on display screen as small as 16pt or massive sufficient to showcase each wonderful design element.

Depending on the file kind and private desire, document icons also can show document previews. If somebody has chosen to not present document extensions in System Preferences, these icons can moreover present further context in deciphering their file kind and native program.

With macOS Big Sur, you’ll be able to customise and management how your app’s document icons show throughout the system. We’ll present you design an important icon, combine it into your Xcode mission, and assign document sorts and kind identifiers.

Design a document icon to your app

By default, when you don’t specify a document icon for a file kind in your app, macOS will routinely create one for you by compositing your app’s icon along with the right extension identify. This is a typical sample for imported document sorts or non-proprietary file codecs that your utility can open comparable to MP3, JPG or PNG.

Both the Music and Preview apps use system-generated document icons for document sorts like JPG and MP3.

You can moreover create a customized document icon in case your app helps a number of file sorts and you’d prefer to visually distinguish between them. For instance, a drawing utility might open a jpg file, a mission file, a library of drawing elements, a plugin or a coloration swatch.

When making a customized icon, we suggest conserving its design easy. Try to depict what your icon represents as carefully as doable and with as few particulars as doable. Additionally, consider different document sorts that your document might generally be subsequent to, and use distinct shapes and colours which are identifiable even at smaller sizes.

If you propose to create a number of customized icons for various file sorts, it’s vital to make every design distinct and comprehensible to assist folks know what to anticipate once they open them.

The components of a customized document icon
Beginning with macOS Big Sur, you’ll be able to generate a brand new customized document icon with a set of pictures and a textual content string.

To create a brand new customized document icon, you’ll be able to present a background fill, heart picture, or textual content string. Each of those three components is optionally available, permitting you to make use of only one component or any mixture of the three to customise your icon. From there, macOS will routinely layer, place, and masks these components, then composite them right into a web page icon with a proper nook fold.


You can obtain Sketch and Photoshop templates on Apple Design Resources to help within the era of the picture property in all their required sizes.

Apple Design Resources


Fill within the background
The background picture means that you can customise the background of your icon. The artwork ought to fill the complete drawing space, as proven beneath, and the system will routinely masks it to the document form in all sizes.

Background pictures cannot solely be used to alter the background of your document, however you too can use them to create customized designs that fill the complete web page.

The background picture needs to be drawn within 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 the Rich Text Format icons use nothing however the background fill component to create a customized look and really feel.

Add a middle picture
The heart picture is all the time half the scale of the document canvas. For instance, the middle picture shows at 16pt on a 32pt icon measurement.

The bulk of the art work for the middle picture needs to be drawn at ~80% of the canvas measurement. For instance, on the 256×256 model, the drawing needs to be inside a 205×205 space, as proven within the picture beneath. Curves and factors can lengthen into the margin to regulate for optical alignment.

The form of the art work needs to be easy to make it simply identifiable in smaller sizes. The rendering, nonetheless, might be as easy or as wealthy as you’d like.

The heart picture might be specified within 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 textual content string will usually be your document’s extension, however can be one thing extra descriptive. For instance, “SCENE” is extra descriptive — and simpler for somebody to grasp — than “scn.”

The Swift and Metal document icons each use textual content strings to obviously determine their document sorts.

The system will capitalize and scale the textual content to suit contained in the icon, so it’s vital to maintain the size of your string as wanting doable to stop it from getting too small. The textual content can even routinely change its coloration to stay legible in opposition to flat coloured backgrounds.

Build document icons in your app

To create your document icon sorts, you’ll must combine these components into your Xcode mission.

Bring pictures into the asset catalog
First, add your background fill picture and/or heart picture into the Asset Catalog as Generic Icons.

  1. In Xcode, click on the + button inside your Asset Catalog.
  2. Choose macOS > macOS Generic Icon.
  3. Drag your property into their respective measurement slots.

If your property are named utilizing the format icon_[size]x[size][@resolution].png (e.g. icon_32x32@2x.png or icon_32x32.png), they’ll all be dragged directly and will routinely be assigned to their acceptable measurement slots.

Configure the Document Type Identifier
Click the Imported/Exported Type Identifier disclosure triangle so as to add a brand new Document Type Identifier or open an current one.

  • Icon Image (optionally available): Select a Center Image out of your app’s Asset Catalog.
  • Icon Fill (optionally available): Select a Background Fill Image out of your app’s Asset Catalog
  • Icon Text (optionally available): Input the textual content you need displayed on the underside of the document icon. This might be the identical because the extension or one thing extra descriptive. For instance, the scn extension can use scene as its textual content.
  • Legacy Icon (optionally available): This is both an .icns file or a Generic Icon in your Asset Catalog which will likely be used when you deploy your utility to macOS 10.15 and beneath or in macOS 11 if Icon Image, Icon Fill and Icon Text are left clean. If you don’t present a legacy icon, macOS 10.15 and earlier will create one for you by compositing your app’s icon contained in the outdated model document sheet. If a Legacy Icon was specified within the Document Type part, it should override this.

Declaring New Uniform Type Identifiers

Configure your document icons

Here’s point out whether or not you wish to show a legacy document icon, a customized icon, a programmatic possibility.

  1. In Xcode’s Project navigator, choose the mission file.
  2. Select your app’s goal from the goal listing.
  3. Choose the Info tab.

Click the Document Type disclosure triangle so as to add a brand new Document Type or open an current one.

You’ll have two choices right here for iconography:

  • Legacy Icon (optionally available): This is both an .icns file or a Generic Icon in your Asset Catalog. macOS makes use of legacy icons when you deploy your app to macOS 10.15 or earlier, or in order for you a customized icon on macOS 11. If you don’t present a legacy icon, macOS 10.15 and earlier will create one for you by compositing your app’s icon contained in the outdated model document sheet. If you’ve specified a Legacy Icon within the Document Type Identifier, the one within the Document Type will override it.
  • Use system generated icons: Check this field when you’ve outlined an Icon Fill, Image or Text within the Document Type Identifier to be used in macOS 11 and above, otherwise you need the system to make use of your App’s icon and extension identify as your icon. If you allow this field unchecked, macOS will use your Legacy Icon for that document kind even when working macOS 11 and above.

Developing a Document-Based App

Validate your app document icons

You can check your new document icons in your app by constructing and working your app. Here’s what you might want to do.

  1. Remove all different variations of your app out of your check system and empty the Trash.
  2. Open your app mission in Xcode
  3. Build and run your app
  4. Gather check property by creating a brand new folder and including one among every document kind.
  5. Open the check asset folder in Finder.
  6. In Finder, go to View > Show View Options to open the “View Options” window to your check asset folder.
  7. Make positive that “Show icon preview” is unchecked.

Bring some life into your paperwork

Document icons in macOS Big Sur are a wonderful strategy to additional refine your app’s design on Mac and assist folks determine the right file at a look. For extra assist on creating these icons, you should definitely try the Apple Design Resources and developer documentation.

Updated on January 11, 2021 to offer extra details about legacy icons.

Resources

Learn more about designing document icons

Apple Design Resources

Developing a Document-Based App

Uniform Type Identifier Concepts

Declaring New Uniform Type Identifiers

Adopting Uniform Type Identifiers

Introduction to Uniform Type Identifiers

Leave a Reply

Your email address will not be published. Required fields are marked *