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

InDesignからのエクスポート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
InDesignで作成したプロトタイプから、レイアウトの参考にする全体、及び個々の画像を書き出す手順を解説します。
講師:
00:04:22

字幕

このレッスンでは InDesign からの画像書き出しについて解説します。それでは InDesign 上でプロトタイプのデザインが終わったらこれが Muse で読み込めるように画像に変換します。その時なんですがレイアウトの参考にするために全体を一枚の画像として書き出すのともう一つ、この様にレイアウトにピッタリ合うように調整された各画像、これらをパーツとして最終的に使う一個のパーツとして書き出すその二段構えとなります。では まず全体の書き出しを行ってみましょう。全体の書き出しを行う時には「ファイル」メニュー>「書き出し」これを実行します。そうすると、この様な保存の画面がでてくるので形式ですね、PNGピングにしておきましょう。これで「保存」とします。では ファイル名、とりあえずall としておきましょう。そして大事なのがここですね、「PNG の書き出し」ということで詳細設定がでてきます。まず 書き出しですがここ必ず「すべて」にしておきます。そうすると、このページが全体が書き出しされます。そしてこちらの「画質」という所ですがこれは「最高」にしておきましょう。大事なのがここですが「解像度」ですね。 この「解像度 72」というのは1インチのソートの中に何個ピクセルがあるかという数字なんですがWeb ページのように画面上で扱う画像の場合にはこれは 必ず 72 になります。これはもう決め値で 72 と覚えておいて下さい。これが印刷用のドキュメントだともっと高い値を使うのですが今回はこのままのサイズで画面に表示するので 72 です。そして「カラースペース」ですね。これは「RGB」にしておきます。そしたら「オプション」の部分ですがこの中で「アンチエイリアス」ですね。これにだけ オンを入れておきます。これで書き出しを実行します。そうすると、処理はすぐ終わります。では 書き出したものプレビューしてみるとこの様な形で全体が一枚の画像になって書き出されます。これを Muse の方に呼び込んでやってレイアウトのお手本として使います。では 次に個々の画像ですね。これらを書き出したいのですがまず 書き出しの対象の画像を選びます。この状態で先程と同じ「ファイル」>「書き出し...」これを実行します。では この画像は透明部分がないのでJPEG でいいですね。では ファイル名を付けて「保存」を実行します。そしたら今度はこの一番上の部分ここで「選択部分」にしておきます。ここが大事です。 「選択部分」にしておくことでこの今選択している画像だけを保存することができます。そして「品質」を上げておいて「解像度」は同じく 72 ですね。では この様な状態にして書き出しを行います。そうすると 今度はこの様に選択してある画像だけ これをパーツとして書き出すことができます。もう 今度はレイアウト上で大きさを設定してあるのでこのまま Muse 上で配置してやれば同じ大きさとして持ってこれるとそういったわけですね。この様に同じ「ファイル」>「書き出し...」を使うのですが全体と個々のグラフィックではちょっとだけ手順が違います。この辺の違い是非とも覚えておいて下さい。

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

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

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

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

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

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