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