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

スウォッチの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページ内のブロックなどで使用するカラーを、プロトタイプの画像から抽出して、スウォッチとしてまとめます。
講師:
00:05:13

字幕

このレッスンではスウォッチの作成について解説します。このプロトタイプとして作成しているデザインの中では例えばこの画像の周辺であるとか何か所かべた塗りの色で作ってあるブロックがあります。これらを画像として外部から読み込むのではなくMuse の中で新たに作り出してこちらに配置することになります。そのためにはこれらのプロトタイプと全く同じ色を Muse 上でも作らなければならないのですがその時、元のこのプロトタイプから抽出して、そしてスウォッチという所に登録しておくと便利です。では実際にやってみましょう。今マスターのページを開いています。では今レイアウトしやすいようにちょっと全体を薄くしてるのでこれを1回解除しておきましょう。レイヤーパネルを開けてそしてこの背景画像このロックを外します。そして、ロック外したものを不透明度 100% にしてあげればこの様に本来の色で表示されます。では色ですが、この紫そして黄色、そして青ですね。この辺りがキーカラーとなります。そして一番下の、これの所ですね。ちょっと薄い黄色もありますね。ではこれらの要点となる色拾っていきましょう。ではまず、この長方形ツール等を選んでおきます。 ただこれで、この状態でいきなり長方形作るのではなくてこの「塗り」の所、開けてやります。そうすると、こちら側の部分ここに、この色見本のようなものが並んでいます。ここがスウォッチという部分で自分の気に入った色を登録して並べておけるパレットのような所です。ではこのなんらかの色の設定を開けている状態でこのスポイト、「色を確認」というものですね。これをクリックします。そしてこれらのべた塗りの部分見て頂くと、ポインタを移動させるとその部分の真下にある色を拾ってるのがわかりますね。では登録したい部分まずこの紫色ですね。これクリックします。そうすると、今現在使われる色としてこの紫色が登録されました。そしたらこの状態で、これですね「スウォッチを追加」、これをクリックするとそのまま現在の色をスウォッチとして登録できるようになります。では OK しましょう。これで1個目登録されました。登録する時なんですが、こちらで拾ってからスウォッチに入れてもいいですしここでスウォッチを追加してる時に実はここでスポイトを選べるのでこの状態で、例えばこの青の部分とか追加した色をクリックしてそして OK しても同じことができます。 この要領で何回か繰り返してデザイン上のポイントとなる色それらをスウォッチの上に登録していきます。そして、下の方のクリーム色の所も拾ってやって、これで一通り入りました。ここなんですが、このスウォッチ上を右クリックすると「すべての未使用のスウォッチを削除」とありますけどこれを実行するとこのページのデザインの中で使われてない色がなくなるので、パレットの中をすっきりさせることもできます。そしてその他に「スウォッチライブラリを読み込む、書き出す」とありますが。「書き出す」とすると新たにスウォッチ自体を設定ファイルとして書き出すことができるのでそれで保存しておいて、また別の作業の時に読み込んで使うということも可能です。この様にプロトタイプを作ってあればそちらから色を拾うということもできるのでMuse 上で新たにブロックを作る時にも便利に使えます。是非とも覚えておいて下さい。

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

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

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

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

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

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