Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Creative Cloud 2015で変わる、Web制作のワークフロー~PhotoshopとDreamweaverの新機能を有効活用する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/01/25 14:00

 PhotoshopやDreamweaverはCS6で十分と思っていませんか? あるいはAdobe Creative Cloud(以下、CC)を契約しているのにも関わらず、アップデートを放置していませんか? 多少新機能が追加されたとしても制作には大きな影響はないだろう、そう思っている人も多いことでしょう。

目次

 しかし、例えばPhotoshop CCでみても、CC 2014 → CC2014.1 → CC2014.2 → CC2015 → CC2015.1とすでに5回もアップデートが行われていて、毎回のように新機能の追加や改良が行われています。従来は大変だった作業があるバージョンを境に楽になったり自動化されたり、素材の扱い方が大きく変わったりしています。

 今回はCC 2015(6月リリース)、およびCC2015.1(12月リリース)で追加された新機能を中心に、Web制作のワークフローがどのように変わっていく可能性があるかご紹介します。

 機能を試す際には、PhotoshopおよびDreamweaverが最新バージョンであることを確かめてください。

Photoshop CC 2015

アートボードでPSDを1つに

 レスポンシブWebデザインでは、デザイナーはPhotoshopを使ってスマートフォン、タブレット、PC向けなど、3種類以上のレイアウトデザインを行うことが多いと思います。それぞれPSDに分けてデザインするのは大変ですし、かといって1つのPSDの中にレイヤーグループをたくさん作るのも非効率です。

 そんな状況を一気に変える機能が「アートボード」です。

 Illustratorには昔からある機能ですが、ついにPhotoshopにも搭載されました。アートボードを使えば、これまでデバイス別に作っていたデザインを1つのPSDで管理できます。アートボードの複製はとても簡単に行えるので、バリエーション違いのデザインを作る際にも便利ですし、デバイス間でデザインの整合性がとれているかどうかも一目で確認できます。CC 2015.1(12月)のアップデートでは、アートボードの使い勝手がよくなり、より実用的になりました。

今のデザインをアートボードに変換する

 すでにあるデザインをアートボードに変換することもできます。レイヤーグループを選択して右クリックし「グループからのアートボード」を選択します。選択したレイヤーの大きさをもとにアートボードが作れます。

アートボードの操作

 アートボードは、「アートボードツール」で作成や調整を行います。

 アートボードのサイズは、さまざまなデバイス向けのデザイン作業を意識してプリセットが用意されています。属性パネルでは数値指定してアートボードを配置することも可能です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 石川 修一(イシカワ シュウイチ)

    株式会社ニューロマジック 執行役員 早稲田大学大学院 基幹理工学研究科 招聘研究員 慶應義塾大学大学院メディアデザイン研究科附属メディアデザイン研究所 リサーチャー デザイン、フロントエンドからクラウドまで、新しいことに興味がありすぎて時間が足りない、Web制作会社の制作部門統括。Adobeイ...

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5