Photoshop

2015年11月12日

タイトルで煽ってみて、普通にレポートする流れ。まあ、でも今回のイベント内容を端的に表してるタイトルかと思います。

AdobeLive 2015 Best of MAX。
http://www.event-web.net/adobelive2015/max/

ここ一年くらいでCreativeCloudの環境が激変してます。

私は2年ちょっとCreativeCloudを使っています。最初はAutodeskやMSOfficeのように、年間保守料金の一般化というか、サブスクリプション形式の支払いだけ見て「アップデート料金を徴収に来たかー」くらいのイメージでした。

それが、この1年位はCCライブラリからの連携が作業のキモになりまして、一人で作業するときも、作業効率やアイデアベースの作業場所が完全に変わってしまいました。

個人レベルでもTypeKitをクラウドから落としてきて適用するのと同じように、撮った写真や手元のラフスケッチをクラウドに置いて、作業するときに引っ張り出して使います。

Adobe製品といっても使い方は人それぞれで、「筆で厚塗りしか使いません」「ベクターの線が引ければいいです」みたいな方は旧製品で十分です。

なんていうんですかね、コンセプトから管理業務してたり、絵やデザインを「何か」に加工する形で担当してる人には重要な環境だと思うんですよね、CC。

もうコーポレイトロゴの色指定をpdfで共有したり、稟議回したりしてる時代じゃないと思いませんか?

ツールに振り回されて無理やり進化についていくのは好きではないですが、作業上、不要な懸念をしなくてよくなるというか気楽になるのは大歓迎です。

AdobeLive 2015 Best of MAX基調講演

基調講演はコチラでアーカイブを見れます。

Adobe製品の現状と、今後のアップデートチラ見せが主な内容。先月アメリカでやったMAXとはほぼほぼ内容が被りますのであっさりめに。

・Behanse,Stock,TypeKit、というCC連携でも使えるライブラリまわり紹介(一部別途料金)。
・AdobeStockの具体的な使い方。
・モバイルアプリとデスクトップ作業の連携。Adobeカンプの使い方。
・CaptureCCの新機能「パターン」でパターン背景デザイン。
・Illustlatorの新機能。シェイパーツール、ジェスチャー対応。
・InDesign異体字表示方法の簡略化。
・DreamweaverCC、CCライブラリからのリンク。
・MUSEレスポンシブデザイン対応。
・ProjectComet、スマートフォンでのレイアウトと遷移を作成する新ツール。Xcodeのストーリーボードに似てますが、恐ろしく軽い。
・PremireProCC、スマホ対応縦長映像の編集機能。CCライブラリからデータ連携。
・AuditionCC、楽曲の自動編集。規定時間に合わせて曲のループを判定して勝手に繋いでくれる。
・LightRoomモバイル、レイヤー増加。マスク合成、レタッチ機能追加。


ジェスチャーでレイアウトしたり、取り消ししたりという操作は、旧来のAdobe製品を使っている方からすると軽く衝撃受けると思います。タブレット対応ってだけでなく、イラレではペンでも(たぶんトラックパッドでも)出来ますよ。

他製品もアプリ製品も、CCライブラリ対応が進むようで、これでやっと色々なツールを使い分ける意味が出てきそうです。もちろんチームで分業してる方には作業の簡略化ができそう。

各セッション内容

参加したのは5つ。
  • フォントも画像も思いのままに!いまこそCreativeCloudで、デザインのひきだしを増やしませんか?
  • 「進撃のレタッチャー」デジタルの未来を考える
  • AfterEffectsとPhotoshopでつくる、リッチなモバイル体験
  • ベテランほど知らずに損してるIllustlatorとPhotoshopの新常識
  • デザイナーから見たCreative Cloud
IMG_2964

軽くポイントだけメモしときます。
 
  • フォントも画像も思いのままに!いまこそCreativeCloudで、デザインのひきだしを増やしませんか?
Adobeの方のセッション。モリサワフォント対応の詳細(モリサワパスポートにない字体についてとか)。

  • 「進撃のレタッチャー」デジタルの未来を考える
進撃の巨人映画ポスターのレイヤー構成を見せていただきながらPhotoshopのTipsをいくつか教わりました。CameraRawフィルター舐めてた。これからはメインで使います。「ハイライトと暗部に載せないノイズの載せかた」も参考になります。

  • AfterEffectsとPhotoshopでつくる、リッチなモバイル体験
「ががばば」のサイト作成にも絡んでらっしゃったというリッチラボ(株)さんの講演。「スマートフォンでリッチなユーザー体験」という広告の作り方的なお話。サイト上で映像的に見せる驚かせる方法というのは面白いです。PS/AEのバニシング・ポイント連携は簡単に効果的な3Dを見せられていいですね。

  • ベテランほど知らずに損してるIllustlatorとPhotoshopの新常識
会場では「ベテランもベテラン」って方も多くて、デザイン業界って上は果てないなあって思いましたが、そういう方対象にCCの今の使い方的なところ(というかワークフロー)を紹介する講演でした。面白い小ネタで飽きない感じで進みました。
IMG_2975
CCいつも使ってますって人はもう知ってる内容かも。

昔のAdobeバージョンで止まっている方には分かりやすかったと思います。個人的にも独学でやってたことが再確認できて良かったです。

  • デザイナーから見たCreative Cloud
カイシトモヤさんの講演というか掛け合い。デザイナーの考え方みたいのがわかって面白い。後半、AdobeCCを(あまり)使ってませんってのがわかって、Adobeの方が色々説明しちゃうっていう感じになりました。最前線でデザインされてる方もまだ使ってないかたもいるんですね、ってので、若干通販番組的になった印象。


まとめとか感想とか

「第一線でAdobe製品使ってるけどまだCC使ってないよ」っていう方向けのイベントだったと思います。

ぶっちゃけCSに保守料金払ってるくらいなら(Adobe製品のエンタープライズライセンスは買いきりではないです)、CCに乗り換えちゃっても良いんじゃないの?って思いますけどね。イラレとかAEとか2015からやたら快適になったし。
bash
ただ難しいのは、いくら説明しても「シンボル使えばいいじゃん」とか「サーバーアクセスできるんだからそこからデータ持ってくるほうが安全じゃん」「ていうか絵を描くのに環境変えたくない」って考えてる人にはどうやっても理解できないんではないかと。

この簡便さというか、デザインってもっと気軽に色々できて良いんじゃね?ってのが、ここのところのCCの良さだと思うのですが、これが使ってみないと実感できないという。

どなたかがおっしゃってましたが「CCを単なるバージョンアップとして捉えると間違い」ということでいいのではないでしょうか。いままでテクニカルデザイナーとかにお金かけてワークフロー作ってもらっていたところ、まるっとツールにぶん投げることが出来ます。

手元のスマホのAdobeCaptureから会場でTシャツやスタンプを印刷してもらえたのは、CCライブラリの恩恵について分かりやすい例だったかと思います。

いただいたもの

・手袋
・AdobeStock使用権一年分
・Adobeステッカー
・FUJIFILM付箋

イベント中におためしプリント

・レーザープリンタスタンプ
・Tシャツ
stump
Tシャツも印刷してもらえばよかった。「風景を撮って」とチラシにあったのですっかり視野の外だったのですが、内容を見るとAdobeCaptureから出したデータでいけたみたい。

その場でねこかつ。のスクショ撮って、CaptureCCに持って行ってデータを作成。
IMG_2969

メールで送ると
IMG_2976
こんなかんじで木材がレーザー加工されます。

BearBashでは、お酒を飲みながらプレゼントとか、イラストレーターの方のパフォーマンスとかもあり。搭載未定だけどっていう開発中の案件もいくつか解説がありました。

抽選会にはハズレ、残念ながらCreativeCloud1年分というのは逃しましたが、軽食とお酒もいただき、参加させていただてよかったと思います。

と無難にまとめておきます。

PR


【お知らせ】
デジゲー博参加します。缶バッジとポストカードを限定数無料配布の予定です。

2015年 11月15日(日)
秋葉原UDX2階 アキバ・スクエア
B-20a ねこかつ。@猫アプリ

よろしくどうぞ~

blogbanner
猫と遊ぶアプリできました。
ver.1.0ダウンロード開始。



「猫は勝手に遊んでる」Facebook


最新情報はコチラでチェック ねこかつ。公式Twitter
https://twitter.com/nekokatte



ブログランキングに参加中。押していただけると幸いです。


iPhone6でも快適
片手操作モード搭載!
デザインを変えられる電卓アプリ。
 

 


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

2015年10月06日

AdobeMAX2015というイベントがありまして、いろいろAdobe製品関連の情報が飛び交っております。


特に注目されたのがこれ。


TypeKitにモリサワフォント参入


AdobeTypeKitというのはAdobeアカウントで使用可能なオンラインフォントライセンスで、個別契約もできますがAdobeCCライセンスがあれば一通り使用可能です。

Webサイト個別に使うような契約もできますし、CC契約なら一旦ダウンロードしてしまえば、映像やPDF、自作Tシャツやホームページ等に使えます。


フォトショから使おうとするとこういうところからインストールします。
morisawa1
フォントの種類を選ぶところからサイトに飛びます。

話題のモリサワフォントが追加されていますね。
moriwasa2
モリサワフォントは可読性がよくてスタンダードなスタイルが多く、汎用性が高いので多用する方も多いかと思います。

最近はサブスクリプションライセンスとかも量販店にありますね。


アプリに使えるのか?

フォント関連のライセンスを調べたことがある方は御存知の通り、

ゲーム、アプリ関連のライセンスはほとんどの場合、別契約です。

moriwsawa3
http://help.typekit.com/customer/ja/portal/articles/1341590

つまり、使えません。

モリサワフォントとかダイナフォントなどをアプリに使用する場合は、別途契約して使用料を払うことになります。品質が高いだけに使えないのは残念ですね。


そのうち使えるようにしてくれないかな。まあ、画像処理用やPR目的に使いますか…。


ちなみに黙って使って見つかった場合の使用料って、けっこうな金額のはずです…。

組み込み用途の場合は素直にフリーライセンスのフォントを探すのが得策です。

PR



【お知らせ】

デジゲー博参加します。

2015年 11月15日(日)
秋葉原UDX2階 アキバ・スクエア
cut_1sp_nekokatsu
B-20a ねこかつ。@猫アプリ

よろしくどうぞ~。
 
「猫は勝手に遊んでる」予約開始しました~。
iOS  
Anddoid 
blogbanner

「猫は勝手に遊んでる」Facebook

「猫は勝手に遊んでる」ねこかつ。事前予約ページ。



ブログランキングに参加中。押していただけると幸いです。


iPhone6でも快適
片手操作モード搭載!
デザインを変えられる電卓アプリ。
 

 

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

2015年08月02日

アプリ提出にあたって、iTunesConnect周りの画像を用意しなければなりません。

あとアプリに内蔵する各種サイズのアイコン。

面倒ですね。なるべく楽して何とかしたいという趣旨の記事です。


ここではPhotoshopを使って比較的簡単に各画像サイズを用意する方法を記しておきます。

提出用スクリーンショットを最低限用意する

スクショはiPhoneアプリの場合iPhone5の4インチと4sの3.5インチが提出必須となっています(2015.8.2現在)。

今のところ「提出オプショナル」な6Plusに対応してもいいんですが、でっかいサイズの画像をあめりけんな通信環境のところで軽めにダウンロード出来るように圧縮するのが難しいん(いや、面倒なん)で必須サイズだけ作っとこくことにします。

(1)メインのスクショをiPhone5サイズ(640x1136)のアートボードで構成します。レイヤーはきっちり分けてまとまってるものはグループフォルダ化しておくとアチコチ移動するのに便利。

(2)ベースが完成したら派生を作ります。アートボードをコピーしてカスタムサイズに変更。(640x960)にします。

この際、上下からはみ出したレイヤーを移動したり、4インチ版のスクショを載せたりして適当に対応します。
touroku01
日本語版と英語版、4インチと3.5インチみたいな。

(3)アートボードを右クリック。「PNGでクイック書き出し」、または「書き出し形式...」を行い画像を出力します。

※Photoshopのjpegの圧縮率はかなり良くなりましたが、pngは可能なら別のアプリケーションで圧縮する方がいいと思います。私はMac上でImageAplpaを使って256色に落としてます。
http://pngmini.com/


アイコンを一括出力する

こちらはPhotoshopのアクションを使用します。アクションはPhotoshop上の行動を記録して再生する機能でようするにマクロ的に機能します。

このブログ用のスクリーンショットを出力するのにも使ってます。リサイズと画像形式を選ぶ必要はなくボタン一発で保存できるのが便利。
action
繰り返し作業とかにはバッチリ。他のマシンでもCCで共有できればいいのに。

難点としては、一回はすべてのサイズのアイコンをファイル名決めて出力するってのを「記録」させないといけない点ですね。ただ、一回作ってしまえば何か変更があっても「アクション」を編集して修正するのは簡単です。

前作で作ったアイコンは別フォルダに避難してボタン一発で一括で出力しました。
52
※これ間違えて角丸が透過してませんが…

この際、レイヤースタイルなどライスタライズしてないものは見た目が変わってしまうので、一回全部の画像を統合しておくことをオススメします。

簡単ですが以上で。

「猫は勝手に遊んでる」予約開始しました~。
 
blogbanner

「猫は勝手に遊んでる」Facebook

「猫は勝手に遊んでる」ねこかつ。事前予約ページ。

完成まであと少しです。頑張ります。


ブログランキングに参加中。押していただけると幸いです。


iPhone6でも快適
片手操作モード搭載!
デザインを変えられる電卓アプリ。



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

2015年07月12日

作成中のアプリ「ねこかつ」のPR用スクショを構成中です。

以前、「PhotoshopCC2015のアートボード上で複数のアイデアを試す」のを実機プレビュー方法と一緒にちょろっとご紹介しました。

今回ワークフローが整理できたので、実際にどういった作業イメージになるのかをご紹介します。

アートボードとは
レイヤー構成の上にフォルダ的に「アートボード」があるという理解でいいと思います。
ab1
こんな風に下にレイヤーなどが入っています。

作業環境をアートボードで構成する
新規作成に「モバイルアプリデザイン」という項目があり、デバイスごとに解像度を選べます。
iphone5
これを選ぶと、A4とかクリップボードから作るのと違い、いきなりアートボードが構成されます。
artboard
この画面上で普通に作業が可能です。

アートボードの種類だけあるのかな。AppleWatchもありますね。
mobile2
これだけあればアプリ作るのには困らないです。
※「アイコン」用の各解像度セットは「イコノグラフィ」にあります。

複数アイデアの検討
いつもどおりだいたい作業ができたら2つめ以降のアイデアを検討するために「アートボード」をコピーします。

アートボード上で右クリックすると、レイヤーを複製するようにアートボードが複製でき、好きな場所に移動できます。
artboard2
各アートボードは独立していますので、それぞれでアイデアを試していきます。

レイヤーを複製して別のアートボードにコピーすることも出来ます。良かったアイデアを他のアートボードに戻してみたり、ダメなアイデアを見えなくしたり。

メモリの許す限りはいくつも試せます。

作業上、重い?

1つのアートボードに20のレイヤーで8つ作ってみました。8GBメモリ環境下で作業中に引っかかるような遅延はありませんでした。

再度開くときに一拍置くくらいの時間がかかりますので、そこそこファイルが重そうですね。複数のアートボードのぶんだけファイルサイズが大きくなっています。

巨大なファイルには向かないかもしれません。だからモバイルのプリセットで使うのかな。

お手元のマシンスペックと相談しながら、作業を進めていくといいと思います。

「猫は勝手に遊んでる」Facebook
「猫は勝手に遊んでる」ねこかつ。事前予約ページ。


ブログランキングに参加中。押していただけると幸いです。


iPhone6でも快適
片手操作モード搭載!
デザインを変えられる電卓アプリ。


スポンサードリンク

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

2015年07月05日

背景絵が苦手な人が行う素早い背景イラストの作り方、写真トレース編、です。

今回はポップな感じで、あまり時間をかけずに処理してみたいと思います。

Illustratorでトレース

写真をイラストレータの背景において線画を起こします。

写真は透明度を下げてロック。パースに気をつけつつ線を引きます。
tress1
今回は「効果>パスの変形>ラフ」でラインに手書き風のヨレヨレを入れました。

フォトショップに持って行く前に、線だけはきっちり処理。

Photoshopで処理

フォトショップにドラッグアンドドロップ。

この時にトリミングは決めてしまいます。スマホは解像度高くなってきましたが、いまのところ大きめで作るよりは実解像度くらいでで処理したほうが手早くいけます。

適当にレイヤごとに色を流しこんで処理の下地を作ります。
store_pre
これをやるには線画がきっちりつながっている方が便利。マスク作ってもいいですが、線で処理しておいたほうが数段早いです。

色はツールから採取してバランスを考える

iPhoneのAdobeColorCC※を使って元の写真のカラーを取得します。※AdobeShapeCCはAdobeCaptureに統合されました。
appColor
ピクセルを「スポイト」すると暗すぎたり明るすぎたりしますので、部分部分の特徴的な色みを取得するにはColorCCを使うと便利です。

PhotoshopCC2015 上でライブラリからカラーセットを呼び出し、色を流し込みます。
lib

色を流し込み、調整レイヤーで色を変えてトーンを整えていきます。
store_pre2
窓内の影とかを適当にクリッピングマスクで作ります。下地をしっかり作ってあるとマスキングが要らないので手早く描けます。

小物のディティール
noise
文字を別サイズで打って、上にノイズを2値化したものや、かすれ状に作ったノイズを重ねて文字を荒れさせます。チョークフォントを使ってもいいですが、ここはちょっとおしゃれレストラン風に筆記体を使います。

自由変形でパースを付けて文字を貼り込みます。
henkei
若干透明度を下げるとそれっぽく。

エフェクトを適当に入れておしまいです。

完成
store
今回は飾り帯を入れました(一枚絵で見せるには密度が足りないという判断)。

エンボスとかリアルタイムでやり直しが何度でもきくので便利になりましたね。レイヤースタイルに属するエフェクトはスライダーでいつでも何度でも変えられます。

機種別対応

解像度を整えて、PNGに出力。

全レイヤーを掴んでアートボードに放り込んだら、アートボードごとコピーして4s用のレイアウトに直します。
store4s

ぶら下がるホワイトボード部分は、ボタンにするので別で出力しておきます。

というスタイルで苦手を何とかしようとしております…。



ブログランキングに参加中。押していただけると幸いです。


猫と暮らす放置系アプリ。
事前登録受付はコチラ。

スポンサードリンク

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

2015年06月30日

前の現場にはターゲット至上主義って言葉がありました。


どういうことかというと

デスクトップ上での絵の作業は仮で、「実機上に出力されたものが全てですよ」ってことです。ターゲット(マシン)での見栄えが全て。


開発現場に慣れた人には当たり前ですが、これ新人デザイナには少しわかりにくいみたいです。

「私ちゃんと出力してるもん!」「変に見えるの私のせいじゃないもん!」

みたいな。極端な感じに見えますが大きいチームだと例年1つくらいはこういった小競り合い(おもに対プログラマ)を見かけます。
pcneko
解像度間違ってたり、指示書を間違えていたり、めちゃくちゃデータが重かったり。


原因は色々ですが。


ゲームのデザイナー、アーティストは自分の描いた絵について「実機での出力された状態まで責任を持ちましょう」って意味を含ませつつ、そんな話をしていたのも結構前の話になりましたね。


スマートフォンアプリの環境は、すぐに試せる実機がそばにあり見た目がよろしくない時はすぐに修正をかませます。

ずいぶん楽です。

逆に人のせいにしたり、機械のせいにしたり出来ませんね。


どんなに手の込んだアセットを作りこんでも、実機で効果的に見えなければ無駄、っていうこともあります。


スマホはスマホなりに「手間を掛けると良くなるバランス」とかがあって、今回そういうところを見つけるのに時間がかかりました。

もうちっと頑張ります。


ブログランキングに参加中。押していただけると幸いです。


iPhone6でも快適
片手操作モード搭載!
デザインを変えられる電卓アプリ。




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

2015年06月22日

先日Adobeイラストレーターのパフォーマンスの話を記事にしてましたが、今回はPhotoshopCC2015。

スプラッシュの時間が増えたので、初回の起動が遅くなったのは残念。
sp
クラウドやら連携が重いのか、立ち上げ後も一拍あります。※今回も環境はMacBook Pro (15-inch, Mid 2012)のBootcamp(Win7)です。

アプリ作業者向けアップデート

重いのはともかく、今回のPhotoshopはスマホアプリ開発向けのアップデートが多く、(特にモックアップレベルでの)作業がはかどります。

私はあまり複雑なアセットを作らないのですが、試してみたので参考レベルにどうぞ。

アートボード&PreviewCCの連携が便利

アートボードはIllustratorにもありましたね。

複数サイズ&レイアウトのアイデアを1ファイル上で比較する機能です。

どんなことが出来るかというと

1.デザインABの比較が容易になります。
2.画面比率の違いによるレイアウト変更を1ファイル上で試せます。
3.解像度違いの出来栄えのチェックが楽です。

などなど。単純にワークスペースが増えているので使い道は色々。

スマートフォンデザインでいえば複数のレイアウトを残しつつ比較ができます。アイコンはこっちじゃなくてこっち、広告はこっち、ABCで比較、別比率のデバイスで比較してこっち選ぶ、みたいな。

ab3

1.デザイン比較

昔の感覚で作業していると「Aバージョンで保存」、「Bバージョンで保存」とファイルを保存して比較したりしてたもんですが、今はそんなことしません。

同一ファイル上にあって隣に並んでいながら、アートボードとアートボードは独立しています。

一回「これ」ってのができたら、アートボードをコピーして別のアイデアを試して比較。気に入らなかったら捨てればいいのです。

2.レイアウトの変更

別のアートボード上の要素の移動は元のアートボードに関係なく反映されます。

アニメーション機能の「タイムライン」上で似たような検討が出来ました。別のコマでちょっと位置の違うレイアウト検討したりとか。ただこれ、レイヤーの位置がデフォルトのコマ依存なのが不便でした。

アートボードでは完全に別枠で検討できます。

3.解像度違いのチェック

アートボード上にプリセットで複数のデバイスの解像度が用意されています。
ab2
コピーしたアートボードをspotlightのアイコンで見栄えするように調整、とかいう使い方ができます。

まー、でも

ピクセルレベルのレイヤースタイルはラスタライズしなければならない。
あまりに違う解像度だとレイヤーをうまく構成できない。

というなんか解像度依存のレイヤーがあると後付けでアセット変更するのがめんどい。

最初からアートボードありきで作業した方がいいですね。

AdobePreviewCCによるリアルタイムプレビュー

ここまでならただ「アートボードがつきました」で終わるのですが。

PreviewCCというiOSアプリ連携がすごいのです。

いま作業している画面をiPhone上に即座に表示できるようになり、アセットの確認がその場でできるようになりました。

これがアートボード毎に切り替わる。
pcc
いちいち「アプリに入れて確認」という作業は必要はなくなりそうです。

複数のiOSデバイスを繋げられ、Device Previewウインドウで各デバイスの状況確認が可能です。
devicepre
Photoshopから実機ビューワーを扱う気軽さ

複数のiOSデバイスを横においておくと、自動で画面が次々切り替わるのも面白いですね。

アートボードと連携すると…表示したり非表示にしたりで実機上に出ている画面も次々切り替わっていきます。いちいち「ビューワーに出力」とかいう作業も必要ありません。とてもスマート。

「あれ、ちょっと大きい」、とか「これだと背景と混じって邪魔なんで色みを…」みたいなことを作業しながら確認できます。



Windows上で作業していた人には色味の確認ができるのも嬉しいかもしれません。Macとのガンマ値の違いを気にせず、微調整をWindows上で出来るようになりました。結局デバイスで見るのが正解ですね。

さらに黄色みがかった液晶とかで見栄えの違いを確認できたり(´・ω・`)

Windowsメインでデザインしていたので、「念のため実機に出しとくか」という工程が大幅に短縮されてしまいましたね。


バグがあるかもなーっていう挙動するのがちょっと不安ですが、しばらくこの環境で作業してみます。

その他の新機能一覧はこちらをどうぞ


「猫は勝手に遊んでる」Facebook
「猫は勝手に遊んでる」ねこかつ。事前予約ページ。


ブログランキングに参加中。押していただけると幸いです。

猫と暮らす放置系アプリ。
事前登録受付はコチラ。

スポンサードリンク

    このエントリーをはてなブックマークに追加 mixiチェック
記事検索
Twitterタイムライン

東京 税理士
ブログランキング