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

CCライブラリから追加

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhotoshopからCCライブラリにカラーを登録して、それを使ってMuse内のブロックにカラーや写真を適用します。
講師:
13:05

字幕

このレッスンでは CC ライブラリ内の素材をMuse の中に適用します。それでは、まずこのレッスンのファイルのホームを開いてCC Libraries 見てみましょう。そうすると、Photoshop からライブラリに入れた素材が Muse でも見れるのがわかります。では更に色々な項目をPhotoshop から持ってきましょう。Photoshop に移動します。そしたら Photoshop のレイヤーがいっぱいある中の一番下Layer 0 というものですね。これは Mac の方は Option キーWindows の方は Alt キーを押しながらクリックします。そうすると、全体の背景の色が見えます。ではこの色を拾ってライブラリに追加したいと思います。そういう操作を行う場合にはまずこの描画色これの設定に入ってスポイトで色を拾います。描画色、設定されるとここにも同じ色が出てきます、ライブライの下の所。この状態でこれをクリックするとライブラリに描画色を加えることができます。ではこのレイヤーをもう1回Option か Alt を押しながらクリックして元に戻します。この要領で他の色も拾ってきましょう。 まずはこの写真の背景のグレーこれをまずは拾ってライブラリに追加。そしたら、この青2色まず薄いブルーを拾ってライブラリに追加。そしてちょっと濃いブルーここも拾ってライブラリに追加。そしたらちょっと下に行きます。次、この部分なんですけどこれはスマートオブジェクトになってるのでダブルクリックして中身に入ります。こんな表示が出たらOK としておけば大丈夫です。そうすると、これがスマートオブジェクトの中身ですが上の写真を見えなくすると下にこんな感じでピンク色があるのでこれも拾ってライブラリに追加します。ではこれは閉じてしまって保存しないで結構です。そしたら、このハートの部分にこのグリーンも拾ってライブラリに追加します。そしたら、このパープルの部分これも拾ってライブラリに追加。あと1個です、このボタンの部分ですね。青のボタンもクリックしてそしてライブラリに追加と全部で8個こんな感じに色を拾えました。そしたら Muse の方に戻りましょう。すると Muse のライブラリにも色が全部入ってます。ではちょっと作業しやすいように1回このライブラリのパネルタブの部分をドラッグすると切り離せるのでこんな感じにして下さい。 そしたら、これを Muse のこのカラーのパレットに入れてみたいと思います。では1回何もない部分クリックして選択を全部解除した状態でカラーのなんだかの設定に入ります。そしたら、ここに「スウォッチを追加」というのがあります。スウォッチというのは、こんなパレットのことを指します。ではここで「スウォッチを追加」クリックしてさっき記録した色これを持ってきたいのですけど1つの方法は、この文字です。カラーコード入力しても OK です。もっと簡単な方法としては「カラーを選択」をクリックしてこの黄色ですね、これクリックすると拾えます。OK すると、ここに変わりましたね。この要領でまずはこのグレーも追加スウォッチを作ってスポイトで薄いブルーを追加また新規で作ってスポイトで濃いブルーを追加新規で作ってスポイトでピンク色を追加新規で作ってスポイトで緑を追加新規で作ってスポイトでパープルを追加最後にボタンのブルーを追加とこんな感じで作ってやります。そしたらどこかクリックしてパレットを閉じてライブラリをしまいたいので「ウィンドウ」>「パネルをリセット」これを実行して下さい。そしたら表示をもっと見渡せるようにしておきましょう。 では早速、この色を適用していこうと思います。まず Photoshop の方見てみるとこの部分、写真がこんな感じで載ってるんですけどこれが背景の黄色と合成された形になっています。これと同じ効果をMuse で作ってみましょう。まずはこのブロックを選択して塗りでさっきのこれです。色を選択します。そうすると、黄色になりました。では更にここに対してこの「塗り」という所クリックします。そして、「画像を追加」というのをクリックします。そしたら、このコースの素材Chapter 01 02 03 04 とありますけどChapter 01 の中に更に Assets というフォルダがあるのでそこへ nyc.jpg というこう白黒のニューヨークの写真があります。これを「開く」とやってやるとここが写真で塗られるんですが何かいま変な位置になってしまいましたね。これを「位置」というのを中央にするとビルが見えるようになりました。そしたら「サイズ調整」「元のサイズ」というのを「全体に拡大・縮小」これやるといいアングルになりましたね。そしたら、ここで「不透明度」をこの様に変えていくと45% ぐらいにすると丁度いい具合に写真と色が合成された状態になります。 では、1個目は完成となります。そしたら、今度はその下のブロックですね。ここを選んでやって塗りですね。ここは、このグレーにして下さい。そしたら、ここは写真を置く所なのでCC Libraries をまた開いてスピーカーの写真これを持ってきます。この様にドラッグ&ドロップしてやると配置場所を決められるようになるのでとりあえずは並べるだけでいいです。クリックすると写真を置くことができます。じゃあ次の人ちょっと拡げましょう。2人目の方も持ってきて、ここと。3人目の方も持ってきて、ここ。4人目の方も持ってきて、ここ。5人目の方も持ってきて、ここ。どんどん6人目の方も持ってきて、ここ。7人目も、ここ。そして最後の1人この様な形で置いてやると写真を持ってくることが出来ました。そしたら、また下に行きましょう。この下は Photoshop の方確認してみるとこの青背景でしたね。なので、ここを選んで塗りをこの薄い方の青の背景にします。もう1個下、ここはまたこの写真と色が合わさってるものなのでまず、塗りをピンク色にします。そしたら今度は塗りをクリックして「画像を追加」そして nyc_02 ですね。これを開きます。 またはみ出てるので「全体に拡大・縮小」これをして、中央にしてやるとこんな感じで配置されます。そしたら「不透明度」どんどん下げていってまた 45 にしてみましたがこれだとちょっと薄すぎるかなという感じがしてきました。なのでこんな方法をとってください。1回ここの画像の所ゴミ箱をクリックして写真を無くします。そしたら「不透明度」、戻します。まずはこのピンクを1枚、置いておきます。この状態で「編集」メニューから1回「コピー」します。そして「同じ位置にペースト」とやると見た目で分からないですけど全く同じ画像を1枚上にペーストしました。そしたら、この画像は塗りは「なし」にしておきます。そして、ここに対して「画像を追加」でnyc_02これを選びます。そして配置されましたね。これで「不透明度」を変えていくともっとはっきりと色が出るようになりました。場合によってこっちのパターンが良い時とこっちのように色がはっきりしてた方が良い時両方あるのでケースバイケースで使い分けて下さい。ではさっきの上の方もちょっと試してみましょう。こちらも1回塗りの部分で写真はなしにします。そして「不透明度」戻します。そしたら、こちら「編集」>「コピー」してそして「同じ位置にペースト」してやって塗りを「なし」にしてそして「画像を追加」ですね。 これで nyc.jpg を開いてそして「不透明度」45 にするともう少し色がはっきり出るようになりました。両方比べた上で今回はこちらで統一してみましょう。そしたら、あと1つ今度はマスターページに行きます。そしてまた CC Libraries を開けてロゴがありますね、これをヘッダーの部分に持ってきます。そして今ちょっと大きすぎるので「変形」をクリックしてこの「縦横比を固定」をオンにします。そして幅を375 にしましょう。そうすると、丁度いいぐらいの大きさになるのでこれでこんな感じで配置してあげてそして「変形」の所で「ブラウザーに固定」の左上としてやると、ロゴの位置を止めることができます。ではこんな感じでロゴも追加すると頭からこんな形で適用されました。この様に CC Liblaries の方使うと画像だけではなくこうしたカラーなんかも簡単に移すことができます。たたき台で作った Photoshop のファイルから簡単に要素を移せて効率的な作業が行えるので是非とも試してみて下さい。

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

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

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

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

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

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