Subscribe Twitter

2012年2月29日水曜日

このエントリーをはてなブックマークに追加

◉ 今日のGoogleホリデーロゴは、オペラ作曲家で有名なロッシーニの生誕220年を祝い、かつ今年は閏年であることを告げるイラストに。



今年は、太陽暦において4年に一度、1日多くなる閏年にあたり、今日はその閏日。

閏日生まれの有名人として、オペラ作曲家 ジョアキーノ・ロッシーニ(Gioachino Antonio Rossini,)の生誕を祝っている。


ロッシーニは、1792年2月29日生まれ(生誕から220年)、1868年11月13日に亡くなっている。

Googleホリデーロゴのイラストは、ロッシーニの代表作であるオペラ「セビリアの理髪師」の情景らしい。

イラストのキャラクターがなぜ蛙になっているのか?
閏日生まれの人は、4年に一度しか歳をとらない・・・などとジョークの材料にされるが、英語でも年を跳び越えるという意味で、閏年のことを「Leap Year」という。

Leap とは、「跳ぶ」とか「跳びはねる」という意味を持ち、跳びはねる動物といえば蛙…と推察したがどうだろう。




2012年2月26日日曜日

このエントリーをはてなブックマークに追加

◉ 文字をメタリックな雰囲気に加工サンプル・その(2)チョコレートの包み紙のようなテクスチャー



メタリックな雰囲気に加工・その(2)

前回同様使用したすべてのフォントは、個人利用、商用利用ともにフリーの欧文フォント。
使用したフォントのダウンロード用urlは最下段に列記。

また、今回の画像も、クライアントの環境を考慮して、Mac OS X 10.4 のPhotoshop CSで作成。

メタリックサンプル・レイヤースタイル03

チョコレート(ウィスキーボンボンなど)の包み紙のような雰囲気のスタイル。
テクスチャー(パターン)を使用。
画像サイズ:800px × 300px(掲載画像は75%縮小)

03-1
使用したフォントは、Titan One(Regular)、180pt (滑らかに)、AV(文字送り)-25。


03-2
同じスタイルを別のフォントにも適用してみた。屋根型の稜線が真ん中に入るので、あまり細いフォントには向いていない。

なお、スタイルの保存は、「メタリックな雰囲気に加工・その(1)」に記載。

使用したフォントは、Squealer(Regular)、215pt (滑らかに)、AV(文字送り)0。
背景レイヤーなどは、すべて03-1と同じ。


テクスチャー(パターン)の登録
シンプルな網目やレンガなどのパターンなら、なんでも似たような効果が出せるが、もしうまくいかない場合は今回使用したパターンを以下に用意した。

右の画像を、デスクトップなどへドラッグ、もしくは右クリックから「イメージをコピー」などを使ってコピーする。



それをPhotoshopで開き、command + A(Ctrl + A 、Windows)や、メニューバーの[選択範囲]から[すべてを選択]で、画像全体を選択する(画像全体の場合は、選択範囲を指定しなくても定義できるが、念のため)。




メニューバーの[編集]から[パターンを定義…]を選ぶ。

[パターン名]をつけるダイアログが開くので、名前を入力して[OK]をクリック。
[塗りつぶし…]などに利用できる六角形のパターンが登録される。


背景レイヤーを作成
中心が#9a9a9a、外側が#555555の円形グラデーション。
画像の中心付近から、四隅のどれかにグラデーションツールでドラッグ。


レイヤースタイル03の内容

■ ドロップシャドウ(描画モードの色:#000000)


■ シャドウ(内側)(描画モードの色:#ffffff)

■ ベベルとエンボス

■ ベベルとエンボス・輪郭

■ ベベルとエンボス・テクスチャ 

■ サテン (描画モードの色:#F8BD08)

■ グラデーションオーバーレイ

■ グラデーションオーバーレイ・グラデーション


今回使用したフォント
Titan One(Regular)

Squealer(Regular)
(このサイトの場合、商用フリーとそうでないフォントが混在するので注意)

Google web fontsをMacにインストールはこちら:
メタリックな雰囲気に加工・その(1)はこちら:


2012年2月22日水曜日

このエントリーをはてなブックマークに追加

◉ 今日のGoogleホリデーロゴは、ドイツの物理学者ハインリヒ・ルドルフ・ヘルツの生誕155年を祝うアニメだったが、このアニメが興味深い。


ハインリヒ・ルドルフ・ヘルツ(Heinrich Rudolf Hertz)は、ドイツの物理学者で、1857年2月22日生まれ(生誕155年)。亡くなったのは、1894年1月1日。

1888年に電磁波の放射の存在を、それを生成・検出する機械の構築によって初めて実証した。

1930年、ヘルツの名前は、国際単位系(SI)の周波数を示す単位としてのヘルツに採用されている。hertz、記号はHz。

このアニメーションだが、今調べてみたら、49コマの画像を0.1秒で切り替える無限ループのアニメーションgifだった。

自分が知らないだけかもしれないが、Googleロゴにしては、ちょっと珍しい感じがしたのでpostすることにした。

flashのような滑らかな動きではないが、昔の明滅するようなオシロスコープの波形を見ているようで面白い。


Google のトップページ:http://www.google.co.jp/


2012年2月21日火曜日

このエントリーをはてなブックマークに追加

◉ 文字をメタリックな雰囲気に加工する依頼があったので、いくつかサンプルを作ってみた。せっかくなのでシェアすることに。


メタリックな雰囲気に加工・その(1)

webでメタリックなPhotoshopスタイルを探すといろいろ見つかるが、無料のものは、いまひとつクライアントのオーダーとはあわない。有料のスタイルセットならそこそこのものがあるが、今回のギャラに見合うかどうかが問題、そこで自作することにした(もちろんwebで見つけたものを参考にしたものもあるが)。

使用したすべてのフォントは、個人利用、商用利用ともにフリーの欧文フォント。
使用したフォントのダウンロード用urlは最下段に列記。

「メタリック」ということで、レイヤースタイルの「サテン」を多用している。
サテン(Satin)とは、うす絹生地のことで、レイヤースタイルの「サテン」は、うす絹の持つ艶や光沢感を再現、付加してくれる。

なお、今回の画像は、クライアントの環境を考慮して、Photoshop CSで作成。

メタリックサンプル・レイヤースタイル01

側面が艶ややかに光る金色のスタイル、「エンボス」を使用
画像サイズ:800px × 350px(掲載画像は75%縮小)
背景レイヤー:円形グラデーション #919191→#353535

01-1
フォント:Emblema One Regular(Google web fonts)180pt [滑らかに]

01-2
細めの筆記体フォントに同じレイヤースタイル01を適用
フォント:Norican Regular(Google web fonts) 220pt [滑らかに]

レイヤースタイル01の内容

■ドロップシャドウ

■シャドウ(内側)

■ベベルとエンボス 左側で「輪郭」をチェック

■サテン 色は、#EAD41B

■カラーオーバーレイ 色は、#FFE400

■グラデーションオーバーレイ
グラデーション:#B5BEC3→#EDF4F6

スタイルの保存
レイヤースタイルが設定されているレイヤーを選択し、「スタイルパネル」の空いたところへカーソルを移動させるとカーソルが「塗りつぶし」ツールと同じような形状になる。


そこでクリック、名前を付ける「新規スタイル」のウインドウが開くので、スタイル名を入力して「OK」ボタンをクリック、スタイルが登録される。



メタリックサンプル・レイヤースタイル02

黒っぽい鉄色スタイル、「ベベル(内側)」を使用
L字型の六画レンチのような形状を想定
画像サイズ:800px × 350px(掲載画像は75%縮小)
背景レイヤー:円形グラデーション #AAAAAA→#555555


02-1
フォント:JUICE Bold(Bold)180pt [滑らかに]


02-2
太めのフォントに同じレイヤースタイル02を適用
フォント:ChunkFive(Roman) 180pt [滑らかに]


レイヤースタイル02の内容





■ドロップシャドウ

■シャドウ(内側)

■ベベルとエンボス

■サテン 色は#000000


今回使用したフォント(いずれも商用利用可)

Chunkfive.otf
JUICE
Emblema One Regular

Norican Regular

「Google web fontsをMacにインストール」はこちら:

2012年2月19日日曜日

このエントリーをはてなブックマークに追加

◉ Google web fontsの使い方(html作成初心者に解説したまとめ)
・その(3)「Google web fontsのフォントをMacOS Xにインストール」


Google web fontsのフォントをMacOS Xにインストールしてみた
(インストールするMacOS Xは、10.4〜10.7)

Google web fontsは、webページで使うだけでなく、ダウンロードしてローカルで使うことも可能。その(1)の繰り返しになるが、「Google Web Fonts」で公開されているフォントはすべてオープンソースとなっていて、商用でも非商用でも無償で利用できる。

フォントのダウンロード
「Google web fonts」のページで、フォントを選び(ひとつでも複数でもかまわない)、下のブルーのエリアのCollectionにフォントファミリー名が表示されていることを確認して、


画面右上に表示される「Download your Collection」をクリック。


別窓が開いて、「You do not need to download the font to use it on your webpages. Instead, refer to the "Use" section.」(webページ上で使用する場合は、フォントをダウンロードする必要はありません。代わりに、"Use"を参照してください)とワーニングが出る。

webページで利用する場合は、その(1)でも触れたように、確かにダウンロードする必要はない。しかし、今回はwebページで利用するのではなく、Macにインストールするためなので、ワーニング文の下の「Download the font families in your Collection as a zip -file」をクリックする。「fonts.zip」の名称でzip圧縮形式のファイルがダウンロードされる。


Safari(MacOS X 10.4)を使った場合、ダウンロードしたzipファイルが自動で解凍されて、「fonts」という名称のフォルダができる。もし自動で解凍されなければ、zipファイルをダブルクリックして解凍させる。

なお、サンプル画像は、MacOS X 10.4のものなので、フォルダアイコンが古い。
左側の「fonts」フォルダを開くと、右側のように各フォントのフォルダがまとめて入っている。


ダウンロードしたGoogle Web Fontは、ttf形式。
通常Macでフォントをインストールする場合、フォントファイルをダブルクリックで、Font Book.appが開き、表示される「フォントをインストール」ボタンをクリックして完了する。
今回、「Macにインストール」を試したGoogle web fontsのフォントは以下の11フォントファミリー。
Asap-Regular.ttf(含むBold、BoldItalic、-Italic)、BadScript-Regular.ttfChango-Regular.ttfDroidSans.ttf(含むBold)、EmblemaOne-Regular.ttfEuphoriaScript-Regular.ttfMacondo-Regular.ttfMonoton-Regular.ttfNorican-Regular.ttfPiedra-Regular.ttfTitanOne-Regular.ttf

MacOS X 10.7
ttf形式のままダブルクリックして、Font Book.appが起動し、「インストール」ボタンをクリック、11フォントファミリーともインストールできた。ただ「EmblemaOne-Regular.ttf」のみ、「1個の小さな問題が見つかりました。注意して続けてください」とのワーニングが出た(インストールはできた)。
MacOS X 10.6
MacOS X 10.7と同様にして、11フォントファミリーすべて問題なくインストールできた。
 MacOS X 10.5
こちらもMacOS X 10.7と同様にして、11フォントファミリーすべて問題なくインストールできた。
改めて画像を比較してみると、MacOS X 10.6のFont Book.appと、MacOS X 10.5のそれは、見た目でほとんど変わらないことがわかる。
MacOS X 10.4の場合はやや面倒
ttfファイルをダブルクリック、Font Book.appが起動、「インストール」ボタンクリック(下画像左側)で問題が発生した(下画像の右側)。「重大な問題が見つかりました。このフォントは使用しないでください」という表示になる。すべてのGoogle Web Fontで問題が発生するか未確認だが、このときダウンロードした11のttfはすべて駄目だった。


ttfとは
拡張子の「.ttf」は、TrueType(トゥルータイプ)形式のフォントファイル。TrueTypeのもう一つの拡張子「.ttc」(True Type Collection)は一つのファイルにプロポーショナルと等幅など類似した複数のttfフォントを入っているもので、MacOS Xの古いバージョン(たしか10.6未満)では扱えない。

ttf形式なら古いMac OSXでも利用できるはず(認識が間違っているかも)だが、Windows用のものは、MacOS X用のTrueTypeと内部の構造が違う場合があるし、最近は、OpenType(オープンタイプ)の一部形式も「.ttf」になっていることがあるのでややこしい。

OpenTypeでもPostScriptフォント形式(拡張子「.otf」)ならば、ベジェ曲線で表現される形式なので、MacOS Xで問題なく利用できる(はず)、そこで、このttfをotfに変換してみた。


webサービスでttf→otf変換
「ttf→otf変換」で検索するといろいろヒットすると思うが、今回はこちらのサイトを利用させていただいた。
http://www.henkan-muryo.com/converted.php
  1. メニューの右側にある「フォント」をクリック。
  2. 入力先(変換したいファイル)」をクリック。
  3. ローカルにあるttfファイルを選ぶ。
  4. アップしたフォント名、サイズが表示される。
  5. 出力先」のセレクトボックスのプルダウンで「otf - OpenType font」を選択
  6. [変換する]ボタンをクリック。
  7. 少しして、変換が終わり「完了したファイルはこちらから」と書かれた下に変換されたotfのリンクが表示される
  8. MacOS X 10.4の場合は、このリンクをoption + クリック(ただクリックすると、ブラウザに文字列として表示されてしまう。それでも保存はできるがあまり気分はよろしくないので)。
  9. フォントファイルがダウンロードされる。拡張子「.txt」が付いているのでこれを取る変更の確認のダイアログが出るので、「".otf"を使用」ボタンをクリック。
  10. .otf」として認識される。
  11. otfをダブルクリックしてインストール。
ちなみに、画像サンプル用に使った「Monoton-Regular.ttf」は、変換過程でもエラーが出た。それ以外の10フォントファミリーは上の手順で無事に「.otf」に変換、インストールできた。





このエントリーをはてなブックマークに追加

◉ Appleが、10,000米ドル分のApp Storeギフトカードが当たる「250億Appカウントダウンプロモーション」をおこなっている。


2008年7月にオープンしたApp Storeは、2011年1月にダウンロード数が100億本を、同7月には同じく150億本を突破し、その際に同様のプロモーションを行っている。オープンから3年と7ヶ月ほどで250億本を突破する。
ちなみに、現在 iPhone、iPod touch、iPadで利用できるアプリの数は55万以上。


プロモーションは、250億本目のアプリをダウンロードした人に10,000米ドル分のApp Storeギフトカードが贈られる、というもの。

以下、「250億Appカウントダウンプロモーション」の日本語ページから抜粋。
なお、同ページから「App Storeで見る」のリンクをクリックして、iTunesが起動、英語表記になる場合は、右下の国旗アイコンをクリックして、「日本」を選び、「250億Appカウントダウンプロモーション」のバナーをクリックすると、それ以降日本語の表記になる。

賞品
当選者1名に iTunes Store、App StoreおよびiBook Store(当選者の在住国におけるサービス提供状況にしたがう)で利用できる10,000米ドル分のApp Storeギフトカードクレジット

 参加資格
  • 参加者は在住する国の法律上求められる参加資格を満たす最低年齢以上
  • 対象となるApp Storeを有する国の在住者
  • 在住する国からアクセスすることができるApp Storeから、またはApple.comから本プロモーションに参加しなければならない。
  • プロモーションへの参加には在住する国における公式規約が適用
    (原文は脱字?「国」を追加)
  • エントリーは個々の消費者のみに限定され、企業または法人には参加資格はない
    など
 エントリー方法
 
250億Appカウントダウンプロモーション:


2012年2月18日土曜日

このエントリーをはてなブックマークに追加

◉ Google web fontsの使い方(html作成初心者に解説したまとめ)
・その(2)「前回の補足」


このpostは、「Google web fontsの使い方(html作成初心者に解説したまとめ)・その(1)」の続きです。その(1)からお読みください。

今回のpostをまとめている間に、フォントファミリーが3つ追加されている。

前回の補足

1. Choose the styles you want:で、右側に「Page load」と書かれたインジケーターが表示される。fontを実際に使うとき、webページにすべてのフォントがロードされる時間を示していて、緑色内に収まっていればユーザビリティ的に推奨されるということになる。下の例ではやや多すぎるかもしれない。


● コレクションしたフォントはキャッシュされないので、「Google web fonts」ページを一旦閉じて再び開くと、内容がクリアされてしまう。内容を保存しておきたい場合は、右上「Bookmark your Collection」をクリックして、別窓で表示されるurlをコピーしておく。


(例)http://www.google.com/webfonts#ChoosePlace:select/Collection:Emblema+One


● 左側ペインで、フォントを検索する際、目的のフォントのカテゴリーが決まっている場合は、[Filters:] で、チェックを外し、目的のフォント以外のカテゴリーを隠して表示させることができる。








また、左側ペインの [Styles:] の「Show all styles」をクリックすると、フォントにboldやItaricがあればすべて表示される。「Hide all styles」で基本のフォント一つに戻す。


[Chooze](下のブルーのエリア)の際の右側ペイン [Word]、[Sentence]、[Paragraph] の3つのタブは、初期で [Sentence] が選ばれていて、 [Preview Text] の内容が表示フォントサイズ28ptで横一列に表示される。表示サイズの変更は、9〜72で13段階。


[Word] タブを選ぶと、表示フォントサイズ72ptでPreview Textの頭部分を表示する。表示サイズの変更は、48〜120で5段階。一度に多くのフォントを表示させる場合はこちらを選ぶ。


[Paragraph]タブを選ぶと、を段落単位で表示して、実際の文章に利用した場合の感じがつかめる。表示フォントサイズは13pt。表示サイズの変更は、9〜16で6段階。


[Preview Text:] でサンプル表示させる欧文の文章を変更できる。初期では「Grumpy wizards make toxic brew for the evil Queen and Jack.」(気難しいウィザードは悪の女王とジャックのために有毒な醸造を行います)となっている。その他の用意された文章に替えたり、好きな文章を直接打ちこむか、コピー & ペーストして変更できる。


各フォントの右下部分に表示される各ボタンについて
1. フォントにItalicやBold、Italic Boldがある場合は、[See all styles] ボタンが追加される。これをクリックすると、すべてのスタイルを表示してくれる。ボタンは、[Hide all styles] に変わるので、クリックすると元に戻る。

2. [Quick-use] ボタンをクリックすると、「1. Choose the styles you want:」の状態に移行する。


3. [Pop out] ボタンをクリックすると、別窓でその書体のすべてのスタイルや、すべてのglyph(グリフ)など詳細を表示してくれる。ちなみにグリフとは、日本のフォント関連では「文字を可視化した形状」を指す。



Google web fonts:http://www.google.com/webfonts