Creative Edge School Books - Web+Creative Brand
Adobe Photoshopは画像処理ソフトですが、ウェブデザインの仕事では、グラフィックや装飾パーツだけではなく、デザインカンプ作成などにも使われています。
2013年9月、バージョン14.1のアップデートでPhotoshopに「Adobe Generator」が実装されました。Generatorは、Node.js(サーバーサイドのJavaScript環境)ベースの技術で、Photoshopにさまざまな処理を実行させることが可能になりました。
このGeneratorのプラグイン(Node.jsアプリケーション)として提供されているのが「アセット抽出」です。
下記は、インタラクティブコミックを効率よく作成するために開発されたPhotoshop Generatorプラグインの例です。
すでにEdge Reflowとの連携、Dreamweaverとの連携が可能になっており、PSDファイルからHTMLを生成したり、画像やテキスト、スタイルなどを抽出することができます。
ここでは、Edge Reflowとの連携を取り上げ、具体的にどのようなことが可能なのか、解説していきます。
ウェブデザインでPhotoshopを
活用する方法も変わってきました。
まずは、どんな機能を持っているか、
見ていきましょう。
[達成目標]
ウェブページ作成にPhotoshopの機能がどう役立つのか理解し、人にメリット・デメリットを説明できること。
[達成目標]
どんな修正が発生しても、すぐに対応できる編集方法を実行できること。画像ファイルを抽出しやすいレイヤーを構築できること。
[達成目標]
実際にブラウザーで表示したような伸縮幅レイアウトで設計できること。Photoshopから動くプロトタイプを作成できること。
本書の「イントロダクション」の第4節「PSDファイルからHTMLとCSSを生成する技術を試してみよう」を掲載しています。
学生向けページ用にキャラクターを追加しています(書籍には登場しません)。
Photoshopには、Generator(ジェネレーター)と呼ばれる技術が組み込まれています。
この技術によって、他のアプリケーションソフトと連動させたり、今までなかった機能を作り出すことができます。
具体的に、どのようなことが可能なのか、試してみたいと思います。Generatorの技術によって、すでに連携可能になっているEdge Reflow CCを使って、確認していきましょう。
このレッスンでは、最新の「Edge Reflow CC」が必要になりますので、インストールしてください。無料プレビュー版をダウンロードすることができます。
ウェブブラウザーは「Google Chrome」を使いますので、インストールしていない場合は、準備しておいてください。
ここで使用するサンプルは、素材フォルダの中に入っていますので、開けるようにデスクトップなどに置いておきましょう。
Edge Reflowは、
Photoshopと連携可能になり、
取っ付きやすくなりました。
PhotoshopとEdge Reflowを連携させる場合は、両方を起動させておく必要がありますが、Edge Reflowだけ起動した場合、どうなるか確認しておきます。
次に、サンプルのPSDファイルを開いて、レイヤーの内容を確認します。
[01]
まず、最初の確認です。Edge Reflowを起動してください。
左端にあるPhotoshopのアイコン(Photoshop CC Connect)をクリックします。
ポップアップが表示されますが、[Get Started]ボタンがあるだけです。
[02]
[Get Started]ボタンをクリックしても、Adobeの解説ページを表示するだけです。
Edge Reflowは一度、終了してください。Fileメニューの[Exit]を選びます。
[03]
それでは、サンプルのPSDファイル「PSD_sample_01.psd」をダブルクリックして開きましょう。
簡単なウェブページのカンプデザインのサンプルです。
[04]
レイヤーを確認しておきます。レイヤーパネルのタブをドラッグして、ドキュメントの横に移動させます。
[05]
フォルダーのアイコンをクリックして、全てのレイヤーグループを展開してみましょう。
ウェブページの構造を考えながら、作られています。詳しくは、これから学習していきますので、確認するだけでかまいません。
再び、Edge Reflowを起動してサンプルのPSDファイルを読み込みます。Photoshopは起動したままです。
[06]
それでは再び、Edge Reflowを起動しましょう。
左端にあるPhotoshopのアイコン(Photoshop CC Connect)をクリックしてください。
上には、Photoshopで開いているPSDのファイル名、下には[Create New Page]と[Import Assets]の2つのボタンが表示されています。
[Create New Page]ボタンをクリックしてください。
[07]
PSDファイルを読み込みます。数秒で、変換されたウェブページが表示されます。
画像はレイヤー、
およびレイヤーグループごとに
指定した形式で抽出されます。
※複雑なレイアウトの場合は、抽出に時間がかかります。
PSDファイルがウェブページに変換されましたが、クリックするだけの簡単な調整をしておきます。
[08]
1つだけEdge Reflowで作業があります。
まず、ページ上部の「header」をクリックして選択しておきます。選択されると、フレームが表示されますので確認しましょう。もし、フレームが表示されない場合は、選択されていませんので、もう一回クリックしてください。
[09]
左側には、設定パネルが表示されていますが、下部の[Advanced]の[Center]アイコンをクリックしてください。
この設定で、常に中央揃えになります。
[10]
あとは同じ作業の繰り返しです。
「header」の下のテキスト、2つのキャラクター画、キャラクターの下のテキスト、そして、一番下の「footer」に対して、それぞれ[Center]アイコンをクリックしていきます。
[11]
完了しましたので、保存しましょう。
Fileメニューの[Save]を選んでください。
保存ファイル名は「sample_01」にしておきます。
調整を終えた後、ブラウザー(Google Chrome)でHTMLファイルを開きます。ウィンドウの幅を狭めたり、広げたりしながら、レイアウトがどう変化するのかチェックします。
[12]
Edge Reflowは、終了してください。
保存されたデータを確認しますので、「sample_01」フォルダをダブルクリックして開いてください。PSDファイルから、HTMLやCSSなどのウェブページのファイルに変換されていることがわかると思います。
[13]
「assets」フォルダの中の「psd_sample_01.html」をウェブブラウザーで開いて確認します。Google Chromeを起動して、「psd_sample_01.html」をドラッグしてください。
[14]
ウィンドウの幅を狭めたり、広げてみましょう。ページのレイアウトが保持されたまま、伸縮しています。
Edge Reflowの設定パネルで
中央の段組みを解除すれば、
レスポンシブウェブデザインの
ページになります。
中央に配置されているキャラクターの画像も可変ウィンドウにあわせて伸縮します。
[15]
いかがでしょう、Photoshopで作成したPSDファイルが、HTMLやCSSに変換されました。
HTMLファイルを開くと、レイヤー名が反映されているのがわかると思います。
変換されたウェブページは、実際にブラウザーで動作するプロトタイプとして、利用することができます。
これで、ウェブページ制作が簡単になるわけではありませんが、画像を切り出すような作業はなくなります。
これはあくまでもプロトタイプ。
実際のページは
Dreamweaverで作成します。
このPhotoshopの機能を最大限に
活用したPSDファイル作成を
学んでいきましょう。
公開用の正式なウェブページは、Dreamweaverで作成しなければいけませんが、アイデアの段階で、実際にブラウザーで動くプロトタイプを作成できると、作業を進めやすくなります。
この後のレッスンで、ウェブページをデザインするためのレイヤーの使い方などを学習していきます。
最新情報はトップページへ
Creative Edge School Books(クリエイティブエッジ・スクール・ブックス)は、オンライン学習と電子書籍、ワークショップを連動した、新しいデジタルパブリッシングを推進している一人出版社です。コンテンツの企画、制作からストアの運用まで、一人で作業しており、リリースしたコンテンツは6ヵ月で販売終了、2ヵ月の準備期間を経て、無料公開していく「オープンエデュケーション」の場づくりを実践しています。
昨年(2014年)は「6時間で学ぶ Adobe Muse CC 完全習得[基礎編]」や「4時間で学ぶ Adobe Edge Animate CC[基礎編]」、「3時間で学ぶ Adobe Muse CC[実践編]ランディングページ制作」、「3時間で学ぶ Kindleストアで販売する電子書籍の作り方」、「4時間で学ぶ 個人・小規模な出版社向け直販ストアの作り方[実践編]」などをリリースし、販売終了したものから一般公開しています。
スタートして、まだ一年弱ですが、パブリッシングシステムの基盤が完成するまで、一人出版社のまま継続し、企画力を磨いていきたいと思います。その後、著者や編集者とチーム体制で新たなプロジェクトに挑戦していきます。
Creative Edge School Booksの上位目標は、誰でも自由に学べる「オープンエデュケーション」です。マーケットを自前でつくっていくのは大変なことですが、ウェブの技術を活用しながら、少しずつカタチにしていきたいと思います。
2015年2月13日 境祐司
お問い合わせは[ebookcast@gmail.com]境まで。専用フォームもありますのでご利用ください。
情報発信は、Podcast「Weekly eBook Strategy(iTunes)」とニュースレター、Twitter[@commonstyle]がメイン、その他、ブログ「eBook Strategy Magazine」やYouTubeチャンネル、Facebook「電子書籍メディア論」などがあります。最新情報は、ニュースレターで配信しています。
Open Education Platform - Creative Edge School