Museを使ったWebサイト制作ワークフロー

Photoshopのからのエクスポート方法

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshopから「書き出し形式」を使用して、画像の部分ごとに別ファイルとして書き出しを行う手順を解説します。
講師:
00:07:09

字幕

このレッスンでは Photoshop からの画像の書き出しについて解説します。それでは 今こちらの方にはページのプロトタイプのファイルが開かれています。これは実際に Muse での作成に使えるファイルに書き出しを行います。Photoshop から違う形式で画像を別に書き出す時には「ファイル」メニューの「書き出し」その中の上2つですねこれがよく使われます。まず JPG、「JPG としてクイック書き出し」とありますけどこれは手っ取り早くこれを実行することでこの画像全体を JPG 形式で書き出すことができるというコマンドになっています。そして細かく設定を行えるのが、その下にある「書き出し形式...」の部分ですね。じゃあこれを実行してみましょう。そうすると、専用の「書き出し形式」というウィンドウがでてきます。ここで様々に設定を行って別のファイルを書き出すことができます。まず重要なのがこの「ファイル設定」という所です。「形式」の所を開けてみるとPNG またはピングとも呼ばれますね。そして JPG ジェイペグ。GIF SVG と 様々な書き出しが可能な画像形式が選べます。ではちょっと細かく見ていくとまず SVG はベクター形式の画像拡大、縮小できる画像なのでちょっと今回は対象外です。 次の GIF ですがこれですね、以前は Websiteの制作にかなり使われたのですが実はこの GIF は色が 256 色しか使えないという制限があります。なので今はアニメーションなんかの掲載には使われるんですけど一般的な画像としてはほとんど使われなくなっています。現在の Website は大体JPG か PNG かこのどちらかの形式で画像が掲載されています。それぞれの違いなんですが、まず PNG またはピング、両方の呼び方がされますけどこちらの大きな特徴は透明部分を含むことができるという点です。例えば 切り抜きがしてある画像なんかの透明部分をきちんと保ったままで他の画像なんかに重ねて使えるというのが最大の特徴です。そして 基本的に画質が元の画像と変化せずに書き出せるというそういった特徴があります。そのかわり もう一個の JPG と比べてファイル容量は PNG の方が大きくなります。JPG の特徴ですが、こちらは透明部分なんかを入れられない代わりにファイル容量を、画質を調整することで細かくコントロールすることができます。例えば 今、「画質」100% となっていますが左側見て下さい。ここの部分に書き出したらファイル容量がどれぐらいになるかシミュレーションの数字が載っています。 この画面全体を画質 100% で出した場合には977.5 KB になると試算がでています。約 1メガですね。では ここの画質の部分これをちょっと下げていくとどうなるかというと15% 程落としてみたらもうかなり減ってますね。300 KB 以上減ってます。この様に 画質を落とせば落とすほどファイル容量は軽くなってしかもこういった画質のダウンも写真とかであればよほど極端にやらなければ、割とわからないぐらいのレベルに抑えられます。ここの表示、見てやってこういった写真なんかの場合にはある程度落としても大丈夫だったりするので適宜調整してやることができます。そしてここで設定を行った上で「すべてを書き出し...」とやってやるとこの丸々の画像が保存されるという仕組みになっています。この丸々の画像はレイアウトなんかに使えるんですが実際にページに表示されるパーツは更に ここから切り出して作らなければなりません。それを作るときなんですがこちらのレイヤーの方みます。実は こちら、個々のレイヤーを右クリックした時もさっきと同じ名前の「書き出し形式...」というの、でてきます。ただ「ファイル」メニューからと違うのはこっちの場合には右クリックしたレイヤーの内容が書き出しの対象になるというわけですね。 なので パーツごとにバラバラに保存することができます。勿論 この孫グループも、個別のパーツとして書き出すことも可能です。そして これ、書き出す時なんですが例えば 今このロゴを選んでます。これを試しに「書き出し形式...」やってみましょう。このチェックの模様になってる所これが透明部分を表してるのでPNG で書き出せばこれは透明部分を含んだ素材として書き出されます。例えばこれが JPG 選んでしまうとJPG では透明部分を入れられないのでもう文字も白と白なので見えなくなってしまいましたけど強制的に背景が付いてしまいます。なので 四角い写真なんか透明部分を入れる必要がないものはJPG でもいいですけどちゃんと透明部分を保持しなければいけない素材に関してはPNG の形式で保存します。このロゴも、こっちの下敷きまで含めたまとまった単位で書き出せばこれは透明部分がなくても変わらないのでこういったものは JPG にしてある程度ファイル容量を抑えるとそのような使い分けができます。こうしてそれぞれ元々分けて作ってあるパーツを別々の画像として書き出すことができます。同じ名前の書き出し形式なんですがレイヤーを右クリックして実行するのと「ファイル」>「書き出し」>「書き出し形式」この両者で動作が多少違うのでそこも含めて覚えておいて下さい。

Museを使ったWebサイト制作ワークフロー

HTMLを意識せずにデザイン性に富んだサイトを制作することができるMuseを使えば、ワークフローを整理することでより効率的な作業を行えるようになります。このコースではPhotoshopやInDesignを使ったプロトタイプの作成やTypeKitフォントの使用、グラフィックの配置や書式の設定、サイトのエクスポートに関するテクニックなどを学びます。

1時間44分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年07月28日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。