Muse (2015) 基本講座

CCライブラリからの追加

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AdobeのCreative Cloudソフト間で画像やカラーなどの要素を共有できるCC Libraryを使い、PhotoshopやIllustratorからMuseへ手軽に素材を読み込む方法を解説します。
講師:
07:35

字幕

このレッスンでは CC ライブラリを利用したコンテンツの追加を行います。それでは今ここに開かれてる状態ですがこれ Muse ではなく Photoshop が開かれています。Photoshop の方にはこのレッスンの素材である team.psd psd Photoshop のファイルが開かれています。この team.psd ですがレイヤーが4枚あります。こんな感じで別々の人物写真が4枚のレイヤーに分かれています。例えばこの4枚のレイヤーの写真をMuse に効率よく持っていきたい、そんな時に便利に使えるのがCC ライブリという機能です。Photoshop の場合「ウィンドウ」の「ライブラリ」ですね。これ選んでると、この「ライブラリパネル」というのがでてきます。今、何も入っていない状態ですね。このライブり、CC ライブラリというのはAdobe の CreativeCloud のソフト間ですね。Photoshop も、Illustrator も、Muse もそうですが、その中で素材を共有できる、そういった機能になっています。1つのソフトでここに素材を登録するとそれがインターネット経由で同期されて同じ Adobe ID でログインしているソフトの中であれば自由に行き来が出来るという状態になっています。 ではまずこの Photoshop のレイヤーをライブラリに登録してみましょう。まずこのレイヤー1枚目ジェイさんという人の写真ですね。これをライブラリに入れてみます。レイヤーを選んでる状態で、この「グラフィックを追加」というボタンを押すとこんな感じで入ってきます。じゃあ同じ要領でこのティナさんですね。ここで見えていなくても、ここでレイヤーが選ばれていれば大丈夫です。これも登録します。同じ要領で4枚のレイヤーを全部持っていきます。これで4人分の写真が入りました。そしたら今度はすぐに Muse に行かずに次は Illustrator に切り替えます。Illustrator の方にはこんな素材ですね、このレッスンの素材であるvector_king.aiai というのは Illustratorのファイルですね。それが開かれています。これにはこんな感じでロゴの素材が入っています。Illustrator でも「ライブラリ」を見るとご覧の通りさっき Photoshop で登録した画像が全部入ってます。では、ここに対してこのロゴも選んでやって、同じく「グラフィックを追加」のボタン押すとロゴも入りました。この様に Photoshop のデータもIllustrator のデータも、どっちも入れることが出来ます。 そして更になんですが、例えばこのロゴを1回選択して右クリックしてグループ解除します。そうすると個別に選べますね。例えばこのロゴの中の文字の色これを Muse の中でもデザインに使いたいなんて場合には、色だけを Muse に持っていくということが出来ます。今この文字を選んでると塗りの色がこんな黄色になりますけど同じ黄色が、このライブラリのパネルにもここに入っています。「カラー(塗り)を追加」というのがあるのでこれをクリックすると、ここにカラーサンプルとして入ってきます。同じく別の色も選んでやると、同じ要領で追加することができます。それではいよいよMuse の方に移動します。Muse で、このレッスンのファイル開くとこんな状態になってるのでまずはマスターを開きましょう。そして Muse の方でもやはり「ライブラリ」ですね。これはパネルから「CC Libraries」というのをクリックしてもでてきますし「ウィンドウ」のメニューから出しても OK です。さっきまでの内容が全部入ってますね。そしたら、まずはマスターページのヘッダーにこのロゴを追加しましょう。右クリックして「リンクを配置」これを実行するとこんな感じでマウスのポインタにロゴが付いてきますね。 では配置したい場所に持っていってクリックするとこんな感じで入れることができました。あとは位置を微調整します。マスターのページにこういった要素が入ると他のページですね、例えばHome なんかにも同じくヘッダーの位置にロゴが入ってきます。では、写真も同じく配置してみましょう。では、下の方の、このエリアですね。写真も同じように「リンクを配置」としてやってこっちに持ってくるとこの様に配置することができます。ちょっと大きいので表示を1回 50% にしておきましょう。一回ちょっと横にずらしておいて同じ要領でそれぞれの他の人の写真もMuse の方に持ってきます。ここまで入ってしまえば、後は、 Muse の内部の作業で処理することが出来ます。まず1人の写真ちょっと大きいので縮小していきます。ハンドルをドラッグして縮小していきます。そしたら、この基準線の丁度、この3つ分ですね。そこの所に合わせて、そして位置も上下で動かしていくとこのあたりで置いてある画像の丁度真ん中になるのでここに合わせます。ではライブラリちょっと邪魔なので1回閉じておいて他の写真も同じようにリサイズしてやって同じ要領で、こういった所に配置していきます。 こちらもリサイズしてそれぞれの写真を持っていくと4人分並べることができました。こんな風に Web サイトを作る時にはPhotoshop で写真を加工したりとかまた Illustrator でロゴを作ったり等の作業がありますがこうして作ったものは、わざわざファイルに保存しなくてもこの CC ライブラリを介すとこの様に非常に手軽にMuse の方に持ってきて配置することができます。これは CC の大変便利な機能となるので是非とも活用して下さい。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

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

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

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

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