Photoshop Training – Twitter app Interface
今後の仕事のため&Photoshopのスキルアップのために、
GUIを模写しました。
ここのチュートリアルを見ながら。
Create a Clean Twitter App Interface in Photoshop | Psdtut+
模写は、予備校のとき以来な気がします。
ムサビの平面構成対策のために、
紅白歌合戦見ながら電球の絵を描いたのを覚えています。
今まで紙の仕事が多かったので、
Photoshop=写真のレタッチくらいしか作業していなかったのですが、
今回描画としていろいろ使ってみて、
Photoshopが全然分かっていなかったことが判明、
自分でもドン引きしました。
結局Photoshopに振り回されまくって、
トータル15時間半ほどかかってしまいました。。
手が速く動くよう、慣れなきゃです。
せっかくなので、今回模写して気づいたことをメモっておきます。
—
[Photoshop基本事項]
- ベクターのものをビットマップにすること＝ラスタライズ
- スマートオブジェクトは、拡大縮小しても画像が荒れない
レイヤー>ラスタライズ をかけると、
スマートオブジェクトがラスタライズされる
- 拡大 shift / 縮小 option
- チャンネルレイヤーRGBがはいってることを確認する
- レイヤーマスクの追加>レイヤーマスクチャンネルON
>マスクしたい部分を描画
(描画色がblackになっていることをちゃんと確認する)
- シェイプは先にボタン(合体、交差など)を押してから、描画する
[PhotoshopでGUIをデザインするときの注意点]
- レイヤーの数がハンパなくなるので、
描画したらすぐレイヤーに適切な名前を付けて管理する
- ノーマル時、マウスオーバー時のパーツは
Button> Normal, Hover 2フォルダに分けて入れておく
- 細かいパス描画があるときは、
Illustratorで描いてからコピペでPhotoshopに持っていくほうが早い
- 作業パスも名前を付けて管理、保存
- たまにエッジがきれいに選択されないときがあるので
「パス→選択範囲を作成→塗る」 より「パスの塗りつぶし」で
塗った方がエッジがきれいかも
- 何度も使うスタイルは登録しておく
[Twitter app Interfaceデザインのひみつ]
- ここぞとばかり、レイヤー効果を使う
ドロップシャドウ、シャドウ(内側)、光彩(外側)、光彩(内側)、
グラデージョンオーバーレイ、境界線 使用
- 1px単位の細かさ
- 細かいトーンのグレー色数が多い
- GUIのアウトラインは、ドロップシャドウと1pxの細い境界線でシメる
(3pxとか太いとヤボったい)
- 角丸の長方形は、2,3,5pxを使いこなしている（全て同じRな訳ではない）
- ツヤっとした表現は、大抵 「光彩(内側)、グラデージョンオーバーレイ」
- レタープレスエフェクトの多用
(文字がボコっと押された表現、ドロップシャドウを用いる)
- マウスオーバーのボタンは、普通のボタンより
グラデーションオーバーレイの透明度をあげて変化を付ける
- 使用fontの大きさ、11~18pt
—
2色平面のアイコンしか作ったことがなかったので、
今回ツヤっとGUIを模写してみてかなり勉強になりました。
