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

Photoshopの活用

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webサイトの原型となるデザインをPhotoshop上で作成した上で、ロゴや写真といったパーツをCCライブラリに登録します。
講師:
06:48

字幕

このレッスンでは Photoshop を使った基本デザインの作成と材料の切り出しについて解説します。今表示されているのはMuse ではなくてPhotoshop の画面です。なぜ Muse の講座なのにPhotoshop が出ているかですがウェブサイトの基本デザインを作るのに使っています。Muse は大きな特徴としてHTML の通常の枠に縛られない、自由なレイアウトでできるという良さがあります。一方で自由なレイアウトが可能という点を生かしたデザインを作るのにいきなり Muse を使うのはどうかというとMuse はあくまでもウェブサイトを作ることに特化しているのでレイアウトを色々試したりその都度加工したり、といったことをスピーディーに行うにはPhotoshop であるとかまたは Illustrator であるとか人によっては インデザインであるとかそういったデザイン系のツールのほうがすぐれているという場合も少なくありません。いきなり Muse に入ってしまうとMuse 自体の機能の制限もあるのでデザインを作るのに時間が掛かったりしますが、まず Photoshop などで下地となるデザインを作ってそこからパーツを切り出してMuse にもっていくそしてこれと同じものをMuse の上に再現するというやり方でやれば両者の良いところ取りでかなり効率的な作業を行えます。 このコースをご覧になっている方の中にもMuse はあまりやっていないけどPhotoshop ならある程度使えるとかIllustrator やインデザインが使えるとか。そういう方は少なくないかと思います。なので、ゼロからウェブサイトをプランニングするときいきなり Muse から始める必要はなくて自分の慣れているツール、一番やりやすいのは Photoshop ですがそれを使って、こういった原型を作成する、それを是非ともお勧めします。今回のコースで作るウェブサイトですが、今表示されているこんなデザインになります。上のほうからヘッダー部分があってウェルカムのメッセージがあって、これは講演会のウェブサイトなのでスピーカーの紹介があってこの SESSIONS というところは後で拡張されてACCORDION PANEL という伸縮するインターフェイスなのですが、一応 Photoshop 上で直に作ることができない、インターフェイスもここに設置する予定ということで仮の枠をはめておきます。そして場所の案内や予約、こうした項目を作っておきます。デザインとしてかなり完成された形です。そしてレイヤーのほうを見ると、Photoshop の特徴を生かして全部グループにしてあり、きれいに素材の整理もされています。 では、これを順次ウェブサイトの方にもっていくのですが、例えば、材料を移す時にレイアウトしたものから、写真の一枚一枚を新たに JPEG として書き出すとかそういった手段も行えなくはないですが、ちょっと面倒です。折角 Photoshop 上でこれだけのことができているのでその特徴を最大に生かしてそれに加えて、クリエイティブクラウドの機能を最大限に生かした手法をやってみたいと思います。それでは一回ヘッダーのグループを開けてその中に creative_conf_logo というのがあります。このレイヤーです。ロゴの画像です。これを Muse に持っていきたいという時、しかもファイルの書き出しを行わずに、そういった場合にはこれを使ってください。ライブラリのパネルです。このライブラリはクリエイティブクラウドのサービスにログインしている状態なら自分の同じ ID の他のソフトと連携して使えるライブラリになります。今マイライブラリというライブラリが選ばれています。これは複数作れるので新規で作っても構いません。特定のライブラリに対して対象となるロゴのレイヤーを選んおいてこのボタンを押します。グラフィックを追加です。これを押すと、こんな形で、文字が黒なので見づらくなっていますが、青と緑のマークはしっかりわかりますね。 こんな形で、このレイヤーの画像をライブラリに登録することができました。これを後ほど Muse の方で見ると同じものが同期されています。ではさらにこの SPEAKERS ですが、ここに出演者の写真があります。これをそれぞれ Muse の方に持っていきましょう。注目していただきたいのがこのレイヤーに、元ファイルのファイル名だったのでしょうが、出演者の名前がついています。改めてつけなくても既にレイヤーの方でつけてある状態です。これも活用できます。ではまず一人目、グラフィックを追加どんどんいきましょう。二人目、三人目、四人目、五人目、六人目、七人目、最後の方も追加です。これで八名分の顔写真と、講演会のロゴもライブラリに追加されました。この状態を利用して、Muse の方で実際のウェブサイト制作を行っていきます。まず一番基本となるデザインの部分、こういった部分に Photoshop など他のデザイン自体を作ることに特化しているソフトを使う、非常に効率化しやすい手法ですのでぜひとも試してみてください。

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

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

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

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

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

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