Photoshop Training – Twitter app Interface

PhotoshopTraining_1

PhotoshopTraining_2

 

今後の仕事のため&Photoshopのスキルアップのために、

GUIを模写しました。

 

ここのチュートリアルを見ながら。

PhotoshopTraining_3

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を模写してみてかなり勉強になりました。