Create a visionOS App Icon

VisionOS

VisionOS app icons are circular and consist of a background layer with one or two layers on top, creating a three-dimensional object that subtly expands when viewed by users.

📒 Human Interface Guidelines

visionOS icon

We aimed to maintain a familiar home view, taking it a step further by rendering app icons in three-dimensional realism within your space. As people glance at them, they dynamically expand. The system enhances this visual experience by introducing specular highlights and shadows, reinforcing the subtle depth between layers.

How can you craft an exceptional icon design? Here are key tips:

• Utilize up to three layers: a background layer and up to two foreground layers.
• Employ a combination of flat layers; shadows and glass layers will be applied automatically.
• Design the background layer as an edge-to-edge square image.
• Aim to keep graphics centered; if they're too close to the edge, they may appear off-center when expanded.

How to Create a visionOS App Icon on Spline

I want to show that we can also achieve the same thing with Spline. we can create a icon from scratch and export as PNG or JPG. Let’s create an App icon in hight resolution. First we are going to setup the frame to the resolution 1024 x 1024.

• Frame Size: Set the dimensions to 1024 x 1024 pixels.
• Guide Visibility: Adjust the guide to 0% for improved visibility during the design process.

Add Background layer

Now, let's lay the foundation by adding a background layer using a rectangle shape. The background layer provides a backdrop for our icon. By using a white color with specific effects like corner radius, roundness, extrusion, and bevel, we can add depth and dimensionality to the background, enhancing the overall visual appeal of the icon.

• Rectangle Size: Create a rectangle with dimensions of 1024 x 1024 pixels.
• Color: Choose a white color for the background.
• Corner: Set the corner radius to 700.
• Roundness: Opt for an arc-shaped roundness.
• Extrusion: Apply an extrusion effect with a value of 16.
• Bevel: Set the bevel effect to 20.
• Bevel Sides: Adjust the bevel sides to 10.

📒 Note that I used the circle as a background for demo purposes only.

Create Foreground Elements

First, we need to create the first petal for the base.

• Shape: Use the rectangle shape.
• Position: Center the petals.
• Size: Set dimensions to X: 240 and Y: 366.
• Corner: Apply a corner radius of 300.
• Roundness: Opt for an arc-shaped roundness.
• Extrusion: Add an extrusion effect with a value of 16.
• Bevel: Set the bevel effect to 2.
• Bevel Sides: Adjust the bevel sides to 2.

Add material to Objet

Next, let's apply a material to the shape. Before doing so, we can include an image for reference.

• Color: Choose #ECA242 for the petal color or choose your own color.
• Lighting: Set opacity to 30% with an overlay effect.
• Rainbow: Apply a screen effect with 30% intensity.
• Depth: Use radial type with black at 0% opacity and black at 100% opacity.

How to Use Cloner in Spline

Now, we'll create a beautiful floral element using a cloner tool. The cloner tool enables us to efficiently replicate and arrange the flower petals in a circular pattern. Adjusting parameters like count and radius allows for customization of the arrangement, resulting in a cohesive and balanced design.

• Position: Center the object, X 0 and Y 0.
• Go to Cloner panel
• Cloner Type: Choose "Radius" for distribution.
• Base: Hide the base.
• Count: Set the count to 8.
• Radius: Adjust the radius to 206.
• Alignment: Ensure alignment is enabled.

Why Create 3 Layers in Spline

To recreate this photo app on Spline, I need to create 3 layers. This is because Spline has a bug that causes glitches when moving objects at certain angles. Therefore, I'll separate the shapes using boolean functionality to avoid these issues.

How to Convert to Instances

Next, I want to add color to individual petals. To do that, we need to convert them to instances. Here's how:

• Go to the Cloner panel.
• Click on the "Convert to Instances" button.
• Hide Main Component
• Work on the instance

Select all rectangle layers and adjust their Y-coordinate to 5. The rectangles will automatically align vertically, one below the other, this will fix the problem with glitch.

• Open all the Instances
• Select all the rectangle by pressing ⌥ ⌘ Click or Alt + Ctrl + Click ( Children 1 by 1)
• Navigate to rotation property
• Adjust their Y-coordinate to 5

Add material to Florals

You can use the dropper tool to clone the color from the photo reference.

• Go to the material panel and click on the color picker.
• Set the colors as follows: Layer 1: #D19416, Layer 2: #D19416, Layer 3: #D19416, Layer 4: #D19416, Layer 5: #D19416, Layer 6: #D19416, Layer 7: #D19416, Layer 8: #D19416.
• You can use the dropper tool to sample the color directly from the photo reference.
• Name this group "Layer 1".

Create Layer 2

In this step, we'll utilize a different technique for creating layer 2, using a boolean modifier with existing shapes.

• Duplicate the group named "Layer 1."
• Rename this new group to “Layer 2.”
• Right-click on the selected layers, choose 'Detach Instance', then 'Ungroup.' After that, delete the unneeded group by pressing the 'Delete' key on your keyboard.
• Rename the individual layers within this group from 1 to 8 for clarity.
• Adjust the Y rotation back to 0 for all the rectangles.
• Select layers 1 and 2, then duplicate them.

Let's navigate to the Boolean Modifier properties.

• Apply a Boolean Modifier and select 'Intersection' from the options.
• Repeat these steps for all subsequent layers as well.

Add material to group Layer 2

We can use a dropper tool to clone the color from the reference.

• Go to material panel then click on the color picker.
• Select shape one by one
• Shape 1 #D19416
• Shape 2 #D19416
• Shape 3 #D19416
• Shape 4 #D19416
• Shape 5 #D19416
• Shape 6 #D19416
• Shape 7 #D19416
• Shape 8 #D19416

Create Layer 3

To add complexity to our icon, we'll replicate and modify the previous layer using boolean operations.

• First duplicate the group Layer 2
• Rename this new group to “Layer 3”
• Rename the duplicated layers from 1 to 8 for organization.
• Select layers 1 and 2, then duplicate them.
• Apply a Boolean Modifier and select the Intersection option.
• Repeat the process for all layers to achieve a cohesive design.

Add Color to Group Layer 3

Add depth to your design by using the dropper tool to pick colors from a reference or select specific shades for each shape.

• Shape 1: #D19416
• Shape 2: #D19416
• Shape 3: #D19416
• Shape 4 :#D19416,
• Shape 5: #D19416
• Shape 6: #D19416
• Shape 7: #D19416
• Shape 8: #D19416 Congratulations on completing all the steps! It's always rewarding to see a project come together.

Exporting Images for visionOS

Exporting images for visionOS requires attention to detail and specific settings to ensure compatibility and quality. Follow these steps to export your design effectively.

Prepare the Design

Before exporting, make sure to reset the corner of the rectangle to 0 to ensure compatibility with VisionOS standards. This step ensures that the exported images will display correctly on visionOS devices.

Exporting Process

Follow these steps to export your design as images:

• Composition Check: Verify that the size of the composition is set to 1024 by 1024 pixels. This step guarantees that your design is within the designated boundaries for VisionOS.
• Access Export Options: Locate and click on the Export button situated on the toolbar. This action will open up a menu with various export options.
• Select Image Format: From the Type dropdown menu, choose "Image." This selection indicates that you intend to export your design as an image file.
• Choose File Format: Decide whether you want to export your image as a JPG or PNG file. Consider factors such as file size and image quality when making your selection. In our case, set to PNG.
• Adjust Pixel Density Ratio: Depending on your requirements, you may need to adjust the Pixel Density Ratio. This setting determines the resolution and clarity of the exported image. In our case, we can leave the aspect ratio at 1.
• Background Color: Background Color: You can choose to hide or show it as you prefer. We need to hide the Background as we use PNG
• Initiate Export: Once you have configured the export settings according to your preferences, click on the Export button to export the images.

📒 Note that we will export two images: the background and the foreground, which contains the florals.

Parallax Previewer App

Parallax brings a 3D effect to Apple TV's interface, highlighting elements with depth and motion. Use the Parallax Previewer to ensure your layered images display correctly, supporting formats like .png, .jpg, and .psd, and export them for Xcode. Transform static images into dynamic, immersive experiences on tvOS and VisionOS.

To utilize the Parallax Previewer app for macOS, follow these steps after downloading it from Apple Design:

1. Launch Parallax Previewer: Open the Parallax Previewer application on your macOS device.
2. Create a New Project: Navigate to the "File" menu and select "New visionOS App Icon" to initiate a new project specifically tailored for visionOS app icons.
3. Import Layered App Icon Images: Drag each layered app icon image that you exported from Spline or Figma into the layer list within the Parallax Previewer interface. These images should include the background, middle, and front layers.
4. Adjust Position and Size: By accessing the properties inspector located on the right side of the window, you can fine-tune the position and size of the imported images. This allows you to align them precisely within the designated area.
5. Preview the Parallax Effect: Move your mouse cursor around the image displayed in the preview area to experience the parallax effect firsthand. As you move the cursor, observe how the layered images interact to create a dynamic and immersive visual experience.
6. Note Regarding Background Image: It's important to note that when adding a square image (1024 x 1024) as the background, the system automatically applies a circular mask to ensure compatibility and aesthetic consistency with visionOS standards.
7. For further guidance on parallax and crafting layered images, consult the tvOS Design Themes in the Human Interface Guidelines.

📒 This app is for preview purposes only.

Conclusion

Congratulations on mastering icon design for VisionOS! With tools like Spline and the Parallax Previewer, you've learned to create engaging icons that pop on the home screen. Keep exploring and experimenting to unlock your full creative potential. Your icons have the power to make a lasting impact in the Apple ecosystem. Happy designing!