96's blog

WEBサイト制作科 6ヶ月コース

PhotoShop03(各種画像効果、GIFアニメーション)

練習用の画像

  • 個人使用の範囲で使える画像のもと

レイヤーマスク

  • 画像の一部を背景に馴染ませたい(WebDesignWorks)
  • 画像にレイヤーマスクを設定し、グラデーションツールを利用して境界線をぼやかす。

選択範囲:練習課題(Web初心者実践演習課題)

  • intoペースト
  • 窓に選択範囲を設定し、背景をコピー、特殊ペースト→選択範囲内へのペースト(intoペースト)
  • 色を選択
  • 選択範囲→色域指定 スポイトで色を選択(追加する場合は+マークのついたスポイト)。

シャドウ・ハイライト

  • 風景写真の色の調整
  • イメージ→色調補正→シャドウ・ハイライト

クリッピングパス

  • ペンツールでパスを描く。
  • パスパレットに切り替えて、パス名つけて保存。
  • 追加でパスを書く場合は、パスのサムネイルをalt+クリック。
  • ctrl+クリックで選択範囲の保存。

GIFアニメーション

Illustratorで描画、PhotoShopでアニメーション化します。

Illustratorでの操作)

  • レイヤーごとに絵を描く。
  • ファイルメニュー→書き出し、psd形式で保存、解像度=スクリーン(72ppi)・オプション=レイヤー保持。

PhotoShopでの操作)

  • 作成したpsdファイルを開き、ウインドウ→アニメーション。(CS6では、ウインドウ→タイムライン。タイムラインウインドウ内で「フレームアニメーションを作成」を選択。)
  • アニメーションウインドウの右上のボタンから、「レイヤーからフレームを作成」を選択。
  • タイムラインタブで各フレームごとの時間を設定。
  • ファイル→webデバイス用に保存、gif形式で保存。

  • RGB コンピューターで色を表現するときの値
  • 16進数 ブラウザで表示するための値

PhotoShopは、画像を直接いじるのではなく、レイヤーでいろんな効果を画像に重ねることで表現していくものなんですね。

なので、覚えるところは

  • 選択範囲
  • レイヤーパレット
  • 効果のつけ方

 といった感じでしょうか。