Adobe Illustrator Save for Web is Pixelated and Small – Best Fix
The new 4k/Retina displays have been out for a while now and for the most part they are incredible, high resolution, extremely sharp, crisp images make for a great experience when browsing the web with retina capable websites or watching HD videos and so on. On the other hand if you are a graphic designer none of this matters and you will have torn most of your hair out trying to configure your settings in your Adobe Illustrator CS6 and Adobe Photoshop CS6 so that your Save for Web and Devices preview appears sharp.
Despite Adobe putting out Retina patch updates for a few of the applications in the collection (including Illustrator and Photoshop) they only fix the sharpness of the toolbars within the main User Interface. In fact they actually make things worse for Save for Web. With Illustrator your artboards will appear normal and as they used to on any previous version of mac without retina, however in the Save for Web modal window the artboard preview appears half the size and also with a file size around 50% of what it should be. The window is understandably smaller due to the whole retina x2 formula, but the file size should surely be the same as before?
Photoshop is a little different with the artboard in the main interface being half the size despite being at 100%, this is to be expected as Photoshop works in bitmap whereas Illustrator works in vector.
I am sure most of you have been scouring Google with every possible search term you can think of to show some results on how to fix this problem. Through purchasing a new Macbook Pro 15″ with Retina display and being a web developer and graphic designer I ran into this issue from the get go as my Adobe software was the first thing I tried installing. Little did I know that I would eventually install and uninstall the entire suite over 12 times!
The ‘best fix’ mentioned below is based upon my own experience and opinion and makes things as close to ‘normal’ as possible for me. I found this tip nowhere when searching online so thought I’d share my discovery with you.
Adobe Illustrator CS6 and Photoshop CS6 Installation Procedure
1. First make sure you clean out the previous versions of any Adobe software completely, that means uninstalling using the uninstall shortcuts in Utilities, then manually removing all associated files from your preferences library.
2. In the Finder menu click ‘Go’ from the menu and scroll down to ‘Go to Folder’. Type ~/library in the search box and hit enter.
3. You should see the Library folder appear. Head into the Preferences folder and then use the search field in the finder window to search this folder (Preferences) for the word ‘Adobe’. You need to make sure you select the Preferences folder for results and NOT This Mac.
Notice the two Save for Web Preferences files in this folder that stand out.
These are the files that cause the issue with the Save For Web window.
4. Select all the files here and trash them completely, empty your trash straight away too as you do not want them to appear in any search results for any reason in the next step.
5. Click back (1 step) to the main Library folder (Repeat step 2 if you have closed your finder). Find the Application Support folder and head into that. Trash the Adobe folder here and again, empty your trash.
6. Open up the ‘Go to Folder’ search dialog from step 2 (Finder menu ‘Go’). backspace the ~/ in front of the word Library that you search for previously so that now we are just purely searching the word ‘Library’. We are pretty much repeating steps 3,4 and 5 but in this Library folder. Go into the Preferences folder, search again for the word ‘Adobe’ and trash all files. Head back (1 step) to the Library folder once more and head into the Application Support folder to trash the Adobe folder in there.
7. Install your Adobe Illustrator, Photoshop or Master Collection. Do not update your software at any point just yet. Open up Illustrator and then open an AI. file, or create a new artboard at any size and draw a square on it (At the moment your interface SHOULD be fuzzy and pixelated). Click to Save for Web and Devices and you should again see pixelation everywhere but your artboard should be the size your created it at 100%. Click a format to save in (doesn’t matter which) and save the file. This essentially puts a Save for Web Preferences file in the Preferences folder, one of the two files that we saw in step 3 – See screenshot.
8. Quit Adobe Illustrator completely and open up Photoshop, do the same by either opening a .PSD file or create a new artboard and Save for Web, save again in any format and then quit Photoshop completely. Again this has placed the second of the two Save for Web Preferences files in the Preferences folder form Step 3 – See screenshot.
9. Now that we have used the applications and set the preferences for Save for Web we can install the Adobe Retina updates. However, do not do this through the updater. Use the links below to manually update Adobe Illustrator and Photoshop to Retina interfaces.
Illustrator – Here
Photoshop – Here
10. After installing both of these updates you can open up Adobe Illustrator and Photoshop to find the save for web artboards appearing at the correct size. No 50% sizing or suspiciously small file sizes. Of course because you are viewing the images are there full size on a retina screen you will see slight blurriness, but for me this is bearable. Once you save the file out and open it you can see that it is sharp (if you save at 100% quality for JPG).
This is not the complete solution but for me it is the best possible way to work being a web and graphic designer for the time being. Until every screen and computer becomes Retina there will always be a need to scale your artwork accordingly for example web graphics, creating artwork at twice its required size then scaling down 50% using CSS. What you once visualised as 400px or 1000px wide has now become 200px or 500px wide. It is a difficult transition to make but one that will benefit us greatly with technology moving forward and new capabilities in the future.
Making the Best of Retina in Adobe Illustrator
If you have one available use an external monitor or TV from a Thunderbolt port and turn on Display Mirroring in your Display settings within System Preferences. This uses your external monitor or TV as a Primary monitor and of course as it won’t be retina your Save for Web artwork will appear sharp and crisp. Without Display Mirroring on this will NOT work as your Retina Mac will use the Screen as a secondary and still use the Retina Output.
Hopefully Adobe can implement a scaling function within the interface/artwork preview of Save for Web and Devices, but this is us holding on to our old ways, realistically I doubt this will happen as it is a case of moving forward and a massive, innovative, forward thinking corporation like Adobe will not spend time and money on making things work how they used to!