Amending a massive sprite sheet for a website. Both standard & retina resolutions. Canvas size for retina is over 10,000 pixels wide.
Save for web functionality (required to compress the png sufficiently) does not allow saving of images wider than 8192px - it automatically scales them back to this maximum without much wanring.
Forced to save out using 'save as' function as a .png file then use external tool for compression - which does a much better job at reducing file sizes also BTW.
In the age of retina resolution images and using sprite sheets in CSS for larger sites, these limitations need removing, and photoshop's compression abilities also need to up their game.
OK, thanks for the background - that should make it easier to justify with product management.
FYI - Photoshop's PNG compression and SFW are the same - the difference is that SFW doesn't include metadata unless you tell it to. And Photoshop's PNG compression is still comparable to PNGCrush results, unless you include modes that Photoshop cannot support (like indexed transparency).
Indeed running into the same limit. I'm trying to slice up large backgrounds for mobile devices much bigger than the 8192px limit. Please lift this limit.
I made a screenshot of a responsive site (>8192px in height) to make some quick modifications and I wanted to export the modified sections with slices but I couldn't due to this limitation.
Adobe: When you lift the limit don't be stingy! I just ran into this wall unexpectedly. After checking my doc it was 23,195px tall. By emerging responsive standards it didn't seem unusually long when flicking through on a mobile phone. I would just give us more than anyone thinks we can use within the capabilities of your average modern workstation.
I've found a small workaround on this issue. What Photoshop does is remember the settings of the last time you Saved for Web on your file by default. I've found that only when photoshop is remembering these settings, and your settings were for a png, will it prevent you from saving another png at 100%. But if you confuse it a bit, you can get around it. Basically, you have to change Photoshop's memory to a jpeg output instead of png.
Here's what I did:
Open file, Save for Web, change whatever settings photoshop is remembering to a jpeg output (quality level doesn't matter), then press Done. The UI goes away and you're back in your file. Now, go to Save for Web again. As you'll see, for some reason Photoshop will allow you to output a jpeg at 100%. (It might still say 33% or 54% or whatever in the Image Size box, but just ignore it.) Save your file and check the dimensions. If you need a png, you can do the above, but on your second time in the Save for Web UI change output to png. But, remember that the next time you Save for Web on that same file, Photoshop will not let you output at 100%. You'll have to change the memory to jpeg again.
The pixel dimensions on my project are: 725 x 24,164
I'm not sure. I haven't worked on a big psd in a while now, but I remember when I was doing this before, the percent field was all over the place. I just ignored it, and did the math in my head.
Please keep in mind that "save for web" is also used by other fields as well to ensure a format that conforms to standards. If you save an image as PNG with the standard dialogue instead of using "save for web" you will get different results. We always use save for web to make sure there aren't compatibility issues. The same goes for Jpeg. You'd be surprised by how many people send me jpeg's wondering why it doesn't look correct in other software, and then I realize they saved a CMYK document as a jpeg. Save for web fixes those little accidents as well.
I just ran into this issue as well, and unfortunately was not able to get the workaround posted above by Jordan Tavenner to work. It kept overriding all my values to constrain to the 8192px limit, no matter what I did.
Thankfully, I did find another workaround that seems to be working reliably for me so far:
Open the "Save for Web" dialog
Change your output settings to the preferred format and quality
DO NOT interact with the size inputs
Click the "Preview" button in the lower left corner of the "Save for Web" dialog
Photoshop will generate the image at your original dimensions and open it in a web browser
Save out the generated image from the web browser
Beneath the generated image, Photoshop will even generate a summary of your output settings and dimensions, mine read:
Format: JPEG
Dimensions: 720w x 14654h
Size: 1.039M
Settings: Quality is 60, Non-Progressive, Optimized on
That being said, given the ever increasing pixel density of displays, this seems a silly limit to continue to impose.
Actually, in my experience, PNGs exported with Save for Web and tossed into PNGGauntlet still lose around 20% of their weight. My sample depth should be in the ten-thousands by now. So Mr. Darke's point might still be vaild, Mr. Cox.
My team and I keep getting stumped by this arbitrary legacy limit. For many years, we have been using large PSD sheets to export screenshots for mobile platforms in various sizes, from one PSD. Case in point was a game which needed 5 screenshots with marketing copy, in 13 different languages, in 8 different resolution aspects, including the absolutely gigantic iPad Pro resolution. (That's 520 exports, btw).
There is no way we can fit all these aspects (8x5, Layer Comps takes care of the language overlay) into one PSD and have Save for Web work, although that would obviously have been a greatly preferable setup (one file to load, "only" 13 manual operations for export).
Adobe's insistence to dump Save for Web has left us scratching our heads, looking for other ways to automate this task. Obviously, Generator doesn't work, since it doesn't support Layer Comps, and as such would force us to include ALL 520 screens in one file. Ugh.
Have been looking into using InDesign, it almost might work, but would still necessitate the setup of a monster export document with 520 pages with non-uniform size. And it has its own infuriating arbitrary limits, like imposing a limit of a maximum of 10 pages side-by-side in Layout view.
I haven't found enough trustworthy documentation on scripting to consider it a safe alternative.
Does anyone have any ideas? Really, anything would be much appreciated.
It's been a long time since I posted this problem. Since then I've mostly moved off of PhotoShop and into Sketch for web mockups. My team uses an online tool called invisionapp.com to show mocks to stakeholders. There is an option in InVision (free accounts available) which will let you save your source file to your project. All layers and artboards on a project are automatically extracted and turned into flat png images which can be viewed or downloaded.
A bit of a workaround if all you want is the flat images but completely leapfrogs the problem if you already use, or think you could use InVision.
Well, I have an idea, but you might not like it. Before smart objects were useful I was creating a brochure for a company called impact athletic. It was something like 12-14 pages. But each had a graphic that had to be photoshopped onto a product a few times, some of which even needed to be warped onto a curved leg. Then each product also had 10 standard colors, and customers could request specific colors as well.
So I actually turned to after effects....for print work!
I loaded each page, then created some expressions that linked every color change to one color. Every "frame" of the animation was a different page, in order. I had a couple compositions, one in order for standard pdf, and layed one out as a spread. So All I had to do is set the intended color, change the graphic on One place, and render. A few seconds later all I had to do is compile the PDFs and and I was done.
I Don't think that AE has a size limit that's less than what your graphics card can handle, but that's likely something like 40k square. Shouldn't be a problem. Now, You can't export multiple sizes from one single composition. So instead, you'd need to set up a composition for each size, but you can mass export them all at the same time.
It may not work for your exact issue. I'm not exactly sure, but it's definitely something to look in to. If you aren't familiar with AE, then you'll definitely want to talk to someone who is. You can load your photoshop files in pretty useful ways that can help speed up setup. And organization will be important when working with 520 pieces.
Believe me, I considered the same thing, or at least something similar. I was thinking that size doesn't actually matter, as I could letterbox it in a flat color which could easily be trimmed away using an action. The biggest problem is that you can't individually name the frames, so I would be looking at some kind of scripted renaming... It may still be an option, though, if Photoshop doesn't offer us a solution, once the need arises again.
113
Replies
AdChoices