From Photoshop to Unity with PSD Importer

from photoshop to unity 2d psd importer improve your 2d workflows with the 2d psd importer package in this video we'll be looking at getting started and porting photoshop psb files into your project and we'll explore some real use cases that can boost your productivity when working with 2d assets exporting and importing layered photoshop files into unity can be very time consuming if you make changes to a source file you can fall into a time consuming loop of re-importing files as you tweak them the 2d psd importer package offers a solution to these problems and enhances the process with new features that we'll discover in this video you can install the 2d psd importer package from the package manager it doesn't require any additional setup and you can start importing photoshop psb files note that the importer supports the psb file format which is functionally identical to the more common adobe psd format the difference is that a psb file supports much larger images than the psd format to create a psb file from photoshop click on file save as and from the type drop down choose the psp format let's now drag and drop the file into the project's assets folder unity automatically creates a prefab that contains all the photoshop layers as children each child has a sprite renderer component and by default they preserve the transform and depth sorting date of the source file recreating the source image we can change the import behavior inside the import settings some of the settings are the same as the default settings for importing any image into a project others are new and introduced with this package for example the import hidden setting allows importing the hidden layers of a psb file not only the visible layers the mosaic setting generates a sprite per layer disabling it will create a single sprite out of the photoshop active layers this is like exporting a flattened version of the image the character rig property allows us to create a prefab that maintains each generated sprite with its original transformation and depth sorting if the sprite contains bones or weight data the psd importer adds the sprite skin component required to create 2d animations this works in conjunction with the skinning editor and we'll see an example later in the video disabling this option generates a sprite that contains the photoshop layers sliced but without preserving their order or creating a prefab asset the setting called use layer grouping allows nesting the prefabs children under new empty game objects representing photoshop's layer groups enabling this option will recreate the exact hierarchy that you have in photoshop in unity there are some rules that it's important to be aware of to export a psb file correctly for example you need to avoid photoshop's layers with duplicated names remember also that the 2d psd importer doesn't import the photoshop layer effects for more info on each of the settings we provided a link to the official documentation linked below let's take a look at some use cases as we have already mentioned a first use case is to use the package to speed up the importing phase in the image iteration process resulting in an overall faster 2d workflow imagine a graphic designer creating a bunch of icons or like in this case different glyphs one per layer instead of exporting each layer in a single png file or exporting a layout with all the elements it's possible to import the psb file each glyph will have a different purpose and use in the project so we disable the character rig setting removing the prefab object and getting a simple sprite sheet the auto-generated prefab is helpful when you need to keep the resulting image assembled and in place this happens with characters or any layered element like this tree once imported the tree is ready to be placed in the scene positions and rotations of each sprite are correct and so is the order and layer property that handles the game object's depth sorting order the higher the number the closer the game object looks to the camera having the psb source file in the project's asset and reading directly from photoshop's layer data allows artists to integrate with unity more efficiently and flexibly for example let's assume we have imported a photoshop file containing a character with mini accessories without the package we probably export all the accessories in a png sprite sheet and make unity automatically slice it then we would manually position the accessory sprites on the character in unity recreating the photoshop reference using the 2d psd importer artists can concentrate on the photoshop side placing all the accessories in the final position and making all their desired adjustments when satisfied all they need to do to confirm the new changes is to save the file in photoshop the 2d psd importer package in combination with the 2d animation package also provides a great solution to prepare your 2d art for animation suppose we select a prefab created after importing a psb file and then click on the sprite editor in this case we can choose the skinning editor and start creating the mesh skeleton by adding bones and weights we save time here since otherwise we would have to manually assemble the character prefab if you're interested in learning more about the 2d animation package check the links in the description below having the auto-generated prefab based on the photoshop layers is also convenient for frame by frame animations in this photoshop file we have a character animated within the timeline each layer represents a frame of the animation recreating this animation in unity is simple we import the psv file disable the character rig option to obtain a sprite sheet create a game object with a sprite renderer component and an animator component attached add a new animation to the animator then drag and drop the resulting sprites into the animation timeline and press play another practical use case of the 2d psd importer package is for assembling environments like a 2d background with a parallax effect the parallax effect is achieved by subdividing the background into multiple layers and placing them at different depths away from the camera with the 2d psd importer package artists can work directly on the psb file from photoshop subdivide the background into layers and see all the changes applied directly to the generated prefab in unity the 2d psd importer package is also useful for importing normal maps in this photoshop file we have a group containing all the character art layers and a group with the generated normal maps to integrate them in unity we export a psb file with only the character art visible and a second psb file with only the normal maps active to automatically apply the normal maps we first obtain a sprite sheet by disabling the character rig setting then we open the sprite editor of the art and add a secondary texture be sure that the material shader used to render the sprite supports a normal map these are only a few examples of how 2d artists working on unity projects can benefit from importing layered files from photoshop you can find the assets used in this video along with many others like them on the unity asset store and we provided links to those as well as more information for you to learn more about the 2d psd importer package in the links below thanks for watching

Channel: Unity

Views: 91,508

Keywords: Unity3d, Unity, Unity Technologies, Games, Game Development, Game Dev, Game Engine

Id: b2bIh8WPsi4

Length: 7min 54sec (474 seconds)

Published: Tue Apr 20 2021