How to start designing assets in Display P3 – Discover

How to start designing assets in Display P3 – Discover

  • Apple
  • July 2, 2020
  • No Comment
  • 60
  • 8 minutes read


An attractive color icon or touch can focus attention and help people find the right information within your app. Consider designing these assets in the Display P3 color space: they will look richer and more vibrant on any device with a wide color gamut display.

Retina displays come in a wide range of colors on most Macs, as well as iPhone, iPad, and Apple Watch. They bring more real colors and deep nuances to the screen, not only for excellent viewing of images and videos, but also enhance the daily experience of people with the app.

Use the Display P3 features in your app to amplify important elements of your interface: the colors of a VU meter in an audio app, for example, or the red line of a rev counter within your game of races.

If you show a photo or video in your application, you should consider using Display P3 to help the images stay true to the original camera capture. Shopping apps can help people choose the right item by showing the actual color of a particular dress or pair of pants. You can also use Display P3 for the app icon to highlight colors and soften gradients.

Interested in exploring Display P3 for your assets? To get started, you will need to prepare your tools to work in this color space. We’ll show you how to design Display P3 with two popular Mac applications: Adobe Photoshop and Sketch.


Note: Does your screen support Display P3?

Your hardware tools are just as important as your software tools – make sure the device you use to create assets supports the Display P3 color space so that you can accurately preview your designs. This includes all iMacs with Retina displays, MacBook Pro 2016 and later, LG UltraFine 4K or 5K display, and Pro XDR display.


Set up a new Display P3 canvas

Here’s how to set up your canvas to support P3 Display.

Create a new Display P3 canvas in Photoshop

  1. Open Adobe Photoshop on your Mac.
  2. Click Create a new one main interface button. (You can also create new documents at any time by going to the toolbar and selecting File> New.)
  3. Choose the dimensions and any other information you want to customize for your canvas.
  4. In Color mode, change the color depth from 8 a 16 bits.
  5. Under Color Profile, select P3 screen.
  6. Select To create to start designing on the P3 screen.
You can avoid manually creating a canvas for each new resource by saving your settings as the default.  Name your default at the top of the screen, press the Save button, and then press Save Default.

You can avoid manually creating a canvas for each new resource by saving your settings as the default. Name your default at the top of the screen, press the Save button, and then press Save Default.

Create a new Display P3 canvas in Sketch

  1. Open Sketch on your Mac.
  2. Create a new file.
  3. Go to File> Change Color Profile (or use the Shift-Command-K keyboard command).
  4. Select P3 screen like your color profile.
  5. Choose Assign.
Use the Sketch color profile settings to use Display P3 on your canvas.

Use the Sketch color profile settings to use Display P3 on your canvas.

Convert an existing sRGB image to P3

If you receive image resources from another person, make sure that these resources are converted to Display P3 directly from the RAW file, not from sRGB, as some of the color information will be lost in the conversion.

If you need to import an existing image into Photoshop, use it Convert to Profile to preserve your design as much as possible. If you use Assign to Profile, this will take your existing colors and stretch them to the new color space, changing your design along the way.

In Sketch, after receiving the file, go to File> Change Color Profile to edit your color profile. Then select Convert.

Export your work to the P3 screen

Once you’ve finished creating your asset, you can keep the Display P3 color space in any file you export.

How to export your work to Photoshop

Note: Although there are several ways to create resources from the work you do in Photoshop, such as Generator or Export as, only with Save as will keep the color space of the P3 screen and the depth settings of 16-bit color.

  1. Go to the toolbar and select File> Save As … (or type Shift-Command-S).
  2. Choose where you want to save your assets.
  3. If necessary, put a name on your asset.
  4. Under Format, select PNG.
  5. Below Color, make sure Embed color profile: Show P3 configuration checked.
  6. Save your file.
Export your P3 assets to Photoshop using the Embed Color Profile option on the Save As screen.

Export your P3 assets to Photoshop using the Embed Color Profile option on the Save As screen.

How to export your work to Sketch

Sketch retains your color profile after export, allowing you to save your P3 work in the same way as other assets.

  1. A Sketch, aeu a File menu.
  2. Select the export option you need: Export o Export current selection.

Resources

See “Getting Started with the P3 Screen”

See “Optimizing application resources”>

See “Best practices for images and graphics”

Learn more about color management>



Source link

Related post

NEP looks beyond academics to envisage character building in students, says Minister

NEP looks beyond academics to envisage character building in…

It aims to impart moral and ethical values ​​to every learner, says Dharmendra Pradhan It aims to impart moral and ethical…
Emirates News Agency – WGS report addresses how governments can create a more systematic and rigorous approach to skills trainings

Emirates News Agency – WGS report addresses how governments…

DUBAI, 2nd October 2022 (WAM) – A report published by the World Government Summit Organization identifies how today’s employers are failing…
Try one of the easiest Python 3 beginner courses for $40

Try one of the easiest Python 3 beginner courses…

Offer price and availability subject to change after publication. TL;DR: Starting October 2, you can sign up for the Premium Python…

Leave a Reply

Your email address will not be published.