PSD からレスポンシブデザインを生成!Edge Reflow プレビュー 5 公開

Edge Reflow のプレビュー版がアップデートされました。同じく本日アップデートされた Photoshop CC と連携して、Photshop のデザインカンプを直接 Reflow のデザインアセットとに変換できます。

従来から提供されている CSS 属性を生成する機能とは完全に次元が異なり、デザインカンプから "自動的に HTML が生成され" て、しかも配置情報の一部は "相対値に変換" されていたりします。Web デザイナーにとっては全く新しい体験だと思いますので、是非お試しください。

インストールの際は、まず Photshop CC を更新して、その後 Reflow の更新を行います。これは、Reflow のインストール時に Photshop のプラグインがインストールされるためです。後からプラグインをインストールする場合は、以下から別途ダウンロードできます。

Reflow の前のバージョンをを既にインストールしてある環境でも、Creative Cloud アプリは、更新ではなく新規インストールとして扱います。これは既知のバグだそうです。

また、Reflow はまだプレビュー版ですので、この機能は Phothop としてはまだお試し用という位置づけです。正式なサポートはありませんが、製品化前の機能をいち早く試せるのは、Creative Cloud ならではという感じがします。

Photoshop と Reflow の連携方法

Ps - Rf 間の連携には 2 種類の方法があります。 1 つ目は、Photoshop の 「ファイル」 メニューから 「生成」 → 「Edge Reflow プロジェクト」 と選択する方法です。この場合は、PSD ファイルと同じ名前のフォルダがつくられ、その中に Edge プロジェクト (rflw ファイルと assets フォルダ) が生成されます。

もう一つは、Reflow に追加された Photoshop CC パネルを使う方法です。このパネルには、以下のボタンが用意されています。

  • Photoshop で編集中の PSD から新規 HTML ページを作成する "Creat New Page" ボタン
  • Photoshop で編集中の PSD からライブラリにアセットとして読み込む "Library" ボタン

前者はページのデザインカンプを読み込む場合、後者は、ページ内で使用するアセットのデザインを読み込む場合を想定したものと考えられます。どちらの場合も、一旦ファイルに保存する操作が不要なため、より連携感が味わえます。

他にも Photoshop CC パネルには "Photoshop sync" というトグルスイッチもあります。これをオンにしておくと、Photoshop 側で PSD が 変更されたとき、自動的に Reflow のライブラリ内のアセットが更新されます。更新があると、ライブラリパネルのアイコンに 「!」 マークが表示されます。

なお、この連携操作の際、生成の対象となるのは、名前に .png や .jpg や .gif などの拡張子がついたレイヤーやレイヤーグループだけです。そのため、既存の PSD を開いただけでは残念ながら何も生成されない場合がほとんどでしょう。

お試し用に、サンプルの PSD ファイル が提供されています。とりあえずは、こちらを使ってみると分かりやすいかもしれません。

下は、英語ですが、使い方を紹介しているビデオです。

現時点での制限事項

さて、いまさらですが、「PSD からレスポンシブデザインが生成できる!」 といっても、PSD のデザイン情報全てをそのまま CSS 化できるわけもありませんし、一方で PSD にはレスポンシブ化に必要な情報が欠けています。

と、考えると、今回追加された機能は、より正確には 「レスポンシブデザインの開始を楽にする機能」 と言うべきもので、足りないもの、具体的には、ブラウザ内で使用するフォントの指定や、表示幅が変わったときのレイアウトの単位となるグループ化、などは後から補うことになります。

その他にも、まだ実装途中なのでという理由によるものも含め、いくつかの制限が存在します。ここでは、現在判明している主な仕様を紹介します。

  • 背景レイヤーは読み込み時に無視される
  • 矩形のレイヤーは CSS のグラデーション、影、ボーダーが適用された Div に変換される
  • 楕円形、多角形、ラインツールは現在サポートされていない
  • 線形グラデーションのレイヤーはグラデーション付きの Div になるが、他のグラデーションは無視される
  • グラデーションの中心点は無視される
  • 以下のレイヤー効果がサポートされる
    • ドロップシャドウ
    • シャドウ
    • ストローク
  • 複数の段落を持つ文字領域では最初の段落のスタイルが適用される。段落ごとに異なるスタイルの指定は現在はサポートされない
  • テキストにドロップシャドウは適用可能だが、シャドウは不可
  • 複数のシェイプが同じシェイプレイヤーに含まれている場合、複合シェイプとして読み込まれない
  • シェイプレイヤーに適用された変形やクリップは無視される
  • Photoshop 内で PSD が変更されると、Reflow の Photoshop 同期機能がオフになる

ところで、Ps - Rf 連携機能は、Photoshop の最新版に新しく搭載された Web 用画像アセット生成機能 (こちらは正規の新機能) をベースにしたものです。Photoshop 側からの使い方は基本的に同じになりますので、別記事を別記事でご紹介する予定です。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/465

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261