空間演出デザインII 道具研究・Digital Design

京都造形芸術大学 芸術学部 通信教育部 デザイン科 スクーリング科目

デジタルツールを利用したイメージ表現

01月17日 午後

1）文字と視覚表現を考える

■ Illustratorでのテキスト操作

文字をタイポグラフィとしての観点から捉えるため、資料を参照した概説をおこなう。

また、テキスト操作に関わるツールとパレットの設定について、下記の項目の確認をおこなう。

文字パレット（オプションを含む）

　　フォントファミリ

　　フォントスタイル

　　フォントサイズ

　　行送り

　　水平比率

　　垂直比率

　　文字間のカーニング

　　選択した文字のトラッキング

　　文字ツメ

　　アキを挿入

　　ベースラインシフト

　　文字の回転

文字ツール

　　文字ツール

　　エリア内文字ツール

　　パス上文字ツール

　　文字（縦）ツール

　　エリア内文字（縦）ツール

　　パス上文字（縦）ツール

段落パレット

　　左揃え

　　中央揃え

　　右揃え

　　均等配置

　　両端揃え

　　インデント

　　段落のアキ

　　禁則処理

　　文字組み

文字から図形、画像へと拡張する、それぞれの表現のサンプルは以下のとおり。

文字としての表現

HTMLファイルのテキストデータ

Illustratorのテキストデータ（Web用にPNGファイルに変換）

Illustratorのテキストデータをアウトライン化し、グラデーションでペイント（Web用にPNGファイルに変換）

IllustratorのテキストデータをPhotoshopでラスタライズして、ドロップシャドウの効果を追加

IllustratorのテキストデータをPhotoshopでラスタライズして、各種フィルタの効果を追加

画像を拡大してピクセルによるイメージ生成の効果を確認

■ ラスタライズ

ピクセルの集合体としてイメージが生成（ビットマップ）されているラスター形式に変換する操作を指して、ラスタライズという。

テキストデータとして入力された文字情報は、ラスタライズしてビットマップデータに変換することで、画像イメージとしてさまざま表現が可能になる。

Illustratorで入力したテキストデータをIllustrator形式で保存し、Photoshopで開くと、ラスタライズを実行する際の設定がおこなえる。

Illustrator上で、［オブジェクト］→［トリムエリア］→［作成］によって、トリムエリアを作成しておくと、その範囲のみがラスタライズの対象領域として認識される。

2）課題［展覧会トップページのデザイン］IllustratorとPhotoshopの複合

課題：写真から絵画へ（画像によるイメージ表現）によって作成した画像データを利用して、選定した作家の展覧会が開催されることを想定し、その広報宣伝のためのウェブサイトに用いるトップページ（表紙に相当する）をデザインする。

■ 課題制作のステップ

広報宣伝に必要な文字情報の設定

　　　　　↓

Illustratorでの文字組

　　　　　↓

Photoshopでの画像加工

各自が選定した作家の情報をもとに、展覧会タイトルやその他ページに掲載する文字情報を作成。

Illustratorによるタイポグラフィを中心としたレイアウトの基本設計をおこない、その後データをAdobe Photoshopにインポートし、課題：写真から絵画へ（画像によるイメージ表現）によって作成した画像データと組み合わせて、タイポグラフィの画像表現を試みる。

■ 課題要件

画像データは、以下の仕様で作成すること。

　　画像モード　RGB

　　ピクセル数　幅 1024pixels × 高さ 768pixels

　　画像解像度　72ppi

　　フォーマット　PNG

　　ファイル名：sd_(学籍番号)_(作品連番).png

■ Illustratorを利用したフォーマット作成と文字組　

ラフスケッチで描き起こしたイメージをもとに、Illustratorを利用して文字組をおこなう。ここまでの講義や演習で着目してきたタイポグラフィの取り扱いに加えて、「記号」としての側面と「図形」としての側面を、どのように編むのかがポイントになる。

フォーマットの作成については、以下の手順を参照。

1. Illustrator上で幅 1024pt × 高さ 768ptの矩形を描く。

2. 矩形を選択した状態で［編集］→［コピー］、［編集］→［前面へペースト］を実行する。これにより、前後に重なった2つの同サイズの矩形ができる。

3. 矩形のひとつを選択し、［オブジェクト］→［トリムエリア］→［作成］を実行。

4. 残りの矩形を選択し、［表示］→［ガイド］→［ガイドを作成］を実行。

作成したフォーマット上に、トップページとしての必要条件を満たす文字組をおこなっていく。

■ PhotoshopでIllustratorデータを取り扱う

Illustratorで作成したファイルをラスタライズして、Photoshopで取り扱うビットマップに変換することで、タイポグラフィの画像としての表現が可能になる。文字としての可読性を維持しつつ、色面・形態としてのタイポグラフィから画像としての多彩な表現への可能性を探ってみること。

ラスタライズについては、以下の手順を参照。

1. Photoshopを起動。

2.［ファイル］→［開く］でIllustratorで作成したフォーマットを選択。

3.［PDFの読み込み］のウィンドウのページオプションで

　　トリミング：トリミングサイズ

　　解像度：72pixel/inch

　　モード：RGBカラー

　　ビット数：ON

　　アンチエイリアス：8bit

の指定で、ラスタライズを実行。

ラスタライズされたイメージは、Photoshopのレイヤーとして展開される。

■ Illustratorのレイヤーを保持したラスタライズ

Illustrator上での文字組や描画によって、複数のオブジェクトが重なってしまう場合、上記手順に沿ってラスタライズを実行すると、重なり部分もひとつのレイヤー上に同一のピクセルイメージとして変換されてしまう。

Photoshop上でのイメージ編集に向けて、重なったオブジェクトが個々に扱えるようにするためには、以下の手順によってラスタライズを実行すること。

1. Illustrator上でレイヤーに分けたオブジェクト作成をおこなう。

2. Illustratorの［ファイル］→［データ書き出し...］を選択。

3.［書き出し］のウィンドウで、フォーマットとして［Photoshop (PSD)］を選択して書き出しを実行。

4.［Photoshop オプション］でレイヤーを保持をONにしておく。

この操作により、ラスタライズされたPhotoshop形式のファイルが新たに書き出される。

書き出されたファイルをPhotoshopで開くと、Illustrator上でのレイヤーが保持され、Photoshopでのレイヤーとして反映された状態となる。

ページトップへ

　次のページへ