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

オブジェクトをトレース

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
見出しと画像を配置するためのブロックをMuseの長方形ツールで作成し、見出し用のテキストブロックと画像も配置します。
講師:
00:06:37

字幕

このレッスンではコンテンツのエリアを作成します。それでは、この写真ですとかテキストなんかが配置されているコンテンツのエリアを実際に作っていこうと思います。その前なんですが、この背景に貼ってあるプロトタイプの画像のこの横の所、これはページの背景の部分になります。ただ実際のページの背景は今白のままなんですね。食い違っているのでまずこのプロトタイプで作った背景と実際の背景を同じにしたいと思います。それではレイヤーのパネルを開けてそして「レイヤー1」の中ですね。この中にある、このプロトタイプの画像これのロックを外します。そして不透明度を 100% にして実際の色にします。そしたらこの何もない所を1回クリックしてこの「ブラウザー背景」ですね、これが出るようにしておきます。そしたらここの色を開けてやってスポイトをクリックします。「色を確認」、これを使ってこのグレーの部分をクリックするとこの様に背景がこの元々プロトタイプで示していた濃いグレーと同じに設定されます。これで実際の背景もプロトタイプと同じになったのでまたこのプロトタイプはちょっと薄く設定してそしてロックして置いておきましょう。そしたらこの実際のコンテンツのエリアこれのブロックを作っていきましょう。 ちょっと画面を拡大しておきます。そしたら色は違うんですが全部同じ長方形でできているのでこれを作っていきます。では長方形のツールですね、これを使ってそしてプロトタイプと同じ大きさの長方形を作ってやります。今まだ塗りは設定してないですがここの「塗り」はスウォッチに登録してあるこの紫ですね。そうすると、これで一個ブロックができました。そしたらこれをこちらの隣の方に持ってきましょう。では Mac の方は Option キーWindows の方は Alt キーを押しながらこのこっちのブロックですね、これドラッグします。すると、この様に複製できます。そして、まず縦位置ですね。ぴったり合うと、この様にこの部分に線が入ります。そして横位置もぴったり合わせてやればこの様に一応仮の色でブロックを置くことができました。そしたら同じく隣にもOption または Alt を押しながらドラッグして、横位置を合わせてこの様に配置しておきます。そしたら今度は下ですね。こちらも Option または Alt を押しながらドラッグして今度は、この横位置この縦棒が入りますね。横位置がピッタリ合ってるという所に持ってきてまた下と合わせておきます。 これで実際の位置と同じ所にこのブロックの素材を並べることができました。そしたらそれぞれの塗りをプロトタイプと同じようにここは黄色でしたね。そしてここは青でした。次にこちらはまた黄色ですね。この様に並べました。では次にここに写真を配置していきます。では写真をどこに配置するかこのままだと見えないのでこれらの長方形Shift キーを押しながらクリックしていくと全部まとめて選べます。ここの不透明度ちょっと下げておきましょう。下の画像が見えるぐらい50% にしておけば丁度良く見えます。これを頼りにしてレイアウトを行いましょう。では「ファイル」メニュー>「配置」を実行します。そして使用する画像まずこの男性の写真ですね。そしてこのイベントの画像ですけどMac の方は Command キーWindows の方は Ctrl キーを押しながらクリックすると一緒に選べます。そしてこのイラスト最後にこの写真ですね。これを全部まとめて「開く」とやるとこの様に纏めてポインタにくっついてくる状態となります。ではこっちのまず男性の所実際の位置の近くでクリックすると置かれます。次にイベント、ここですね。次にこのイラスト最後に写真これで大体近い位置に置くことが出来ました。 またこれ拡大してある程度見やすい大きさにしてこれらの写真の位置を決めていきます。では近くまで持っていたらあとはカーソルキーで微調整して同じところに置いていきます。次はこのイベントの写真ですね。そして最後に人物の写真も置きました。これでレイアウトが実際の位置と同じような所に置くことが出来ました。そしたら最終的にここにテキストで見出しを入れることになるのでテキストのボックスも作りましょう。まず、この文字ツールを選んだらこのエリアに合わせてドラッグしてボックスを作って、では仮で text とだけ入れたものを作っておきましょう。そしてこれをまた Option またはAlt を押しながらドラッグしてそれぞれの場所に置いておきます。あと細かい所はまた後から合わせるといったことになります。そしてこっちの本文の部分もこれもドラッグしてやってそして、このテキストボックスのサイズを最終的な所に近い大きさに持っていっておきます。これで、ここのブロックとそしてその中に入る画像の配置が行えました。

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

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

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

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

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

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