ドリル式ホームページの作り方

素材を作成する

ドリル式ホームページの作り方TOP  >>  Lesson2〜CSSを使わない装飾〜  >>  素材を作成する

素材を作成する

グラフィックソフトを用意する

素材を作るためには何といってもグラフィックソフトが必要です。

グラフィックソフトはベクトルで描くドロー系ソフトと、ドットで描くペイント系ソフトの2種類あり、プロも御用達のAdobe illustratorはドロー系、Adobe photoshopはペイント系ソフトの最高峰です。

ドロー系ソフトはイラストを描くのには必須のソフトで、まず、紙に鉛筆で絵を書き、スキャナで取り込み、ソフトでトレースし、色を塗るというように使います。かっこいいロゴを作りたい場合など文字をいじる場合もこれの適応です。

ペイント系ソフトは写真を編集するのに効果的なソフトで、俗に言うお絵かきソフトです。点の集まりが画像を形成するため、拡大すると輪郭がカクカクしてしまいます。 よって、四角い画像でしたらOKですが、曲線が入る画像には不向きです。

これらのソフトは重いし、価格もかなり高いので、長く使うヒトにはこれ以上のものはないと思いますが、そのためだけの初心者さんには敷居が高いようにも思います。

そんな方には入門用として、photoshop elementsがお勧めです。価格が安い分機能が制限されていますが、初心者(管理人含めて)には十分すぎるほど高機能な上、基本はペイント系ソフトですが、簡単なドロー系機能も持っているので、お勧めです。

お金がないけどグラフィックソフトを使用してみたいというヒトには、市販ソフト顔負けの高機能ソフトである、

を使用するとよいでしょう。

イラストレーターで素材を作る

管理人は、illustrator CS2で素材を作っているので、それを例に素材作成手順を説明します(びっくりするほど当たり前のことを述べてるだけですけど・・・)。

イラストレーターを起動して、”T”のアイコンをクリックして文字を書きます。

初期設定ではMSゴシックで書かれてしまうので、フォントを変えて(ウィンドウがない場合は、画面上部のウィンドウタブをいじって文字ウィンドウを表示させてください。くわしくはイラストレーターの使い方参照)

フォントを変えたら、”作成講座”の部分だけを選択して塗りの色を変えます。

次は小さなブラウザ画面の作成です。見ればわかるとおり色の違う長方形を組み合わせただけですね。

このような細かくなる作業は画像を拡大してから行うのが効果的で、画像の移動はマウスでなくキーボードの↑↓←→を使って動かすとよいでしょう。

キーボードの方向キーで動く幅は、「編集→環境設定→一般→キー入力」で変更可能です。

最後に小さいブラウザ画像の部品をグループ化した後、文字と一緒に選択して、「整列→垂直方向中央に整列」でインデントを整えて終了です。 保存は、ファイルメニューからweb用に保存を選択して、こういったイラストのような画像はGIF(ジフ)形式で保存します。(写真はJPGで)

タイトルの下の長細いバーも作り方はいたってシンプルです。

角丸の長方形を描いた後に、塗りに90度の線形グラデーション、線には塗りよりも少し濃いめの色を設定して、白文字でwelcome to my homepageと打つだけです。

タイトルロゴの一部分に黄緑色を使ったので、色の統一を図る意味で、ここでも黄緑をベースに使用します。


Lesson2〜CSSを使わない装飾〜

  1. 素材を用意する
  2. 素材を作成する
  3. 画像を表示させてみよう
  4. リストを使う
  5. リンクを設定する
Copyright(C) ドリル式ホームページの作り方 all right reserved.