Muse (2015) 基本講座

グラフィックの配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
あらかじめ配置したアタリの長方形を画像に差し替えたり、複数の画像を同時に開いて効率よく配置する手順を解説します。
講師:
09:14

字幕

このレッスンでは画像の追加について解説します。それでは、このレッスンのサンプルのプロジェクトですねホームを開けるとこのように長方形が複数配置してあってレイアウトの基準としてあります。これを元にして用意してある画像の素材を配置していってみましょう。まず、ここの黄色い四角の部分ですね。ここを丸々画像に差し替えてみましょう。それではこれを選んでいる状態で塗りの部分をクリックしてください。そうすると単色、グラデーションの設定の他に画像追加というのがあります。ではここをクリックします。そうすると、このようにファイルを開く画面となるので、このコースの素材の中で asset というフォルダの中に入っているhome-bg.jpg という画像を選びます。そして「開く」をクリックします。そうすると、この長方形の内容が写真に置き換わりました。このように基準として配置していた長方形ですね。中身を丸々このように写真として入れ替えることができます。実はこの写真、元々はこのような広い範囲が写っているものなんですが今は一部しか出ていないのでそこも調整することができます。今サイズ調整が「元のサイズ」となっていますけどこの選ぶ内容によって表示のされ方が変わります。 例えば「全体に拡大縮小」というのをクリックすると、幅がちゃんと全部出るようになりました。そして今はこの位置という所を見ると左上に小さいですけどチェックが入っています。画像全体の、元画像全体の左上を基準にしてこれが配置されています。これを真ん中にすると真ん中のポイントをクリックしました。画像の真ん中を基準にしてトリミングされるようになりました。このようにして調整を行うことができます。ではこうやって写真を入れてみた後にやはりこれサイズが大きくなってもいいのでもう少し下まで出したいなとなった時ですねそんな時はこんな操作を行ってください。全体が見えるように50%にしてみました。そうすると下の方には、一番下の黒いところがフッターですね。その前に赤、緑、水色の別々の四角形ですけど置いてあります。では、これらの下にあるエリアこれを全部選択します。ドラッグして選択します。そうしたら写真を拡大したい分だけ下の方にドラッグしていくとフッターのエリアも一緒に伸びますね。そうするとちょっと余裕ができたのでこの空いた所に合わせるようにこれを拡大してやると写真の表示領域がこのように拡大されてさらに多くの所も写るようになります。こんな感じで調整することができます。 ではこの次、2段目に別の方法で画像を置いてみましょう。では今分かりやすく赤で塗ってましたけど塗りの色をまず変えましょう。これですね、カラーの調整の所に行ってでは同じ色になるようにカラーコードで塗ってしまいましょう。ここに ECECEC と ECが3つですね。打ち込んで Enter すると薄いグレーになりました。ここのエリアは薄いグレーの上に別の画像を配置していきます。では今回はこの画像は下地として残した上でこれとまた別個に画像を読み込みます。ファイルメニューから配置を選びます。そしてこれまた asset フォルダの中ですけどここで画像を選んで「開く」とやればこちらに持ってこれるんですが今回は複数の画像をいっぺんに開こうと思います。1回1回開いているとめんどくさいので3ついっぺんに開きます。ではこんな操作を行ってください。Mac の方は Command キーWindows の方は Ctrl キーを押しながらまず1個目を選んで、次2個目ですねInfinity Solutions という、選びます。The Cellar ですね、3つ目を選びます。この3つのファイル、 Command またはCtrl を押しながらクリックすると飛び石で全部ですね複数選択することができます。 これで「開く」をクリックするとこんな感じで今マウスのポインタに画像のサムネイルがくっついています。では1回ずつクリックしましょう。まず1回クリックすると1枚置かれ、2回目クリックすると2枚目が置かれもう一回クリックすると、3枚目が置かれる。このような形で複数の画像をいっぺんに開いて1回クリックするごとに、1個ずつ置いていくというそんな効率的な方法を行うことができます。こうやって配置すると元々あった四角の中身を入れ替えるのとは別に新たに、このように画像オブジェクトとして配置することができます。ではこの段階で1回 asset というパネルを開いてみてください。そうすると、ここまで読み込んだ写真が全部このように材料として登録されています。この今配置した3つの画像はホームのページにある独立した画像としてそしてこの Home-bg.jpg というこっちの四角に割り当てたやつですね。これは四角に背景として割り当ててあるのでちょっと表示が違っています。このように読み込まれた画像は全部asset のパネルの方に登録されます。例えばこれらの、これらは最終的にマウスを重ねてリンク先にするものですけど例えば重ねた時にツールチップですね、これは何のボタンですよと、説明文が出るとかまたは何らかの理由により画像が読み込まれない時に代わりのテキストを表示する時なんかその時には、ここの部分で右クリックするとこんな内容が出てきて「画像プロパティを編集」というのがあります。 これを開いてやると画像プロパティというのが出てきて、マウスを重ねた時のツールヒントであったりとか、または画像が何らかの理由でない時の代替のテキストそれを、ここに入力することもできます。では、この3つの画像を並べてみましょう。順番として並べたいのがこれが真ん中でこれが左側で、これが右側という感じですね。では左右の画像はこんな感じで、ぴたっと右側にくっつけることができます。そして上下に動かしてやるとちょうど後ろにある画像の真ん中に来た所で65ピクセルという表示が出て上下の余白が一致するとそんな表示になります。これでちょうど真ん中と判断してレイアウトすることができます。同じくこっちの画像もこう移動してくると、今これど真ん中、左右のど真ん中ですね。中心線が引かれています。それと横もぴったりあってるとスナップするので、簡単にきっちりとした位置に置くことができます。もう1枚も左側は、このようにスナップして上下同じ幅ですね。このように1回ごとにスナップしたり基準線がこまめに出るので簡単にぴったりとしたレイアウトを行うことができます。非常にレイアウトが楽で簡単な作業になっています。このようにして元々置いていたあたりの画像に追加する方法であったりまた複数の画像を新たに読み込む方法色々とありますけどこれらの方法をぜひとも覚えておいてください。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

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

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

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

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