[Photoshop]何の役に立つか全くわからない、たった2秒で集中線を描くアクション

昨日の記事の集中線の作り方ですが、実際説明するのも自分で作るのもめんどくさいのでアクションファイルを作りました。

Photoshop CCのアクションパレットのオプションで「アクションの読み込み」で使えます。
カンバスを何も開いていない状態でもOKです。

バージョンについてはおそらくですが、CS5とかでも大丈夫じゃないでしょうか。自己責任でどうぞ。

下記からダウンロードできます。

atnファイルをダウンロード

[Photoshop]いつ使えるかわからないけれど集中線を描こう

なんか無性に、漫画でよく使われる集中線をデザインに盛り込みたくなってしまう病気にかかっているので、集中線の書き方を簡単にまとめてみました。
ブログ記事はとても長くなってしまいましたが、実作業は理解してれば3分弱でできちゃったりします。

1.ファイル作成

新規

とりあえず、新規でカンバスを作ります。
サイズについてもあんまり制約無いですが、今回は1000×1000で作りますね。

2.レイヤー追加

ファイルを作ったら新しいレイヤーを追加します。

3.雲模様フィルタ

描画色と背景色が白と黒になってるのを確認して、「フィルタ」→「描画」→「雲模様1」を選択します。

雲模様が描かれます。

4.ノイズを加える

雲模様を描画したら、今度は同じレイヤーに「フィルタ」→「ノイズ」→「ノイズを加える」を選択します。

ダイアログが開いたら、「量:400%」「均等に分布」「グレースケールノイズにチェック」をします。

雲模様がノイズになりました。

5.ぼかし(移動)

ノイズを加えた後に、「フィルタ」→「ぼかし」→「ぼかし(移動)」を選択します。

ダイアログで、「角度:90」「距離:2000px」に指定します。
角度については、横(角度:0)でも問題ないですが、今回は縦にしています。また、距離についても1500pxくらいでも問題ないです。

ぼかし(移動)が適用されて、縦の縞模様になりました。

6.2階調化

縦の縞模様になっても、このままだとグレーの部分が多く、集中線とは言いがたいものになってしまいます。
そこで、このレイヤーを「レイヤーパレット」の「調整レイヤー」アイコンから「2階調化」を選択し2階調化します。

属性パレットのスライダーを左右に動かして、線がいい感じになるところで調整してください。
こればっかりは、雲模様やノイズなどのフィルタがランダムにかかる関係で、数値をいくつにしてって説明ができないのです。

縦線は右記のようになります。
上辺の数十px分を縦に引き延ばしてまっすぐきれいな線を作るので、真ん中辺りにできるもにょもにょした部分はあんまり気にしなくていいです。

7.切って延ばす

上辺の数十pxを適当に選択して、残りの部分を削除し、自由変形で縦に下まで引き延ばします。

すると、なんということでしょう!!
まるでバーコードのようなきれいな縦線ができあがります!!

7.極座標

もしここまでで作業完了するなら、「え、これただのバーコードじゃん」でいいんですが、今回は集中線ですので、集中しないといけませんね。
「フィルタ」→「変形」→「極座標」を選択します。

極座標ダイアログで、「直交座標を極座標に」を選択します。

いい感じになってきました。

8.白い背景色を除去

で、このままだとちょっと使い勝手がよろしくないです。
たとえば背景色は青にしたいとか、写真の上に追加したいとかってなったときに使えないわけです。
せっかくphotoshopなのだから、黒い線だけのレイヤーとして使いたいですよね。
「自動選択ツール」でレイヤーの白い部分をクリックして選択し、

「選択範囲」→「近似値を選択」を使います。

すると、レイヤー上の白い部分が全て選択された状態になるので、Deleteします。
色を付けたレイヤーを下に配置してみるとわかりやすいかと思います。

9.最後の仕上げはレイヤーマスク

集中線は演出的に何かに集中させる為のものですので、中央に線があるのは邪魔ですよね。
レイヤーマスクで中央部分を消してしまいましょう。
まず、レイヤーにレイヤーマスクをつけます。

次に、グラデーションツールを選択し、円形グラデーションを選択します。

カンバス中央から外に向かってドラッグしてグラデーションを描画します。
ここの行程も、何度か繰り返したり、やり直したりグラデーションの割合を調整するなどして、いい感じの所を探してください。

10.完成!

おめでとうございます!これで集中線マスターですね!!
とりあえずいつ使うかわからないので、自分の写真に使ってみました。

追記

これらの作業をなんと2秒で完了させる、アクションファイルを作成しました!
是非ご活用ください!!!!!!!!!

[Photoshop CC]Mac LCDってなんだ!?[メモ]

仕事のやる気が全然出ないので、Photoshop含め、CS6を全部CCにしました。
そしたら、なんということでしょう。アンチエイリアス部分に見慣れない項目が二つ。
「Mac」と「Mac LCD」。

これ何の違いがあるんすかねぇ〜。って思ってググってみたけど、あんまり日本語記事なかった。

MacにはRetina Displayがある

そう、冷静に考えてみりゃ今のMBPはRetinaだったわーって事でした。
Retina用に最適化されたアンチエイリアス、それが「Mac LCD」。

で、理屈はわかったんですが、僕のMBPは2年前のモデルなんで確認が出来ないんですよ。表示としてどう違うのか。
てか「Mac LCD」使ったらCS6以前で表示おかしくなったりしますよね。
データ納品時とかにいろいろ不都合がありそうなので、当分使用しないでいた方が良さげ。

そしてやる気は未だ出ず。

Android用アプリアイコンテンプレート[PSDファイルもあるよ!]

Androidアプリのアイコン制作の依頼があったのですが、各サイズを毎回リサイズするのはめんどくさ…、いや大変なので、もうpsdでテンプレ作ってしまいました。
というかこのテンプレでweb用書き出しすれば5種類のサイズにスライスしてあるので、そのまま使えます。

使い方

スマートオブジェクトになっている「edit this」を編集します。

編集が終わったら「web用に保存」

以上!

ね、簡単でしょう?
スマートオブジェクト内のレイヤーグループに角丸マスクも入れてあるので、必要であればそれもご利用ください。

psdファイルをダウンロード

Photoshopで「レイヤー129 の コピー 543」とか冗談でしょ?

Photoshopでデザインしてると、レイヤーの数が膨大になるんですが、コピーすると表題のようなレイヤー名に「レイヤー129 の “コピー 543″」みたいなコピーのいくつみたいな番号がついてしまうのです。

これ、集中して作ってるときは問題ないんですが、いざデザインが終わってHTML作りましょってなったときに非常に厄介で、「シェイプ1 の コピー 2」とかならまだ認識できるからマシだとは言え、表題のような数になってくると、
「あれ、これ一体どこのレイヤーなのよ、もうデザイナー何やってんのよ!あ、これ作ったの俺か」
という様なジレンマというか、イラつく事が多いので、レイヤー名に「コピー」をつけないようにする方法を発見しました。

手順はとっても簡単!マウスをたった4回クリックするだけ!!スゴイ!!

1.パネルオプションを開く

「レイヤーパレット」の右上にある設定アイコンをクリックして、「パネルオプション」を選択します。

2.コピーしたレイヤーとグループに「コピー」を追加のチェックを外す

開いたパネルオプションのウインドウの最下部にある、「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外します。
これで完了です!ね?簡単でしょ!?

終わりに

ここまで「レイヤーXX」や「シェイプXXX」の様な表記をしてきましたが、そもそも、それぞれのレイヤーに名前を付けない事自体が混乱を招く原因になります。
私は一人でデザイン〜コーディングまで作業する事が多いので、特に問題がある訳ではないですが、通常ウェブデザインというのはチームで作業したり、会社間でデータの受け渡しをする事が多いので、「誰が見ても」「わかりやすい」「レイヤー名」をつける事が望ましいと思います。