ホームページ素材の簡単な作り方

Posted by : Izumikawa Fukumi 2014年1月12日日曜日

今回はホームページ作成初心者さんの壁と言える「素材の作り方」について説明したいと思います。

　
　まず入門書などで習う事は用意されている素材を使って学習を進めたり、画像などを使わないシンプルなデザインでホームページを作り、学習を進める形が多いと思います。

　この場合、初心者さんは画像の作成方法など詳しくない為綺麗なホームページを作る事が出来ませんので今回は無料で、ある程度の画像が作れる様にお教え致します。

　早い話、画像編集ソフトをとかで作成すればいいのですが、そんな突き放した事はしたくないので私の作成方法を例にしましょう。決して私の作成方法は正しいとは言えませんが、私の中では今から説明する方法が一番作りやすいと思います。

対象者

OSがWindowsの方
画像作成・編集に興味ある方
自己解決出来る方

ソフトウェアを入手しよう

　まず始めに画像を作成・編集するソフトを入手しましょう。Windowsであれば付属の「ペイント」と言うソフトが既にインストールされていると思いますが、これでは力不足ですのでより力を持っているソフトをダウンロードしましょう。

[PictBear]無料ダウンロード

上記のURLからダウンロード後インストールして下さい。
インストール方法は割愛させて頂きます。

画像の基礎部分を作ろう!

　まず私が画像を作成する時は基礎部分を作ってから色などグラデーションなどの効果を付けて行きます。始めはWindows付属の「ペイント」を使って基礎を作成して行きます。

では、今回は例として「クリスタル」みたいな物を作って行きましょう。

まず始めに「ペイント」の[新規]で新しい「土台?紙?フィールド?」を用意して下さい。

サイズはペイントの下のバーを見れば分かるのですが、

の様にして下さい。

これは幅70px高さ90pxと言う意味です。

画像の基礎を説明すると、

幅が[x]で高さが[y]です。[0,0]は[x,y]共に[0px]の位置の事です。
PCに関してはこれが位置のルールとなります。

ではこの「紙?」に実際に基礎となる部分を書いていきましょう。

私は上の画像の様に図を書きました。「画像はクリックしたら拡大します。」
赤い枠で囲まれている物だけ使いました。
線の太さは1px(一番細い)物にして線を描いて下さい。

ではそっくりそのまま同じ物を作りたいのであれば先ほど教えた[x,y]の数値でお教えします。

[34,2]->[10,45]->[34,88]->[58,45]->[34,2]
これで、ひし形が出来たと思います。
次に、
[27,30]の位置から各角の[34,2][10,45][34,88][58,45]へ線を引きます。