large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/how-to-properly-export-your-sketch-designs-to-photoshop-if-you-really-have-to-989ef67bdd90?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Zoé Lacroix 
<h4>For when your clients ask for the PSD file and just won’t take no for an answer.</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZiqDpWBObJ5OQifkOtKlKQ.png">
There are lots of tutorials out there for exporting PSD to Sketch files, as well as tools such as <a href="https://avocode.com/">Avocode</a> who will even do the job for you. And lots of reason for doing so: more and more, UX/UI designers are starting to use tools that are really created for their needs, such as Sketch, Adobe XD, Figma, etc. Finally, after all this time being used for other purposes, Photoshop is returning to its original goal: photo edition.
But when it comes to exporting from Sketch to PSD, there’s alsmost nothing. I know what you’re thinking: Why would anyone want to convert a Sketch file to PSD? Isn’t that kinda backwards?
Well, yes. It kinda is. But many entreprises still use Photoshop as their main design tool and they’re not all ready to start using Sketch. Just imagine for one second that you come to work for them, using your favourite tool (Sketch in my case), and then at the end of your project comes that awkward moment when they ask for your PSD file. My what?
That’s something that happened to me lately, when I went to work at a big company for one month, to help redesign their homepage. And not only did they want the PSD files, but they also needed them to be fully editable. Wow.
<h3>The popular way: Affinity Designer</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zyEH-FmP_UlB7c7r__CRMQ.png">
The first method I tried was probably the most famous workaround, and is described in detail in <a href="https://www.cygnismedia.com/blog/convert-sketch-file-to-photoshop/">this article</a> by <a href="https://medium.com/@CygnisMedia">Cygnis Media</a>. So, here it is:
<ol>
<li>Select your Sketch artboard and copy it.</li>
<li>Paste in Affinity Designer by selecting File &gt; New from clipboard.</li>
<li>Click File &gt; Export and export as PSD.</li>
<li>Done! You can open your design in Photoshop.</li>
</ol>
This method is quick and efficient, but has a lot of issues. Let’s take a look at the upsides and downsides.
<h4>Upsides</h4>
<ul>
<li>You have a layered PSD file and it is even (kinda) respecting your layer nomenclature.</li>
<li>Basically it’s just copy-paste, so easy to use.</li>
<li>Your design is respected and the output looks exactly as it is in your Sketch file.</li>
</ul>
<h4>Downsides</h4>
<ul>
<li>You have to buy <a href="https://affinity.serif.com/fr/designer/">Affinity Designer</a> for this method. So, another license apart from Sketch (and Adobe!)</li>
<li>The text layers are flattened and cannot be edited in Photoshop (apparently the guys at <a href="http://www.serif.com/">Serif</a> are working on it…)</li>
<li>Same goes for all vector shapes, they cannot be edited afterwards.</li>
<li>If your Sketch file has 300 artboards, you’re going to have to export each and every one of them manually. One by one.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*97sToUrKC19J3Z9BBUmc6A@2x.png">
<h4>So, is it good enough?</h4>
No. Not for me, anyways. For a simple reason: most of the designs I create in Sketch are for apps or web design. Therefore I have text everywhere, in the menu, in columns, captions, buttons, titles, icon boxes, footer, banners… How good is it to have an “editable” PSD file if you can’t change the text?
There had to be another way. After googling like a crazy person, I started to try a few different ways:
<ul>
<li>Export SVG/PDF/EPS from Sketch, open in Illustrator, export in PSD. The text layers are flattened again.</li>
<li>Export SVG from Sketch, tried to convert SVG to PSD via <a href="https://www.imagemagick.org/script/index.php">ImageMagick</a>, but it flattens the whole SVG to one single layer.</li>
<li>Took a close look at the options offered by Avocode, but they don’t have a working option for what I’m trying to achieve (yet).</li>
</ul>
I was going insane and I was about to give up and redesign all the text layers manually until I finally found the perfect solution for me.
<h3>The solution: <a href="https://www.photopea.com/">Photopea</a></h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*W4Hrx75xOuTE29IxySkhkg.png">Their logo is less sexy than Affinity Designer’s but don’t let it fool you. This is a crazy good tool, and it’s free!
Photopea is a free online photo editor supporting files like PSD, Sketch, and Gimp. It’s basically a super-Photoshop, but web-based. And free.
I discovered this tool while browsing every forum and Facebook group I could find in search for an answer to my problem. When I first opened it, I tried to upload my Sketch file directly and was disappointed to see that it wasn’t working. Instead, there was an alert saying “Not enough RAM”, and then it just said “Loading”.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Pu2wEyHqQRsgoEq_LQ_R9g.jpeg">So, this is frustrating. Amirite?
But then I looked at my file size: 68,3 Mo. For a Sketch file, it’s quite heavy. Here is the solution I came up with:
<ol>
<li>Open your Sketch file and export your artboards into separate Sketch files. You don’t need to have one artboard per file, try grouping them by function or flow. For example, you can put your “login” flow together in one file and see if it works. There’s no real science here as far as I know, but as long as you keep the file under 10 Mo (I even went up to 16 Mo), it should work fine. (Note: it might depend on your computer’s RAM capacity)</li>
<li>Go to <a href="https://www.photopea.com/">www.photopea.com</a> and from there, open your Sketch files.</li>
<li>Click File &gt; Save as PSD, and ta-daaaah, it downloads a PSD file to your computer.</li>
<li>Open your PSD file in Photoshop. All your artboards are there and your designs should look almost perfect! You might have to do some cleaning-up. In my case, I have to refresh every text layer so that it takes the right font size and family. Also, some of my vector masks went nuts after opening them in Photopea:</li>
</ol>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LbkjBl0QrI4THTJmyn6R1g.png">As you can see on the right, some of these curves go crazy. They remain editable though, so it’s an easy fix. I didn’t investigate much, but I think it has to do with anchor points and Bezier handles positionned incorrectly. Will update if I find the reason behind it.
This method saved my life. But just like the first one, it’s not perfect. Here are the upsides and downsides:
<h4>Upsides</h4>
<ul>
<li>You have a layered PSD file and it respects all your nomenclature, artboards, masks and so on. It even imports all your symbols as artboards below your design!</li>
<li>Edit your text layers! Yay 🙂</li>
<li>It’s free and open-source, so you don’t have to buy another license to do it. And since it’s web-based, it means you can even do it on a PC!</li>
<li>It’s quick and effective.</li>
</ul>
<h4>Downsides</h4>
<ul>
<li>What about those Bézier handles going crazy though? Even though it doesn’t happen in all the cases, it is still weird.</li>
<li>It’s web-based, so you can’t be sure this solution will exist forever and you need an internet connection for it to work.</li>
<li>You have to divide your big Sketch files into smaller files for it to work.</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*81WcVNmBZSGFgrfAOnFSDA.png">
<h3>Conclusion</h3>
Depending on your needs, you can use one or the other method to export your files from Sketch to PSD. Personnally I’m a fan of the second method because it gives me more flexibility. But who knows what the future of Photopea is, and how long it will stick around? I can only hope that it’ll be long enough for people to start working only in Sketch and stop asking for PSD files.
Do you know another way I didn’t mention? Feel free to share in the comments!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=989ef67bdd90" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-to-properly-export-your-sketch-designs-to-photoshop-if-you-really-have-to-989ef67bdd90">How to properly export your Sketch designs to Photoshop (if you really have to)</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to properly export your Sketch designs to Photoshop (if you really have to)

How to properly export your Sketch designs to Photoshop (if you really have to)

For when your clients ask for the PSD file and just won’t take no for an answer.

Top Stories