Web用の保存形式、きちんと使い分けてますか?

先日、息子の空手教室体験についていったら「お父さんもぜひ!」と勧められて、大人クラスを体験することになり、数日間、体がバッキバキだったスタッフ「ほ」です。

大人になってから、腕や足が上がらなくなるほど運動することがほとんどなかったインドア派なのでとっても刺激になりました。毎週続けるのは無理そうですけど……

さて、今日はWeb用保存のお話です。

イラレやフォトショが使えると「ついでにホームページに載せる画像も作っちゃってよ」なんて頼まれること……ありますよね?

ネットを見ていると「とにかくJPEG派」をよく見かけますが、きちんと保存形式を理解して使い分けることで「軽くて美しい」保存ができるようになります。

Q.保存するならどの形式?

さて、いきなりですが問題です。

保存するならどれ?

上記の画像たち、保存するならどの形式でしょう?答えは、このエントリーの最後に載せておきます。

1.保存形式を知ろう

まずは、そもそも保存形式はどんなのがあるのか?というのを理解しておきましょう。

現状、Webサイト上で使われるグラフィック(動画除く)形式は以下の通りです。

  • JPEG
  • GIF
  • PNG-8
  • PNG-24
  • PNG-32
  • SVG

以下、解説をしていきますが、6種類の解説だと書く方も読む方も疲れてしまうので、ある程度グルーピングして解説していきます。

GIF、PNG-8

この2つの形式の最大の特徴は

色が最大で256色しか使えない

ということです。この256色は固定ではなく、画像ごとに色は入れ替えることができますが「最大で256色までしか持てない」ということです。

もともと存在していた形式がGIFで、PNG-8が後発です。

PNG-8が生まれたのには歴史的背景があるのですが、そこまで書くと長くなってしまうので、ご興味がある方は以下のURLをご参照ください。

Portable Network Graphics -wikipedia-

色数の制限があることから、これらの保存形式の使用目的は、ずばり「イラストの保存」です。

イラストレーターやフォトショップで保存する際に、より軽量な方を選べばいいと思います。※保存の方法は後ほど

GIFとPNG-8の使用用途は一緒ですが、GIFにしかできないことがあります。

それが「アニメーション画像」です。

GIFはアニメが作れる

GIFは、イラストをパラパラマンガ式で保存でき、Webサイト上の目を引くアイコンの作成などに力を発揮します。

アニメーションが複雑になるほど容量も重たくなってしまうので長編アニメーションには向いていません。

※実はPNGでもアニメーションが作れるAPNGという形式が存在しますがサポート状況が悪く、日本国内で主流の2ブラウザ(IEとchrome)が非サポートです……将来に期待しましょう

JPEG、PNG-24

前項のGIFやPNG-8がイラスト向きだったのに対してJPEGやPNG-24は「写真の保存」に向いています。

色数はどちらも約1677万カラーを扱うことができます。

写真の保存はJPEGかPNG24

これまた同じ用途で使いますが、それぞれ以下の違いがあるので覚えておくといいでしょう。

JPEG

  • 画質の劣化と引き換えにファイルサイズを軽くできる

PNG-24

  • 美しく画像が保存できるが、ファイルサイズが重くなりがち

これもアプリケーションで保存する際に写真のクオリティとサイズの状況を見ながらどちらで保存するのか?を決定していただければよろしいかと思います。

PNG-32

こちらはPNG-24をパワーアップさせたもので、透明や半透明を扱うことができる形式です。

PNG-32は半透明が扱える

GIFやPNG-8でも透明は扱えますが、半透明は扱えません。

JPEGは透明・半透明どちらも扱えません。(PNG-24については後述)

半透明を扱う画像では、この形式を選択する必要があります。

SVG

「JPEGやGIFは知ってるけどSVGって何?」って方も多いのではないでしょうか。

SVGもWebで扱える画像形式のひとつです。

SVGには、これまで紹介してきた形式とは大きく異なる点があります。

それはSVGがベクターデータであるということ。

ベクターデータは座標による描画を行うファイル形式のことで、拡大しても画像がぼやけない、という特徴を持っています。

SVGは拡大しても荒れない

このSVG形式で画像を保存しておけば、スマートフォンなどで画面をピンチアウトで拡大表示した際に綺麗にズームアップされます。

また、Retinaディスプレイをはじめとする高画素密度では、「画像がぼやけて見える」といった現象が起きますがSVGでは、それが起きません。

サイトのロゴマークやちょっとしたアイコン類はSVGで保存するといいでしょう。

ブラウザサポート状況も現在のモダンブラウザ(IEは9以降)では問題なく扱うことができます。(参考:Can I Use

PNGの8、24、32って何?

さて、PNGの後ろには8やら24やらの数字がついていますが、この数字は何の数字でしょう?

答は「扱えるデータの量」です。

例えばPNG-8では「8bit分のカラーが扱える」という意味になります。

bitの計算は「2のn乗」で計算をしますから、8bitでは「2の8乗=256」となります。

そうなるとPNG-24では24bitカラー「2の24乗=16777216」となります。上記PNG-24の説明で出てきた「約1677万カラー」の正確な数字がこれですね。

ではPNG-32は「2の32乗」カラーが扱えるのか?というとそうではありません。

PNG-32は「24bitカラー+8bitのアルファ値」を扱うことができます。「アルファ値」は「不透明度」のこと。

もうちょっとわかりやすく書くと「約1677万カラー+256段階の不透明度が使えます」ということですね。

2.アプリケーションでの保存

各保存形式がわかったところで、アプリケーションでの保存方法について触れておきます。

これらの保存形式をカバーしているのは、やはりAdobe Illustratorと Photoshopでしょうか。

どちらも「Web用に保存」コマンドを持っており、これを使用することで「JPEG」「GIF」「PNG」の形式を保存することができます。

また、SVGは「別名で保存」や「書き出し形式」などを利用して保存することができます。 Illustratorでは9.0以降、PhotoshopはCCからSVGでの保存が可能です。

それでは、それぞれの保存方法を見ていきましょう。

Web用に保存(Illustrator、Photoshop)

まずは定番である「Web用に保存」から。

ちなみに現在のバージョン(CC2017)では「Web用に保存(従来)」と名前を変えております。

イラレもフォトショも

「ファイル」メニュー→「Web用に保存」
※バージョンによっては「Webおよびデバイス用に保存」

「ファイル」メニュー→「書き出し」→「Web用に保存(従来)」
※PS CC2015以降、Ai CC2017以降

で開きます。

開くと、このような画面が開きます。

Web用に保存ダイアログ

保存形式の選択はここで行います。

ファイル形式の選択

GIF保存の場合

GIFで保存

GIFでの保存時には、以下の3点に注目しましょう。

GIF保存時の注目点

1.カラー……GIF保存時に使う色数です。通常は256にしておきましょう

2.透明部分……グラフィック内の透明部分を透明として保存する場合はチェックを入れましょう。透明部分を作りたくない場合はチェックを外します。

3.マット……透明部分のチェックを外した際に、透明部分を何色で塗りつぶすかの指定です。

GIF形式における「マット」の問題

マットは、透明部分にチェックが入っている場合には特に指定がいらないような気がしますが、そうではありません。

例えば、こんなイラストを保存しようとした時に……

保存画像サンプル

透明部分にチェックをし、マットを白のままにして保存しました。

その画像を白い背景のホームページに表示した場合と、暗い背景のホームページに表示した場合では表示結果に以下の違いがあります。

黒い背景ではエッジが荒れる

黒い背景に配置したイラストはエッジに白い線が出ているのがわかるでしょうか。

ちなみにマットを黒にして保存した画像は以下の結果となります。

マットを黒にした場合

こちらは逆で、黒い背景のイラストが美しく、白い背景の方にはイラスト周りに黒い線が見えています。

つまり、背景を透明にした場合の「マット」は、イラストのエッジを何色の背景になじませるのか?という役割を持っています。

今まで「GIF画像って綺麗に保存できないんだよね」と思っていた方は、ここを確認してみてください。

JPEG保存の場合

JPEG形式の場合は、以下の部分を気にしましょう。

JPEG保存の注意点

画質は

  • 低画質
  • 中画質
  • やや高画質
  • 高画質
  • 最高画質

の5つから選択する方法と、0~100までの数値で指定する方法があります。

画質は低いほどファイルサイズが軽くなりますが、画像にノイズが発生します。

低画質で発生するノイズ

上記は低画質で保存した写真を拡大した例です。

バイオリンのエッジ部分に蚊がたかっているようなノイズが見えます。これをモスキートノイズと呼びます。

また、バイオリンの本体がマス目状に見えますが、これをブロックノイズと呼びます。

ちなみに同じ写真を最高画質で保存した場合は、ノイズが出ていません。

最高画質はノイズが発生しない

写真によってノイズが目立つもの、目立たないものがありますので、保存時に「なるべくノイズがわからないギリギリのライン」を見極めることが大切です。

PNG保存の場合

PNGの保存

PNG保存の場合、気になるのがPhotoshopやIllustratorの保存画面には「PNG-32」が出てきません。

PNG-24とPNG-32はまとめて「PNG-24」として扱われます。

「透明部分」にチェックが入っていない場合は「PNG-24」

PNG-24での保存

「透明部分」にチェックが入っている場合は「PNG-32」として扱われます。

PNG-32での保存

また、イラストを保存する場合もPNG-32(PNG-24+透明部分チェックあり)で保存すると、エッジ部分を半透明処理するため、どんな背景のホームページに配置をした場合もかならずエッジがなじむといった利点があります。

ですので、いろんなページで使いまわす画像はPNG-32で保存した方がぐっと扱いやすくなります。

PNG画像はいろんな背景になじむ

最初からいろんな背景で扱うとわかっている透過画像はPNG-32で保存するようにしましょう。

書き出し形式(Photoshop)

Photoshop CC2015より「ファイル」メニュー→「書き出し」内に「書き出し形式」が搭載されました。

クリックすると以下のダイアログが開きます。

SVGが選べる

やはりダイアログ右上でファイル形式の選択をしますが、こちらにはSVG形式があります。

JPEG、GIF、PNGもこちらから指定が行えます。「Web用に保存」よりも画質が良く、ファイルサイズも軽くなる強力な保存機能なので、できればこちらを利用しましょう!

SVGの保存(Illustrator)

最後にSVGの保存です。SVG保存はPhotoshopの「書き出し形式」でも可能ですが、SVG保存がベクター画像ですのでイラストレーターから書き出すことが多そうです。

イラストレーターの「ファイル」メニューから「別名で保存」を実行し、「ファイルの種類」から「SVG」を選択します。

別名で保存ダイアログ

「保存」ボタンをクリックすると以下のダイアログが現れます。

SVGオプションダイアログ

ここで「OK」をクリックすれば保存は完了です。

※レスポンシブサイトで使うか否かで設定を変える場合もありますが、今回は割愛します。またタイミングがあれば記事にします。

3.問題の答え

さて、それでは最初の問題の答えを考えていきましょう。

最初はこの画像から

PC向けサイトの透過ロゴ

PCサイトに掲載するサイトのロゴマークです。ブルーで色がついているところ以外は透過のデータです。

ロゴマークはたくさんのページに掲載されること+背景に別の色や柄が入ったページにも利用されるかもしれないことを考えた場合、PNGで保存するのが良さそうです。

PC向けサイトですから、拡大されたら……という心配はいらないと思いますが、Retinaディスプレイなどの高解像度ディスプレイのことを考えると、あまり複雑な形状でないロゴならSVGで保存しておいた方が今後の対応はしやすそうです。

 

続いてこちらの画像

スマホサイト内のアイコン

「スマホサイト内の」というところがポイントですね。

スマートフォン上でのズームアップやレスポンシブサイト(ウインドウサイズによってレイアウトが変化するデザイン)のことを考えるとSVGでの保存が良さそうです。

 

そして最後がこちらの画像

角丸+影付き

角丸の外側は透過、ドロップシャドウ部分は半透明であることを考えるとPNGでの保存一択になりそうですが……

ここはちょっと意地悪な回答になっちゃうのですが、これJPEGで大丈夫です。

これまでの説明で、この画像をJPEGで保存するには問題があって……

「JPEGは透明も半透明も扱えない」

なんですよね。

でもですね、ホームページを作る際に使うCSSで

  • 画像を角丸にする
  • ドロップシャドウをつける

が実現できてしまうのです。

CSSで上記の作業を行うことで、「やっぱり角丸やめたいなー」とか「角丸の半径を変えたいなー」なんてときに画像を作り直す必要がなくなるんですね。

ですので、JPEG保存、おすすめです。

ということでまとめましょう。

保存形式の組み合わせ

赤い一本線がオススメ、オレンジの破線が代替案です。

とはいえ、皆様の手掛けているサイトによってケースバイケースなところもあると思いますので、あくまでも参考程度に考えていただければ。

 

……めちゃくちゃ長くなっちゃいました。

ここまで読んでいただいた方、ありがとうございます。

 

バンフートレーニングスクールでは、イラストレーターも、フォトショップも、ホームページ作成だって学べちゃいます。

無料体験も行っておりますので、ぜひ一度お気軽に遊びに来てください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

CC2017対応 Photoshopを使って人物を切りぬこう!

寒い日が続きますので皆さん、体調管理に気を付けてください。
今んとこ大丈夫ばスタッフ『の』です。

今回は、Photoshopで人物や動物の切り抜きに便利な機能を紹介します。
その昔、精度を求められる切り抜きには、サードパーティー制のプラグインが有効でしたが、
CS5からの「境界線を調整」機能を使用すると、人物や動物の切り抜きが驚くほど簡単にできます。
既に使用しているよ。って方も、CC2015.5以降では、名前と画面が変わったことに戸惑われた方もいるのでは。
画面とツールがどのように変わったかを手順を追いながら見ていきましょう。

まず、「クイック選択ツール」等を使用して大まかな選択範囲を作成します。

0000

選択範囲を作成系のツールを使用している場合は、ツールオプションバーから「境界線を調整」(CC2015.5~「選択とマスク」)をクリックします。
(ツールオプションバーにない場合、「選択範囲」メニューからもいけます。)

【CS5~CC2015.1】
1111
【CC2015.5~】
2222

ダイアログが大分変りました。

【CS5~CC2015.1】
3333
【CC2015.5~】
4444

先ずはCC2015.1までの「境界線を調整」からご紹介。
「スマート半径」にチェックを付け、半径のスライダーを調整するだけでPhotoshopが髪の毛の毛先部分をを調整してくれます。

【CS5~CC2015.1】
5555

「出力先」を「レイヤーマスク」にして「OK」を押します。

【CS5~CC2015.1】
7777

背景がレイヤーマスクにより隠されました。

【CS5~CC2015.1】
9999

レイヤーマスクにした理由は、「ブラシツール」や「消しゴムツール」を使用してマスクを調整し、切り抜きの精度を上げていきやすいからです。

【CS5~CC2015.1】
9991

続いてCC2015.5~の「選択とマスク」を使用してみます。

先ず、「表示モード」。
「オニオンスキン」が追加となり、背景が透けた表示となりました。
表示は画像によって切り換えて作業します。
(キーボード「F」キーで切り換わります。)

【CC2015.5~】
8000

黒髪の男性の切り抜きなので、背景は白地で作業。
「エッジの検出」から「スマート半径」にチェックを入れ、半径のスライダーで調整します。

【CC2015.5~】
8001

表示を白黒にしてマスク状態で確認…。
髪の毛の部分はうまく出ておりますが、色々影響を受けてしまっているようです。

【CC2015.5~】
8002

そんな時は一度リセットして、「境界線調整ブラシツール」を使用し、髪の毛部分をドラッグします。
(CC2015.1以前では「半径調整ツール」)

【CC2015.5~】
8003

表示を白黒にしてマスク状態で確認してみます。
今度は他の部分はあまり影響を受けず、髪の毛の部分をうまく表現してくれました。

【CC2015.5~】
8004

「出力設定」欄の「出力先」を「レイヤーマスク」にします。

【CC2015.5~】
8005

・まとめ
CC2015.5~の「選択とマスク」は、ダイアログ出してから選択範囲の作成が可能となり、マスクの細かい調整がダイアログ内でしやすくなったという感じです。

人物の切り抜きをハンズオンで学びたい方は是非、「Illustrator & Photoshop実践講座」でお待ちいたしております。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

2016年~2017年 年末年始スクール休業日のお知らせ

こんにちは、バンフートレーニングスクールです。

年末年始スクール休業日/受付時間のご案内です。

ご迷惑をおかけいたしますが、宜しくお願い申し上げます。

 

★☆ 年末年始のスクール休業日のお知らせ ★☆

年内最終受付 : 2016年12月28日(水) 18時迄

休業期間 : 2016年12月29日(木) ~ 2017年1月4日(水)

★☆★★☆★★☆★★☆★★☆★★☆★★☆★★☆★★☆★

休業期間中のお申込・ご予約・お問い合わせ等は、

2017年1月5日(木)以降に順次ご返信いたします。

通常時よりもご返信にお時間を頂く場合がございます。
予めご了承ください。

 

◆◇お申込は、ホームページから年中無休24時間受付中◇◆

☆ スクールホームページ(お申込) ☆

http://www.vanfu-vts.jp/entrylist.php

☆ 開講スケジュール ☆

https://www.vanfu-vts.jp/cgi-bin/course/schedule.php

ご不便ご迷惑をおかけいたしますが、ご理解賜りますよう

お願い申し上げます。

 

2016年も残すところ僅かでございます。

本年もバンフートレーニングスクールをご愛顧いただき誠にありがとうございました。

来年も皆様のスキルアップをお手伝いできるようスタッフ一同努めて参りたいと思います。

 

2017年もどうぞよろしくお願い致します。

寒暖の差の激しい近日ではございますが、皆様お体にお気をつけて

どうぞ素敵な新年をお迎えください!

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

2016年12月のマンスリーギフト

早いものでもう12月!
街に一歩出ればクリスマスムード一色ですね。

 

クリスマス、年末年始とイベントいっぱいの12月ですが、

これも忘れてはいけません。

 

大掃除!

 

「毎年、お正月にいらっしゃる新しい年神(としがみ)様の為に
家屋をきれいに清め、門松やしめ飾りで飾ってお迎えの準備をする。」

というのが大掃除の意味だと聞いていますので
寒いですが来年の運気アップの為に頑張りたいところです。

 

 

さて、掃除をすると出てくるのが未分類の写真や手紙やカード等の小物類。
今回のマンスリーギフトはそれらを整理するBOXです!

img_4027

シンプルなデニム地のプリントなのでシールを貼ってアレンジしても良いですね!

 

 

持ち帰りたいけどかさばるのは・・・という方の為に
未組み立ての状態でもお渡ししています!
(※組み立て方は⇒こちらのページをご参照ください)
皆様の整理整頓にお役立て頂ければ嬉しいです!

 

 

 

無料体験講座を受講してマンスリーギフトを貰っちゃいませんか?

ポストカード制作体験講座、パンフレット制作体験講座、

ホームページ制作体験講座からお好きな講座が選べます!

★無料体験講座お申込み★

http://www.vanfu-vts.jp/lesson_e/index.html

12月マンスリーギフトの組み立て方

マンスリーギフトを未組み立ての状態でお持ちになった方への作り方になります。

こちらを参考にお作り下さい。

箱はハサミやのり、テープなどは一切使わず組み立てられます。

紙で手が切れてしまうのが心配な方は手袋をご着用頂いてお作り下さいね!

 

 
ビニール袋から出していただくと、
このような状態になっているかと思います。

1

 

入っているものは 箱本体が1体と仕切り板、大1枚、小1枚です。

 

3

 
箱の本体を広げるとこのようになります。

2
組み立てはこの写真だと奥側の縦に伸びた方から行いましょう。

 

 

1、一番奥から山折り、谷折り、山折り、谷折りと4本目のスジまで
折り目を入れます。
(・山折り⇒凸側が上にくる ・谷折り⇒凸側が下にくる)

4

※写真はクリックすると大きいサイズでご覧いただけます

 

 

そのままたたむとこんな感じです。

5

 

 

2、折りたたんだ左隣にある三角の羽の部分を折ります。
内側の③のスジから谷折り、谷折り、山折りです。
(写真の手で押さえている右側の羽のようにして下さい)

6

 

 

 

3、折り目をつけた羽を立てていきます。
角の三角の所(写真の丸印)は内側にくるように折りたたんで下さい。

7

 

 

4、そのまま、1番で折り目を付けたところを折り込んでいくと
この写真のようになります。

8

 

 

5、さらに手前の羽に折り目をつけます。
2番と同じように内側の③のスジから谷折り、谷折り、山折りです。

9

 

 

 

6、折り目を付けた羽を立てていきます。
3と同じように角の三角は内側に折り込みます。
ここが一番難しいのでがんばって下さい!

10

 

 

 

7、羽を立てたら4で余った端っこを折り込みます。

11

 

 

 

8、7の反対側も内側に織り込んで、
丸印の所を繋げます。

12

13

 

 

9、あとは両端の羽を内側に折り入れれば箱の完成です!

14

15

 

 

10、仕切り板(大)は中央が山になるように、
(小)はスジに沿って幅を半分に折りツメを穴に差し込んでおきます。

16

 

 

11、大きい仕切り板を箱にセットします。

17

 

 

12、続けて仕切り板の溝を合わせて(大)と(小)を組み入れれば…

18
(※ハガキを収納する場合は仕切り板の(小)は使いません。)

 

完成です!

19

 

 

 

ご不明な点等ございましたら、

スクールまでお気軽にお問い合わせください!

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

Vanfu Training Schoolのスタッフがお役立ち情報を発信中