PhotoshopCS6のスライスツールとWeb用に保存だけではWebページが作れない理由について解説。htmlのソースがめちゃくちゃ。スライスの線が入る。いくつかの理由をあげて解説していきたいと思います。
はじめに: 筆者はWebデザインのプロではありません。ただの素人がかいている個人的な見解なので、この記事は全く参考にならない可能性があります。
PhotosohpのスライスツールとWeb用保存だけではWebページが作れない理由
Webページが作れない理由をいくつか書きます。
Web用保存したhtmlファイルのソースがめちゃくちゃ
Photoshopでスライスした画像は画像ファイルとhtmlファイルをまとめて、ウェブ用に出力することができます。これが、フォトショップの「ウェブ用に保存」する機能でうｓ。
ところが、この出力されたhtmlファイルを見るとソースがめちゃくちゃであることがわかります。
htmlのソースを確認してみると、テーブル関係の要素ばかりで、適切なマークアップがされていません。別にアクセスなくてもよくて完全個人使用ならこのままでもいいかもしれませんが、外部からのアクセスを期待しているのなら、とてもじゃないですが、このまま公開することはやめたほうがいいでしょう。
スライスされた画像に白い線が入る
ウェブ用に保存したhtmlファイルをブラウザで確認すると、スライスの境界線が白い線として表示されてしまいます。さすがにこのままでは外部に公開することはできないでしょう。
実をいうとこの白い線を消す方法はあるみたいなのですが、現実的ではないようです。つまりは解決方法はないといってもよいと個人的には思っています。この白い線はブラウザを拡大したり縮小したりすることで消えたり表示されたりします。結局のところフォトショップのスライスで作ったウェブページとブラウザの互換性がないということになります。；
このあたりは海外でも議論になったこともあるようです↓。なにがやばいって2018年にこんなことが議論されているのもやばいし、これを調べているわたしもやばい。
Seeing slice line gaps in Chrome and Opera Browser | Adobe Community
スライスツールは使えないのか？
フォトショップのウェブ用保存で出力したhtmlはwebページとして公開するには難がありますが、スライスツールがつかえないということはありません。
前回の記事、「【PhotoshopCS6】スライスツール、スライス選択ツールの機能と使いかた。」でも書きましたが、スライスツールはwebページの素材として画像を切り出すことができます。
ところが、PhotoshopCC2014あたりから、レイヤーをそのまま画像として出力することができる、「アセット」という機能が登場したことにより、スライスツールが不要になってきているようです。わたしはアセット機能を使ったことがないので、実際にどういうものかはわかりませんが、スライスツールを使う方法は古くなってきているのかもしれません。
Photoshopでウェブデザインって結局なんなの？
わたしははじめフォトショップだけでウェブページが作れると思っていたのですが、いろいろ調べているうちになんとなく見えてきたのですが、結局コーディングはフォトショップとは別にやらなければならないようです。わたしはプロでもないのでここからは完全な推測になりますが、デザイナーがフォトショップのファイル形式である.psdファイルでデザインの原案を作成し、そのデザインをもとにコーダーがコーディングしているのではないかと思います。
正直こういう仕事の話はまったく興味がないのでもはやどうでもいいのですが、「フォトショップでウェブデザインをする」という全体像が見えなかったので、コーティングなしでウェブデザインを名乗って情報を流すのはやめてほしいです。というか実際の業界がほんとにそんなことをやっているのかもわかりませけど。
コーダーが効率を高めるためにどのような工夫をしているかまでは、推測することはできませんでしたが、さきほどの海外のアドビサイトにも書いてありましたが、いまは別のツールを使ったりしているみたいです。ウェブ出力に便利なフォトショップのプラグインとかもあるみたいですし。。。
正直そこらへんはとにかくよくわかりませんが、とりあえずフォトショップのWeb用保存だけではWebページをつくることはできない。このことをわたしはつたえたいです。（まちがっているかもしれませんが）それとまた別の話になりますがWebページを公開するのであればサーバーの契約やドメインの契約が必要なります。このあたりはフォトショップの話からはずれるので、これ以上は書きません。この記事の情報は以上です。
コメント