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

フッターを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フッターのエリアに対し、プロトタイプを参考に長方形でブロックを作成し、さらに長方形の応用で仕切り線を作成します。
講師:
00:06:25

字幕

このレッスンではフッターの作成を行います。それでは本文のテキストも入ったので一番下のフッターのエリアを作成しましょう。それでは今、元のプロトタイプの画像を消しているのでそれを表示して、そこを参考にしながら作ろうと思います。それではレイヤーのパネルを開けます。そして下のレイヤーこれの一番下にあるプロトタイプの画像これをオンにすることで下の方のエリアが出てきます。これがオフになってると全体のページの長さ自体がちょっと短くなります。なのでこれをオンにした状態で作業をしましょう。そしたら、まずこのフッターの四角形ですね、長方形これと同じ大きさのものを作ります。それでは作業をしやすいように拡大しましょう。そしたら長方形ツールですね。これを使って同じ大きさの長方形を作ります。まず左上の所に当ててここからドラッグしていきます。そして一番右下の所ここまで引っ張ってきます。そしたら「塗り」をスウォッチの中にあるこの薄い黄色ですねこれを設定します。そうすると塗りが設定されてフッター部分のブロックができました。ではこれに加えてこの中に書いてある仕切りの線を描かなければならないので一回この長方形の不透明度をさげてやります。 50% ぐらいにしてやります。そうすると、文字以外にここに仕切り線がありますね。これをまず作っておきましょう。ではまたちょっと大きめの表示にしておきます。この部分を見ると縦の直線で描かれています。これを Muse 上で描こうと思うのですが見てみると直線を描くツールというのはそのままでは用意されていません。ただちょっとした長方形を応用することでこれと同じものを描くことができます。では実際にやってみましょう。長方形ツールを選んでそして線、ここの色を黒にしておいて「太さ」、1にしておきます。そしたらここの線の高さに合わせて長方形を描きます。高さはこの線と同じにするのですが幅は適当で構いません。こんな感じにして描いたうえでちゃんと黒の線が描かれてる状態ですね。この様にします。そうするとここにこういったものが描かれてます。ではちょっと見やすいようにこのブロックこれの不透明度を上げておきましょう。この状態だと、これただの長方形なんですけどここの「線」の詳細を開けます。そうすると「線幅」今この鎖がオンになっていて上下左右とも全部同じ線幅になってます。ではこの...鎖ですね、リンクを外したうえで元々あった、プロトタイプにあった縦線と被ってるこの左側の辺以外の部分を太さ0にします。 上も0、下も0そして右側も0ですね。そうすると、どうなるかというと実際に見えるのはこの1本の線だけになってただの直線と同じように見えます。ちょっと応用的な技ですが、この様にやれば縦の仕切り線を描くことができます。ではまたちょっと下が見えるようにしておいてこれを複製してこちら側も作りましょう。Mac の方は Option キーWindows の方は Alt キーを押しながらこれをドラッグします。ドラッグしてそしてこの横線これがあると高さ一緒ですよという印なのでこの様に対応する位置に持ってきます。そして改めて、この黄色いブロックこれの不透明度は 100% にしておきます。そうするとこの様な形でエリアができました。ではこれプレビューしてみると下の方を見てフッターのエリアが作成されて縦の仕切り線があるとこういった状態ができました。作業が終わったら、またこのプロトタイプの画像のレイヤーは見えなくしておけば純粋にこの部分だけを見ることが出来ます。レイヤーの作成は長方形を作るだけですがこうした縦線の描画こういった所も様々な部分に応用できるテクニックですので是非とも覚えておいて下さい。

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

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

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

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

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

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