新米webデザイナーおつぶのメモブログ

未経験からwebデザイナーを目指す人へ

【photoshopの使い方〜参考〜】web制作会社で初めてのカンプ作成

-----

 

現在、webデザインを勉強し始めて4ヶ月目のおつぶです。

 

未経験で入ったweb制作会社ではじめて任された仕事、それはECサイトの運用でした。

言うなれば、それはほとんど作業です。言われた通りにCMSのやり方を覚え、更新する日々。

たまに素材が送られてきて、カンプを1ページ作ってと言われるぐらい。

 

ということで、まずwebデザイン初心者はカンプを作れるようになるべきだと思います。

私は全くの未経験から始めたので、(一応スクールには1ヶ月通いました)photoshopillustratorも全く使えませんでした。HTMLとCSSjQueryの知識がちょっとあるくらい。

具体的に言うと、長方形の作り方すらよく分からない。

もちろんマスクの仕方も直線の引き方も分からない。

そんな状態で、よくもwebデザインをやりたいなどと言っていたなと感心します。

 

ということで、初心者はまずカンプを作ってみるといいと思います。

カンプ(モックアップとも呼ばれています)の作成とは、photoshopで画像やカラーを使いながら実際のサイトの見た目だけを作っていく作業です。

できれば先輩方が作った現場のカンプを引っ張り出してもらい、同じようにイチからphotoshopを使いながら作ってみることをおすすめします。

もしくは、お気に入りのサイトを見ながら素材を勝手に保存して見た目だけを作ってみるとか。

 

そうすると、先輩方から初めての洗礼を受けることになると思います。

下記に私が注意されたことをメモしておきます。

ぜひこれをカンプ作成の参考にしてみてください。

 

◼︎マスクのかけ方を覚えなさい

◼︎ショートカットキーをさっさと覚えなさい

◼︎マージンが1pxズレたらおわりです

◼︎レイヤーを常に整理しなさい

◼︎ベクトルスマートオブジェクトについて調べなさい

◼︎カラーオーバーレイを使いなさい

 

他にも沢山ありますが、これらは当たり前の当たり前の当たり前です。

次回からそれぞれ細かく解説してみようと思います。

 

-----

--