51
iWeb '09でWebグラフィックを素早く作成

iWeb '09 は、Web ビルダーとしてお探しの方にも、そうでない方にも、素晴らしい隠れた才能を持っています。Photoshop では作成が面倒なグラフィックをあっという間に作成できるのです。特に、角丸の正方形からブラシストロークの縁取りのある吹き出しまで、様々な形状の中に画像を配置するのが得意です。iWeb でグラフィックを作成し、サイトをハードドライブに公開し、完成したグラフィックをサイトフォルダから取り出すだけで、あっという間に完成です。

サイトを準備する

最初のタスクは、iWeb '09で新しいサイトを作成することです。アプリケーションを開き、「ファイル」->「新規サイト」を選択します。テンプレートを選択するように求められます。シンプルにするために、「白」を選択し、「空白」をダブルクリックします。左側のサイドバーに「サイト」というエントリと、「空白」というページが1つ表示されます。

「サイト」をクリックして、サイトの公開設定にアクセスします。iWebではMobileMeへの公開が推奨されていますが、これは簡単に変更できます。「公開先」ポップアップメニューをクリックし、「ローカルフォルダ」を選択するだけです。次に、ウィンドウの「フォルダの場所」セクションまで移動し、「選択」をクリックします。フォルダは最もアクセスしやすい場所に保存したいので、デスクトップに移動し、「新規フォルダ」をクリックします。「クイックグラフィック」(または似たような名前)と名前を付け、「作成」をクリックし、「選択」をクリックします。フォルダを設定したら、サイドバーの空白ページをクリックして、空のページテンプレートに戻ります。

グラフィックを作成する

グラフィックをまとめるには、形状、画像、境界線を選択するだけです。

インスペクタを使用して、図形に装飾的な境界線を追加します。

1. ウィンドウの下部にある「図形」をクリックし、グラフィック図形を選択します。

2. 角のハンドルをクリックしてドラッグし、図形を大まかに適切なサイズに調整します。ほとんどの図形には青いコントロールポイントがあり、それらを使って図形をさらにカスタマイズできます。例えば、角丸四角形の角のサイズを変更したり、吹き出しの矢印の位置を調整したりできます。

3. グラフィックが選択されていることを確認してから、インスペクタ(表示 > インスペクタ)に移動します。「メトリック」の下に幅と高さの設定があり、図形の正確な寸法を設定できます。(グラフィックインスペクタで境界線を追加する場合、最終的なグラフィックのサイズは選択した線の太さに応じて拡大されます。例えば、6ポイントの線を追加すると、400×300ピクセルのグラフィックは406×306ピクセルに拡大されます。)

4. 「表示」->「メディアを表示」(必要な場合)を選択して、メディアサイドバーを表示します。「写真」をクリックし、フォトライブラリから写真を探します。写真を新しいシェイプにドラッグすると、スライダーコントロールが表示されます。これを使って、シェイプ内の写真の切り抜きを調整します。写真の位置を変更する必要がある場合は、「マスク編集」をクリックします。また、「マスク編集」をクリックし、メトリクスインスペクタの回転コントロールを使用して画像を回転することもできます。

5. 画像を配置したら、装飾的な枠線を追加できます。図形をクリックしてハイライト表示し、インスペクタに戻って「グラフィック」をクリックします。「線」の下にいくつかのオプションが表示されます。最初のポップアップメニューから「線」を選択し、2番目のポップアップメニューから線のスタイルを選択します。次に、線の色と幅を設定します。

サイトをデスクトップ上のフォルダーに公開し、完成したグラフィックを取得するだけです。

公開して収集する

グラフィックに満足したら、「サイトを公開」をクリックします。Finderを開き、デスクトップの「クイックグラフィック」フォルダを見つけます。フォルダ内に「Site」(iWebでサイト名を変更していない場合)というフォルダがあり、その中に「Blank_files」というフォルダがありますここに、作成した画像(「shapeimage_x.png」)があります。グラフィックをダブルクリックするとプレビューで表示されます。そうでない場合は、必要に応じて場所を変更し、名前を変更してください。

[ クリス・マクベイは、ノバスコシア州ハリファックスに住む作家、イラストレーター、おもちゃの写真家です。 ]