Photoshop実践編[学生向けページ]

デザイナーのためのデザイニング・イン・ザ・ブラウザ

CSSフレームワークとDreamweaver Extract/Photoshop「アセット抽出」による最新ワークフローの習得

Creative Edge School Books - Web+Creative Brand

Information

デザイナーのためのデザイニング・イン・ザ・ブラウザ Photoshop 実践編

進化し続ける「Photoshop」の現在

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実践編については、学生でも学べるようにカリキュラムがつくられています。



Contents

イントロダクション

  1. Photoshopってどんなソフト?
  2. Photoshopの基本機能を理解しておこう
  3. ウェブページ作成のどこにPhotoshopを使うの?
  4. フラット?マテリアル?モダン?デザインの話
  5. PSDファイルからHTMLとCSSを生成する技術を試してみよう
  6. これから学ぶことを確認しよう

[達成目標]
ウェブページ作成にPhotoshopの機能がどう役立つのか理解し、人にメリット・デメリットを説明できること。

非破壊編集とアセット抽出の基礎を学ぶ

  1. ワークスペースを登録しよう
  2. レイヤーパネルの使い方をマスターしよう
  3. 非破壊編集って何ですか?
  4. リンク配置で非破壊編集を試してみよう
  5. アセット抽出で何ができる?
  6. PSDからさまざまな画像ファイルを抽出しよう
  7. レイヤーカンプがなぜ便利なのか理解しよう
  8. シェイプでウェブページのフレームを描く

[達成目標]
どんな修正が発生しても、すぐに対応できる編集方法を実行できること。画像ファイルを抽出しやすいレイヤーを構築できること。

Photoshopでマルチデバイスを意識したデザイン

  1. 固定幅レイアウトと伸縮幅レイアウトの違い
  2. Photoshopで伸縮幅レイアウトは可能?
  3. 実用的なPSDをつくるためにHTMLの構造を理解しよう
  4. レイヤーでHTMLの構造をつくっていこう
  5. テキストの単位は「em」を意識する
  6. ランディングページのプロトタイプを作成しよう

[達成目標]
実際にブラウザーで表示したような伸縮幅レイアウトで設計できること。Photoshopから動くプロトタイプを作成できること。

Article

本書の「イントロダクション」の第4節「PSDファイルからHTMLとCSSを生成する技術を試してみよう」を掲載しています。
学生向けページ用にキャラクターを追加しています(書籍には登場しません)。

PSDファイルからHTMLとCSSを生成する技術を試してみよう

Photoshopには、Generator(ジェネレーター)と呼ばれる技術が組み込まれています。

この技術によって、他のアプリケーションソフトと連動させたり、今までなかった機能を作り出すことができます。

具体的に、どのようなことが可能なのか、試してみたいと思います。Generatorの技術によって、すでに連携可能になっているEdge Reflow CCを使って、確認していきましょう。

このレッスンを始める前に準備をしておこう

このレッスンでは、最新の「Edge Reflow CC」が必要になりますので、インストールしてください。無料プレビュー版をダウンロードすることができます。

ウェブブラウザーは「Google Chrome」を使いますので、インストールしていない場合は、準備しておいてください。

ここで使用するサンプルは、素材フォルダの中に入っていますので、開けるようにデスクトップなどに置いておきましょう。

Edge Reflowは、
Photoshopと連携可能になり、
取っ付きやすくなりました。

STEP-1 Edge Reflowを起動して確認します

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]
フォルダーのアイコンをクリックして、全てのレイヤーグループを展開してみましょう。
ウェブページの構造を考えながら、作られています。詳しくは、これから学習していきますので、確認するだけでかまいません。

STEP-2 Edge ReflowでPSDファイルを読み込みます

再び、Edge Reflowを起動してサンプルのPSDファイルを読み込みます。Photoshopは起動したままです。


[06]
それでは再び、Edge Reflowを起動しましょう。
左端にあるPhotoshopのアイコン(Photoshop CC Connect)をクリックしてください。

上には、Photoshopで開いているPSDのファイル名、下には[Create New Page]と[Import Assets]の2つのボタンが表示されています。

[Create New Page]ボタンをクリックしてください。

[07]
PSDファイルを読み込みます。数秒で、変換されたウェブページが表示されます。

画像はレイヤー、
およびレイヤーグループごとに
指定した形式で抽出されます。

※複雑なレイアウトの場合は、抽出に時間がかかります。

STEP-3 Edge Reflowで簡単な調整をします

PSDファイルがウェブページに変換されましたが、クリックするだけの簡単な調整をしておきます。


[08]
1つだけEdge Reflowで作業があります。
まず、ページ上部の「header」をクリックして選択しておきます。選択されると、フレームが表示されますので確認しましょう。もし、フレームが表示されない場合は、選択されていませんので、もう一回クリックしてください。

[09]
左側には、設定パネルが表示されていますが、下部の[Advanced]の[Center]アイコンをクリックしてください。

この設定で、常に中央揃えになります。

[10]
あとは同じ作業の繰り返しです。
「header」の下のテキスト、2つのキャラクター画、キャラクターの下のテキスト、そして、一番下の「footer」に対して、それぞれ[Center]アイコンをクリックしていきます。

[11]
完了しましたので、保存しましょう。
Fileメニューの[Save]を選んでください。

保存ファイル名は「sample_01」にしておきます。

STEP-4 変換されたウェブページをブラウザーで開きます

調整を終えた後、ブラウザー(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で作成しなければいけませんが、アイデアの段階で、実際にブラウザーで動くプロトタイプを作成できると、作業を進めやすくなります。

この後のレッスンで、ウェブページをデザインするためのレイヤーの使い方などを学習していきます。

POINT

  1. Photoshopには、Generator(ジェネレーター)と呼ばれる技術が組み込まれている。
  2. この技術によって、他のアプリケーションソフトと連動させたり、今までなかった機能を作り出すことができる。
  3. Edge Reflow CCは、この技術で連携可能になっている。
  4. PSDファイルからウェブページに変換する場合は、PhotoshopとEdge Reflowを両方起動したまま、[Create New Page]ボタンをクリックする。
  5. 設定パネル下部の[Advanced]の[Center]アイコンをクリックして、位置の調整をしておく。
  6. 保存をすると、変換されたHTMLやCSSのファイルが書き出される。
  7. HTMLファイルをブラウザーで開いて確認する。
  8. ウェブページ制作が簡単になるわけではないが、アイデアの段階で、実際にブラウザーで動くプロトタイプを作成でき、作業を進めやすくなる。

レイヤーの使い方がとても重要です。

最新情報はトップページ

マルチデバイス時代の活用方法を学ぶ「Photoshop実践編」

トップページに戻る »

Creative Edge School Books

クリエイティブエッジ・スクール・ブックスについて

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]境まで。専用フォームもありますのでご利用ください。
情報発信は、PodcastWeekly eBook Strategy(iTunes)」ニュースレター、Twitter@commonstyleがメイン、その他、ブログ「eBook Strategy Magazine」やYouTubeチャンネル、Facebook「電子書籍メディア論」などがあります。最新情報は、ニュースレターで配信しています。

Creative Edge School

Open Education Platform - Creative Edge School