サイトの構成。

新しく作るサイトは、ポートフォリオになるので、中心になるコンテンツ項目の明確化。

まず、基本のトップページ。
次に、絵や制作物を配置するギャラリーページ。
そして、このブログへのリンク。
最後にその他、プロフィールや連絡先をのせるページ。

と、大きく分けて４つのコンテンツを作れば形になる予定に。
トップページはデザインに強い人のページの造り、一目見てガツンと来る個性的な構図、画像、動画は置かない。入りは、シンプルな形が良いかなと思う。
個性や、作り手のオリジナリティーは、ほっといてもそのサイト全体からにじみ出ていた、が理想。
文章で構成されてるだけのブログでも、人それぞれで違いが出る。独特の切り口、考え方がブログを見る人をより惹きつける、魅力になっているのだろう。

自分は文章で我が強く出る、押さえ気味に書かないと…。

猫のかたち。

Illustratorで作成したネコ。
顔、胴体、足、尻尾パーツを作り重ね順でパーツの前後を調整。

右は、バラしたパーツと表情が違う猫の顔。
各パーツに分けたのは、Flash動画用で動きをつける時、各パーツの動きをずらしたいため。
猫の歩く動きを作ると足の動きだけでは不自然になったので、頭と胴体を上下にずらして動かすと、より自然に近い？猫の動きとして違和感の少ない形になりました。

このブログについて

webページ作成の作業工程を部分的に公開していくブログです。
個人的な作成記録とメモの様な形で進んで（途中で挫折しつつ）いきます。

作り手の性質上、Webページの作りはHTML、CSSよりも、デザイン、サイト用画像加工を
重視する予定となっています。

作成したページは、公開できる段階になったらリンクを貼り、このブログも、できたwebサイトの一部として吸収されたり、再び切り離したりもします。

イラストレーター。

Illustratorで作成。マウスで絵を描くのだと、今はこれくらいが限界かな。

塗りや、主線をはぶいてざっくりと雑に。
きっちり塗るとIllustratorで描いた意味が薄れる気がする。

しっかり塗った画像や、追加の効果が欲しいなら、線画をPotoshopに持って行って加工するのが早いと思うし。

Illustratorは線と塗り、パス、アンカーポイントの塊を理解すれば
もっと面白い物が作れそうなんだけど。

Illustratorの強みは、ベジェ曲線にベクター画像方式。Flash動画作成のパーツ作りが楽。
WEBサイトページ内なら拡大、縮小で劣化させたくないシンプルなボタン、軽めの画像に利用。

どうしてもPotoshopの方が使用頻度が高めになるだろうけど、Illustratorでしか表現できない部分
で、そこを使う、使わないの差が大きく出る。
つまり、Illustratorでサイト作りの幅が広がる、って事になってる、と自己理解。

チェック柄再び。

今回は斜めにした柄を増やしてみよう。
用意するのは横の柄模様。
今回のサイズは５０ｘ５０ピクセルのパターンを用意。

１００ｘ１００のカンバスにそのパターンの塗りつぶし。

左のこれを全範囲指定、変形を選び回転４５度に設定。

これで右の図形になります。

後は、この斜めになった部分を連続貼り付けでも歪みのない物にするには？。

カンバスサイズを１００ｘ１００から７０ｘ７０にサイズ変更。

基準位置は中心部にすると、左の形になりこれで完成。

この形が、斜めチェックの基本になります。

パターン登録して７０の倍数サイズに指定にすれば

綺麗な斜めのチェック柄ができる…はず。

　　　　　　　　　右は１４０ｘ１４０サイズの完成例です。

仮トップのスクリーンショット。

やはり時計の部分で文字が見ずらいな…。
ヘッダー部分の画像は今後変える予定なので、文字色と画像色のバランス、配色の失敗例として、この状態を保存。

仮のトップ背景画像。

貼り付けた物の、横の長さがいまいち。
ブログ説明文の所に時計が重なり、文字が読みにくい。

画像自体にタイトルと文をつけてみて、全てを画像一枚に収める方法もあるけど、頻繁にタイトル、説明文を変える人には不向き。…まあ、ヘッダーのタイトル、説明文を何回も変える事は無いと思うけど。
ヘッダーのタイトル、背景画像部分はブログの看板だし、そこを変えるなら、季節や、記念日とかかな。
イラストや、写真など画像関係に強みを持ってるなら、複数のタイトル背景画像をランダム表示とか多いよなぁ。

ファビコン変更。

ファビコン変更設定用のスクリプトが新しいためなのか、OSがXPのPCでは変更できず。
新しいPC、Win７の方で変更できた。
ファビコンが変わるまでは、少し時間がかかる様子。

しかし、XPに慣れてるから、７使いずｒ…。

名刺用台紙。

イラストレーターで作成。
多くは、使えそうな形のシンボルを加工した物。

シンボルのリンク解除後に拡大、縮小や色を変える。
形がシンボルのままなので、一部分のパスを変形させたり、他のパーツとパスファインダで合体などをさせて完成。

手順ごとに、重ね順を変えたり、こまめにグループ化をさせたりすると、パーツ移動やコピペの時混乱せず、作業効率がアップするかな？。

背景画像。

フォトショップで作成した緑のギンガムチェック柄を背景に使用。
基本の部分は
左上、原色を薄くした色　右上原色
左下、白　　　　　　　　　　右下原色を薄くした色（左上と同色）

で完成。
パターン登録しておけば、パターン塗りつぶしで、びっしり敷き詰めたり、部分の枠利用にも使えそう。

色調補正で色を変えたり、布っぽく見える効果を追加させ、少し違う物の量産が可能に。

画像貼り付け。

フォトショップとかのレイヤー上では透明扱いに似せたパターン。

色のついた四角をコピーした後、左方向にカンバスサイズを幅、高さ二倍変更。
左下に色有りの四角をコピー貼り付け。
以上。

色、薄いね。

何から作る？。

オリジナルの画像。
ブログ用の背景画像やらタイトル部分に入れる画像も考えると、サイト自体の色の統一感
基本デザインのテーマを明確にもたないと。あー、すでにやること見失ってるや。

このブログは作業工程の進みと、確認など。
変にいじって失敗しても、それはそれで、ブログでは良いネタになるし。

まあ、いいや。

結局、ブログの設定は後回しに。
サイト公開する時に使用する画像、背景やパーツを作っておいて。
それをブログ上での画像貼り付けの練習、テストに使用する、流れで。
フォトショップとイラストレーターを起動。

あ、このブログ用ファビコン作り。

テスト。

まずは、ブログの設定やらを整える。
のが先決かなー。