ウェブデザインB 第11回

ウェブデザインB 第11回

2025年06月30日 /最終更新:2025年06月30日

引き続き、情ビInstagramバナーのトレース、また演習15のキャンペーンのバナーのトレースを行いましょう。

ウェブデザインB 第11回

前回の振り返り

前回は演習Web02のトレースを途中まで行い、以下のPhotoshopスキルを習得しました。

  • 縦書き文字の作り方縦書き文字の文字詰め
  • ガイドに吸着させる正確な長方形の作り方
  • 背景イラストの配置

キャッチコピーと座布団」のトレースまでで終わっていたので、
今回はInstagramのアイコン周りのトレース作業を行いましょう。
編集中のファイルは間違いがなければ「学籍番号_traceWeb02.ai」のはずです。

まずPhotoshopを開く前に使用するフォントのインストールを行っておきましょう。
サンプルファイル内のTrue TypeフォントファイルをドラッグやShiftクリックで全て選び、
「右クリック > インストール」でインストールしておいてください。

演習Web02 オリジナルデザイントレース「情ビInstagramバナー」後編

トレース・模写の条件

ではトレース作業を行いましょう。その際の条件は以下。

  1. タイトルの「公式インスタグラム」の「公式」を自分の苗字に変更する。

以上です。
今回はそのままYoutubeを開いてしまいましょう。

課題の提出

ではトレースを行った「情ビInstagramバナー」を提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっています。
必ずjpgに書き出して提出してください。

手順は以下。

  1. 上部メニューから❶「ファイル」→❷「書き出し」→❸「Web用に保存(従来)」をクリックする。
  2. 「Web用に保存」ポップアップの右側の「名前」のプルダウンから「JPEG高」を選択し、下の保存ボタンをクリックする。
  3. 「Web用に保存」ウィンドウがでてくるので、左側のフォルダショートカットから保存先のフォルダを選択し、
    ファイル名に「学籍番号_trace_web02」を入力、最後に「保存」ボタンをクリックすると書き出しが完了する。
    ※ファイル名が上記と違うものは課題点の加点対象外です。

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

演習Web02 情ビInstagramバナー 課題提出フォーム

演習15 デザイントレース「キャンペーンのバナー」 

トレース・模写の条件

では記事を開きトレース作業を行いましょう。その際の条件は以下。

  1. 「Mimosa」を「自分の苗字(英字)」へ変更する。

以上です。
では記事を開いてみましょう。

演習15 デザイントレース「キャンペーンのバナー」

課題の提出

ではトレースを行った「キャンペーンのバナー」を提出しましょう。
課題の提出形式はjpg以外は受け付けられないようになっています。
必ずjpgに書き出して提出してください。

手順は以下。

  1. 上部メニューから❶「ファイル」→❷「書き出し」→❸「Web用に保存(従来)」をクリックする。
  2. 「Web用に保存」ポップアップの右側の「名前」のプルダウンから「JPEG高」を選択し、下の保存ボタンをクリックする。
  3. 「Web用に保存」ウィンドウがでてくるので、左側のフォルダショートカットから保存先のフォルダを選択し、
    ファイル名に「学籍番号_trace15」を入力、最後に「保存」ボタンをクリックすると書き出しが完了する。
    ※ファイル名が上記と違うものは課題点の加点対象外です。

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

演習15 キャンペーンのバナー課題提出フォーム