Adobe Illustrator で、グラフィックをデザインした後で、ファイル／別名で保存を選択します。
最終更新日 :
Adobe Muse CC で SVG グラフィックを読み込む方法を学習します。Adobe Muse に、SVG グラフィックの配置、コピー、読み込みを行うことができます。
注意：
Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報とサポートについては、Adobe Muse のサービス終了の FAQ を参照してください。
Adobe Muse では、Adobe Illustrator などのツールを使用して作成したベクターグラフィックをサイトデザインで使用できます。現在、Adobe Muse では、スケーラブルベクターグラフィックス（SVG）形式をネイティブサポートしています。SVG フォーマットを使用してロゴ、アイコン、背景およびブラウザーの塗りなどを作成し、Adobe Muse 内の Web ページカンバスに直接配置できます。
SVG フォーマットで保存されるグラフィックは軽快で、解像度に依存しません。そのため、グラフィックをページの読み込み時間やサイトの外観に影響することなく、大きなサイズで表示できます。SVG ファイルは、HiDPI ディスプレイでもサポートされています。
SVG フォーマットは解像度に依存しないため、Adobe Muse では、SVG ファイルを標準の Web サイトと高解像度の Web サイトの両方で同様に扱います。SVG ファイルをデザインビューの Web カンバスに配置する場合、元のサイズの 50% に縮小されません。
Adobe Muse に配置する前の SVG ファイルの処理
注意：
Adobe Muse 2015.1 またはそれ以前のバージョンを使用している場合のみ、以下の手順は有効です。
Adobe Illustrator を使用して作成した SVG ファイルでは、以下の手順に従います。
-
-
別名で保存ドロップダウンで SVG を選択します。ファイルを保存する場所を参照して「保存」をクリックします。
-
SVG オプションダイアログで、以下の属性を設定します。
- 画像の場所：埋め込み
- SVG プロフィール：SVG 1.1
- フォントタイプ：アウトラインに変換
- CSS プロパティ：プレゼンテーション属性
- 小数点以下の桁数：3
- エンコード：Unicode （UTF-8）
- 画像の場所：埋め込み
-
「OK」をクリックしてファイルを保存します。
SWF の読み込み
Adobe Muse 2015.1 またはそれ以前のバージョンを使用している場合、 Adobe Muse 内で SVG ファイルを読み込んで配置する前に、「Adobe Muse に SVG ファイルを配置する準備」に記載されている手順に従ったことを確認します。
-
Adobe Muse で、ファイル／配置 （Windows では Ctrl + D キー、Mac では Cmd + D キー）を選択します。
-
SVG ファイルの場所を参照して、選択し、「開く」をクリックします。
-
Adobe Muse では、SVG のサムネールプレビューがポインターに置き換わります。Web ページカンバス上の適切な場所をクリックして、SVG ファイルを配置します。アセットパネルに配置したファイルが一覧表示されます。
配置した SVG ファイルを使用して、サイトのデザインを続行します。切り抜きツールを使って SVG 画像を切り抜き、デザインニーズに合わせて、SVG 画像のサイズを変更することができます。
Adobe Illustrator から SVG をコピーする
Adobe Muse では、Adobe Illustrator から Web ページカンバスにコンテンツをコピーできます。サイトデザインでのアートワークのコンテンツ全体を保存して使用したくない場合に、コンテンツのコピーは便利です。
アートワークの一部をコピーするときに、Illustrator はアートワークを SVG に変換し、Adobe Muse が使用するクリップボード上に配置します。Adobe Muse はコピーしたコンテンツを埋め込み SVG として扱うため、デザインニーズに応じてグラフィックのサイズを変更できます。
-
Adobe Illustrator では、以下の手順に従ってください。
- グループまたは選択したパスを隔離：コピーするグループまたはパスを右クリックしてコンテキストメニューでグループ／選択したパスを隔離を選択します。
- 手動でグループまたはパスを選択：コピーするグループまたはパスを選択します。
-
Ctrl + C （Windows）または Cmd + C （Mac）コマンドを使用して、選択したグループまたはパスをコピーします。
-
Adobe Muse で、Ctrl + V または Cmd +V コマンドを使用して、選択したグループまたはパスをデザインビューの Web ページカンバスにペーストします。
アセットパネルがペーストした SVG ファイルを一覧表示します。
背景塗りおよびブラウザー塗りへ SVG を読み込み
-
背景塗りまたはブラウザー塗りに応じて、塗りおよびブラウザー背景を選択します。詳細については、「塗りおよびブラウザー背景オプションの使用」を参照してください。
-
「画像を追加」をクリックします。SVG ファイルの場所を参照して、選択し、「開く」をクリックします。
-
「サイズを合わせる」属性や「位置」属性を適切に設定します。
注意：
SVG ファイルを背景塗りまたはブラウザー塗りに追加すると、「サイズを合わせる」属性をサイズに合わせて拡大・縮小または全体に拡大・縮小に設定したときに画像はデザインビューでラスタライズされて表示されます。ただし、Adobe Muse 内またはブラウザー上でプレビューする場合は、想定どおりにレンダリングされます。
SVG 画像のスライドショーへの追加
Adobe Muse バージョン 2015.1 以降の場合、SVG 画像をスライドショーに追加できます。まずサムネールウィジェットをウィジェットライブラリからドラッグして配置します。次に Creative Cloud ライブラリからベクトル画像を選択し、スライドショーに配置します。
ビデオチュートリアル
アカウントにログイン