CID2014WEB

2014年10月14日火曜日

DTPの今後の授業スケジュール

DTP 第1回２学期でも書いていた予定の日程に近づいてきました。
仕上げまでの段取りを確認してみましょう。

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

9/22 . 10/14

伝わるデザインーレイアウト

http://tsutawarudesign.web.fc2.com/miyasuku1.html

●雑誌のラフ・サムネール用参考資料を参考に、

手書きorデータで雑誌の特集ページ３ページ分のラフ画を書く

元データ＝http://yoko14145.com/cid/rough.zip

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

9/16 . 10/14

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

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

通常は文章を書くのはデザイナーの仕事ではないが、今回の課題は「企画＝デザイナー」
冒頭文を自ら書いてみる事で、全体像を把握し、自分のイメージをハッキリと具体化し、「読者に何を伝えたいか」をつかんでデザインに活かして行こう。

冒頭文例(1=赤文字)

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

→デザインにどう活かすの？

生物学・獣医学的な目線のまとめなのでかわいさよりも説得力のあるイメージに。

専門家に向けてではないので、図を大きめに入れてわかりやすくデザイン。

「1種類につき3項目づつ」なので、種類の大きさや雰囲気がわかりやすいように

それぞれ犬の全身写真を使い、縮尺を犬の大きさに合わせ小さい犬は小さくする。

(顔だけの写真にしない・大きさの比較が視覚的にわかるデザインにする配慮)

 冒頭文例(1=青文字)

ペットブームの今だから、うちの子の魅力をもっと知りたい！！
そのかわいい姿を記録したい！周りの人にも見せたいっ！でもカメラを向けると気ままな彼らは案外そっぽを向いてしまうもの。そんな時の虎の巻！、猫の特性を活かしてかわいい姿を記録する方法をまとめました！。リラックスできる撮影環境や、怖がらずに気を引く方法など色々駆使して普段のかわいい姿の猫達をスクープしよう！！

→デザインにどう活かすの？

「かわいい＋写真にこだわる」 が伝わるように、ポラロイド写真・白枠付き写真・絹目写真など、少し変わった(こだわった写真手法だとわかる)要素を画像に使う。

かわいく撮る方法の紹介なので、「かわいく撮れている写真」をつかう。

(紙面上の写真を選ぶ基準を、犬種のわかりやすさやサイズよりも「かわいく撮れているか」に決める。)

実際にやっている様子の写真を入れてわかりやすくする。

飼い主と猫が楽しそうで、なおかつ、技術的にスマートな印象をデザインに取り入れる

(スタイリッシュな要素。)

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

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

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

------組み版に用いられるレイアウトの名称------

柱-----------------このページが何に属するかを表すページ上の表示
天-----------------ページの上の空間
キャプション----画像等の説明文
版面---------------上下左右の空間を取り除いたページの中心部分(マージン)
ノンブル---------ページ数の表示
見出し------------タイトル表示
本文---------------内容文章
小口---------------ページの端(綴じられていないほう)
ノド---------------見開きのつなぎ目
地------------------ページ下の空間　

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

2014年10月10日金曜日

子孫セレクタについて・これまでのまとめ

これまでのまとめ

CSSはボックスの組み合わせでできている。(ボックス= divボックス)
ボックスの幅＝(中身の幅 + 余白の幅 + ボーダーの幅 + マージンの幅)
※IDセレクタ＝1ページに1回だけ。※クラスセレクタ＝1ページに複数回使用可能。

CSSをHTMLにリンクして適用する
　<link href="style.css" rel="stylesheet" type="text/css">
グループ化とは
　＝文字(見出し)・本文・コピーライト・段落をdivボックスに入れること。
2段組みや3段組みの方法＝フロートに左・右を入れる。
プロパティの項目からフロートしたものの次の要素に解除(clear)を指定

<< CSSの読み方>>
読みづらいCSSプロパティの正しい読み方 ...
何て読む!? 今さら聞けない読みにくいCSSプロパティー名

 子孫セレクタについて   利点：特定の構造環境でのみ有効なルールを定義できる


body { backgroundcolor: #999;} 
body #container {padding: 20px; margin-right: 50px; margin-left: 50px;   border: 0px ; backgroundcolor: #FFF;}body #container #keyword

{text-align: right; margin: 0px;    padding: 0px;} 
body #container h1{font-size: x-large; 〜}
body #container h2{font-size: medium;  〜}
body #container #figbox { padding: 12px; border: 0px ;}
body #container #figbox #figure { float: left; margin-right: 1em;}   
body #container address { clear: left;}

DivボックスにCSSを使う

・(1)　DIVボックスをつくる
　　　　　= 上のバー「挿入」→レイアウトオブジェクト→Div　タグで作成
・(2)　DIVボックスに名前をつける
　　　　　= 出てくるDivパネルにクラスかidを記入
・(3)　DIVボックスのCSSルールを作成する
　　　　　= CSSスタイルの新規CSSルールボタンをクリック・(4)　DIVボックスのCSSをデザインする

 　　　　(余白／マージン／ボーダー=境界線)

(1)

(2)

(3)

2014年10月7日火曜日

10/7(火)の内容

10/7(火)の内容

・画像引用の条件

　　　　- - - - ネットから取って来た画像をそのまま埋め込んでも印刷用には使えない。

・著作権のクリア

　　　　- - - - ○著作権／特許権／二次創作OKマーク

・書体の著作権のクリア
　　 - - - - 書体 (フォント)にも著作権がある／ダウンロードしたフォントはどうしたら使えるの？
　
などをふまえて、

雑誌の特集の課題用に (この課題はDTPの授業の集大成です)
「ラフとサムネール」と「プランシート」を完成する。

書体(フォント)にも著作権がある／ダウンロードしたフォントはどうしたら使えるの？

書体(フォント)にも著作権がある
フォントにも著作権があります。

学校のMacに入っているフォントデータは学校が購入しています。 

※inDesignで「パッケージ化」する際にはフォントデータがパッケージに入ります。

　フリーのフォントでない場合は二次配布になり、違反行為となります。

これを防ぐために二次配布禁止のフォントには

受け渡しが不可能なプロテクトがかけてあります。

プロテクトがかかっていると 

パッケージに入れることが出来ないようになっています。
その場合はフォントにアウトラインをかけることが必要になります。

○フリーフォントとは？
(商用利用可能なフォント＝印刷物に使用可能なフォント)

※利用が可能な事をフリーと言っているだけで無料ではない場合も多々あります。

和文フォント大図鑑 http://www.akibatec.net/wabunfont/freefont/freefont.html

フリーフォント最前線 http://www.akibatec.net/freefont/

フリーフォントのCFONT http://cfont.jp/

アバウトフォント  フォント関連リンク集 http://www.aboutfont.com/

2012年版、漢字も揃っている日本語のフリーフォントのまとめ
http://coliss.com/articles/freebies/2012-best-of-free-fonts-for-japanese.html

【デザイナー必見】最強の日本語フリーフォントのまとめ
http://matome.naver.jp/odai/2130244832975388701

※ダウンロードしたフォントデータが解凍できない場合は↓をダウンロードして下さい。

Mac OS10.6対応 Stuffit Expander
http://store.act2.com/smithmicrosoftware-stuffit-expander2011-mac-dl.html

ダウンロードしたフォントはどうしたら使えるの？

いまさら聞けない？Mac OS Xのフォントのインストール

使わないフォントをアンインストールする方法
(この時の注意：有料フォントをアンインストールしないこと。)
 
　HD >  システム > ライブラリ  > Fonts

にあるフォントのうち使わないものをFontsフォルダ以外の場所に移動する。

(同じパソコンを使用している人が使いたい時には戻せるように
分かりやすい場所に置いておきましょう。)

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

○著作権／特許権／二次創作OKマーク

○著作権／特許権

文化庁 http://www.bunka.go.jp/chosakuken/

特許庁 http://www.jpo.go.jp/

http://ja.wikipedia.org/wiki/著作権

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

　　　元記事：http://www.asahi.com/culture/update/0828/TKY201308270479.html

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
作品に©マークを付けて保護する
この©マークが法律的に認められているか？
実は、法律的には根拠がなく、誰が著作権を持っているかを表してはいない。

しかし、ポスターや写真に©マークがあると、その人が著作権を持っていることを多くの人が意識し、誰かが勝手にあなたの作品を盗作したり、コピー使用を防止できます。

©マーク、創作年、著作権者の名前を表示しておきましょう。

表示方法：©＋著作権者名＋最初の発行年
表示例　：©ＭekikiCreates.,co.ltd 2006

登録: 投稿 (Atom)

メニュー

2014年10月14日火曜日

------組み版に用いられるレイアウトの名称------

2014年10月10日金曜日

2014年10月7日火曜日

書体(フォント)にも著作権がある

2012年版、漢字も揃っている日本語のフリーフォントのまとめhttp://coliss.com/articles/freebies/2012-best-of-free-fonts-for-japanese.html

2012年版、漢字も揃っている日本語のフリーフォントのまとめ
http://coliss.com/articles/freebies/2012-best-of-free-fonts-for-japanese.html