4 アニメーションを作ろう 課題 カスタムシェイプで矢印を描く 1 Web用に保 存する 3 ここでは矢印が右から左へ動いていくアニメーシ 「ファイル」メニューの「 Web用に保存」を選 ョンを作ります。 ぶか，ツールバーの［ Web用に保存 ］アイコンを 「ファイル」メニューから「新規...」を選択し、 クリックしてウィンドウを開き、各設定を行います。 新規画像を作成します。「ファイル名」は「anime」、 右のように設定ができたら［OK］ボタンを押し 「画像の大きさ」を「幅300pixel」 「高さ50pixel」 てファイルを書き出します。ファイルを「保存す 「解像度 72dp i 」、「内容」は「透明」とします。 る場所」を指定し、ファイル名をつけます。Web カスタムシェイプツールのオプションバーで，矢 ページで使うには、ファイル名をアルファベットの 印のシェイプを選びます。新規画像の左上からマウ 直接入力で行う必要があります。 スをドラッグし、矢印を描きます。 Webブラウザで作ったアニメーションファイル 「Web用に保存」の設定 画像形式は「ＧＩＦ」。 「アニメーション」の オプションをチェック。 の動きを確かめましょう。 レイヤーを複製し、矢印を移動する 2 レイヤーパレットのレイヤーオプションから「レ アニメーションを繰り返 して動かしたいときは、 「繰り返し」のオプション をチェックします。 「フレームディレイ」の 数値は， 一枚のフレー ム（コマ ）を表示させ る時間を示します。 数字を小さくするとア ニメーションは早くなり、 大きくすると遅くなり ます。 イヤーを複製」を選び、矢印を描いたレイヤーを 複製します。 矢印のシェイプを描きます。 次に、複製したレイヤーの矢印を右に移動させま す。［ 移動ツール ］を選択すると、カスタムシェ 白い三角の「次のフレーム を選択」を押すと、アニメー ションのフレーム（コマ）を 一枚ずつ確かめることがで きます。 「プレビュー」ボタンを押すと ブラウザ（ExplorerかNetscape） が起動し、アニメーションを確か めることができます。 イプツールで描いた矢印が選択されます。この場合 は真横に動かしたいので，キーボードの矢印キーを 押して右へ移動させます。あるいは「Shift」キー を押しながら横に矢印をドラッグすると垂直に移動 することができます。 ふたたびレイヤーを複製し、矢印を移動する、と いう操作を繰り返し、矢印が左から右へ移動するよ うにアニメーションのコマとなるレイヤーを作って いきます。 アニメーションに必要なコマを描き終えたら、一 度、そのファイルを保存しておきます。 ファイル名は「anime.psd」としましょう。 レイヤーを複製した時は複製元の矢印の真上に 複製された矢印があるので、 これを移動させます。 30 課題4 アニメーションを作ろう レイヤーを複製し矢印を垂直に移動、の 作業を4回くり返しました。 Webブラウザのウインドウにファ イルをドラッグ＆ドロップすると、 アニメーションが再生されます。 Photoshop Elements 31
© Copyright 2024 Paperzz
