Webデザイン-PhotoshopでWebデザイン

概要解説

2014 年の記事ですが、Photoshop で Web サイトのデザインデータ（モックアップとも言う）を作成する方法が解説されています。
ここ数年で、Web サイトをデザインするツールが変化しています。（2021 Design Tools Survey | UX Tools）
Figma や Adobe XD などが流行しており、UI（User Interface）デザイン専用のツールとなっているため、使いやすくなっています。
ただ、日本ではまだまだ Photoshop を利用している企業も依然として多く存在しています。
また、Photoshop で UI デザインを行うのは、非常に特殊な技術となるため、習得に時間とコツがかかりますが、
習得してしまえば、他のツールには、簡単に移行することができます。
では、手順に沿って、制作していくことで Photoshop で Web サイトをデザインする方法を習得していきましょう。

前提知識・技術

Photoshop のレイヤーパネルの操作
マスキング
- シェイプを利用したクリッッピングマスク
- フレーム
ガイドライン
文字ツールの扱い（エリア文字、ポイント文字）

授業目標

簡単な Web サイトのモックアップの作り方を一から演習する。
Photoshop で作成したモックアップからの画像書き出し方法。

授業資料

記事の需要や年数が経ち、Adobe のブログ内でも扱いが雑になってきています。
画像などの表示が消えているため、以前キャプチャしておいた記事データを元に制作していきます。
Photoshop の機能も進化していますので、最新の機能に置き換えて制作を進めます。

Photoshop で Web デザインをはじめよう 1

デザイン前に覚えておきたい環境設定とレイヤー機能

Photoshop で Web デザインをはじめよう 2

シェイプ（フレーム）を駆使してデザインのベースを作ろう

Photoshop で Web デザインをはじめよう 3

Web デザインに文字を配置しよう

Photoshop で Web デザインをはじめよう 4

ロゴを配置して、背景パーツを作成しよう

Photoshop で Web デザインをはじめよう 5

写真をレタッチして、配置しよう

Photoshop で Web デザインをはじめよう 6

完成した Web デザインから、画像や CSS コードを生成しよう
※2022 年 6 月 7 日（火）に画像の書き出しを演習します。

Webデザイン学科
授業資料