ココロモチ、PSO2

ファンタシースターオンライン2(PSO2)で活動するマイキャラをゆるゆる眺めるブログです。

メイクパターン適当にまとめメイクパターン適当にまとめ インナーウェア適当にまとめインナーウェア適当にまとめ リボン・シニヨン(頭部アクセサリー)適当にまとめリボン シニヨン適当にまとめ カチューシャ・ヘアバンド(頭部アクセサリー)適当にまとめカチューシャ ヘアバンド適当にまとめ コサージュ・花飾り(頭部アクセサリー)適当にまとめコサージュ 花飾り適当にまとめ イヤリング・ピアス<br />適当にまとめイヤリング ピアス適当にまとめ メガネ・サングラス・ゴーグル適当にまとめメガネ サングラス ゴーグル適当にまとめ 眼帯・アイパッチ・目隠し適当にまとめ眼帯 アイパッチ 目隠し適当にまとめ タイツ・ストッキング・ソックス適当にまとめタイツ ストッキング ソックス適当にまとめ

タグ:ブログ運営

EP4描画設定6実装前に色彩調整用のPhotoshopアクションファイルをいくつか作って公開していたのですが、設定6実装からPSO2の絵作りが大幅に変更されたので、それに合わせて新しいアクションファイルを作ってみました。

まずはその『設定6用色彩調整 東京昼用』適用前後の画像を比較してみてください。

設定6用色彩調整 東京昼用
比較 サンプル
無加工→←設定6用色彩調整 東京昼用を適用
無加工→←設定6用色彩調整 東京昼用を適用
色合いが青基調からパッと明るい印象になったのを確認できると思います。

このサンプルは縮小しいてますので分かりにくいのですが少しだけ“虹彩絞りぼかし(被写界深度)”と“縁に影”を付けています。(下段に拡大できる原寸画像があります)

この色彩調整は一手間だけ必要ですが10秒程度でできてしまいます( ゚д゚)ポカーン

!超重要 最初に簡単な作業が1つだけ必要です。
最初にキャラクターを適当大雑把に構いませんので、なげなわツールなどで選択範囲を作ってください。
キャラクターの選択範囲を作る
これだけですヽ(o゜ω゜o)ノ
後はダウンロードしてPhotoshopに登録した『設定6用色彩調整 東京昼用』アクションを再生するだけ!
『設定6用色彩調整 東京昼用』アクションを再生するだけ

今回使用したスクショの出来上がり確認用の大きな画像です。

比較 サンプル
(設定6用色彩調整 東京昼用を適用比較)   ↓クリックすると大きな画像を表示できます。
設定6用色彩調整-東京昼用を適用比較
PSO2共通の『全体的に青っぽい』とポートレートスクショの『肌色』を中心に調整していますのでわりと汎用性は高くエステ画像などでも使えます。

比較 サンプル
(設定6用色彩調整 東京昼用を適用比較)   ↓クリックすると大きな画像を表示できます。
設定6用色彩調整-東京昼用を適用比較
元画像を一番下のレイヤーに非表示で残しているので、色合いの濃淡が気になる人は出来上がりの透明度を調整してブレンドしたりする事も可能です。

アクションファイルのダウンロード
今後もファイルの追加や更新によりダウンロードファイルも変更しますので、このページのURLリンク(http://kururi-pso.blog.jp/aarchives/66116988.html)以外の、ダウンロードファイルへの直接リンクの転載はやめていただくようお願いします。

Adobe Photoshop CS6 CC用
PSO2設定6用色彩調整 東京昼用
Ver.20160929
◆ファイル名 : PSO2_SS_color_mgt_set4.zip
◆対応 : Adobe Photoshop CS6 CC
◆パッケージ内容
PSO2設定6用色彩調整 東京昼用.atn

[右クリック→リンク先を保存]にて自身のパソコンにダウンロードしてください。
http://kururi-pso.blog.jp/data/PSO2_SS_color_mgt_set4.zip

ツイート用

【2015年10月13日追加】
この記事は画質設定5時(2015.APR頃迄)の内容です。
春に「スクショを簡単に綺麗にするPhotoshopアクションファイルを作ってみた(http://kururi-pso.blog.jp/archives/27381419.html)」というPhotoshop用の色調整アクションファイルの配布記事を見てくれる人がわりといて、アクションファイルのダウンロードもボチボチとあるので調子に乗って追加です。

↓サンプル : HDR画質化明るいスクショ用を適用したスクショ
サンプル : HDR画質化明るいスクショ用を適用したスクショ

今回はHDR画質化アクションファイルです。
そもそもHDRとは、

ハイダイナミックレンジ合成(high dynamic range imaging)
出展 : Wikipedia(https://ja.wikipedia.org/wiki/ハイダイナミックレンジ合成

の事で、最新のカメラレンズや撮影用チップをもってしてもコントラスト(明暗)比2,000:1程度での撮影が限界で、さらに最新の液晶モニターでもその表現は1,000:1程度という最近ですが、実際の目の前にあるリアルは軽く100,000:1を超える階調なので、フィルムからデジタルにおける“写真”はその階調表現を“どうやって目を誤魔化すか”は重要な技術とノウハウの一つとなっています。

Hdr-composition →画像はWikipediaから。HDR画質化各階調の画像を調節する
つまり、最近よく言われているHDR画質化というのは1,000:1の表現力しかを持っていないモニターでも、あたかもリアルで見ているような鮮やかな色彩を錯覚させる絵作りということなんです。

ハイ、

難しいハナシはココまでで、そのHDR画質化を手軽にできればいいなと思いまして、ゲームプレイスクリーンショット用ですが、明るいスクショ用と暗いスクショ用の2種を用意してみました。


PSO2スクリーンショットの色調整アクション セット3
暗いスクショ用を比較 サンプル1
無加工→←暗いスクショ用を適用
無加工→←暗いスクショ用を適用

なお、過度な色付けは好きではないので「なるだけ自然に~」程度に調整しています。

暗いスクショ用を比較 サンプル2
無加工→←暗いスクショ用を適用
無加工→←暗いスクショ用を適用
なお、過度な色付けは好きではないので「なるだけ自然に~」程度に調整しています。
暗いスクショと明るいスクショで無理に1つのアクションでやると出来が悪くなりますので調整して2つに分けています。

写真の内容は比較用のための色彩サンプルで、個人の趣味ではありません()

PSO2スクリーンショットの色調整アクション セット3
明るいスクショ用を比較 サンプル1
無加工→←明るいスクショ用を適用
無加工→←明るいスクショ用を適用

明るいスクショ用を比較 サンプル2
無加工→←明るいスクショ用を適用
無加工→←明るいスクショ用を適用
単純にコントラストを調整するのではなく、視覚に影響を与えやすい色を調節して鮮やかに見せるのがHDR画質化のコツです。
前回のカラー調整版と違ってコチラはアウトラインを追加するので画質をシャープにします。
一番下のレイヤーに元画像を残していますので、透明度変更にてブレンドしたりして画質を調整すれば色んな明るさに対応できると思います。

アクションファイルのダウンロード
今後もファイルの追加や更新によりダウンロードファイルも変更しますので、このページのURLリンク(http://kururi-pso.blog.jp/archives/45250670.html)以外の、ダウンロードファイルへの直接リンクの転載はやめていただくようお願いします。

Adobe Photoshop CS6 CC用
PSO2スクリーンショットの色調整アクション セット3
Ver.20151013
◆ファイル名 : PSO2スクショ色調整セット3.atn
◆対応 : Adobe Photoshop CS6 CC
◆パッケージ内容
HDR画質化明るいスクショ用
HDR画質化暗いスクショ用

[右クリック→リンク先を保存]にて自身のパソコンにダウンロードしてください。
http://kururi-pso.blog.jp/data/PSO2_SS_color_mgt_set3.zip


PSO2のゲーム画面はかなり明るくコントラストは高めな方ですが、やはり動画用なので明るさや彩度はかなり落とした画質に調整されていたりして、1枚の写真として見ると少し物足りなかったりです。
写真として1枚に残していくのなら綺麗な方がいいよねヽ(o゜ω゜o)ノ

シーンごとの色調整のみでスクショを綺麗にするセット1と2はコチラ↓

スクショを簡単に綺麗にするアクションファイルを作ってみたスクショを簡単に綺麗にするPhotoshopアクションファイルを作ってみた
http://kururi-pso.blog.jp/archives/27381419.html


【2015年4月25日追加更新】
この記事は画質設定5時(2015.APR頃迄)の内容です。

追加分 → PSO2スクリーンショットの色調整アクション セット2 [ULTリリーパ用][チャレンジロビー用][EP3ゲートエリア用]
今回は色の変化具合を確認するために(本当だって)、判断し易いと思われるカットを使用しています。これは教材でチラリスクショではございません(強調)

以前に書いた通り、このブログの“今日のコスチュームの一枚”は、Macと映画などの映像調整をするためのハードウェアを使っていたりします。

大人の道具()を使ったスクショを比較
ハード介入無し無加工→←Macにてハードウェアアクセラレーション撮影
スクショハード介入無し無加工スクショMacにてハードウェアアクセラレーション撮影

ただし、それを使用中はキャラクターをスムーズに動かすことは無理なくらい重くて、文章中に差し込むゲームプレイのスクショ撮りにはとても使えません。
そういうときは素直にAdobe Photoshopにて明るさくらいですが調整しています。

少しリアル話も絡めますと、写真の補整については下積み時代()に、幸運にも誰もが知っている国内外のアーティストや俳優のポスターやアー写を数百枚以上仕事でやらせてもらいました。
そんな経験から画質調整作業は嫌いではありませんが、仕事と趣味は脳が別でして・・・ブログのためにそういう作業をするのはメンドクサイです()


そんなわけで、ブログ用にある程度スクショの明るさと画質調整をテンプレートできないものかと、色々と試行錯誤しつつ、Photoshop(CCにて制作、CS6まで動作確認済み)のアクションファイルにしてみました。

!超重要 最初に簡単な作業が1つだけ必要です。
最初にキャラクターの顔だけを適当大雑把に構いませんので、なげなわツールなどで選択範囲を作ってください。
アクションファイル手順1
あとはダウンロードしてPhotoshopに取り込んだアクションを再生するだけ!



PSO2スクリーンショットの色調整アクション セット1
【暗いスクショ用】
マイルームで撮った暗いスクショなら【暗いスクショ用】を再生します。
アクションファイル手順3
元画像は一番下のレイヤーに残っています。
ワンクリックでこんな感じ↓になります。

アクション適用前後を比較
【暗いスクショ用】は肌色の彩度が低いキャラクターの肌を濃くし全体を鮮やかにします。
無加工の暗いスクショ→←【暗いスクショ用】を適用
無加工の暗いスクショアクション【暗いスクショ用】を適用



PSO2スクリーンショットの色調整アクション セット1
【明るいスクショ用】
マイルームで撮った明るいスクショなら【明るいスクショ用】を再生します。
アクションファイル手順2

アクション適用前後を比較
【明るいスクショ用】は彩度が高いキャラクターの色彩を落ち着かせ、全体的にコントラストを上げて背景に馴染ませます。
無加工の明るいスクショ→←【明るいスクショ用】を適用
無加工の明るいスクショアクション【明るいスクショ用】を適用



PSO2スクリーンショットの色調整アクション セット1
【カジノ用】
カジノで撮ったスクショなら【カジノ用】を再生します。
アクション適用前後を比較
【カジノ用]はカジノで撮ったスクショに合わせてやや赤みがかった色彩と明るさを調節します。
無加工のスクショ→←【カジノ用】を適用
無加工のカジノで撮ったスクショアクション【カジノ用】を適用



!超重要 最初に簡単な作業が1つだけ必要です。
最初にキャラクターの顔だけを適当大雑把に構いませんので、なげなわツールなどで選択範囲を作ってください。
アクションファイル手順1
あとはダウンロードしてPhotoshopに取り込んだアクションを再生するだけ!

PSO2スクリーンショットの色調整アクション セット2
【ULTリリーパ用】
ULTリリーパで撮ったスクショなら【ULTリリーパ用】を再生します。
アクション適用前後を比較
【ULTリリーパ用]は彩度が低目の白っぽくなりがちな特に肌の色を豊かにします。青っぽいスクショ以外なら他のシーンでも使える汎用性の高いアクションにしています。
無加工のスクショ→←【ULTリリーパ用】を適用
無加工のULTリリーパで撮ったスクショアクション【ULTリリーパ用】を適用



PSO2スクリーンショットの色調整アクション セット2
【チャレンジロビー用】
チャレンジロビーで撮ったスクショなら【チャレンジロビー用】を再生します。
アクション適用前後を比較
【チャレンジロビー用]は色彩は綺麗なのに暗くなりがちな全体を自然に明るくします。
無加工のスクショ→←【チャレンジロビー用】を適用
無加工のチャレンジロビーで撮ったスクショアクション【チャレンジロビー用】を適用



PSO2スクリーンショットの色調整アクション セット2
【EP3ゲートエリア用】
EP3ゲートエリアで撮ったスクショなら【EP3ゲートエリア用】を再生します。
アクション適用前後を比較
【EP3ゲートエリア用]はグリーンとブルーが強いロビー光源を抑え肌に赤味を足して明るさを調整します。
無加工のスクショ→←【EP3ゲートエリア用】を適用
無加工のチャレンジロビーで撮ったスクショアクション【チャレンジロビー用】を適用



元画像を一番下のレイヤーに残していますので、色彩を濃く感じる場合は色調整したレイヤーの透明度を変更するなどで調節してみてください。
アクションファイルのダウンロード
今後もナベリウスのグリーンな空間向けなどをテンプレート化でき次第、このページに追加しようと思っていますので、その都度、ファイルを更新する予定です。
ファイル更新によりダウンロードファイルも変更しますので、このページのURLリンク(http://kururi-pso.blog.jp/archives/27381419.html)以外の、ダウンロードファイルへの直接リンクの転載はやめていただくようお願いします。

Adobe Photoshop CS6 CC用

NEW!
PSO2スクリーンショットの色調整アクション セット2
Ver.20150425
◆ファイル名 : PSO2スクショ色調整セット2.atn
◆対応 : Adobe Photoshop CS6 CC
◆パッケージ内容
ULTリリーパで撮ったスクショ用
チャレンジロビーで撮ったスクショ用
EP3ゲートエリアで撮ったスクショ用

[右クリック→リンク先を保存]にて自身のパソコンにダウンロードしてください。
http://kururi-pso.blog.jp/data/PSO2_SS_color_mgt_set2.zip



↓更新はありません
PSO2スクリーンショットの色調整アクション セット1
Ver.20150415
◆ファイル名 : PSO2スクショ色調整セット1.atn
◆対応 : Adobe Photoshop CS6 CC
◆パッケージ内容
マイルームで撮った明るいスクショ用
マイルームで撮った暗いスクショ用
カジノで撮ったスクショ用

[右クリック→リンク先を保存]にて自身のパソコンにダウンロードしてください。
http://kururi-pso.blog.jp/data/PSO2_SS_color_mgt_set1.zip

ツイート用

それぞれの想いで作ったキャラクターは人それぞれに可愛いと思います。
そんな愛着あるキャラクターのスクショなら、どうせなら綺麗にしてブログに掲載したいですよね~

こんなブログでも、だ、誰かの役にたったかな?(; ・`д・´)

今回はPSO2のゲームプレイとは関係が無い、ブログ運営についての覚え書き+αです。
なので、ブログとかそういうのに興味がない人にはゴメンナサイな内容となっています(本当)

だって、春やん?
新入学や新社会人な人のための季節物記事って大切やん?(震え)
PSO2
そんなわけで、難しい事ではなく経験則から感じた、ブログ運営にあたっての最近の基本的に知っておきたい事をなるだけ簡潔にメモしておこうと思います。

◆1 見てもらう人の環境になるだけ合わせたいよね。

ハイ。仕事だと今もって「NN4.7ガー」とか「JavaScriptガー」とかメンドクサイのですが、そんなレガシーサポートは“特別な事”と割り切って良いと思います。

こちら↓、最近の“ココロモチ、PSO2”の10万ビューのユーザー端末の内訳です。
ブログ運営で知っておきたいマメ知識
ほとんどの人(92.4%)はスマホかパソコンのフルブラウザで閲覧している事が分かります。
そして、その中でも大きな割合を占めているのがAndroid、iPhone、Windows7以降ですね。

◆2 つまるところ、ブログサービスが簡単なわけじゃん?

そうなると、作るにあたってデザインやレイアウトを気にするのはこの3機種と言う事になって、それらにシステム側で全て自動で対応してくれるのが、レンタルブログなどのウェブサイトシステム込みのレンタルサーバー:レンタルスペースです。
便利で簡単なブログを利用する
他にも有名なFacebookなど、色んなレンタルサービスを各社提供しています。
そんな多々あるウェブサイト配信系サービスの中でも「配信しやすい。」「記事を簡単に作成しやすい。」の2点で現在はブログを選択する人が多いのです。

そして・・・

色々と慣れてくると・・・

ブログというスタイルに飽きます(; ・`д・´)

◆3 自分でHTMLコードを書いたりって・・・何それ美味しいの?

各機種各ブラウザ自動対応に簡単記事作成だと、どうしても、レンタルブログ然としたレイアウトスタイルから抜け出すことは難しくて、サーバースペースだけ借りてブログシステムそのものを自分で構築したり、いわゆるウェブサイトやホームページと呼ばれるものを作るという泥沼へ足を踏み入れます(震え)
自分でウェブサイトをデザインして運営する
一言で言うと、各機種対応やレイアウトに関して全て自力で処理しなくてはいけないのでメンドクサイです。
でも、思うがままにデザインを構築できるというのは表現と創造の楽しみですよね~。

こちらは↓、“ココロモチ、PSO2”のレスポンシブシングルデザインサイトです。
ココロモチ、PSO2 | Designers Editionhttp://kururi-pso.blog.jp/designers/

スマホだとその操作はできませんが、パソコンブラウザの方はウィンドウサイズの変更を試してもらったり、主要ないくつかのブラウザで見てもらうと、「自分で作れば、こういう物も作れるのか!」と少し理解してもらえるかと思います。

もう少し、続くよヽ(o゜ω゜o)ノ

◆4 JQueryのバージョンは1.xと2.xのどれを使えばいいの?

次は、レンタルブログでも自前サイトでも、今では無くてはならない便利なアニメーションなどを動かすためのスクリプトにJavaScriptというものが有ります。
このJavaScriptというのは画像を動かしたり変更したりと様々な“動き”を実現するためのプログラム言語で、ブログやホームページのHTML記述内に書き込めるというとても便利な言語です。

JavaScriptでどういうことができるのかというと、マウスを画像に合わせると色が変化したり、↓こういうことができたりとウェブサイトを彩る“仕掛け”をページに埋め込むことができます。


コナミコマンドに対応した(; ・`д・´)
ハイ、超有名なゲームコマンドですね。Facebook公式やTwitter公式でも使えたりします。

→→→サンプルページ http://kururi-pso.blog.jp/designers/
konami command
※自分のブログにもコナミコマンドを埋め込みたい方は「 JQuery konami command 」で検索すると色々と出てきます。
無利用プランにもフリースペース
そんなんで、お手軽に使えるJavaScriptですが、お手軽な分だけに多くの人が色んなJavaScriptのプログラムを配布していて、バージョン対応も様々なんですよね。
そうすると、複数のJavaScriptを使用したためにブラウザでの表示が挙動不審になってしまう事も多く見られます。

そういう問題を解決してくれるのがJQueryというJavaScriptの共通エンジンです。
ファイル名は jquery.min.js となっていて、ページ内での呼び出しは、
1.x系ならば、

2.x系ならば、

こういう形で、Googleなどのライブラリ配信サーバーから利用できます。
その場合のファイル名の前のディレクトリ名は、バージョンを示していることが一般的です。

今まではAAAAというJavaScriptで画像の“色”を変更するためには、AAAAの中に画像のサイズやら何やらを取得するための命令を書いて、BBBBというJavaScriptで画像を“動かす”ためにも、BBBBの中で画像サイズやら何やらを取得するための命令を書かなければいけなかったのです。

でも、JQueryルールで作られたAAAA.JQueryとBBBB.JQueryなら、「この画像を動かせ」と命令するだけで画像に関する情報取得やらはJQuery本体がやってくれます。
これなら製作者が違うAAAA.JQueryとBBBB.JQueryでも安定して動作します。

そんな便利なJQueryですが、バージョンの多さに「どれを使えばいいの?」と悩む人が多いと思います。
ここ最近(2015年)思う、色んなJQuery JavaScriptを扱いながらの経験から、
  • ブラウザでのスクロールや移動などのマウスに追従させる“動き”で互換性を持たせたいのなら1.x系
  • スクロールや移動系が無くてスマホなどの新しい機種へ安定して“軽快に”動作させたいのなら2.x系
といった感じです。
ちなみに1つのページ内で複数のバージョンの jquery.min.js を呼び出す事は可能ですが、挙動不審の原因の一番手となります。
それなら、「古いバージョンのJQuery JavaScriptも2.x対応で書き直せばいいのは?」と思いますよね。でも、軽快動作と高い互換性の確保という事で、現在まだサポートしてない“動き”もあったりなのです。

最後に、JQueryは自前で用意するよりもGoogleなどの共通配信ライブラリを利用した方が便利なので、その配布先URLを記載しておきます。

Google Hosted Libraries
https://developers.google.com/speed/libraries/devguide#jquery

↑このページのトップヘ