Muse基本講座

画像ファイルの読み込み

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
museに画像ファイルを読み込み、それらを様々な方法で正確かつ手軽にレイアウトする手順を解説します。
講師:
10:08

字幕

このレッスンでは Muse への 画像の読み込みについて解説します では サンプルのファイルを開いたら 「 Home 」のページを開きます そうすると まだ 画像が全然読み込まれていない まっさらなレイアウトが出てくるので ここに画像を読み込んでみましょう では 画面をちょっと引いておきましょう 75% 位にしておいて 画像の読み込みは 基本的に ここから行います 「ファイル」メニューの「配置」です これを実行することで行えるのですが ここに行く前に 最初に「レイヤー」というものがあります 「レイヤー」というのは この画面の中が 実は いくつかの層になっていて どこの層=レイヤーにものを置くか それを決める必要があります ですので 今回はこの「 Content 」 というレイヤーを選んでおきましょう では「Content 」を選んだ上で 「ファイル」メニューの「配置」を実行します そうしたら画像の保存先に移動して 「 beach.jpg 」というファイルを 「開く」を実行します そうすると マウスのポインターの所にチラチラと 時々 画像が見えると思うのですが これを適度な所へ持って行って クリックすると この様に 画像が配置されました 基本的には この様に読み込んだ上で 場所を選んでクリックすれば 配置されるという仕組みになっています それでは これをドラッグして 左上をピッタリ合わせます 吸着しますね そうしたら 右側がはみ出してしまっているので ドラッグして幅が ピッタリになるように合わせます ただ この状態では 下のメニューを隠してしまっているので この「切り抜きツール」を選びます もしくは キーボードの C を押しても一緒です そうしたら この 下の所を ドラッグすると その部分を切り抜くことができます そうして この隠したくない メニューの線の所に ピッタリ合わせて 放すと そこで この様に切り抜かれます これが画像の配置の基本です では 応用的なことをやってみましょう では 次にこの 1個1個の項目の上に アイコンを合計5個置こうと思います では 「選択ツール」にします 「ファイル」の「配置」 同じところに行きます ここの「 images 」の中にある ファイルを選ぶのですが では 5個選ぶんだから 5回作業をしなければならない というと 結構面倒くさいですよね? そういう時は 実は いっぺんに作業できる手順があります Mac の方は command キー Windows の方はCtrl キーを押しながら こんな感じで 読み込みたいファイルを 1個ずつクリックします 今回は「 beaker.png 」 「 chat.png」「 group.png」 「 laptop.png 」「 money.png 」 この5個のファイルです これを選んだ上で「開く」とします すると... こんな感じになります おや?1個しか見えていない  という感じがしますけど ここでキーボードの左右を押してみてください すると この様に キーボードの左右を押すたびに 今選んだ5個の画像が入れ替わります そして これをここに置こうかな? というものが 表示されている状態でクリックすると パッと置かれて 残りのものも置くことができます この様にして いっぺんに何枚もの画像を掴んで 1個ずつ置いていくという 大変便利なことが行えます では 位置を合わせるのですが まず 位置合わせの1個の基本として これを下のテキストの中央に合わせたい時は これを動かしていると... 今!この状態です ここがピッタリ中央になるように 縦線が処理されました ここが 今の場所が この下のテキストとビーカーのアイコンが 完全に中央が揃った状態です さらに ドラッグしていくと 今 17px 17px と出ていますが これは 上の余白との間も 下の文字との間も 17px きちんと揃っているよ ということです こんな感じで合わせることができます では 次からこのビーカーを基準にして こっちもドラッグしていくと 縦位置は 今 ビーカーの中心にピタッと合っています 横位置は下のテキストに合わせます 同じような感じで 縦位置は左側の別のアイコンに 横位置は下のテキストを基準に 合わせていきます そうすると フリーハンドで ドラッグしているのですけど それでも 完全にキッチリとした レイアウトを作ることができます それでは こっちにもやってみましょう また 複数読み込むのですが 違う方法をやってみます 「ファイル」の「配置」から 「 images 」の中に 「 thumbs 」という サムネールがいっぱい 入っているのがありますので この中の 2 3 4 5 6 7 8 9 10 10 個画像が入っていますけど とりあえずこれを開きます そうすると1個画像が付きます 1個配置します そうしたら これを縮小していきます ただ 端からドラッグすると この様に 比率を保って縮小することができます では 25% にしておきましょう そうしたら これを端の線にだけ 合わせておいて Mac の方は option キー Windows の方は Alt キーを押しながら ドラッグします すると... こんな感じで複製できます この要領で4個作ってしまってください この右側をこっちの線に合わせます これで簡単に4個作れました 全部同じ画像ですので 後で直します そうしたら Shift キーを押しながら これらの画像を1個ずつクリックしていくと 同時に選ぶことができます では この状態で「整列」という所を クリックしましょう すると「オブジェクトを整列」 というのが出てくるので まず 「垂直方向中央揃え」と いうのをクリックすると こんな感じで 垂直の中央が揃いました そうしたら「オブジェクトを分布」を クリックすると これで均等に 全く同じ幅で 揃えることができました こんな感じで 端だけ合わせておけば あとは「整列」のコマンドで キッチリ合わせることも可能です さらに これを全部選んだ状態で option キー または Alt キーを押しながら 下の方にドラッグすると この様に 同じものをドラッグすることができます では この状態で 全部同じ画像になっていますが 特定の画像を右クリックして 「画像を置換」を実行します そして 違う画像を選んで 「開く」をすると それに差し替えられます 同じように ワンタッチで差し替えが可能です 全部サイズが一緒の画像の場合には まずは1種類でレイアウトを作ってしまって 後で 差し替える そんなことも可能です または1回作ったレイアウトを 別の画像に差し替える そんなことも可能となっています こんな要領です そうしたら また下へ行きましょう そうしたら 3つありますけど 「ファイル」の「配置」から 今度は3人の顔写真があるので command もしくは Ctrl を押しながら それぞれクリックすることで また いっぺんに読み込まれます そうしたら順番に この様に並べていきます そうして これは最初と一緒です また テキストの中央に合わせたら 横はテキストの中央に合わせて 縦は左の画像に合わせます わざわざグリッドなどを引かなくても 1個基準ができれば この様に合わせられるというのが 非常に楽です こんな感じで 合わせることができました 画像の配置は なかなか面倒な作業ではあるのですが Muse はこの様に かなり手軽に しかもキッチリした レイアウトを行うことが可能となっています

Muse基本講座

Adobe MuseはHTMLやCSSといった専門知識がなくても、IllustratorやInDesignを使うような感覚で手軽にWebサイトをデザインできるソフトです。このコースではMuseを使ってページに文章や写真をレイアウトするやり方やグラフィックの作成、モバイル機器に対応したサイトの作成方法などについて学習します。

3時間55分 (72 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月20日

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

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

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