ヒマをみつけてWeb開発
その場の思い付きを、ヒマをみつけてWebサイトにしてみるブログ

デザイン初心者向け、フリー素材からWebサイトのメイン画像ができるまで

Sunday, 7 January 2007 10:35 by sabro

ブログのメイン画像を、初心者なりにフォトレタッチで作ってみたので、手順を書いてみる。

  1. フリーの画像を用意する。
  2. 「ファイル→新規」で新しいキャンバスを作成し、先ほどコピーした選択部分を「編集→貼り付け」で貼り付ける。
  3. Headerの横幅は、800pxにしたかったが、画像の幅が思ったより狭かったので、移動ツールで、選択領域を右へ寄せておく。
  4. レイヤーダイアログを開くと、貼り付けられた部分は、フローティング選択というものになっているっぽい(文字化けしてますが)。

    この部分を右クリックして、新規レイヤーを選ぶと、貼り付けられたレイヤーとして固定される。
  5. 左の余白部分を何とか埋めるために、スポイトで、貼り付けられたレイヤーの背景色を取得して、背景レイヤーを塗りつぶした。しかし、貼り付けられたレイヤーの背景色は、単一色ではないので、明らかな境界ができてしまった。
  6. 本当は、貼り付けられたレイヤーの背景色のような複数色で構成された色を、背景レイヤーにも塗りたかったのだが、うまいやり方が分からなかったので、逆に全ての背景を単一色で塗りつぶす方針にした。「色による領域選択ツール」で、しきい値を微調整して、複数色の背景を選択する。

  7. 選択領域を塗りつぶしたあと、画像を拡大して塗りきれなかった境界部分を手動で修正。
  8. テキストツールで、手帳のスケジュールを書く。ちなみにフォントは
  9. 回転ツールで文字の角度を調整し、スケジュール長の上へ移動する。
  10. 同じ要領で、文字を追加していく。統一感をもたせるため、タイトル文字も同一フォントを使用し、メモ書き風にした。
  11. これだけだと、タイトルがインパクトに欠けるので、影をつけることに。「Script-Fu→影→ドロップシャドウ」を選択。

    パラメータは、以下のように調整。

    影がついた。画像はこれで完成。
  12. タイトル部分は、トップページへのリンクにしたかったので、そこだけ選択して「編集→コピー」でコピーし、「編集→新規に貼り付け」で新たな画像にした。

まだまだ、至らない点もあるけど、デザインの勉強を始めて数週間だから、しょうがないかな。こんな記事でも、デザイン初学者の参考になれば幸いです。逆に上級者の方には、おかしな点を御指摘いただけるとありがたいです。

Tags:   ,
Categories:   WebDesign
Actions:   Permalink | Comments (45) | Comment RSSRSS comment feed

使える素材サイトeverystockphoto

Thursday, 21 December 2006 15:11 by sabro

Webデザインのため素材サイトを調査して、面白いサイトを発見。

everystockphoto

flickrmorguefileなどの、画像サイトからCreativeCommonsライセンスの写真を検索することが出来ます。

Tags:  
Categories:   WebDesign
Actions:   Permalink | Comments (61) | Comment RSSRSS comment feed