初めてPhotoshopでモックアップ作ったメモ
最近web制作をやってる会社で働くことになりまして、僕はあまりフロント側の人間ではなかったのだけど、案件をボーンといただいてしまったのでとりあえず最初は手順をまとめながらやってみようと思います。
デザインするときのフローをまとめておきながらやって、自分なりのWebサイトのデザインフローを作っていければいいなぁと思ってます。
今回はもう完成しているサイトの１ページに、新しく項目を追加するって感じの比較的ライトな感じです。
ライトなんですが、何しろデザインわからんすぎて。。。がんばります笑
いざ。
参考にさせていただいたサイト
めっちゃ初心者に優しいです。いちから一通りチュートリアル的な形でデザインできる。
Web屋のーりー » WebデザイナーとPhotoshop【前編】 君はいかにしてPhotoshopをWebデザインツールとして用いるか？
ここも、丁寧にワイヤーフレームからモックへの落とし込みの手順をまとめてくださってる。
イメージを膨らませる
まずはここから。
作るWebサイトのコンセプトに合ったサイト、デザインを物色してイメージを固めていく。
いくつか候補をクリップしておく。
サイト全体のスクリーンショットはこれが使える。
Full Page Screen Capture - Chrome Web Store
デザインしていく
ほんとにPhotoshopの基礎の基礎から学びながら少しずつ作っていく。
Photoshopもたかがツールなので、慣れれば使えるようになるはず（むずいけど。。。笑）
めちゃくちゃ基本的なことは以下サイトが参考になる。
これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ
ちょっとテクニック的なとこではここあたりを参考にさせていただきました。
PhotoshopでWebサイトのデザインをしよう | Webクリエイターボックス
そのほか参考になった記事
そのほかにもWebサイトデザインをする上で参考になった記事たち。
デザインは8の倍数でできている｜1 pixel｜サイバーエージェント公式クリエイターズブログ
さいごに
Photoshopとかのデザイン系には苦手意識を持っていたけど使っていけば、結局はツールなのでなんてことはない気がした。まだまだ理解は全然足りてないけど、とにかく使って、慣れていくしか結局道はないなぁと。
でもフォトショ思ったより楽しい！！
