保志光司のメモブログ

誕生日という名の大反省会2

Sun, 11 Dec 2016 17:04:38 GMT

一年ぶりに更新する。社会人になって二年と八ヶ月。
兎角忙しかった。貴重な経験も、非道い経験もした。
それらと一緒に今年も成長したことや抱負を書面に起こすことにする。

誕生日という名の大反省会

Thu, 10 Dec 2015 15:00:00 GMT

久しぶりにブログを書く。気付いたら社会人一ヶ月目の記事を書いてからそれきりになっていた。
今はもう社会人二年目。正確に言えば一年と八ヶ月目。思い返すと驚くほど成長したような、何の進歩もしていないような、そんな気がする。

誕生日は丁度いい節目だ。一年前、一つ年下の自分に胸を張れるような行いをしてきたか。尊敬されるような成長を遂げたか。報われるようなことがあったか。年下の自分、という基準で反省しやすい。いつもは布団の中で考えるが、今日は書面に起こして反省してみようと思う。

つづきはこちら

※ブログうつします

Sun, 13 Jul 2014 09:24:07 GMT

ワードプレスでブログ作ったので、技術系のことはそちらに移そうと思います。
http://record.wp.xdomain.jp/

こっちは完全に私用のブログにします。

社会人一年生一ヶ月を過ごして

Sat, 10 May 2014 19:47:12 GMT

早いことに社会人デビューをして一ヶ月が過ぎた。仕事の内容や流れがなんとなく分かってきて、先輩方に怒られながらも作業をする日々を過ごしている。凹んだり落ち込んだりすることも多々あるが、仕事自体はとても楽しい。
以下、だらだらと長文。

つづきはこちら

気が付いたこと＠Photoshopに付記

Sat, 10 May 2014 18:40:51 GMT

会社で先輩デザイナーから色々教わったので、前回の記事に関連したことをば。

ガイドを引く＋

ピクセル単位で厳密に行うには、Shiftキーを押しながらドラッグ＆ドロップすれば良い。
ただし、文字入力モードが日本語になっているとShiftキーが効かない模様（CS5で確認）。
半角英数になっていることを確認して作業する必要がある。

レイヤースタイルの活用＋

光彩(外側)、ドロップシャドウの他に「境界線」というものがあり、これを使えば縁取りを簡単につけることができる。ただしデフォルトの設定(線の描画：外側)だと角丸処理になる。くっきり角のある境界線を所望する場合は外側ではなく内側に設定しなおすことを奨める。
因みにオブジェクトを一番内側に、境界線、光彩(外側)、ドロップシャドウと外に向かって効果が発揮されるので、オブジェクトを白で囲んでさらにそれを黒い線で囲んでイラスト風に仕上げる際は効果が適用される順序を考えて色等設定する必要がある。

気付いたこと＠Photoshop

Sat, 08 Mar 2014 10:10:31 GMT

ガイドを引く

Fireworks同様、表示した定規部分からドラッグ&ドロップでガイドが引ける。ガイドの移動は移動ツールの時のみ行える。だがピクセル単位で厳密に行えないという点ではどうしてもFireworksに劣る気がする。

レイヤースタイルの活用

テキストについて、Photoshopでは線と塗りの概念がないので縁取りを簡単に行うことができない。しかし光彩(外側)もしくはドロップシャドウを活用することで実現は可能。
手っ取り早いのは光彩だが、細かい調整が必要な場合はドロップシャドウの方が良いと思われる。

また、与える効果ごとにオーバーレイや焼きこみ等が設定できるため、色々組み合わせてみると思いもよらない表現が見つかる場合がある。特に効果の面積が重なる場合は顕著である。例としては光彩をオーバーレイ、ドロップシャドウを焼きこみカラーにする、など。

レイヤースタイルとそのラスタライズ

Sat, 08 Mar 2014 09:57:36 GMT

Photoshopのレイヤースタイルは、１つの効果につき１回しか掛けることが出来ない。
例えば、テキストに角度のついた縁取りを入れるためにドロップシャドウを掛けて、さらに影を落とすためにドロップシャドウを掛ける…といったことは不可能である。

もし重複した効果を与えたい場合は、レイヤースタイルのラスタライズを使用する。
そのあとにレイヤースタイルを付与すれば問題は解決する。

しかし、レイヤースタイルのラスタライズを行うとテキスト等も一緒にラスタライズされてしまう。バックアップとしてレイヤーを複製しておくか入念なチェックの後行う必要がある。

Photoshopで一部分だけカラーの画像をつくる

Tue, 18 Feb 2014 19:23:34 GMT

株式会社LIGさんの記事
某CMのような一部分だけカラーの画像を作成する方法

変換やヒストリーブラシ、レイヤーマスクがめんｄ…いや、使用頻度が低く使いづらいので、自分が良く使うツールだけでやってみた。

レイヤー１枚で一部分だけカラーの画像をつくる

一部分だけカラーにしたい画像をPhotoshopで開く。
元画像ではなく、新規作成したファイルにドラッグ&ドロップするといいかもしれない。
スマートオブジェクトとして配置してくれる。
画像の上に新規レイヤーを作り、白で塗りつぶす。
元画像を開いた場合は背景の上にレイヤーが来てレイヤー数は２枚となる。
ドラッグ&ドロップの場合は背景とスマートオブジェクト、新規レイヤーで計３枚。
レイヤーモードを「彩度」に変更。
これで画像は白黒状態となる。レイヤーをオフにすれば画像はカラーのままだ。
カラーにしたい部分を消しゴムツールで消していく。
消しゴムで塗りつぶした白を取り除くと下にある画像の生の色が見えるようになる。
失敗したらブラシを使って白を塗り足せばOK。

以上で終了。簡単だし、レイヤーマスクとは普段縁がなくてもサクッと作れて便利。元画像を直接弄ることはないので、別な箇所で完全カラーのバージョンを使う時などにも重宝すると思う。
また、この方法を使えばクリッピングマスクなどで幅広く応用が効くのではないだろうか。

リストタグで縦レイアウトのナビをつくる

Sun, 16 Feb 2014 19:32:06 GMT

リストの奇妙なインデント

リストを使うと自動的にインデントされる。便利といえば便利だし親切なのだが、作成したdivからはみ出るぐらいインデントされると溜め息をつきたくなる。
授業でmarginに負の値をいれて（ネガティブマージンってやつですか？）対応していた記憶があるのだが、なかなか気持ち悪い。リストへのヘイトがどんどん増えていく。

ulに色々指定してあげよう

ナビゲーション用にdivを作ってあって、なおかつそこにリストしか入らない場合に以下のように位置調整できることがわかった。他の条件下でどうなるかは未検証だからホショウはできない。
取り敢えず、ulタグをガッチリ指定で固めてあげる方法である。

ボックス > Width等を指定。
どのぐらいの高さになるか分からない場合はWidthだけ入れておく。
paddingを上下左右全て指定。
0なら0で全部指定してやる。上と左を0にすればビタッとdivの内側についてくれる。
marginは0で。
別段marginは指定しない。

今回はdivの幅がリストの幅より大きかったが、多分divの幅とリストの幅が同じでもいけると思う。
あの余計なインデントはpaddingだった…ということなのだろうか。よくわからない。解決すればいい。終わりよければ全てよいのだ。

ボックスシャドウを使う

Sun, 16 Feb 2014 19:10:26 GMT

コリスさんの記事
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
HTMLクイックリファレンス
box-shadow …… ボックスに影をつける

以上のページを参照すれば、新しめのブラウザであればボックスシャドウを付けることができる。
また、どの順番でどんな要素を指定するか把握できれば思い通りに弄れるはず。

少しやってみて思ったのは、水平・垂直方向をそれぞれ０に指定したとき、垂直方向はボックスのやや上気味に設定されているような気がした。
なので、上下左右均一にシャドウが出るようにしたい場合は僅かに垂直方向の値を正に入れて下げてあげると良い塩梅になると思う。