SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(PR)

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

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

 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月)のアップデートでは、アートボードの使い勝手がよくなり、より実用的になりました。

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

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

アートボードの操作

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

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

次のページ
アートボードの書き出し

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8921 2016/01/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング