2015年10月27日火曜日

データ校正(二校)のチェックポイント

11/10(火)・データ校正(二校)のチェックポイント


[ I ] 印刷可能な画像データになっているかどうか
以下の1)〜4)4つの条件を満たしていないと印刷可能なデータではありません


1) パッケージ化されて、
元画像がinddファイルと同じフォルダ内に同梱されて
圧縮されている事。
パッケージ化の方法は、教科書のP.80〜81


2)元画像の解像度が実寸で350ppi以上ある事。
(350ppi未満は×)

1. [イメージ]→[解像度]を選択

2.解像度の項目を350ppiにした状態で、
幅と高さを実寸(実際に印刷したときにその画像が出力されるサイズ)にする。





3)元画像の形式がEPSまたはPSD形式で保存されている事
[ファイル]→[別名で保存]→[Photoshop またはPhotoshop EPS]


4)RGB画像(=映像やモニタ表示用/光の三原色)ではなく、
CMYK画像(=印刷用・インク対応表示/4色分版・絵具の3原色)
形式で保存されている事

[イメージ]→[モード]→[CMYKカラー]にチェック







InDesign 上でリンク画像のステータスを

チェックする方法


InDesign上でリンク画像の情報をチェックする事が出来ます[ウィンドウ]の[リンク]を選択して表示


赤いはてな=元画像が同梱されていません。パッケージ化して保存してください。
右の青い文字がPB 
= 印刷の枠外に画像が配置されています。不要な場合は削除してください

形式=Photoshop か PhotoshopEPSになっていないといけません。
カラースペース=CMYKになっていないといけません。

元のPPI
ここがWEBからとってきたものだと72ppiになるので、「無理矢理引き延ばして印刷用の解像度にした」ということがわかってしまいます。
編集後のPPI 
= WEBからとってきたものでも他に代わりになる画像が無い場合はここの解像度が350ppi以上になるようにしてください。

DTP授業スケジュール



残り授業時間数は、11/10と11/17の2回です。
(11/3は文化の日で祝日のため授業が有りません)

以下のスケジュールを守って
2回の校正と完成データを提出できるように
してください。




写真の加工
切り抜き(クリッピングマスク)のやりかた

1)パスをきる方法と、
https://helpx.adobe.com/jp/photoshop/kb/223829.html

2)クイックマスクモードを使う方法があります。
http://designers-tips.com/archives/11748


2015年10月26日月曜日

段組みレイアウトでサイトを作成する。

例)design_zeroのテンプレートを元にサイトを作る場合
http://artinkochi.flier.jp/2015/test/
1)1枚綺麗なテンプレートをまず作る
2)そのページの複製をページ数分作る。
3)それぞれのページの本文の部分を書き換えて
4)リンクでつなぐ

2015年10月16日金曜日

jQueryを組み込む(例: lightbox)

lightboxの設置の仕方(↓元記事)

http://www.chamanet.com/lightbox/
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)

画像紹介を多く扱うサイトの作成


画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、
元画像そのものを呼び出して表示できるjqueryを使うか
photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。
(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)

lightbox
[公式サイト 英字サイト]
(※英文の説明自体が一部間違っているので、本ページの説明を読んで編集してください)
日本語サイト(※説明が古いので、本ページの説明を読んで編集してください)
http://www.chamanet.com/lightbox/ 




Lightbox導入方法

Lightboxの導入方法とサンプルのダウンロード
簡単にLightboxに対応出来ます。




Lightboxのサンプル
サンプルページサンプルページの写真をクリックすると
Lightboxが起動します。
サンプルページのHTMLコード


Lightbox導入方法
1.ダウンロードLightBoxサイトからLightboxをダウンロードして下さい。
ダウンロードはこちら
2.ZIPファイルを解凍LHACA、LHASAなどで解凍して下さい。
解凍するとdistというフォルダの中に
「css」「images」「js」が作成されます。



3.サーバーに転送Lightboxに対応させたいページ(例えばgallery.html)があるフォルダと同じフォルダ内に「css」「images」「js」を転送します
転送後、ディレクトリ構造はこのようになります。

index.html  ←Lightboxに対応させたいページのばあい





※ 解凍した「images」の中のデータは不要です
4.HTMLタグの編集Lightboxに対応させたいページのHTMLタグを編集します。

<head>〜</head>内に を挿入します。

</body>の直前の行に
を挿入します。
※公式サイトの説明にはhead内に入れるとありますが、head内では動きません。
※公式サイトの説明にはlightbox.jsやlightbox.min.jsを入れると書いてありますが、この2つのファイルはそれだけでは動きません。
lightbox-plus-jquery.jsをbody内に書かないと動きません。


各写真のHTMLタグを下記のように修正します。

グループ名は「aiueo」や「abc」など自由な半角英字で指定します。

サムネール画像クリックでlightbox出現  文字クリックでlightbox出現 




PhotoshopのWEBフォトギャラリーの機能を使う
(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました

2015年10月13日火曜日

10/13の授業内容

以前に授業でTPP対策として「二次創作マーク」というものを紹介しましたが

TPPはその後このように決まりました。↓

TPP協定が大筋合意、著作権侵害の非親告罪化、
原著作物の収益性を大きく損なわない場合は適用せず
http://internet.watch.impress.co.jp/docs/news/20151006_724387.html

故意による商業的規模の著作物の違法な複製等を非親告罪とする。
ただし、市場における原著作物等の収益性に大きな影響を与えない場合はこの限りではない。
著作権等の侵害について、法定損害賠償制度又は追加的損害賠償制度を設ける。



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

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


------スケジュール上ではすでにここまでは完了していないといけません--------

今日(10/13)の授業と、来週の授業(10/20)で
初校に向けてのデータの完成をし、プリントアウトして提出してください。
初校はこの授業では紙の上での校正を行います。
校正をするという前提で、以下の部分に気をつけましょう。
記号と校正記号

例年トンボの使い方やテンプレートの作り方を間違っている人が多いです。

トンボの正しい使い方


(元サイトの詳細な説明:NIKKEI PRINTING INC.DTPテクニカルガイドより)

外3ミリ幅まで確実に塗る(or背景画像を貼る)



↑仕上がり線(裁断機の切る線)に近い所に文字をレイアウトしない
↓仕上がり罫線は入れない(=裁断機の切る線上に黒い線を引かない)


InDesignでの雑誌のテンプレートの作り方


テンプレートの作り方 (InDesign)
※見開きのページの作り方を間違えないように。

出力の仕方
※A4見開きのプリントアウトの仕方は通常はA3ノビの紙に出力しますが、
 Mac室のプリンタはA3ノビサイズの紙がありません。
 A3ノビのかわりに、A3とトンボ全部が入るように
 A3の紙にB4サイズ(80%縮小)でプリントアウトする必要があります
(余白が無いと校正が書けません)。



1.まず新規ファイルを
[ドキュメント]を選択して作成する



2.ノド小口天地を3mmに設定する。


3.1ページ目が自動的にできる
4.見開きのページ用のマスターを作る(教科書参照)

5.雑誌のレイアウト3ページ分のデータを作成し、完成する



1ページ目の扉はB4用紙にA4レイアウトにトンボをつけて出力
2-3ページ目は扉として2枚にしてB4の紙に出力するか







または、2+3ページを1枚としてA3の用紙に縮小して出力する



2015年10月9日金曜日

WEB 10/9の授業内容

フローチャートを描く   → info@cid.jp.netにメールに添付して提出

メニューボタン部分を動くように設置してみる

3テンプレートを決める→テンプレート内に2のメニューを組み込んでみる
               →具体的なやり方http://cid2015gd2.blogspot.jp/p/1_28.html

WEBサイトの仮組をして、見た目のデザインをバランス良く仕上げる 
           自分の過去作品を使ってバナーやロゴを完成させる

2015年10月6日火曜日

DTP 10/6の授業内容


DTP 10/6の授業内容

1)先々週の補足
授業で取り上げたBLOGの紹介の補足
>>(※)内は追記他はBLOGからの引用文

アマゾンでベストセラー1位になっている、「社内プレゼンの資料作成術」(前田鎌利著、ダイヤモンド社)。
プレゼン資料の作り方ノウハウの中身は、実に素晴らしい内容なのだが、
ここでも堂々と無断でネットから、画像を使うことが何の罪意識もなく、普通に書かれている。

本書P117~P119には、社内プレゼン資料に掲載する写真は、
Googleの画像検索を使えばいい。かつ見栄えのいい写真を使うため、
高画質の画像を検索すればいい、といった内容が書かれている。


ただ引用元を明記すべしとも、撮影主に許諾をとりましょうとも、フリーの画像だけ使いましょうとも、
どこにも書いていない。(※本来は書かなければ行けない。この本の欠陥的部分)

多分この本は社内資料の作り方本なので、社内資料だったら、ネットの画像は、無断で勝手に使っても、
法律的には問題にならないという、
スタンス(※公的資料では問題になる)なのだろうが、
一言も著作権についての配慮がないのは、佐野氏に限った話ではなく、今の多くの一般人にとって、ネット画像は検索して、そこから拾ってくればいいというのが、当たり前になっているからではないか。

いやいやネットにある画像を、勝手に使っちゃダメだから。

(※本来は社内資料でも問題になるものだがグレーゾーン扱いになっている)
許諾をとらないまでも、せめて引用元を載せないと。

でも多くの一般の人には、無料に勝手に使っていい、フリー素材サイトにある写真と、Googleの画像検索で出てきた、写真との区別はわからないのではないか。
ネットにある写真は自由に使っていいと、思い込んでいる人多数ではないのか。

(※この認識では一般人の何も知らない人と同じ。
デザインの専門として学んだ皆さんはネットから勝手に画像をパクってはいけません)


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


2)デザインの専門用語と専門のしくみの解説

組み版と禁則処理/段組み文字組

記号と校正記号

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

3)作業----提出先メールアドレスはinfo@cid.jp.net

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

  ------>>>著作権について
  ------>>>配布されているフォント(書体)の使い方

2015年10月5日月曜日

小テスト css-lesson (1学期の復習)--元々作られているテンプレートを改造する


http://yoko14145.com/cid/css-lesson.zip

から元データ(圧縮データ)をダウンロード

1・サーバとつながっている自分のサイトのフォルダの中に
「css-lesson」のフォルダを移動する。

2・css-lesson.htmをDreamweaverで開いて編集。
編集内容は 下記の通りの10ヶ所
  


 (10)
最後に、css-lessonのフォルダごと自分のサイトにアップロードする。(=提出)


 (7)のタイトルと文字の内容は下記を引用する事。

がん細胞、光らせて発見 ウミホタルの発光物質利用
青く光る甲殻類の一種、ウミホタルの持つ発光物質を利用して、マウスのがん細胞だけを光らせる技術を産業技術総合研究所の近江谷克裕主幹研 究員らのグルー プが開発した。青い光を透過性の高い近赤外線に変換することで、体の奥にあるがんも特定できるようにした。がんの新しい診断法の開発につながる成果だ。今 週の米科学アカデミー紀要で発表する。 ウミホタルは日本近海に生息する体長数ミリの甲殻類。発光物質「ルシフェリン」と、ある種の酵素が化学反応して光る。ルシフェリンは、ノーベル化学賞を受 賞した下村脩さんが初めて結晶化したことで知られる。



(9)の背景色の変更の仕方。
1.画面上のメニューバーの[ウインドウ]の[CSSスタイル]にチェックをいれる
2.CSSスタイルのパネルのexm_navi_right.cssを開く
3.bodyを選択すると[bodyのプロパティ]がその下のウインドウに出るので
4.background-colorを#990000に
5.background-imageを(url"")にする(又は削除する)

※http://自分のサイトのURL/css-lesson/
 で表示されるようにindex.htmlに名前を変えて保存しアップロードする。

公開先ページのURLリンクはここから確認




完成すると以下のようなビジュアルになります

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