授業解説
トライデントスマホサイトのトレース、Adobe のチュートリアル「Photoshop で Web デザインを始めよう」を学習し、 Photoshop の基本を身につけたところで、自分の写真を使ってオリジナル Photo アルバムをデザインしてみましょう。
前提知識・技術
- Photoshop のレイヤーパネルの操作
- マスキング
- シェイプを利用したクリッッピングマスク
- フレーム
- ガイドライン
- 文字ツールの扱い（エリア文字、ポイント文字）
- 自分で撮影した写真
授業目標
- 撮影した写真を紹介する Photo アルバムを Photoshop を使って、制作することができる。
- シェイプやフレームを利用して、マスキングすることができる
授業資料
スマートフォン用 Photo アルバム UI 制作
ゴールデンウィーク中に撮影してもらった写真を載せる、Web ギャラリーをデザインしてみましょう。
UI モックアップ作成手順
ワイヤーフレームを元に、ラフデザインをスケッチしてから Photoshop で作成します。
- ワイヤーフレームの内容を理解
- Photo アルバムのラフデザインをスケッチ
- スケッチを元に Photoshop でデータ作成（Top ページと個別ページ）
- ガイドライン・グリッドを利用して作成
- レイヤーを分けて、内容がわかる命名をする
- Photoshop データ(.psd)を f81srv1 に提出
参考：ワイヤーフレームとは？Web サイト制作・アプリ開発に必須のページ設計図を解説！ | Web 幹事
参考：スマートフォン（デバイス）のサイズは、mydevice.io : web devices capabilities
課題提出締め切り
- 課題完成：2022 年 6 月 21 日（火）
- 提出画像サイズ（ファーストビュー）は、414px×896px
- 画像形式は、Photoshop 形式+リンク画像
- フォルダ名は、wf1_00_name_photoalbum
- ファイル名は、wf1_00_photoalbum.psd
- 配置した画像は、フォルダ内に images などを作成して入れておいてください。
- 提出先：f81srv1 内の提出用フォルダ > photoAlbum
- ラフスケッチは、授業終盤に回収します。
Photo Album 発表
- 発表日： 2022 年 6 月 28 日（火）１時限目
課題「Photo Album」を一人ずつ、データを見せながら発表をしていきます。
何に気をつけて制作したのか、具体的にどう制作したのかなどみんなに伝えましょう。