20180415

デザイン基礎実習

大阪電気通信大学 総合情報学部 デジタルゲーム学科 前期開講科目

デジタルツールを利用したビジュアルコミュニケーションデザインの基礎

第02週:04月18日

0)出席集計

上記リンクもしくは右のQRコードから出席集計システムにアクセスし、出席の回答をおこなう。

回答に必要な「特定の番号」を指示するので、その指示に沿って入力をおこなうこと。

1)造形の基本要素[点・線・面]によるビジュアル表現

■ 点の定義

数学的な観点で点は、それ以上細かい部分に分けては考えない思考の対象物であり、ユークリッド幾何学においては、直線・平面とともに、公理系で定義しないで用いる無定義用語として扱われる。すなわち、点は位置という概念を持ちつつ、大きさという概念を持たない対象であるといえる。

造形的な観点では、与えられた環境の中で取り扱うことのできる最小の要素といえる。描かれる画面空間、点を描く描画材料、そしてその点を見る視点と画面との距離の相対的な関係の中で、造形的な点の定義は自在に変化していく。

デザインの基本要素としての点は、環境との相対的な関係の中で変化するが、いずれにせよそれ以上小さくすることのできない位置を表す最小単位であることに違いない。

■ ラスター形式での点

ラスターとは走査線のことで、小さな正方形の色面の集まりによって視覚的イメージ(画像など)を表す。イメージの最小構成要素となる小さな正方形のひとつが、データの中の点であり、そのまま画面上においても、正方形の色面として表示される。

その正方形の色面のひとつをピクセル(pixel)と呼び、画像処理ソフトウェアでのイメージ生成の最小単位として定義される。ピクセルは、イメージを構成する正方形の色面であり、画像はピクセルが縦横に整然と並んだ集合体である。

ピクセルには、そのサイズを規定する要素が含まれてはいない。サイズは1インチ(=約25.4mm)あたりのピクセル数によって決まる。ピクセル数/1インチ(pixel/inch)を画像解像度と呼び、この値が画像のサイズに関わっている。

画像解像度5ppi 画像解像度15ppi

点は造形のまさに原点であり、幾何学的な図形の生成に深く関わっているデザインの基本要素といえる。

■ 線の定義

線は、連続する点の集まりという見方ができる。また点が移動した際の軌跡ともいえる。

数学的な観点において、点は位置の概念は持つが、大きさの概念を持たず、よって点の軌跡としての線は、位置と距離(長さ)という概念を持ち、そこに幅(太さ)という概念を持たない対象である。

造形的な観点では、点の時と同様に紙の上に描かれた線は、それ自身、必ず幅の概念を持って捉えることができる。与えられた環境の中で取り扱うことのできる位置と軌跡を表す最細の要素といえる。描かれる画面空間、線を描く描画材料、そしてその線を見る視点と画面との距離の相対的な関係の中で、造形的な線の定義は自在に変化していく。

■ ラスター形式での線

ラスター形式で表されるモニタやペイント系ソフトウェアでは、小さな正方形の色面が同一の色で並ぶことによって、線として知覚される。

正方形は碁盤の目のように、縦横に整然と並べられているから、水平・垂直な線は色面の連続として正確に引くことができるが、対角線(斜めの線)や曲線は思うように描くことができない。

■ アンチエイリアシング

このようにラスター形式において発生するジャギーを視覚的に低減させる技術として、アンチエイリアシングというものがある。

このアンチエイリアシングは、線や面の輪郭そのものの色面とその周囲にある色面との中間の色面を加えることによって、線や面をぼかしたような印象にし、視覚的にジャギーを感じさせなくして目立たなくする、というものである。

■ 面の定義

点から線、線から面へ 「幾何学上、線は眼に見えないものであるが、線は動く点の軌跡、したがって点の所産である。線は、運動から生まれる。―しかも点そのものが内包している完全な制止を破ることによって、そこには、静的なものから動的なものへの飛躍がある。」*1

これは、Wassily Kandinsky(ヴァシリー・カンディンスキー)がその著作『点・線・面』 (1926)の中で語っている線についての一節である。

Kandinskyは、点の運動の軌跡が線になり、点の静的印象は線へと変化する過程で動的印象を持つに至ると考察している。そして線がさらに運動して軌跡を描くと、それは面となる。また線と線が交差することでも面が生まれてくる。

面は多面的な限界を持つ平面であり、そこには点の運動の軌跡としての線の動的印象と、面となることで再び獲得する静的印象を混在させているといえる。

そして、点と線の動きを内包する面は、それらの運動に応じて多様な形態のバリエーションを持っている。

テキストP.14〜P.16を参照

点のラスターイメージ

点のラスターイメージ

ラスター形式のソフトウェア

Adobe Photoshop(アドビ・フォトショップ)に代表される画像処理ソフトウェアの多くは、ラスター形式を用いており、ペイント系ソフトウェアなどといわれる。また、ひとつの正方形の色の情報であるビット数をマッピング(配置)していることから、ビットマップという表現もされる。

ピクセル(pixel:画素)

Pictureのアメリカ俗語であるpixとelementという語を組み合わせた合成語。

直線のラスターイメージ

直線のラスターイメージ

曲線のラスターイメージ

曲線のラスターイメージ

アンチエイリアシング

アンチエイリアシング

*1『カンディンスキー著作集2』

西田秀穂訳・美術出版社刊

Wassily Kandinsky

ヴァシリー・カンディンスキー

画家

1866年モスクワに生まれ、モスクワ大学で法律、政治経済を学んだ。フランス印象派展で見た、モネの『積藁』が忘れられず、30歳で画家を目指し、ミュンヘンを拠点に「抽象表現主義」の創始者として活躍し、モスクワ大学の教授となっている。

ロシア革命が起こり、社会的リアリズムが強制されるようになると、1921年ドイツに戻り、バウハウスで教鞭をとり、1934年にはパリに移住した。

絵画だけでなく、抽象絵画の方法を音楽のアナロジーで説明する論文でも影響力を発揮し、1944年に逝去した。

面のラスターイメージ

面のラスターイメージ

アンチエイリアシング

アンチエイリアシング

2)課題[ピクセルアート]1 課題説明・アイデアスケッチと制作手順

1ピクセルごとに色設定をおこないイメージ表現へと定着させる作業を発展させ、ペイント系ソフトウェアを利用して、ピクセルアート(ドット絵)を描く。

■ 課題要件

カンバスサイズ 幅:64ピクセル × 高さ:64ピクセル

解像度:72ピクセル/インチ

の画面いっぱいに、「大阪電気通信大学のキャラクター」というテーマで、キャラクターを描く。なお、キャラクターのファミリーとして3ファイル以上、最大5ファイルまでの制作とする。

完成したデータは、メールの添付ファイルにて指定のアドレスに送信し提出する。

提出については04月25日授業時に指示するので、それまでデータは各自で管理しておくこと。

提出の際のファイル名は、半角英数(すべて小文字)で下記のとおり。

idi1_(学生番号)_(作品番号).png

例)idi1_hwXXXXXX_1.png

  idi1_hwXXXXXX_2.png

  idi1_hwXXXXXX_3.png

例)idi1_hbXXXXXX_1.png

  idi1_hbXXXXXX_2.png

  idi1_hbXXXXXX_3.png

■ キャラクターの考え方

1. キャラクターの設定

→ 人物、動物、植物、モノの擬人化、架空の生命体、幾何形態

2. ファミリーへの展開

→ サイズ変化、色彩変化、チームやグループ、家族、性格付け

■ アイデアスケッチの制作

アプリケーションでの制作に入る前に、プランシートを使用してアイデアスケッチ(下絵)の制作をおこなう。

アイデアスケッチを描いたプランシートは、05月09日授業時に回収する。忘れず持参すること。

■ 制作手順

Photoshopを利用して制作をおこなう。制作手順は先週の演習[球体を描く]も参照のこと。

テキストP.17を参照

作例

参考作例

幅:64ピクセル × 高さ:64ピクセルのキャラクターイメージをアニメーション化したもの

制作過程

制作過程の様子

プランシート

pixelart_plan.pdf

PDF形式・16KB

Adobe Photoshop

01)Adobe Photoshopを起動。

02)[ファイル]メニューから[新規...]を選択。

03)新規ドキュメントのウィンドウでカンバスサイズを設定。

04)新規ドキュメントの作業ウィンドウが開く。

05)[Phtoshop]メニューから[環境設定]、サブメニューから[ガイド、グリッド、スライス...]を選択。

06)環境設定パネルのグリッド項目の数値を、グリッド線:64pixel、分割数:64に設定をおこなう。

07)[表示]メニューから[表示・非表示]、サブメニューから[グリッド]を選択。作業ウィンドウに方眼が表示される。

鉛筆ツールの選択

08)ツールボックスのブラシツールをプレスすると、サブツールが表示される。その中から鉛筆ツールを選択。

ツールのプロパティ

09)ツールのプロパティで、鉛筆ツールのマスター直径を1pxに設定。

描画色の変更

10)ツールボックスの描画色をクリックし、カラーピッカーを表示。

カラーピッカー

11)カラーピッカーで任意の描画色を選択。

1ピクセルごとに、鉛筆ツールのクリック操作により、キャラクターのイメージを描いていく。

保存

12)適宜、[ファイル]メニューの[保存]を選択し、データの保存を実行すること。

保存

13)初回の新規保存時のみ、保存ダイアログにて、ファイル名と保存場所を設定する必要がある。フォーマット(ファイル形式)は、ポップアップメニューから「PNG」を選択すること。

インデックス担当授業の資料デザイン基礎実習

Copyright (C) WATANABE, Takashi / HEAD+HEART, Visual Communication Design Studio. All rights reserved.
Made on a Mac

Mac、Macロゴは、米国およびその他の国で登録されているApple Computer, Inc.の商標です。

Made on a MacバッジはApple Computer Inc.の商標であり、同社の許可により使用しています。

第01週:04月11日

第02週:04月18日

第03週:04月25日

第04週:05月09日

第05週:05月16日

第06週:05月23日

第07週:05月30日

第08週:06月06日

第09週:06月13日

第10週:06月20日

第11週:06月27日

第12週:07月04日

第13週:07月11日

第14週:07月18日

第15週:07月25日

Google

WWWを検索

headheart.comを検索

Image