【レポート】

コード記述不要の直感的な操作! Webサイトにアイコンをレイアウトする - Adobe Muse体験記(4)

1 「マスターページ」の作成/psdファイルをWebページにレイアウト

野出木彩  [2013/05/27]
  • <<
  • <

1/2

コードを書かずにWebサイトを作成できる画期的なWeb制作ソフト「Adobe Muse」。本レポートでは、このソフトを使い、自身のWebサイトのリニューアルを行うことを決意した著者(HTMLの知識ほぼゼロ)の体験をお伝えしていく。

■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)
【レポート】4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)
【レポート】Webサイトの構成がボタンひとつで完成! 自分のサイトの「プラン」を作る - Adobe Muse体験記(3)

マスターページをデザインしてみる!

前回は、「プラン」画面でWebページの骨組みを作成するところまで行った。次に取りかかるのは「マスターページ」のデザインである。

「マスターページ」とは、InDesignを使用したことがある人には馴染みのある機能ではないだろうか? 複数のページに共通するデザインを一括で指定できるという便利な機能である。

「Aマスター」、「Bマスター」というように、マスターページを2種類以上用意して使い分けることも可能

まずは、全ページに共通で表示するヘッダー部分のメニューアイコンを、マスターページに組み込むことにした。「プラン」画面下部に表示されている「A-マスター」のアイコンをダブルクリックし、マスターページのデザイン画面へと進む。

アイコン画像の「配置」

画像を配置するには、画面上部のメニューバーから「ファイル」→「配置」をクリックする。「配置」をクリックすると、ファイル選択画面が開かれる。この選択画面では、複数の画像を一度に選択することが可能だ。

画像ファイルを選択して「開く」をクリックしたら、後は配置したい箇所でカーソルをドラッグすると画像がポンポンと貼り付けられる。ここでは、あらかじめPhotoshopで作成しておいた、水彩画をスキャンしたアイコン画像を貼り付けていった。

Museでは、Photoshopで作成したpsdファイルもそのままレイアウトすることが可能だ。psdファイルは、PCモニターでの表示に適した72dpiの解像度の「jpg」または「png」ファイルへと自動で書き出され、Museのデータの一部として保存され、ブラウザ上でスムーズに表示されるように、ファイル容量も圧縮される。

また、この時オリジナルのデータが圧縮されるわけではなく、Museファイル用に保存されているデータのみが変更されているので安心だ。オリジナルの画像を編集したい時には、画像を右クリックすればPhotoshopでの編集画面へと移行でき、変更点はすぐにMuse上にも反映される。

  • <<
  • <

1/2

インデックス

目次
(1) 「マスターページ」の作成/psdファイルをWebページにレイアウト
(2) アイコンの配置を完了/マスターページの便利さとは?

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

林家三平『笑点』新メンバーに抜てき! 初座布団に大喜び「やったー!」
[22:21 5/29] エンタメ
石原慎太郎が『行列』初出演、舛添都知事について発言
[22:00 5/29] エンタメ
石原慎太郎が『行列』初出演 - 高畑充希とマジック体験・舛添都知事に発言も
[22:00 5/29] エンタメ
あずまきよひこ、読者へ「すみません」手塚治虫文化賞の記念イベント&贈呈式
[21:45 5/29] ホビー
[新井浩文]夏帆との熱愛報道を自らネタに 「そば屋で浅野さんと間違えられた」
[21:43 5/29] エンタメ

特別企画 PR

求人情報