This site has been archived. Please visit the Adobe Blog for the latest Adobe articles.
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと
これは目の付けどころがすごいなぁ。↓ fladdict ≫ HTMLで文字詰めするタイポグラフィー用JS とりあえずソースを見てみたら割とすぐjquery拡張にできそうだったのでしてみた。$.fn.kerning = function(options){ var options = $.extend({ kerningInfo: FLAutoKerning.DEFAULT_KERNING_INFO }, options); FLAutoKerning.process(this, options.kerningInfo); };こんなかんじのやつをちょろっと付けて、下のようにすれば同じふうになる。$('h3:not(.no)').kerning();というお話でした。 ソース: FLAutoKerning.jquery.js
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
本書がすばらしいのはまず、市川崑の映画ではなく、そのタイトルどおり『市川崑のタイポグラフィ』に目をつけたところである。 市川崑の「犬神家の一族」はじまるあの独特の文字デザイン=タイポグラフィは、「新世紀エヴァンゲリオン」をはじめ、「古畑任三郎」のクロスワード風のタイトルデザインなど、さんざんオマージュやパロディの対象にされてきた。 だが、この本ほど徹底した研究はいままでなかったのではないか。 ちなみに「エヴァ」で使われた明朝体は、本家「犬神家の一族」(このばあい1976年公開の最初のバージョンを指す)のクレジットの書体よりも肉太だったりする(これは意図的にそうしたものらしいが)。 このほかにも本書では、グラフィックデザイナーでもある著者ーーこの本のブックデザインも手がけているーーならではの方法によって、市川崑の文字デザインの秘密が次々とあきらかにされている。 じつは、映画のタイトルロゴやク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く