2015年9月8日火曜日

プランシートでデザインするものの全体像を把握しよう

プランシートでデザインするものの全体像を把握しよう。 
完成したら提出。
データの場合=cidgd2@gmail.comへ
紙にかいている場合=紙を提出。(※名前番号をかく事)




 記入例ーーー「猫の特集」
同じ猫の特集でも、「理由」「目的」「方法」「ターゲット」などをハッキリさせる事で冒頭文はもちろん、全体のデザイン(読者に発信するイメージの全体像)が変わって来る。


通常は文章を書くのはデザイナーの仕事ではないが、今回の課題は「企画=デザイナー」

冒頭文を自ら書いてみる事で、全体像を把握し、自分のイメージをハッキリと具体化し、「読者に何を伝えたいか」をつかんでデザインに活かして行こう。


冒頭文例(1=赤文字)
ペットブームの今、今回の特集では猫をクローズアップ してご紹介します。
そのかわいさはもちろんの事、もっと詳しく猫の事を知るための情報を、
種類別に、特徴・ 病気・しつけの3項目に分けて分析!。 
どんな種類の猫を飼うか悩んでいるアナタ、猫を飼い始めてもっと知りたくなったアナタに、実は意外と知らない猫達の姿をチェック!!。

→デザインにどう活かすの?
生物学・獣医学的な目線のまとめなのでかわいさよりも説得力のあるイメージに。
専門家に向けてではないので、図を大きめに入れてわかりやすくデザイン。
「1種類につき3項目づつ」なので、種類の大きさや雰囲気がわかりやすいように
それぞれ犬の全身写真を使い、縮尺を犬の大きさに合わせ小さい犬は小さくする。
(顔だけの写真にしない・大きさの比較が視覚的にわかるデザインにする配慮)


 冒頭文例(1=青文字)
ペットブームの今だから、うちの子の魅力をもっと知りたい!! 
そのかわいい姿を記録したい!周りの人にも見せたいっ! でもカメラを向けると気ままな彼らは案外そっぽを向いてしまうもの。そんな時の虎の巻!、猫の特性を活かしてかわいい姿を記録する方法をまとめました!。 リラックスできる撮影環境や、怖がらずに気を引く方法など色々駆使して普段のかわいい姿の猫達をスクープしよう!!
→デザインにどう活かすの?
「かわいい+写真にこだわる」 が伝わるように、ポラロイド写真・白枠付き写真・絹目写真など、少し変わった(こだわった写真手法だとわかる)要素を画像に使う。
かわいく撮る方法の紹介なので、「かわいく撮れている写真」をつかう。
(紙面上の写真を選ぶ基準を、犬種のわかりやすさやサイズよりも「かわいく撮れているか」に決める。)
実際にやっている様子の写真を入れてわかりやすくする。
飼い主と猫が楽しそうで、なおかつ、技術的にスマートな印象をデザインに取り入れる
(スタイリッシュな要素。)

↓ 参考(課題1〜4のプリントの元雑誌の特集扉と冒頭文)

主旨 (冒頭文の言いたい内容)
「イラストレーターは本来イラストを描く為に開発されたドローツールだけれど、
良いソフトなのでデザインの世界でも大変よく使われている。
デザインの世界で用いられる手法や機能をまとめた特集」

 演出(デザインにどう活かされているか?)
・ソフトの使い方の「ガイド案内」特集なので、
特集自体をバスツアーに見立てて、はとバスの創業当時のバスガイドの写真を使用
・冒頭文を「でございます」「出発進行〜」などのバスガイドが紹介しているような文体に演出。
・コーナーごとの見出しの上に東京の名所の写真を使用している。
(バスガイドの写真の下部に赤い文字ではとバスのまめ知識的紹介を入れて
はとバスのWEBサイトのURLも掲載している。) 

DTP2学期日程

DTP 第1回 2学期

・ラフとサムネール
・プランシート(冒頭文概要)
日程
・著作権について
・フォントについて

・校正の時のチェックポイント

・組み版と禁則処理
・記号と校正記号/プリントアウト校正のチェックポイント/PDF校正の利点
・印刷可能データへの変換


1 10月中旬
校正(初校)の〆切り
順次データの完成した人からプリントアウト
↓提出
校正(初校)
↓
データの修正
↓
 

2 11月上旬
校正(2回目)の〆切り
修正したデータを提出
↓提出
修正データの確認。



3 11月中旬

データ校正がOKであれば、
印刷可能データへの変換
↓提出
 

・印刷可能データのチェック ↓
訂正場所がある場合は修正したデータを提出
 

・仕上げ1
・仕上げ2
・仕上げ3
・仕上げ4 DTP授業最終



------------------------------------------------------------------------

プロとアマの仕事の違いを表した図に加筆させてもらった。仕事って甘くないのよ。




雑誌の特集(1)構想を練る---ラフとサムネール

雑誌のラフ・サムネールを描く

2015年9月7日月曜日

メニューボタンの作り方

ボタンの作成ができた人は メニューボタンを作成しよう!

画像でもできるがCSSのみでもボタンはできる

-メニューボタンを CSS でつくるには -
(文字と背景カラーでつくる/文字と背景画像でつくる/画像でつくって表示位置をズラす)
http://www.css-designsample.com/csslayout/technique-3.html


例=テキストのみの場合


 1.新規htmlファイルを作成
 2.公開されているコードをプレーン表示(orコピー)してコードをコピーする。
 3.作成した新規htmlの<body> ~ </body>のコード内にペーストする。
 すると、デザインビューでは↓このように表示される
 4.同じようにcssコードもコピーする
 5.新規cssファイルを作成する
 6.cssファイル内にペーストする。
 7.cssファイルをmenu.cssという名前で保存
 8.最初に作成したhtmlファイルをmenu.htmlという名前で保存する
 9.menu.htmlを表示しcssスタイルパネルの下にあるクサリのマークをクリック
 10.参照ボタンをクリックしてmenu.cssをリンクさせる
 11.menu.htmlファイルのデザインビューがこのように表示される事を確認する。
12.ネット上できちんと動作するかどうかを確認する

- CSSとHTMLがセット配布されているメニュー(22種類) -
http://myisland.jp/template/menus/index.html

(教科書のロールオーバーボタン(P.109)はjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)


1.Dreamweaverで新規htmlファイルを作成
 (例えば名前をmenu.htmlとする)
2.新規でCSSを作成する
 (例えば名前をmenu.cssとする)
3.スタイルシートを添付ボタンをクリックしてmenu.cssを選ぶ
 menu.htmlとmenu.cssを結びつけてリンクする

4.画像を保存する
My Islandの場合は[Download]からダウンロード。
その他のサイトの場合は画像をドラッグしてダウンロードする場合もあります。

5.cssへのリンクのコードをコピーして<head>〜</head>内に貼付ける。

6.公開しているHTMLコードを
<ul>~</ul>まで または <div>〜</div>まで
をコピーしてmenu.htmlに貼付ける。

7.公開されているCSSコードをすべてコピーしてmenu.cssに貼付ける。

8.menu.htmlとmenu.cssを保存し、
menu.htmlをSafariにドラッグして表示し、正しく動作するかどうかを確認する。

[コードの全景] 
※〜の部分は画像コードの場合とテキストの場合があるので省略しています。
自分のメニューに合うコードを〜の部分に入れましょう。

OKであれば、
画像のメニューボタンにしたい人は、テキスト部分をオリジナル画像に差し替える。
または画像を使わずCSSの色コードでメニューボタンを作る場合は色のコードを書き換える。
またはcssのliの背景画像をオリジナル画像に差し替える。





※1学期の復習 と おまけ※
ロールオーバーリンクのその他の種類
カーソルを置いた時に表示が変化するメニューボタンのことをロールオーバーと言います。
(教科書のロールオーバーはjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)

カーソルを置いた時に表示が変化するメニューボタン(6種)

2015年9月4日金曜日

フローチャート

フローチャート(サイトの構成予定図)を書き完成させる。

何故フローチャートやラフが必要なのか

何故フローチャートやラフが必要なのか


クライアントからの無茶ぶり名言集
http://www.webcreatorbox.com/webinfo/clients-funny-requests/

頼む人にも見て欲しい
デザインができるまで
https://twitter.com/Mash_RD/status/262507498240634880/photo/1

クライアントよ、お前の依頼の大変さを思い知れ!
これがデザイナーにとっての「デザイン修正」だ!
http://gori.me/it/22125

2015年6月23日火曜日

印刷しても耐えうる画像を作成する又は探す

印刷しても耐えうる画像を作成する又は探す
 ーーーロゴデータなどを印刷物からスキャンする場合などに有効

・DTP用のフリー素材を探すには?

  1)「フリー素材 高解像度 テクスチャ(背景) ベクター素材 フリー ai素材 DTP EPS」 
     などで検索して、フリー素材を提供しているサイト自体を見つけ、
  2)そのサイト内を検索する。

   ( 1)でhigh quality images, texture, Vector, free などの英単語で検索すると探せる素材の幅が広がる)


解像度が十分にある画像のpxcelはどのくらい必要?

http://miz2403.com/print-dpi/


2015年6月16日火曜日

DTPの課題の提出の仕方一覧表

1学期
提出
第1章
フライヤー



画像とinddファイルを同じフォルダに入れて圧縮した.zipファイルを提出

サイズ:19MB前後

ムームーメールでは送れないので授業用YahooBoxにアップロードして送る。

Gmail.Yahooメールの人は添付で送れます]
1学期
提出
第2章
コラム



教科書の手順にそってパッケージ化して提出


サイズ:23MB前後

gmailやYahooメールでは添付で送れます

データの作成の仕方によって25MBを超える場合はGoogleDriveかYahooBoxにアップロードして共有URLをメールの本文に記入しておくる]
1学期
提出
第3章
縦組の書籍


[pdfで提出]



[メール添付で送れます]
1学期
提出
第4章
パンフレットマスターページ

[inddで提出]



[メール添付で送れます]
1学期
提出
第5章
パンフレットを
作ろう

2章で習得したパッケージ化をして提出GoogleDriveかYahooBoxにアップロードして共有URLをメールの本文に記入しておくる]
1学期
提出
第6章
PDFのフォームを作ろう

[pdfで提出]



[メール添付で送れます]

全部提出し終わって○になった人は、2学期にやる「雑誌の特集」の課題の
「ラフとサムネール」を作成する作業をしてください。
(↑2学期の提出物です)

雑誌レイアウトの見本が見られるサイト

雑誌レイアウトの見本が見られるサイト

2015年6月15日月曜日

ロールオーバーボタンの作成

第8章・・・・ロールオーバーイメージを追加しよう
[新規ロールオーバーボタンのページを作成して公開]

2015年6月12日金曜日

オンラインジェネレーター

photoshopやIllustratorでメニュー用ボタンや背景画像を作成しても良いですが、
オンラインジェネレータを使うとある程度簡単にweb用素材を作成することが出来ます。

2015年6月9日火曜日

2015年6月8日月曜日

2015年6月5日金曜日

WEB課題が違う原因を探す方法


  • Safariを使ってソースコードを確認・修正する方法
  • Dreamweaver上で表示が違う原因を探す方法
  • CSSが違う所に書かれているのを修正する方法