2015年9月11日金曜日

テンプレートとはそもそも何か？

テンプレートとは？ WEB Dreamweaver

テンプレートとは？　←　クリックでwikipedia[webテンプレート]へジャンプ

Webテンプレート（ウェブテンプレート）は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。

------テンプレートの例を見てみましょう。------

無料配布されているテンプレートを紹介しているサイト


↑
このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に
<script type="text/javascript" src="userAgent.js"></script>
と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照：http://www.html5-memo.com/css3/pc_bunki/


<<<<<本日の作業>>>>>
自分のサイトのレイアウトを
どのパターンにするのか考えましょう
Aパターン：
上記のテンプレートのリンクから、自分のサイトの計画に合うものを使って作成を始める。

 Bパターン：

自分のサイトの計画しているレイアウトが、上記のテンプレートのリンクにはない場合はDreamweaverから近いテンプレートを使って作成する

板書


時刻:
ラベル:

動くメニューの種類あれこれ。


日本語説明のあるサイト

jQueryで動くナビゲーション 

【CSS3】マウスオーバーでモワっと動くナビゲーション

jquery css マウスの動きに合わせてナビゲーションの要素が ...

jQueryマウスで動くメニューバー | CSSPRO

CSS3のtransitionで作るスムーズに動く縦メニュー

メニュー的なもの
メニューになりそうなもの(ギャラリーにも使えるものを含む)

Image Rotator with Description
サイドのメニューをクリックすると画像が変わる&キャプション
Fancy Thumbnail Hover Effect
サムネイルをクリックすると大きな画像が切り替わる
slidedeck
マウスだけで全てを閲覧できるスライドメニュー
Content Slider Using jQuery UI / ベーシックな画像ナビゲーション
bxGallery / シンプルな画像ナビゲーション
Background Image Navigation / 背景がマウスオーバーでスライドするメニュー
IconDock / アイコンが滑らかに拡大していくドックメニュー
Horizontal Tooltips Menu / アイコンメニューにツールチップがスムーズに追従
Realistic Hover Effect / 影や反射のあるアイコンがふわっと浮くエフェクト
Rolling Rounded Menu / アイコンが回転しながら開くユニークなメニュー
Garage Door Style Menu / ガレージのドアのように開く画像メニュー
Animated Menus / ゆっくり切り替わるクールなメニュー
Outside the Box / アイコンが滑らかに拡大するドックメニュー
BubbleUp / ユニークなアニメーションで拡大するアイコン
AutoSprites / cssスプライトとjQueryをあわせたメニュー
jQuery Dashboard / ダッシュボードパネルに隠されたアイコンメニュー
Smooth Animated Menu / すとんとアイコン付きの画像が降りてくるメニュー
Elastic Thumbnail Menu / スムーズに拡大するサムネイルを使ったメニュー
megamenu / 画像がドロップダウンするメガメニュー
Spy Effect / 縦にどんどん下がっていくアイコン付き可変メニュー
quicksand / アニメーション付きでソートできるアイコンメニュー
Horizontal Accordion / 画像チラ見せアコーディオン


CSS3css3を使ってるプラグイン(メニューが動くタイプのcssを含む)

polaroid photo viewer with CSS3 / ポラロイドを動かせるcss3のギャラリー
CSS3 Lightbox Gallery / バラバラに散らばった写真をクリックするとLightboxで拡大
Cufonized Fly-out Menu / クールなアニメーションエフェクトのフライアウトメニュー
Slide Down Box Menu / マウスオーバーで画像が降り、テキストが上がるクールなメニュー
Pretty Simple Content Slider / キャプションとタイトルのスライドインが素敵なメニュー
ShineTime / マウスオーバー時のエフェクトがかっこいいギャラリー
css3 transition slide / キャプションがクロススライドするシンプルなスライド
Contextual Slideout Tips / クリックでコンテンツがアニメーションしながら広がる
Bubble Navigation / マウスオーバーでサークルが広がり、子メニューが出現
A Fresh Bottom Slide Out Menu / 遅れて出てくるアイコンがキュートなメニュー
Apple-Style Icon Slide Out Navigation / アイコンが降りて来て、裏に入っていくメニュー
Little Boxes Menu
　 バラバラになるアニメーションがユニークなボックスタイプのメニュー
Slide Out Navigation / アイコンの出方が可愛いスライドサイドメニュー
Interactive Picture / マウスオーバーでキャプションがスライド、クリックで画像が上がってくる
Thumbnails Navigation Gallery / サムネイルギャラリーを使ったメニュー
Sliding Panel Photo Wall Gallery / 画像を全体に表示、ギャラリー化
Photo Desk / クリックするたびに角度が変わるポラロイドタイプギャラリー
Beautiful Photo Stack Gallery / スライドギャラリーとLightboxをあわせたもの
Image Highlighting and Preview / 少し回りくどいLightbox
Kitchen Table / ギャラリーとLightboxをcss3も使って実装
時刻:
ラベル:

2015年9月8日火曜日

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

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



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

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


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

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


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

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

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

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

DTP２学期日程

DTP 第1回 ２学期

・ラフとサムネール
・プランシート(冒頭文概要)
日程
・著作権について
・フォントについて
・校正の時のチェックポイント
・組み版と禁則処理
・記号と校正記号／プリントアウト校正のチェックポイント／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の課題の提出の仕方一覧表

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



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

サイズ：19MB前後

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

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



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


サイズ：23MB前後

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

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


[pdfで提出]



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

[inddで提出]



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

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

[pdfで提出]



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

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

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

雑誌レイアウトの見本が見られるサイト
この授業内容をくわしく見る→→→→→→→→→→→→→
時刻:
ラベル:

2015年6月15日月曜日

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

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

この授業内容をくわしく見る→→→→→→→→→→→→→
時刻:
ラベル:

2015年6月12日金曜日

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

photoshopやIllustratorでメニュー用ボタンや背景画像を作成しても良いですが、
オンラインジェネレータを使うとある程度簡単にweb用素材を作成することが出来ます。
この授業内容をくわしく見る→→→→→→→→→→→→→
時刻:
ラベル:

2015年6月9日火曜日

画像の挿入の仕方(画像の差し替え方)

画像の変更は実は5カ所から操作が可能
この授業内容をくわしく見る→→→→→→→→→→→→→
時刻:
ラベル:
登録: 投稿 (Atom)