MEMOPATCH

Photoshop CC新機能 “リンクされたスマートオブジェクト” で震えた。これはUIデザインが捗る!

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

はじめまして。最近SNSでTシャツを晒される機会が増えたなと感じるUIデザイナーのみっつーです。よろしくお願いします!

先日Photoshop
CCのアップデートがあり色々機能が追加されましたが、その中でも気になる新機能がありましたので、そのことに関してMEMOPATCHで初めて記事を書きたいと思います!

早速ですが、最近Sketchでデザインすることが増えてきました。
というのも、徐々にpluginが増えてきて Sketch Symbol Plugin
等を使用しpage間でオブジェクトの変更、差し替えが簡単になり、作業がかなり捗るようになってきたからです。(みんなもSketch使ってみたらいいと思う。)
「もうこれからはPhotoshopを使うこと少なくなるのかもな、さよならかな…」と思った矢先に、今回Photoshopのアップデートの一報がきたわけです。今回のアップデートで追加された機能の中で”リンクされたスマートオブジェクト”この機能を見た時、震えました。

スマートオブジェクトを外部リンクに持てるこの機能。試しに使ってみましたが、

「グレートな機能ですよこいつはァ」

とジョジョ4部の仗助の様に思わずつぶやきました。心の中で。

Webデザイナーならこの気持がわかるはず。確実にPhotoshopでのデザインが捗ることでしょう。今までIllustratorで使用していた”配置”をPhotoshopに積んだイメージです。これを待っていたと言わざるを得ないですね。今更感もありますが、この機能が加わったことでかなり強力なアプリケーションになったと感じます。

この機能は2014/1/16にPhotoshop
CC14.2で追加された機能になります。他の機能に関してはアップデートされた機能ここを見ればよいでしょう。スマートオブジェクトの新機能が追加されたことが、今回のアップデートで一番歓喜するポイントですね。

リンクされたスマートオブジェクトについて

さて、前回のバージョンまでは外部ファイル等をスマートオブジェクト化すると、ファイル上に埋め込む必要があり、ファイル容量が重くなることが懸念点でした。デザインを進めていく段階で外部ファイル等スマートオブジェクトで配置したりすると、どんどんファイル容量が重くなり挙動が重くなり、最終的にアプリケーションが落ちることもしばしば。アプリケーションが落ちた時、何度保存していないことを悔んで唇を噛み締めたことか。

しかしリンクされたスマートオブジェクトを使用することで、外部にあるpsbファイル、psdファイルを参照することができます。つまり1ファイルの容量を軽減することができるので、デザインを進めていく過程でファイルを分散できるのです。単体ファイルが重くなることが少なくなるのではないでしょうか。なんだか震えてきました。
さらにスマートオブジェクトを編集した際、リアルタイムでリンクされた側のファイルも更新、反映されるので
直感的にファイルの横断ができるようになった気がします。もう考えただけで震えが止まりませんね。

設定方法について

filelist

リンクされたスマートオブジェクトのファイルへの配置方法がかわかりづらかったため、画像と共に配置方法を記載します。
Photoshopの[ファイル]→[リンクを配置]でリンクとなる対象ファイルを配置します。この時psbファイル、psdファイル共にリンクファイルとして設定できました。

zokusei

配置されたオブジェクトの属性が[リンクされたスマートオブジェクト]と表示されていれば、ファイルがリンクされたということになります。

files

この画像ではheader.psdをindex.psd、about.psdにリンクしています。この状態でheader.psdに変更を加えると、index、aboutのheaderがリアルタイムに変更更新されます。

実際に使用したpsdは下記にてダウンロードできるようになっていますので、リンクされたスマートオブジェクトの設定、挙動を確認してみてください!

Download

製作現場での利用価値

リンクされたスマートオブジェクトを編集することで、紐付けされたファイルすべてに反映できるので、パーツ等をテンプレート化できるページ数の多い中規模〜大規模のCMSサイトなどに有効なのではと考えています。また、スタイルガイドに沿ったボタン等パーツだけのpsdをリンクさせてすべての関連ページに反映させるというのもできますね。
ファイル構成もコンテンツ部分のpsd、共通部分のpsdをリンクさせておけば、ファイルを分けてデザインデータを管理することが可能になります。
そしてWeb制作で利用する際に、設計段階でどこまでが共通部分なのか等サイト構造をよく検討することで、管理のしやすいより強力な機能になると思います。
以上、今回のPhotoshop
CCのアップデートで一番気になった機能“リンクされたスマートオブジェクト”になります!

はじめてブログを書かせてもらったのと相まって、後半になるにつれて段々とまじめな口調になってしまったので、次回書く際は終始テンションを上げて書き上げたいと思います!

最後になりましたが、最近Tシャツの持ちネタが無くなってきたのが悩みです。(こんなこと書いていいのかな。)
もし、イカしたTシャツを見つけた方はご一報ください。それでは!

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

RECRUIT

Goodpatchで一緒に働きませんか?

弊社ではエンジニア、ディレクター、デザイナーを随時募集しています。インターネットが大好きで、UIデザインを愛し、新しいことにチャレンジしたい、という方なら大歓迎!皆様からのご応募をお待ちしております!

Goodpatchに今すぐエントリー


RELATED ENTRY

Twitter and RSS

ブログの更新情報はTwitterやRSSで流します。UIに関する記事を投稿します。