Museで作るカラフルなスクロールページ

コンテンツのブロックを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Photoshop上でレイヤーマスクを適用としてブロックのサイズを測った上で、Muse上で長方形を使ってコンテンツエリアを区切ります。
講師:
05:06

字幕

このレッスンではコンテンツを配置するためのブロックを作成します。それではこのレッスンのファイルを開いてホームを開きます。今ヘッダーの部分とフッターの部分ができてます。ではその間のこの部分に実際のコンテンツを置いていきます。そこで1回 Photoshop のデザインの方見てみましょう。これ見てみるとこんな感じにエリアが分かれてます。それぞれブロックになっていますが今回なんですけどこの紫色の RESISTER のエリア以外は同じサイズになってます。なのでこの大きさを割り出してMuse の方で長方形を作るということになります。では、この WELCOME のエリアここのサイズを割り出そうと思います。では WELCOME のグループを分けてこの写真ですね。この大きさを割り出せばいいわけなんですが実はちょっとだけ問題があります。ではこのレイヤーを選んで「編集」>「自由変形」をやってみるとこんな風に実際に見えてる部分よりも大きく変形のハンドルが出てきます。これ何故かというとこのレイヤーはレイヤーマスクで、この部分だけ見えるようになってます。なので実際の大きさもっと大きいんですね。これだと大きさが図れないので1回✕で解除します。 そしたら、今この見えてるサイズにレイヤーを最終的に結合してみましょう。まずこのレイヤーを右クリックして「レイヤーをラスタライズ」これを実行します。これを行ったうえでこのレイヤーマスクを右クリックすると「レイヤーマスクを適用」というのが出てきます。ではこれを実行します。そうすると、レイヤーマスクが見えなくなりました。これで「編集」>「自由変形」やってみるとちゃんとこの見えてるピッタリのサイズでできてます。レイヤーマスク、1回「レイヤーをラスタライズ」してその後「レイヤーマスクを適用」とやるとこの様に見えてる範囲にきっちり切り抜くことができます。そして今見てみるとこれ 475 px ですね。高さがわかりました。ではこれ、✕をクリアして解除しておきましょう。この状態保存しておくとレイヤーマスク無くなってしまうのでこういった時には「ファイル」メニューの「復帰」というのをやっておくと保存した状態に戻ります。間違って保存しないようにそれをやっておくと便利です。では、Muse の方に行って画面が見えづらいので大きさを調整しましょう。では長方形のツールを選んでこのヘッダーとこちら側の角の所こちら側からドラッグしてきます。 横幅いっぱいに持ってきます。そしたら1回幅だけで放してしまって「サイズ変更」をクリックします。そしたら「高さ」この部分に 475 と入れましょう。すると合わせてフッターも動きましたね。ここのチェーンを外しておくのを忘れないで下さい。ではこれ白だとわかりづらいので塗りをグレーにしましょう。そしたらこれをそのまま簡単に複製して他の所も作りましょう。Mac の方は OptionWindows の方は Alt キーを押しながらドラッグするとこんな感じでコピーしながらフッターもずれていきます。これで2個目ですね。そしてまたずらしていってこれで3個あと1個ですね。ドラッグして4個できました。もうちょっと小さくしましょう。そしたら、グレーが並ぶのもやっぱりわかりづらいので1個選択してそして塗りをこっちは白にしてしまいましょう。そしたら1個飛ばしてもう1個こちらも塗りを白にします。この様にすれば仮のコンテンツエリアこれを作ることができました。長方形を使うと、この様にコンテンツを区切るエリア簡単に作ることができます。Photoshop の方のレイヤーマスクで処理されているレイヤーの扱いと一緒に覚えておいて下さい。

Museで作るカラフルなスクロールページ

WebデザインソフトMuseを使うと、デザイン性にあふれたWebページを簡単に作ることができます。このコースではページ全体の設計、画面のスクロールに合わせた動きやエフェクトの追加、ページ内のナビゲーション作成やウィジェットの活用、そしてできあがったファイルをアップロードしてWebサイトを公開するまでのひと通りの手順を学んでいきます。

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

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

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

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