Adobeliveに行ってきました！ webとgraphicで役立ちそうな事をレポート 勉強会/展示 2015/11/13 Tweet Pocket Adobe Live -Best of MAX-に行ってきました。（実は記事が消えちゃって二回目…） 新しい機能、知らなかった作業の事、私の目を通して特に良いなと感じた内容を、graphicとwebのデザイナーにお役に立てばと思いレポートさせていただきます。 全部のレポートを細かめにしようかと思っていたのですが、講師の方々がスライドをアップされていたので、私は新しいアプリの話やadobeCC特有の連携の話、新しい使い方についても触れていこうかと思います。 Adobe Liveの概要と、記事の内容について 劇的に変化を続けるクリエイティブ環境において、Creative Cloudが現場にどのような効果をもたらすか、最新情報や事例を交えながら皆様と共有していきます。 引用もと：Adobe Live -Best Of Max- 私が感じた事は「ネットを通した連携で、作業効率をより良くする」という話が大きいなあというコトです。 iPad、iPhoneで使えるアプリのお話は、あまり気にしてなかっただけに驚きの連続でした。オープニングと、セッション（講義に近いのかな。）どちらも連携については語られてました。 というわけで今回は下記について書こうと思います。 ・アプリで複数のデバイスと連携できる！ ・連携ワークフロー ・セッション スライドのオススメ 加えて、株式会社モリサワ社長 森澤氏のお話と、ゲストセッションで原野氏が話した内容に、別記事で近い日に伝えられたらいいかなあと思ってます。 アプリで複数のデバイスと連携できる！ 直感的にレイアウトを取ったり、写真からカラーパターンの取得と登録をしたり、写真をブラシ化することができ、そのままphotoshopやIllustratorで共有、加工まで行えるデバイス間を超えた連携に使用できるiPad、iPhoneで使えるアプリ。 気になった五つのアプリをかいつまんでご紹介します。 いくつかは、後日使用レポートも書こうと思ってます。 それぞれのアプリや詳細な説明についてはこちら（adobe/アプリ一覧ページへ）から。わたしの視点だとwebやgraphicに役立ちそうな内容に寄ってしまいますが、書いてる事以上に広く使えたりします。 ちなみに、下のほうのComp CC と Photoshop Fix はデザイナーではなくディレクター向けです。 Adobe Capture CC 写真を、色や形、ブラシ等の素材に変換 写真からカラーテーマをキャプチャし、ライブラリに登録。連携できます。 写真をブラシ素材に変換できます。 写真をベクターやシェイプに変換できます。 カメラで撮影した写真やAdobe Creative Cloudからも色彩や光をキャプチャし、ユニークなLookとしてビデオプロジェクトの編集に利用できます。 Adobe Photoshop Fix 質の高いレタッチを手早く行える 写真のレタッチに使えます。顔を判別する機能があり、整形級のレタッチがものの数分で行えます。（直ぐ試しました！笑 自然です…。） 画像を歪めたり、修復、パッチ、明度調整、ペイント、カラー調整、周辺光量補正、露光量、彩度、焦点なども手軽に調整できます。 Adobe Preview CC スマホでチェックしながら修正・作業ができる Photoshopで作ったデータを、直ぐその場でスマホで表示。確認できます。もちろん連携されているので、修正したら反映されるので確認が楽に！ Photoshopにしか対応してないのがたまにきず…。Illustratorにも対応して〜！ Adobe Comp CC 直感的にカンプが作れる。イメージの疎通に。 言葉の通り、カンプを作れます。指だけで簡単にダミー文も写真の配置も、ボックスも書き込めます。PhotoshopやIllustratorの画像、カラー、テキストスタイルとも連携がとれるので、そのデータを実作業の種として活かせます。 Adobe Photoshop Mix 画像の切り抜きや削除、合成などが行えます。 画像の切り抜き、一部分の削除、複数レイヤーを使った画像合成、レイヤーの透明度をコントロールすることで、洗練された合成画像ができます。 細かなものになるとどうしても荒くなるので、仮として当てはめるものには活きるかもしれませんね。 連携ワークフロー 上記のアプリや、CC Libraries（素材共有できます）があれば、ディレクター、デザイナー、コーダーの連携がとれそうです。という話を聞いてきました。笑 役割を少し詳しく書いていきます。※私の主観です！ ディレクター Comp CCとPhotoshop Mixを使ってカンプを作成してみませんか？ まさかとは思いますが、口頭でキーワードだけ話すとか、イメージボード渡してこんな感じ！とか伝えるだけのディレクションはされてないですよね？笑 カンプがあればイメージもより明確に伝えられますし、クライアントさんとも目の前で詳細な話ができるだろうし、ライブラリで写真を差し替えながら相談し合えます。 このデータをデザイナーに送ればデータを直接触る事も可能なので、作業効率UPです。 デザイナー 送られてきたカンプはレイヤーも文字のスタイル情報も活きています。そのまま使える訳ではないにしてもイメージがあるとより作業しやすいのでは？ オペレーション業ではないので、より見やすい形に向けて提案と相談をされている方が多いと思います。私は手ラフを一度書くのがオススメです。（頭も動くし、自由度が高いので、技術の問題でアイデアが止まる事もありません）ライブラリばイメージボードの添付や、素材共有もできますので、手ラフ補足も楽だし、素材自体もストックしておけて嬉しいですね。 さて、素材はレイヤーに書き出し、効果はレイヤースタイルで（元画像をいじらない）ルールづけられた配置で…コーダーさんにデータを渡すためCC LibrariesへIN！ コーダー コーダーさんはライブラリからデータを引っ張れます。CC Extractはご存知でしょうか。知らない方は此方からご確認ください。(adobeのヘルプページが詳しかったのでそちらをリンクしてます） 画像のサイズ、マージンのサイズ等や、画像の書き出し、CSSの書き出し（ベンダープレフィックスなんかも書き出してくれます）、文字のコピー。すべてpsdファイルから2,3クリックで抽出できます。（psdのみです。aiにも対応して〜！笑） 画像の共有もライブラリで楽々行えます。DreamweaverはBootstrap標準対応になり、Emmetも使えます（これは前から…ですよね）。そこにCC Extractを取り入れたら、吐くほど楽に作業がすすめられるようになります。 こんな形で共有できたら作業効率もあがりますよね。 （私的には、アプリの力で日々の写真等を簡単に素材化できて、活かせる事が一番嬉しいのですが） セッション スライドのオススメ さて、最後の項目です。セッションの内容（Adobe Live -Best Of Max-）は全てwebのほうへ行きました。 中でもweb2、web4の行程が自分の中で得るものが多かったので、そちらの話を記載します。※私のメモ書きからざっくり書き出してるので、ズレがあったら申し訳ありません。参考までにどうぞ みなさんスライドをあげてくださってますので、リンクはってます。ありがたい限りですね。 web2 コーダーに嫌われないWebデザインデータの作り方とクラウド共有のススメ -北村 崇 氏 TIMING Design スライドはこちら 美しくルールづけることができ、コーダーもデザイナーも嬉しいデータ作成をadobeの機能を使って行いましょう。というお話かと思います。講師の方の話術というか…入り込みやすかったです。 ちなみに、ここではIllustrator主体で話されていた記憶があるので、そう思って読んでいただけると、解りやすいかもです。さて、内容としては、 スウォッチのグローバル機能を使ったカラー一括管理 シンボル化して、オブジェクトを一括管理 文字スタイルで、文字設定一括管理 合成フォントで英字と和文を繋げて一括管理 管理したものは他で共有できるし、変更も一括で行える Photoshop、Dreamweaverとの共有 イラストのコツ。話が脱線してると北村さんはおっしゃってましたが聞いている方は興味津々という感じでした。 元グラフィックデザイナーなので、一括で管理するパートは正直知っている事が多かったのです。が、実際に説明されることでより便利さを感じました。そして、理解しつつも機能使用をめんどくさがってサボってる事で、結局もっとめんどくさい作業内容になっていた事を痛感しました。 一括管理というのは、設定づけたものの設定内容を変えると、当てはめたオブジェクトがすべて対応するんですよ。一発で全部修正されるので、モレ無し、手早い、きれいなデータが作れます。 スウォッチ等はグラフィック側では使ってない人の方が珍しいぐらい便利な機能で、ぜひwebデザイナーさんに知って使ってほしい！です。 web4 デザイナーにも使って欲しい。DreamweaverでのBootstrapサイト制作 -松田 直樹 氏 株式会社まぼろし スライドはこちら 私、コーディングを勉強し始めてまだ一年と半年のペーペーでして。 目から鱗がぼろぼろ落ちるようなお話で、とてもありがたかったです。スライドがかわいい&見やすくデモも解りやすかったです。 レスポンシブがどれだけ主流になってきているか Bootstrapを使ったサイト制作について、デモ デザインエディタからのグリッドレイアウトが簡単 メディアクエリが見やすくなった Emmetのデフォルトサポート Extractと、bootstrapと、Emmetと、CC liveraryですごい早さで仕上がっていく制作デモ&早いのに解りやすい説明 というところですかね…？Dreamweaver持っているのに全然使ってないんですよね。重たいような感じと、テキストエディタが使いにくい。ってイメージが昔にあって、食わずぎらいしてました。 が、ここまで便利だと使わない意味がわからないですよねー。 そもそもの知識がなく、「わ！」と驚く話を報告してる事になるので、私からあーだこーだは言えません。ただただ勉強になりました。 おまけの話とか Adobe Auditionという音楽編集ソフト、すごいらしいので書いときます。余り詳しくない世界なので、メモ書き程度に思ってください。 動画の長さに合わせた音声編集のことなのですが、動画の長さに合わせて音声を読み取り、とてもナチュラルに調整してくれてたみたいで…。会場も「編集がとても自然でわからなかった」という声があがってました。 ごくまれにアニメーション動画をAfterEffectでやるので、機会があったらやってみたいなと思います。 ランチセッションに、立食パーティーのような企画、他盛りだくさんというところで、とても楽しめました。 携帯で使えるアプリは、一部すでに落としたので、使用レポートを書きたいなともくろんでおります。以上です。 Tweet Pocket