プラカンブログSTAFF BLOG

2016.05.30

Photoshopの「Web用に保存」で100%のサイズで書き出せない時の対処法

photoshop8129

先日、某案件でパイセンデザイナーからもらったPSDデータで、どハマリした話を書こうと思います。

コーディング担当だった私(な)はパイセンデザイナーからもらったPSDデータをパーツごとにスライスをし画像を書きだしコーディングを進めようとしていました。

コーディングを進めながら書き出した画像を挿入し、CSSでレイアウトをしていた時、ふと違和感を感じました。

「何かおかしい……」
「あれ?背景画像の幅が足りない……なんでや?」

書き出し元のデザインPSDを見ても横幅は間違えていない……。
何か書き出しの設定を間違えたのかな?と思い、何度も『WEB用に保存』を選び背景画像を書き出しました。

何度目かの『保存』を押す前にもう一度じっくり設定を確認いると、特におかしな設定はないのに、何故か画像のサイズが84.31%ってキリの悪い数字になってしまっていたのでした。

for_web01

そして、この84.31%って数値を手動で100%に変更しようとしても下記の画像のようにエラーがでて84.31%より大きな値にすることができない……。

for_web02

ぐぬぬ……。

仕方がないので、この症状をネット調べたところAdobeのフォーラムで回答済みの質問を見つけることができました。

Web用に保存で100%のサイズにならない

Adobeのフォーラムに書かれていたことは、『縦横のピクセルサイズのどちらかが”8129px”を超えてると、画像が縮小されて書き出される現象がある。』と言うことでした。
今回不具合の出ていたPSDデータを確認してみたところ、やはり”8129px”を超えていました!

for_web03

やはり原因はおまえ(”8129px”のサイズ超え!)かー!!!!

なので、カンバスのサイズを8129px以下になるようにファイルを2つに分けて再度『WEB用に保存』をすると、無事に画像サイズが100%で書き出すことができました!!!

ということで、これからデザインをする際には8129pxより大きなサイズになる時には、ファイルを分けるようにしましょうー!(パイセンへ)

この記事は、NAGATOMI が書きました。