はじめに

これからウェブデザインを独学しようという人に、ウェブデザイン技術をどのように身につけていくか、そのプロセスを説明したいと思います。
ここで説明する画像編集ソフトはGIMPというPhotoshopに引けをとらないフリーのソフトです。初めての人はいきなり高価なPhotoshopではなく、GIMPで十分だと思います。
私は個人でホームページを運営していて、ウェブデザインに関しては本とインターネットを駆使して独学で技術を身につけました。その過程でどのように学んだかを紹介しているので、独学者の道しるべになればと思います。

このレシピは修正・加筆大歓迎です。皆さんの知識でよりよいものにしていただきたいです。

まずはGIMPのインストール

GIMPのインストールはこちらを参考にしてください。もちろん日本語で使えます。

GIMPの関連サイト

まずこのサイトは必ずチェックしておきましょう。GIMPに関する情報がたくさん載ってます。このサイトの下の方にある「GIMP 関連サイトへのリンク」も要チェックです。

上記2つのサイトは、GIMPの各機能についての解説サイトです。
しかし、これは最初に全部見なくてもいいです。分からないときに参考にするサイトという位置づけで先に掲載しました。

とにかくマネから始める

GIMPを初めて使った印象は、

  • 高機能すぎて何をしたらいいのか分からない
  • パワーポインタのようなオブジェクトを組み立てる感覚ではない
  • 三角形を作るのも一苦労

というなかなか初心者には厳しいものです。
なので、初めにやることは「マネること」です。
インターネットでは、どのようにしてウェブデザインを作っているかを解説してくれているチュートリアルを掲載するサイトがあります。こちらがそのサイトの例です。

これらのサイトなどで、「このデザイン作りたい!」と思うデザインを見つけ、その解説通りに作ります。そうすることで、GIMPの各機能を理解するとともに、ウェブデザインの作成の流れを理解します。この流れというのは重要で、ウェブデザインというのは結構作る手順が似てることが多いです。この流れを理解することでオリジナルを作るときに役立ちます。

また、GIMPだけでなくPhotoshopのチュートリアルも参考になることがあります。たまに同じ機能でも手順が違うときがあるので、そこは頑張ってください(笑)。ここは説明したらキリがないので省略します。ただ残念なことに、PhotoshopはGIMPより遥かに高機能なので、GIMPにはない機能が出てきたときは潔く諦めましょう。
以下にPhotoshopのチュートリアルの人気ページをご紹介。

GIMPを拡張する

導入必須のScript-Fu

GIMPには一連の操作を自動化してくれるScript-Fuというのがあります。これはインターネットで様々なものが公開されていて、簡単に導入することができ、作業が簡略化できます。
導入手順はこちら。

その中で必須のScript-Fuがこちらです。

Photoshopではこの機能がデフォルトでついているぐらいの重要な機能で、導入することでかなり時間短縮になります。

その他Script-Fuはこちらから探してください。

ブラシでイラストを描く手間を省く

ブラシとは、あらかじめ描かれたデザインをスタンプのように使うことができる機能です。GIMP専用のブラシもありますが、ブラシが豊富にあるPhotoshopのブラシがGIMPではそのまま使えるので、Photoshopで探すのもありです。
以下のリンクがブラシの導入方法。

ウェブデザインに関する検索時のコツ

これは単純、「日本語ではなく英語で検索する」です。
ウェブデザインはアメリカがダントツで進んでおり、情報量や公開されているアイテム数が比較にならないほど多いです。英語が読めない人でもブラシやアイコンなどを探すときに使えます。(そういう私も英語は読めないですorz)

ただ、Googleでも日本版とアメリカ版とでは検索結果が違うらしいので、しっかり調べたい人は以下のリンクを参考に検索してみてください。

参考になるウェブデザイン関連サイト

正直、参考にできる関連サイトはたくさんありすぎるので、ここでは「TopHatenar」というランキングサイトを参考にしてください。以下のリンク先の上位サイトはどれもウェブデザインでは有名どころなので、参考になること間違いなしです。

本で学びたい人は

インターネットは手軽でいいのですが、欲しい情報が網羅されていることがなかなかありません。そのときは本を使うといいですが、買ってしまってはこのレシピのタイトルが嘘になってしまいます。ということで、果てしなく便利なサイト「カーリル」を紹介します。カーリルは全国の図書館の蔵書を簡単に検索できるので、もしかするとGIMPの本が見つかるかも知れません。

最後に

今回このレシピを書いた動機の1つとしては、GIMPがもっと広まってほしいという思いがあったからです。GIMPの利用者が増えれば、GIMPにまつわる情報が増えて、GIMPがより発展することに繋がるかもしれません。それは私自身うれしいことでもあるし、多くの人がその恩恵を受けることができればいいなと思います。

トップ画像は以下のサイトを参考に作らせていただきました。

こちらはPhotoshopのチュートリアルですが、すべてGIMPで作れます。

それでは、みなさんGIMPを楽しんでください!