Illustrator to Photoshop export coming in flattened

Questions and information about Crank Software's Storyboard Designer

Moderator: jamiev

Illustrator to Photoshop export coming in flattened

Postby parthmbhatt » Fri Jun 01, 2018 2:29 pm

While trying to export the Illustrator file to Photoshop,I put all the different screen elements into different laters, and most of them come in as groups of layers in Photoshop, but some of them get merged (seemingly at random) so I have a few layers in Photoshop named <path> + <path> + <compound path> and these items were definitely not grouped in Illustrator. They were however, next to each other in the arrangement hierarchy.



Here is the Illustrator layers on the top vs the photoshop layers below that. The <Compound Path + Menu_icon and divider + <Path> Layers are what I'm trying to avoid

Illustrator Layers.JPG
Illustrator Layers.JPG (31.06 KiB) Viewed 600 times
Photoshop Layers.JPG
Photoshop Layers.JPG (28.17 KiB) Viewed 600 times


Any Idea what I migth be doing wrong?

thanks!
parthmbhatt
 
Posts: 5
Joined: Tue May 29, 2018 12:38 pm

Re: Illustrator to Photoshop export coming in flattened

Postby conroyattack » Fri Jun 01, 2018 3:23 pm

Looking at your screenshot from Illustrator you've got 9 items under Main_menu. What should work is if you reorganize those 9 items to be their own dedicated Illustrator top level Layers with no sub items. Then when you do that conversion from Illustrator to Photoshop they should come in as separate items. Once you're in Photoshop, I would group the items into a group folder and call that Main_menu.

I would argue that you're not doing anything wrong, and that the folks at Adobe need to do a better job with their Illustrator to Photoshop export feature. If you have not yet seen our video on moving content from Illustrator to Photoshop, I've posted a link below hopefully it's a little helpful to you.

If you are working with a large file that has a lot and a lot of layers, I would recommend the Photoshop Plugin called svg layers for Photoshop. You can save your .ai file as an .svg and use this plugin and it basically works the way you would expect it to. It costs about $20 but it's pretty handy.

Video » Illustrator to Photoshop for import to Storyboard
https://youtu.be/PI6RGldeP9w

Photoshop Plugin » svg layers for Photoshop (about $20, but pretty good)
http://svglayers.com
User avatar
conroyattack
 
Posts: 5
Joined: Tue Apr 10, 2012 1:49 pm

Re: Illustrator to Photoshop export coming in flattened

Postby parthmbhatt » Wed Jun 06, 2018 3:45 pm

Hi Conroy,

I tried separating all the elements into different layers but that just made photoshop fuse everything into the same layer. I'm attaching the ilustrator and Photoshop files here. we can't use the svg tool because we have a lot of clipping masks and gradients that the svg tool either does not support or is in beta with.

here's the google drive link to an example file and the resultant photoshop file:

https://drive.google.com/file/d/105o2Dn0_WZVDM5-hcdExXk72COpCYjyP/view?usp=sharing

I feel like I'm doing something terribly wrong to be getting this kind of result.

Please help :\
parthmbhatt
 
Posts: 5
Joined: Tue May 29, 2018 12:38 pm

Re: Illustrator to Photoshop export coming in flattened

Postby conroyattack » Thu Jun 07, 2018 8:56 am

Thanks for the illustrator file. I'm going to go take a look at this and post a revised version that should export as a Photoshop file.
User avatar
conroyattack
 
Posts: 5
Joined: Tue Apr 10, 2012 1:49 pm

Re: Illustrator to Photoshop export coming in flattened

Postby conroyattack » Thu Jun 14, 2018 1:52 pm

Hi parthmbhatt,
I've taken a look at the .ai file you provided us with and there are a a few different elements that cause content to merge when it's exported as a Photoshop file. I have put together an illustrator file for you to reference that can export a Photoshop file that is editable. The main reason your .ai file was flattening when exporting a .psd file is the <Menu> Layer. Anyways there area few different topics I'm going to cover.

.ai file – exports as layered .psd
https://drive.google.com/open?id=19VmNa ... DAEiKtwTow

layers view screen shot - comparison
https://drive.google.com/open?id=1TbtPM ... lov4Fiwn3Q

Artboards:
Although Illustrator can export multiple artboards as individual photoshop files, for the sake of simplicity I have created a single artboard illustrator file.

Layers » Release to Layers (Sequence)
Where there are multiple items in a menu they are more likely to merge together in Photoshop. As you mentioned "seemingly at random". If you look at the Illustrator file I've posted you'll notice that I've separated content to each be on its own layer. In illustrator from the Layers panel if you go into the options (top right corner of the panel) and select <Release to Layers (Sequence)> Items will be place on their own layers and that is going to help prevent those items from being merged together.

Screenshot Layers View - Drop Shadow Effect
In the .ai file you provided the layer <Menu> causes the .psd export to flatten. Too many sub-groups and combinations of certain attributes will cause elements to merge. The attached screen shot of the layers view compares two groups that are set up the same way except one uses a drop shadow and the other does not. A drop shadow in a clip group that also has a drop shadow, which is part of a group causes the whole .psd export to flatten. By removing the drop shadow and setting that up on an entirely separate layer prevents this from occurring.

Illustrator Specific Content
When a gradient set as the foreground color on text, Photoshop will rasterize that text in order to preserve the appearance of the gradient. Text that is a solid color will import and the text will remain as editable. The concept of certain things like drop shadows, gradients, clipping masks etc. are present in Photoshop and Illustrator but how they are executed are different from one another. When there are several items that are grouped together that uses these types of attributes they are merged together when a photoshop file is exported from illustrator. This is why having less sublayers and giving content its own layer helps prevent content from merging together.

I would relayer content as I've described in Illustrator before exporting to Photoshop. If content is merged, I'd do a quick search for certain things like Effects and separate those effects from the content that's being merged – for example a drop shadow as its own element should be placed below buttons, instead of having a drop shadow as part of a button. If you are still encountering content being flattened I would copy and paste items as smart objects into Photoshop. In the video I mentioned from the earlier message, there's a technique for pasting smart objects to include positioning that's achieved by the use of using an empty container that is the size of the document.

Let me know if you have any questions about this. Thanks.
User avatar
conroyattack
 
Posts: 5
Joined: Tue Apr 10, 2012 1:49 pm


Return to Storyboard Designer

Who is online

Users browsing this forum: No registered users and 1 guest

cron