2016年11月1日火曜日

なにがちがって動かないのか確認する方法

時刻:

2015年11月10日火曜日

DTP過去記事2学期一覧

赤＝課題提出時のチェック項目
青＝計画をねる段階で何を考えておく事が必要かについての要点
灰＝日程の変更調整

プリントアウトの仕方---10/13の6から
時刻:
ラベル:

2015年11月5日木曜日

自分のWEBサイトで採点チェック項目に入るもの


採点チェック一覧表



サイト

1.indexがあるか　

2.menuバーがあるか 

3.テンプレートにmenuが組み込まれているか 

4.基本のテンプレートデザインを完成する (※ 段組みレイアウトになっていること！／フレームは×) 

5.CSSを書き出す　※<head>~</head>内にピンクの文字<style type="text/css">〜</style>があって 　全ページに同じ内容の場合×
　　　　　　　　　　直し方=この方法で外部.cssファイルを作成してリンクする

6. 4を複製して各コンテンツを作成する 

7.オリジナリティのあるサイトを作成し完成する 
オリジナリティ？＝以下のうちのどれかの条件を盛り込んであるか、
画像パーツを工夫して作成しているかなど
★ツールを組み込んでより高度なサイト作成を行う 
★画像の多いサイトを作成する場合lightboxやwebフォトギャラリーを使う  
★SNSを外部表示するjsツールを使用する   
★オンラインジェネレーターを使用する 

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

web用に保存で色がおかしくなるときの対処法



A.
web用に保存の画面で
sRGBに変換の項目にチェックを入れる

それでもなおらない場合

B
http://noir.mods.jp/web/?p=10

1.画像をphotoshopで開いて、
2.編集→プロファイルの変換を選ぶ
3.sRGBで始まる項目を選択
 (ここがCMYK関連やAdobe RGBになっていると色がおかしくなる)
4.その後web用に変換をする
時刻:
ラベル:

2015年11月2日月曜日

Twitterをwebサイトに組み込む

SNSなどの外部ツールを組み込む

1.まずは  2学期WEB提出物  の「サイト」のテンプレートを完成させて、2.完成したテンプレートをコピーして本文(コンテンツ)に各ページ内容を作成して行く

3.その１つに各SNSのページなどを作成する。

[参照]　http://ateitexe.com/web/twitter-widgets-customize/

1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.検索クエリの窓に自分のサイトに合うワードを入れる。

5.右下に出てくるコードをコピーしてサイト内の表示したい場所にペーストする。
(index.htmlが完成している人は、index.htmlをコピーしてsns.htmlまたはtwitter.htmlという名前で保存し、sns.htmlの本文の部分にペーストする。)
----------------------------------------------------------------------

例) 自分のtwitterを持っている場合は自分のtwitterを表示してみましょう。


1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.ユーザー名を入れて「ウィジェットを作成」のボタンをクリック
5.右下に出てくるコードをコピーしてHTMLの表示したい場所にペーストする。

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

Facebook の組み込み
　2種類埋め込むコードが出てくる事が多いので若干複雑

個人ページのバッジの埋め込み
https://www.facebook.com/badges/
http://ameblo.jp/7natsu5/entry-11344350567.html

Social plugin
http://developers.facebook.com/docs/plugins/

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

youtubeの組み込み
サイトに埋め込みたいyoutubeのページを表示している時に
右下の「共有」をクリック→下に出てくる「埋め込みコード」をクリック





時刻:
ラベル:

2015年10月27日火曜日

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

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


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


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


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

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

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




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


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

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







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

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


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

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

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

DTP授業スケジュール



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

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




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

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)１枚綺麗なテンプレートをまず作る
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導入方法
１．ダウンロードLightBoxサイトからLightboxをダウンロードして下さい。
ダウンロードはこちら
２．ZIPファイルを解凍LHACA、LHASAなどで解凍して下さい。
解凍するとdistというフォルダの中に
「css」「images」「js」が作成されます。



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

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





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

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

</body>の直前の行に
を挿入します。
※公式サイトの説明にはhead内に入れるとありますが、head内では動きません。
※公式サイトの説明にはlightbox.jsやlightbox.min.jsを入れると書いてありますが、この２つのファイルはそれだけでは動きません。
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テクニカルガイドより)



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















↑仕上がり線(裁断機の切る線)に近い所に文字をレイアウトしない

↓仕上がり罫線は入れない(=裁断機の切る線上に黒い線を引かない)





















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













テンプレートの作り方 (InDesign)



※見開きのページの作り方を間違えないように。







出力の仕方



※A4見開きのプリントアウトの仕方は通常はA3ノビの紙に出力しますが、



　Mac室のプリンタはA3ノビサイズの紙がありません。



　A3ノビのかわりに、A3とトンボ全部が入るように



　A3の紙にB4サイズ(80%縮小)でプリントアウトする必要があります
(余白が無いと校正が書けません)。















1.まず新規ファイルを

[ドキュメント]を選択して作成する



















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











3.1ページ目が自動的にできる





4.見開きのページ用のマスターを作る(教科書参照)



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


















トンボや印刷マークの設定



http://helpx.adobe.com/jp/indesign/kb/2625.html





1ページ目の扉はB4用紙にA4レイアウトにトンボをつけて出力

2-3ページ目は扉として2枚にしてB4の紙に出力するか



































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





































時刻:









ラベル:













        

      









登録:
投稿 (Atom)