第４回 アイコンを作ろう|
さて今回はアイコンの作成にはいっていきましょう。と言っても、壁紙と同様、 絵を描いてＧＩＦ形式で保存・・・ということに変わりはありませんので、 と〜っても簡単です。 では、作成していきましょう。 まずは簡単なところで、「お手紙マーク」を作ってみましょうか。 「感想をメールでおくってください」みたいな横に、ちょこんっと張り付いて いる手紙のマーク、良く見かけますよね〜？あれを作ってみましょう。 基本的にサイズはいくつでも構いません。ただ、どんな用途で作成するのかを 考えれば、自ずと、大まかなサイズは決まってきますよね？ 今、作ろうとしているのはメールアドレスを記載している脇に置く、ちょっと したワンポイントということでしたね。 無くても構わない、このテの「ワンポイント」的な素材は、「表示する速度」 という観点から見たら、本当は使わないほうが良いのです。 しかし、このようなワンポイントを効果的に使うと、ぐっと引き締まってきて 「見やすさ」「読みやすさ」「ひきつけられる」等の観点から見ると、重要な ものだったりしますよね〜。 前置きが長くなってしまいましたが、今回は３０×２０ピクセルで作成してい くことにします。 もちろん、もっと小さくっても、もっと、大きくっても、構いませんよ。 ただ、あんまり小さいと「これは何？」っていうことになっちゃったりします のでご注意〜。 では、３０×２０ピクセルの新規キャンバスを用意します。 ここに手紙の絵を描いてみましょう。 でもなんだか小さくって描きにくいですね。 そういうときには、お絵かきツールにある「拡大」という機能を使います。 拡大と言っても実際のサイズを大きくするわけではありません。 虫眼鏡でキャンバスを覗く感じと言えばわかるでしょうか？ とにかく虫眼鏡で大きくした画像を見ながら、点で塗りつぶしていくかたちに なります。まあ、サイズも小さいので、がんばってみてください。 まずはキャンバスいっぱいに四角を描くところから始めましょう。 私はこんな風にできあがりました。  拡大させたものも載せておきましたので、参考にしてくださいね。 出来あがったら、適当な名前をつけてＧＩＦ形式で保存します。 さて、さて・・・。 これで、お手紙マークのアイコンが完成しました！ え？なんだか、手応えがないって？ それじゃあ、もうひとつアイコンを作っちゃおうかな〜。 では、新規キャンバスを１６×１６ピクセルで作成してみましょう。 この大きさで、メニューなどの項目の頭についている画像を作っていくことに します。 作成の方法は、手紙マークと同様です。 私はこんな感じのものを作成してみました。  皆さんも、自由にサイズを設定して、思い思いの画像を作成してみてください ね。 ここで、保存・・・といきたいところですが、ひとつやり残したことがあるの にお気づきの方はいますか？ そうです。透過処理です。 先ほど、作成したお手紙アイコンは３０×２０ピクセルいっぱい、いっぱいに 絵を描いたので、必要ありませんでしたが、今回は不ぞろいな形になっていま すので、バックにどんな色をもってきても良いようにするには、バックの色を 透過させなくてはなりません。 このとき、注意しなくてはならないのが、透過する色の設定です。 透過する色は描いた絵の中で使用している色は使うことができません。 バック以外の場所まで、透過しちゃいますものねー。 透過処理をする前に、使っていない色を指定して、バックを塗りなおしてあげ ましょう。 ちなみに現時点で保存して白以外のバックでこの素材を表示してみると、 [黒いバックで表示してみました] こうなります。 透過処理を行います。 透過の方法については、大変だとは思いますが各自でお使いのソフトウェアの マニュアルやヘルプを読んだりして学んでくださいね。 透過処理を行ったら、いつものように保存してみましょう。 白いバックでも、 黒いバックでも、 ちゃんと見ることができましたか？ ということで、皆さんも保存したらバックの色を変えて、ブラウザで確認して みましょうね。 さて、どんなユニークなアイコンが出来あがったのでしょうか〜？(^o^)／ 今回作成したのはアイコンでしたが、サイズを変えて用途を考えながら作成す れば、罫線やバナーなどにも大変身します。 いろんな素材を沢山作ってみてくださいね！ 次回はこの透過処理をふまえて、もうちょっと突っ込んだお話をするつもりで す。
|
素材のサイズ 今回の講座までの内容で、ホームページなどで見かけるほとんどのGIF形式の素材を作成することができます。 いろいろな素材を作成する為に、各素材のサイズを検証してみましょう。 ■アイコン もちろん、使う場面によってサイズは変わってきますが、２０×２０くらいのサイズだと、沢山の場面で活躍できそうですね。 ３２×３２で作成すれば、Windowsのデスクトップにも応用できます。（ペイントで拡張子をicoで保存すればアイコンとして使用できます） ■バナー 私がはじめて極楽法典のバナーを作成しようとしたときに、ＩＥやネスケのバナーのサイズを調べてみたところ、そのサイズは８８×３１ピクセルでした。 このあたりのサイズで作成しておけば無難なセンなのかな？と思い、今もこのサイズで作成し続けています。 かなり小さいサイズですので、この中に自分のページのタイトルとその雰囲気を表現するのは、かなり難しい作業になってきますが、「リンクをはってあげよう！」とする方々の視線で、デザインや表示速度等という観点で見ていくと、このくらいのサイズでちょうど良いかなという気もしています。 イラスト等をメインにしているサイトなどでは、もうちょっと大きいサイズで作成されているようです。 また、広告用のバナーは４６８×６０で作成されているのがほとんどのようです。 ■罫線 横長に作れば、すぐに罫線になってしまうのですが・・・（笑） 今回の「ホームページ作成メモ」でも紹介した通り、アイコンをいくつか並べてもその機能を果たします。 要は文書の区切りになればいいわけですからねっ(^-^) |
上記の内容はメールマガジンとして1999年4月15日に配信されたものです。
素材作成初級講座 第３回へ戻る
素材作成初級講座 第５回へ進む
素材作成初級講座の目次に戻る
極楽法典ホームページに戻る