「Photoshopについて」の版間の差分

提供:Wiki@KDS
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の4版が非表示)
1行目: 1行目:
<div id="manual">
<div id="manual">
効率化のため、psdファイル作成にもルールを設けています。<br>
効率化のため、psdファイル作成にもルールを設けています。<br>
誰がファイルを触ってもスムーズに作業できるようなファイルにしましょう。
誰がファイルを触ってもスムーズに作業できるようなファイルにしましょう。<br>
→[[デザインガイドライン]]


==必須ルール==
Photoshopを使用するにあたり、下記のルールは必ず守ってください。


==必須ルール==
<div class="example">
<div class="example">
(1)レイヤーは'''エリア単位で移動'''できるように、エリアごとに「フォルダ」を区切ること。
'''(1)レイヤーはエリア単位で移動できるように、エリアごとに「フォルダ」を区切ること。'''<br>
→移動とコピーの効率化のためです。特に追加修正のときの効率を考慮してます。
</div>
</div>
 →移動とコピーの効率化。特に追加修正のときの効率化を考慮してます。<br>
 
<div class="example">
<div class="example">
(2)フォルダの色分けは、しないこと。<br>
'''(2)フォルダの色分けはしない。(マウスオーバーは除く)'''<br>
→色をつけることで煩雑になりやすいため。<br>
(マウスオーバー時はコーダーが理解しやすいように当該フォルダを「赤」にする。<br>
</div>
</div>
 →色をつけることで煩雑になりやすいため。(但し、マウスオーバーの場合はコーダーが理解しやすいように当該フォルダを 「赤」にするのを推奨)<br>
 
<div class="example">
<div class="example">
(3)ガイドは'''500%'''に拡大した上で'''シフト押しながら引く'''。<br>
'''(3)ガイドは500%に拡大した上でシフト押しながら引く。'''<br>
→吸着がズレないようにするため。
</div>
</div>
→吸着がズレないようにするため。<br>
 
<div class="example">
<div class="example">
(4)テキストの場合、スペースで間隔を取らない。<br>
'''(4)テキストを入力する際、スペースを使っての間隔調整はしない。'''<br>
→移動や修正の際に調整するのに手間がかかるため。<br>
</div>
</div>
→移動や修正の際に調整するのに手間がかかるため。<br>
【ダメな例】和菓子  洋菓子<br>
               ↑ここはスーペースで間隔を取らない。やるならば別のレイヤーに分けること。<br>


<div class="example">
<div class="example">
(5)テキストはテキストボックスを指定して流し込む。そのとき、禁則処理は「'''弱い禁則'''」に設定すること。<br>
'''(5)テキストは「テキストボックス」の形で流し込む。禁則処理は「弱い禁則」に設定する。'''<br>
→折り返しに対応できるようにする。また、コーディングのためにも。
</div>
</div>
→後で改行するほど文章量が増えても大丈夫なように。


<div class="example">
<div class="example">
(6)ファイル名の後ろには、「本アップ日」に入れる。<br>
'''(6)ファイル名を保存するときは、一番後ろには「本アップ日」に入れる。'''<br>
→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。<br>
【例】産地直送グルメ便TOP_070304.psd
</div>
</div>
→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。【例】産地直送グルメ便TOP_070304.psd


==photoshop:推奨事項==
==推奨==
効率化のためにできたら守ってほしい項目です。
 
<div class="example">
<div class="example">
(1)マスクはレイヤーにではなく、フォルダにかけるのを推奨。特に写真の場合はこれは守ること。<br>
'''(1)マスクはレイヤーにではなく、フォルダにかける。'''<br>
→フォルダにかけると修正時に楽です。<br>
</div>
</div>
 →更新の効率化。枠線がないときに画像サイズの把握がしやすい。<br>
 
<div class="example">
<div class="example">
(2)透明化は極力しない。【例】背景レイヤーの「透明10%」など<br>
'''(2)透明化は使わない。'''【例】背景レイヤーの「透明10%」など<br>
→コピーなどして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。<br>
</div>
</div>
 →コピーして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。<br>
 
<div class="example">
<div class="example">
(3)統合が可能なものは統合する。<br>
'''(3)統合が可能なものは統合する。'''<br>
→統合しても問題ないところは統合する。レイヤーが増えすぎないようにする。<br>
</div>
</div>
 →統合しても問題ない箇所、または、選択範囲で選択できるところは統合してもよい。レイヤーが増えることによる複雑化と重さの解消。<br>
 
<div class="example">
<div class="example">
(4)レイヤーに対して、「ドロップシャドー」は極力利用しない。(例外:写真や文字)<br>
'''(4)テキストの段落は「左寄せ」「弱い禁則」の設定にする。'''<br>
→文字詰めに間隔が生まれてしまう。コーディングとの見え方と差異が出る。<br>
</div>
</div>
 →枠やパーツなどで使用すると意図しない"はみ出し"やコピーする際に小さな問題が起こりやすいため。<br>
 
 →ドロップシャドーは拡大/縮小に未対応なため。<br>
<div class="example">
<div class="example">
(5)テキストの段落は「左寄せ」「弱い禁則」で。<br>
'''(5)レイヤー間、フォルダ間のリンク機能は使わない。'''<br>
→リンク機能を使うことで、余計なレイヤーが動いてしまうことがある。他の人が多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。<br>
</div>
</div>
 →文字の詰めに間隔が生まれる。HTMLの見え方と差異がでる。<br>
 
<div class="example">
<div class="example">
(6)テキスト:段落タブにある、テキストボックスの「マージン指定」は使用しない。<br>
'''(6)レイヤーの「ロック」は使わない。'''<br>
→編集のときに手間になることがあるため。<br>
</div>
</div>
 →便利な機能だが、次回Textフォームを作るときに値が残り、直す手間がかかる。<br>
 
 →フォームエリアを明確に指定した方が混乱しない。レアケースを回避などなど。<br>
<div class="example">
(7)レイヤー・フォルダの「リンク」は最低限にとどめる。<br>
</div>
 →リンクが多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。<br>
 →CS2だとレイヤーの複数選択が可能なので、この問題は解消されるが…<br>
<div class="example">
(8)レイヤーに「ロック」はかけない。<br>
</div>
 →レイヤーの「ロック」は基本的にしない。※修正時、コピーしたり編集する際にロックを外す手間を考慮。
<div class="example">
(9)ファイル名は基本的にhtmlの<title>タグと同じものを使用する。<br>
</div>
 →ただし、タカシマヤと入っているタイトルについては省いてもOK。また、長いものも省いてOK<br>
 【例】「タカシマヤ京都スタイル」→「京都スタイル_080304.psd」<br>
<div class="example">
<div class="example">
(10)不要なレイヤーは削除。<br>
'''(7)不要なレイヤーは削除する。'''<br>
→ファイルの軽量化。レイヤーを消すのが不安な方はバックアップしましょう。
</div>
</div>
 →複雑化を抑え、わかりやすくするため。ファイルの軽量化。「また使うかもしれないのに…」とレイヤー消すのが不安な方は、そもそものpsdを別にバックアップしてください。




==Photoshopアクション一覧==
==Photoshopアクション一覧==
効率化のため、ファンクションキーにアクションを仕込んであります。


<div class="example">
[F2]RGB変換+解像度72dpi<br>
[F2]RGB変換+解像度72dpi<br>
[F2+S]<br>
[F2+S]<br>
114行目: 114行目:
<br>
<br>
[F8]横300px変換<br>
[F8]横300px変換<br>
[F8+S]横48px変換(セレクションサイズ)<br>
[F8+S]横48px変換<br>
[F8+C]横100px変換<br>
[F8+C]横100px変換<br>
[F8+SC]横600px変換<br>
[F8+SC]横600px変換<br>
137行目: 137行目:
[F12+C]右移動5px→<br>
[F12+C]右移動5px→<br>
[F12+SC]左移動5px←<br>
[F12+SC]左移動5px←<br>
 
</div>


</div>
</div>

2012年4月26日 (木) 12:51時点における最新版

効率化のため、psdファイル作成にもルールを設けています。
誰がファイルを触ってもスムーズに作業できるようなファイルにしましょう。
デザインガイドライン

必須ルール[編集]

Photoshopを使用するにあたり、下記のルールは必ず守ってください。

(1)レイヤーはエリア単位で移動できるように、エリアごとに「フォルダ」を区切ること。
→移動とコピーの効率化のためです。特に追加修正のときの効率を考慮してます。

(2)フォルダの色分けはしない。(マウスオーバーは除く)
→色をつけることで煩雑になりやすいため。
(マウスオーバー時はコーダーが理解しやすいように当該フォルダを「赤」にする。

(3)ガイドは500%に拡大した上でシフト押しながら引く。
→吸着がズレないようにするため。

(4)テキストを入力する際、スペースを使っての間隔調整はしない。
→移動や修正の際に調整するのに手間がかかるため。

(5)テキストは「テキストボックス」の形で流し込む。禁則処理は「弱い禁則」に設定する。
→折り返しに対応できるようにする。また、コーディングのためにも。

(6)ファイル名を保存するときは、一番後ろには「本アップ日」に入れる。
→管理上の約束事。また、ファイル検索時に本アップ日を参照して探すため。
【例】産地直送グルメ便TOP_070304.psd

推奨[編集]

効率化のためにできたら守ってほしい項目です。

(1)マスクはレイヤーにではなく、フォルダにかける。
→フォルダにかけると修正時に楽です。

(2)透明化は使わない。【例】背景レイヤーの「透明10%」など
→コピーなどして繋ぎ合わせるときに、重ね合わせた部分の色が変わってしまう。

(3)統合が可能なものは統合する。
→統合しても問題ないところは統合する。レイヤーが増えすぎないようにする。

(4)テキストの段落は「左寄せ」「弱い禁則」の設定にする。
→文字詰めに間隔が生まれてしまう。コーディングとの見え方と差異が出る。

(5)レイヤー間、フォルダ間のリンク機能は使わない。
→リンク機能を使うことで、余計なレイヤーが動いてしまうことがある。他の人が多すぎると移動の際、関係ないところが動き、それを突き止めるのに手間がかかる。

(6)レイヤーの「ロック」は使わない。
→編集のときに手間になることがあるため。

(7)不要なレイヤーは削除する。
→ファイルの軽量化。レイヤーを消すのが不安な方はバックアップしましょう。


Photoshopアクション一覧[編集]

効率化のため、ファンクションキーにアクションを仕込んであります。

[F2]RGB変換+解像度72dpi
[F2+S]
[F2+C]
[F2+SC]新規ファイル→画像化【印刷前】

[F3]選択範囲★白での塗り潰し
[F3+S]【text】黒#000000
[F3+C]【text】白#FFFFFF
[F3+SC]【text】赤#FF0000

[F4]選択範囲★描画色での塗り潰し
[F4+S]【text】黒#333333
[F4+C]【text】青#0000EE
[F4+SC]

[F5]レイヤー削除
[F5+S]<選択範囲>1px縮小↓
[F5+C]<選択範囲>1px拡大↑
[F5+SC]レイヤー or フォルダを(部分的に)抽出

[F6]レイヤーコピー
[F6+S]GIF-256色 書き出し
[F6+C]JPG-80 書き出し
[F6+SC]JPG-100 書き出し

[F7]印刷68%出力(1200pxまでOK) [F7+C]
[F7+C]
[F7+SC]印刷(紙に合わせる)出力

[F8]横300px変換
[F8+S]横48px変換
[F8+C]横100px変換
[F8+SC]横600px変換

[F9]オブジェクト90%縮小
[F9+S]オブジェクト50%縮小
[F9+C]<文字>2pxの境界線(白)
[F9+SC]

[F10]アンシャープマスク(20%,0.2px)
[F10+S]ドロップシャドー(12%)
[F10+C]彩度up(彩度+6)
[F10+SC]明度up(明度+5)

[F11]アンチなし テキスト
[F11+S]新ゴM
[F11+C]リュウミンB
[F11+SC]

[F12]下移動5px↓
[F12+S]上移動5px↑
[F12+C]右移動5px→
[F12+SC]左移動5px←