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

ロゴとメイングラフィックを配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ヘッダ部分に使用するロゴと画像を読み込んだ上で、新たにレイヤーを作成してメニュー関連の素材をそこにまとめます。
講師:
00:06:59

字幕

このレッスンではロゴとメインのグラフィックを配置します。それでは今この様な状態で、メニューだけ最終的に使うパーツとなっています。ではヘッダー部分の残り、このホームへのリンクにもなるロゴと、そしてメインのグラフィックこれを配置していきましょう。それではまずロゴから行きます。「ファイル」メニュー>「配置」を実行します。そしてこのレッスンのアセットのフォルダの中にある画像からralogo.png というのがあるのでこれを開きます。そうすると、この様にマウスのポインタの方にくっついた状態となるのでとりあえず適当な所で構いません。これをクリックするとこの様にロゴがその場所に配置されます。ではこれを全く同じ場所に配置してみましょう。わかりやすいように表示を大き目にしておきます。ではこの状態でそれぞれのロゴがピッタリ重なる様に持ってきます。ドラッグだけではやりづらいのである程度の所まで来たら選択されている状態で、キーボードのカーソルキーを使って微妙に移動させると、この様にピッタリの位置に持ってくることができます。これで配置できたのですが、実は元のデザインを考えると背景が黒で塗りつぶされていたんですね。 ただこの素材のままだとこの文字以外の所は全部透明になってるのでちょっと食い違ってしまいます。まず一個の方法としてMuse の上で長方形を描いて黒べたの長方形を描いて後ろに配置するというやり方もあるんですが実は、このロゴのサイズ自体はこの黒いブロックとピッタリの大きさになってるのでこういった場合には、この画像を選んで「塗り」の部分で黒を選んでやるとどうでしょう。ちゃんとこの塗りの色が透明の部分だけに適用されてロゴがきっちり残ってこれではっきりと表示することができました。ではまず一個目、これでロゴの配置が OK です。では次に、この写真を配置しましょう。ではまた同じように「ファイル」>「配置」から今度は main_back.jpgというファイルがあるのでこれを開きます。そしてこれも同じようにクリックしてやると配置されてこの様に持ってくることができます。ではこれを、この数で合わせればわかりやすいのでまた表示をある程度拡大してやってそして斜め下の所こっちの方で合わせてやりましょう。近くまで持って来たらキーボードのカーソルキーでピッタリの所に行くようにこの様に持ってきます。そしたら、このままだと写真が一番上に来てしまって前に作ったメニューとかそしてさっきのロゴとか全部隠れてしまいます。 これではまずいのでちゃんとあれらが上に来るようにこれを変更していきます。ではレイヤーのパネルを開きます。そしてずっと作業している「レイヤー1」を開けてやると一番後ろに、このプロトタイプの画像があってその上にメニュー、ロゴそしてこの写真ですね。こういった順番で重なっています。ではまずこの通常の画像とメニューを分けるために新しくレイヤーを作ってやります。では新規レイヤーを実行してこの「レイヤー2」という所、ダブルクリックするとオプションが出てくるのででは「名前」menu とかにしておきましょう。これで menu という新しいレイヤーができました。そしたらまず、このウィジェットで作ったメニューこれをドラッグして、このメニューのレイヤーの方に入れてやります。そうすると、見た目上もメニューが上に出てきてmenu のレイヤーの中にメニューが入りました。そしたら次にロゴですね。これも同じく同じようにドラッグしてこの menu のレイヤーの中に入れました。この中でロゴのほうが上に来てるのでこの様な見た目となっています。これで画像とメニュー関係のものこれをレイヤー分けしたうえでこの様に配置することができました。 そしたら、この下敷きの画像を見えない状態にしたうえでこの状態でプレビューしてみましょう。そうすると、実際本番で使う最終形の画像それが使われた状態でどんな風にレイアウトされるかそれを見ることが出来ます。ちゃんとページの形になってますね。この様に確認することができます。特にこのレイヤーを使って読み込んだ後のものうまい具合に配置を変えてやる方法これはかなり効率よく作業が行えるので是非とも覚えておいて下さい。

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

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

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

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

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

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