2013年10月13日ポートフォリオ2日目では、デザインをしていきます。見た目になってきますからね!結構重要になってきます。焦らずゆっくり、楽しみながらデザインしていきましょう。設計編)では、ワイヤーフレームを書いて行きました。そのワイヤーフレームをもとにし、今回はデザインしていきましょう。Fireworks、Photoshop、Illustratorなどのツールを作っていくのが一般的です。Cloudのメンバーになりましたら、月/3,000〜円からAdobeの製品を使えるようになります。今回はPhotoshopをメインに使ってデザインしていきます。イラストなどはIllustratorを使って書いていきます。ページのデザインロゴをデザインまずはロゴをデザインしていきましょう。http://www.welovelogo.com/ロゴをデザインするときの8つのルールロゴをデザインするときに使えるチュートリアル&テクニック30個まとめロゴ作成の手順を実例とあわせて紹介!各パーツを作る次にパーツを作って行きましょう!ロゴからパーツを作っていく方法もありますね!ヘッダー、コンテンツ、フッターヘッダー部分や、コンテンツ部分のデザインを進めていきましょう。(僕のポートフォリオでは、あまりパーツ部分がなかったのですが、、、)サイドバーがあるサイトなどでしたら、サイドバーなども!つまりパーツがあるところは全て作りこんでいきましょーう。背景があるデザインにする予定でしたら、ごりごりっとデザインしていきましょーい!パーツの配置なども調整して、トップページを仕上げちゃいましょう。ソーシャルボタンも配置。トップページの完成!下層ページも作って行きましょうAboutページAboutページのワイヤーフレームではこのように書いていました。こちらのページではプロフィール、自分のスキルを載せたいと思います。(内容についてはwebポートフォリオを制作する時のポイント、参考サイト、デザインを参照)デザインはこのようになりました。ヘッダー、フッターはトップページと共通です。スキルを表すときなどに、ツールのアイコンや、星のアイコンを使ってレベルを表してみるのがわかりやすいかなとおもいます。違う表し方もあると思いますが、今回はプロフィールに使えるアイコンを少しご紹介します。CS5のアイコンを忠実に再現しています。(PSD)星のアイコンです。(PSD)こちらは星ではなく、プログレスバーです。バーの長さでスキルレベルを表すのもわかりやすいかも!?PortfolioページPortfolioページのワイヤーはこのように書きました。サイトのスクーンショットをトップページ、下層ページ数枚、載せれるようにしたなーと思っております。デザインではこのようになりました。アイコンなどを使い視覚的にわかりやすいように。http://brankic1979.com/icons/350種類のアイコンセットです。小さくてもどれもクオリティが高くてたまらないです。http://365psd.com/day/2-209/こちらは160種類のメタリック風のアイコンセットです。ContactページContactページも同じようにデザインしていきましょー!!まとめWebポートフォリオ制作2日目はワイヤーフレームを見ながら、デザインしていきましょー。