N. Design

webデザイナーやってます。お茶請け程度にどうぞ→@nnndmemo (Twitter)

AdobeMaxJapan 2017感想

こんばんわ、お久しぶりです。Adobe MAX Japan2017に行ってまいりました。会社に出したレポそのままですが、こちらにもはい、どんしようかと思います。

Keynote

  • Adobe Community Evangelist
  • Adobe製品、ここいいよと広める人。(講演したりなど)

Adobe製品アップデート内容など

  • イラレCC2018 パヘットワーク という新しい機能
  • Capture CC 写真とって、その写真から似たフォントを提案してくれる
  • 新しいフォント 貂明体
  • フォトショップ 円などのパスが簡単に書ける様に
  • フォトショップ ブラシ kyleさんという方が無料で提供してるものがある
  • フォトショップ ブラシ なめらか。というのが追加
  • Xd アセットパネルで色、シンボル、文字が管理可能
  • Xd 開発者へ仕様渡しやすく
  • Dimensions 新しいやつ。簡単に3D作れる。
  • lightroom 写真調整、管理ツール モバイル版、ウェブ版、ディスクトップ版あり
  • lightroom また検索でワード入れると、タグとかつけてなくても「鳥」とか入れると頑張ってそれを表示させてくれる(ディープラーニング?)
  • Premiere Pro レスポンシブデザイン取り入れた
  • キャラクターアニメーター 製品化へ

Adobe Sensei

  • AIぽい感じだと思われ、Adobe Sensei。
  • テンプレ用意して(PC)音声で「スマフォ版のレイアウト」にすると自動で用意してくれる
  • デザインでよくある「ここが◯◯ではなくて××の場合もみたい」などの場合もすぐに対応できる。

落合陽一さんトーク

なんかすごい研究者の人。 レポートとかをインデザインで書いてたらしい。

  • フレームの外の自然へ、メディア自体をクリーエションする
  • 環境に馴染むものをつくるのが大事、自然な場所にいれていく
  • 人はいずれイルカになる
  • デジタルが自然化する

シャボン玉の膜みたいなのに蝶写ったりなどの動画だったりで、本来なら、ん?と思うけどどこか馴染む不思議な作品多かったです。

ベテランほど知らずに損してるPhotoshop[MAX Special]

鷹野 雅弘 さん スイッチ/三浦 将 さん Derario Creative

過去(CS6 2012)と今(CC 2017)で変わった面を実際の操作をみながら紹介

ポイント 1 web用画像書き出し 2 画像配置関連 3 Adobe Stockとの連携 4 強力なエクステンション

1.web用の画像書き出し

基本

[cs6] スライスツールで1つ1つやってた

[cc] 画像アセットがある。

・切り出したい部分のレイヤー名に拡張子をつける
・ファイル→ 生成 →画像アセット

そして保存すると、 ファイル名-assets というフォルダで生成され画像が保存される。

画像アセットはチェックつけたらずっとつく。 チェックした場合、常にリアルタイムに修正が反映させる。

複数書き出し

スマフォ版などの、複数書き出しも可能 下記の様な形だと、原寸と@2xのサイズが書き出せる。

xxx.png,200%@2x

複数の場合など。

でも200%@2xなど1つ1つ名前を振るの大変。そこで Asset renamerを作ったよ。

名前 →エクステンション →aseet renamer 書き出したい、ボタンをぽちっと

名前一括変換 書き出したいサイズを選んでボタンでポチなどで簡単に。

2.画像配置関連

レイヤー → スマートオブジェクト / ウィンドウ → 属性 → リンクされたファイルを選択 でリンク設定可能。

ウィンドウ→ライブラリー→レイヤー→スマートオブジェクト→新規ライブラリーレイヤ

レイヤーに雲マークがクラウド上に保存される。 文字、カラーも保存も可能なので共同作業で役に立つ。 共通パーツを外部で一括などできる。

ONとOFFなど。

しかしよくある、headerのページごとにONとOFFが違う問題 レイヤーカンプを使おう

ウィンドウ→属性→レイヤーカンプの切り替えを行う

3.adobe stockとの連携

ウィンドウ→ccライブラリー→キーワードを入れる

adobe stock→adobe

カート:ライセンスを取得 雲マーク:仮で使う場合

また、ライブラリからD&Dで調整画像を差し替え。 ※別途有料 月何点などいうもの

4.強力なエクステンション

拡張機能 Bootcamp

写真を入れたい場合、細かく調整していたが、

エクステンション→bootcamp

imagebox

ボタンを押すとファイル→選ぶ 中央に配置。ただしマスクはさててないので微調整は必要。 削除すると自動でダミー画像

リピートグループ

リピートさせせたいのを選んでぽちぽちやるだけ (Xdのリピートグリットと一緒)

レイヤー→ダミー→全て選択→rename

レイヤー名とファイル名と統一され、ぶっ込み。

非破壊編集

・調整レイヤー ・スマートフィルダー ・スマートオブジェクト

これらを使って元のレイヤー(画像)を破壊せずに編集しようという考え

シャドウ・ハイライト自分で選択範囲選ばない。

シャドウ:暗いのを明るい ハイライト:明るいのを暗く

直接やるのは破壊していることになる。

スマートオブジェクトに変換し、別ファイルでパッケージ化 そして調子を行う。(調整レイヤー)

camera raw →どんな画像にも適用可能 かすみの除去便利

よくある室内からとった写真の、蛍光灯などを消したい スポット修復ブラシツール → ヒーリングブラシ(コンテンツに応じる)

でできるが、非破壊がテーマなのでスマートオブジェクトに変換すると、スポット修復は使えないそこでどうするか。

透明なレイヤーを入れる/全レイヤーを対象 で編集可能に。

2018年版Webデザイン体験講座 / Adobe XD+IllustratorPhotoshop連携テク

黒野 明子さん/crema design ・イラレのパス、パヘットワーク、アートボート一括揃え ・photoshop コンテンツに応じる、髪の毛の簡易切り抜き ・Xdのライブラリーの連携させ、楽に流しこむ。

などを一緒に流れ作業で行ったもの。

伝言ゲームをなくしてデザインの質を高める!Adobe XDを使ったライブデザインのコツ

池原 健治さん/ソニーインタラクティブエンタテインメント

デザインが完成する間までのコミュニケーション、伝言ゲームになってないか? 「理想のデザインを追求する」「人の意見も聞く」を両方やらなければならない。

そこでXdでそれをどう改善するのかを使ってやってみよう (仮のサイトを用意ずみ、改善などをデモストレーションして、即座に反映させる) (Xdで結構なホネぐみも作れる様になったし、モックも作れる。またデザインスペックも渡せるので仕様書不要に)

デザインを作る時には理由をつけよう。 Xdは変更など、頭で考えたことがすぐにできる様に。

Xdストリーム

ブレスト/絞り込み/デザイン/確認 これらが間挟まず、一括でXdで全て済むので伝言ゲームにならずに済む。

ブレインストームの手法と同様に、Xdライブデザインでストームして、その場で視覚化する手法をXdストーム(プレゼンの方が勝手につけた)

あるサイト制作にXdを導入してみて

- 早い段階でラフデザインができた - 細かい作り込みに回せる時間ができた - 関係者への回覧、簡易ユーザテスト - コミュニュケーションとデザイン、両方の質が上がり、無駄なやり直しがなくなった

Photoshop CC実践講座 〜決めるのは今!広告写真レタッチに最新版は必要!?〜

cc2018のフォトショップの大きな変更機能 - パスツール強化 - ブラシツール今日か - HIEFのサポート - 詳細ツールチップ

など様々。

パス:ラバーバンドを入れるとアシストに。

オススメのブラシは2種類り、結構いろいろなレタッチに対応できる。

  • 感覚1%でなめらかな線のものに。
  • 聞きそびれたが、ぼかしぽい感じのもの

あとは細かいレタッチなどをデモストレーションしながら解説

感想

  • 去年に引き続き、Xd推しなのか、その関連のものを力入れてる印象。
  • AdobeSenseiというワードがやたら出てきて、面倒な作業はAIにおまかせ、作ることに集中して欲しいという感じを目標にしている感じ、なんとなくコーダーの仕事がそろそろ本当になくなりそう。
  • Dwとかはあまり話題に上がってないのでひっそり頑張ってる感じ?でも今のところDwにあまりメリットは感じられない。
  • 新しいフォントの使い所わからないが、もっと色々なものに対して日本語対応強化して欲しい
  • 貂明朝美しい

残念に思った点(個人的に)

  • たまに隣の会場の声が混じって聞き取れなかったのがあったので残念だった
  • たくさんの人が集まるのは嬉しいことだけど、もっと調整できなかったのかなとは思う
  • それに関連して受付がスムーズでなかったのはちょっと疑問バーコードで管理するもの結構謎で2度手間なのでは。
  • keynote、レシーバーいるのわからなかったので一部セッション聞けなかった。必須であればもっとわかりやすく。

あと、願わくはこれもお願いしたい。アプリ設計する上では結構重要なので。