【授業】Webの色 DTPの色

モニターの色と刷版の色

Photoshopでの色を指定するとき、指定したカラーの下に「黄色▲!」マークが現れることが。
印刷で再現されないのはもちろん、他のモニターでも、
100%再現されるとは限らないので要注意

基本「彩度が高い」色はプリントで再現できない
CMYKのインクが、紙にのってできる色の限界があるから。


(確かに作画の仕事で調色の時も「彩度の高い色」は通常のカラーラインだけでは作れず、
蛍光色をいれて無理やり彩度を上げてつくりましたw)
※(調色=カラーチップなどで指定された色を絵の具やインクを混ぜ合わせて作る作業)


「黄色▲!」マークをクリックすると、実際に再現できる色になる

とはいえPCに任せると、すごいくすんだ色になってしまうので、
せめて手動で再現できる、できるだけ彩度の高い色へ修正する必要がある。
(再現できないまま版刷りに出すと、思わぬくらい「かなりくすんだ色」に勝手に変換されてしまうため)

HSB とLab

「HSB」はPCで再現
CMYK」は印刷で再現するカラー

さらに
webサイトのデータは「RGB」でつくるが、
HSBをRBGに変換するときに数値がずれてしまうのでHSBやLabで
指定すると、結果的にだいぶ色が狂ってしまうので注意


色の再現性は紙しだい

紙によって、インクのにじみや反射がちがってくるので、
紙によって色の再現が違ってくる
ざらざらしている程くすんでくる。和風のテイストを出すのにはいい
色の再現性では、「アート紙」「コート紙」がいいかも

PCは青が強い!

上記のとおりビビットな色は紙では基本再現できない
特に青(PCは青の再現がつよいが、インクではなかなか青味がでない)
青の幅が狭くなってしまう(にごって見える)

逆をいえば、PCでは青はバリエーションが出せるのだから
きれいな青の組み合わせをカラーピッカーを使ってデータを作っておくといい。

その都度の経験値だと、ブレがでてしまうので、
日頃から色を拾ってファイリングしておくと便利

注意点

  • CMYK数値で、コンマいくつという単位で指定はできない。

5%単位が普通(性能がいい印刷機では1%ということもできる)

  • イラストレーターはCMYKが前提なのでRGBのHSBは使いずらい
  • カラーモードとカラーパレットの色モードを合わせる

 (CMYKとRBGの間で色が変換される際に数値がずれてしまう)

色の参考サイト

kuler(クーラー)世界中の色の組み合わせの見本が出ている
ADOBEはコマンドのオプションから飛べる)

持って帰ったカラーチップをIllustratorPhotoshopの「色相補正」で、
ひとつの色の組み合わせの数値の差をそのままに色味だけ変更できる


原色大辞典
ブラウザで名前が定義されている140色の色名と16進数
他に「和色大辞典」「洋色大辞典」も

イラレシピ
イメージごとの配色パターンや国別の伝統色見本

イラストレーターでの色調整

編集→
カラーを編集→オーバーープリントブラック(墨のせのブラック)
カラー調整RBG
カラー調整バランス
カラー反転=Psの[CONT+i]の捕色を作る作業
グレースケールに変換
彩度調整(いまつくった、発色の調整ができる)色が濃すぎるとき、バックグランドに持って生きたいときとかにつかえる


Psと同じようなフィルタレベルはあるが
ピクセルベースで変形する感じになるので、カラー編集がいちばんいい

【授業】0910 可変レイアウト

一つのサイトをPC(L)/タブレット(M)/スマートフォン(S)で表示させる

※高解像度のものは対応できない
PC(L)で表示
20120911051105
タブレット(M)で表示

スマートフォン(S)で表示

 GPS機能と連携させて地図を表示

現在地の取得

「iPhone3G(S)/4(S)」についている「Wi-Fi」「携帯電話ネットワーク」「GPS」を組み合わせて現在位置を割り出す

「位置情報」を利用するには、JavaScript内でイベントハンドラを登録します

navigator.geolocation.watchPosition(successFunc, errorFunc);

「navigator」オブジェクトの「geolocation」を利用し、「watchPosition」メソッドによって連続的に位置情報を取得します。
位置情報が取得できた場合は、「successFunc」関数が実行され、エラーが起きた場合は「errorFunc」関数が実行されます。

自分がなにを使うか(javascriptとか)によってチェックをいれて表示させるアプリ
download modernizr2.6.2

今回はmodernizr.jsをダウンロードして組み込む

Google Maps API を使う

Static MAP API 〜シンプルな地図画像表示〜

JavaScriptをつかわない、シンプルな画像を簡単に埋め込む方法
[Googole Static Maps APIのURL]

http://maps.google.com/maps/api/staticmap?parameters

緯度 /南北(latitude) =「lat」
経度 /東西(longitude) =「lng」「lon」

<パラメーター>
center:表示させる地図の真ん中
zoom:表示させる拡大率(整数で入力)
size:表示させる地図の大きさ

「緯度」「経度」を検索する
Googlecoding
住所やランドマーク名から経度、緯度を検索してXML形式で返します。

■ Geocoding API 仕様
HTTP Request Method は GET
リクエス送信先は http://www.geocoding.jp/api/
必要なパラメータは1つだけ q=住所やランドマーク名称など
TOKYO97風の座標が必要な場合は d=tokyo をつけて
検索結果の検証が必要な場合は v=1.1 をつけて(2006年8月4日追加)
リクエスト送信時の文字コードは UTF-8 にしてください
検索結果のXML文字コードは UTF-8 です
XMLのフォーマット種類は 3種類(成功時、重複時、エラー時)
具体的な使い方はWeb API実践リファレンスブックを参考にしてください。

SeaGate HomePage
Plus-a.net

表示させる

http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦幅>&sensor=<ユーザーの位置情報取得センサーの使用の有無>

渋谷ヒカリエ」をgoogleCordingで検索

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Map Test</title>
</head>
<body>
<a href="http://maps.google.com/maps/api/staticmap?center=35.701055,139.74202&zoom=18&size=320x480&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>

GoogleMaps API VER3 をつかって表示させる

GoogleMaps API VER3

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps API</title>

<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!-- 【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize() {

  // ■地図を表示する緯度経度を指定する
  var latlng = new google.maps.LatLng(35.681382,139.766084);
  
  // ■地図必須プロパティを設定
  var myOptions = {
    
    // ■ズームレベルの指定 0〜17
    zoom: 14,
    
    // ■地図の中心を指定(上記で設定の緯度経度latlng)
    center: latlng,
    
    // ■地図のタイプ設定
    //  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID:写真タイルと主要な機能、TERRAIN:物理的な起伏を示すタイル
    mapTypeId: google.maps.MapTypeId.ROADMAP
    
  };// 地図プロパティここまで
  
  // ■<div id="map_canvas">と結びつけて、その領域に地図を描く
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // ■中心にマーカーの表示
  var marker1 = new google.maps.Marker({
  position: latlng,
  title:"東京駅"
  });
  marker1.setMap(map);
	
	// ■マーカーの追加表示(緯度経度指定の場合)
  var myLatlng = new google.maps.LatLng(35.6853438,139.7530782);
  var marker2 = new google.maps.Marker({
  position: myLatlng,
  title:"皇居"
  });
  marker2.setMap(map);
	
	// ■マーカーをクリックしたら、情報ウィンドウを表示
  var marker1text = 'ここは<span style="color:#f00;">東京駅</span>です'
  var infowindow1 = new google.maps.InfoWindow({
    content: marker1text,
    maxWidth:200
  });
  google.maps.event.addListener(marker1, 'click', function() {
  infowindow1.open(map,marker1);
  });
	
  var marker2text = 'ここは<span style="color:#f00;">皇居</span>です'
  var infowindow2 = new google.maps.InfoWindow({
    content: marker2text,
    maxWidth:200
  });
  google.maps.event.addListener(marker2, 'click', function() {
  infowindow2.open(map,marker2);
  });

}//initialize() 

</script>

</head>
<body onload="initialize()">

<!-- 地図はここに描画される -->
<div id="map_canvas" style="width: 640px; height: 480px;"></div>

</body>
</html>


ルート検索マップ + 詳細表示