MdN Design｜総合情報サイト
Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。 リンクが設定されている個所をクリックすると、リンク範囲が点線で表示されるが、それを非表示にする方法を紹介しよう。 たとえば、画像上にリンクエリアを指定するクリッカブルマップにした際、リンク範囲とイメージに若干のズレがあると違和感を感じるが、非表示にすることでそれが気にならなくなる。クリッカブルマップは、複雑なテーブルを組んだりすることなく画像リンクを設定できるが、クリックした瞬間、リンク指定したエリアが枠として見えてしまう【1】。このようなサイトのイメージを崩す現象は回避したい。 ＜head＞?＜/head＞間のクリッカブルマップ指定は【2】の通り。ボディ以下のリンクエリアの記述は【3】の通り。＜a
MdN Design｜総合情報サイト
Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。 JavaScriptを使用したウインドウのサイズ指定にはふた通りの方法がある。ひとつはwindow.open()で新規で開いたウインドウに対するサイズ指定。そして、もうひとつはウインドウ自身に設定するwindow.resizeTo()だ。これらは一見、同一の動作をするように見えるが、実は微妙に違う。 window.open()はいずれの環境においてもコンテンツ領域をサイズとして判定するため、数値通りの再現結果が期待できる【1】。しかし、window.resizeTo()は、WindowsのIEやSafariにおいては、タイトルバーなどを含めたウインドウ全体をコンテンツ領域と判別しリサイズしてしまうの
MdN Design｜総合情報サイト
Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。 JavaScriptを使用したウインドウのサイズ指定にはふた通りの方法がある。ひとつはwindow.open()で新規で開いたウインドウに対するサイズ指定。そして、もうひとつはウインドウ自身に設定するwindow.resizeTo()だ。これらは一見、同一の動作をするように見えるが、実は微妙に違う。 window.open()はいずれの環境においてもコンテンツ領域をサイズとして判定するため、数値通りの再現結果が期待できる【1】。しかし、window.resizeTo()は、WindowsのIEやSafariにおいては、タイトルバーなどを含めたウインドウ全体をコンテンツ領域と判別しリサイズしてしまうの
MdN Design｜総合情報サイト
OpenTypeフォントを使っていれば、文字詰めを自動で行える。Adobe Illustratorの旧バージョン（10以下）ではCID、OCFフォントを「詰め」チェックボックスで詰めることができたが、それと同じような詰まり方になる。ある程度きれいに詰まるので、作業効率をかなり上げられるだろう。ただし、自動文字詰めは若干詰まり具合が甘いので、仕上げに手詰めをすることが大切だ。 【1】Adobe Photoshop文字パレット。パレットメニュー→“OpenType”→“プロポーショナルメトリクス”で実行できる。使っているフォントがOpenTypeフォントでない場合はグレーになって選択することができない。カーニング値に「メトリクス」を設定しても同様の詰め具合になる 【2】Illustrator文字パレット。こちらは文字パレットとセットになったOpenTypeパレットがあり、そこで適用する。Ope
第1話 JAXA/SELENE「moonbell」 - このアートディレクターに聞く 第38話 東泉一郎 - MdN Design Interactive
このアートディレクターに聞く 常に新しい表現を追い求める 第38回 東泉一郎 旬のアートディレクターをお迎えして、デザインする際の思考のプロセスと創作のスタンスに迫るコーナー。第38回目は、数々のプロジェクトで常に新しい表現を追い求めてきたアートディレクター、東泉一郎さん。第1話では、宇宙航空研究開発機構（JAXA）のWebサイトで展開されている、月面の地形データを利用した「moonbell」にフォーカスする。 第1話 JAXA/SELENE「moonbell」 学術とデザインの融合プロジェクト ●周回再生モード 周回探査衛星「かぐや」が収集した月の地形情報を、音程およびグラフィックに変換して音とヴィジュアルで再生。このモードでは衛星が飛行する軌道に沿って地形が音に変換されていく ●「フリースクラッチ」モード あたかもDJがレコード盤をスクラッチ（擦る）するように、ユーザが月の表面情報を自
2階調化でイラスト風に加工する - MdN Design Interactive
基となる写真素材を用意 1-1 まず最初に、Photoshopで象のおもちゃの写真を開いたら1-1、レイヤーメニュー→“新規”→“背景からレイヤーへ...”を実行し、背景レイヤーを通常レイヤーに変換しておく。さらに、ペンツールを選択し、ツールオプションバーの［パス］をオンとしたら、象を囲むようにパスを作成した。 2階調化でイラスト風に加工する 2-1 2-2 Lesson1で作成したパスのサムネールを、commandキーを押しながらクリックして選択範囲を作成。次に、選択範囲メニュー→“選択範囲を反転”で、選択範囲を反転したら、象のレイヤーを選択し、deleteキーを押して背景部分を削除した2-1。続けて、イメージメニュー→“色調補正”→“2階調化...”で、表示されたダイアログのカーソルを左側にずらし、プレビューを見ながら象の絵柄がわかりやすい程度に調整して実行しておく2-2。 ダブルトー
動物の毛並みにメリハリをつける - MdN Design Interactive
デザイン素材用に動物などの写真を撮影したものの、メリハリのない印象の写真となってしまった。 A のように、ピントは合っているのだが、写真のエッジが甘い。そんなときは、質感を高めるようにシャープに加工するといいだろう B 。その際、Photoshopの“アンシャープマスク...”フィルタをかけて調整してもいいが、ここでは、“ハイパス...”フィルタを活用することで、元画像を直接加工せずに、質感を強調した。 サンプル制作 永山昌克 URL http://www.181cm.com/ “ハイパス...”フィルタを活用して毛並みにメリハリをつける まず、Photoshopのレイヤーパネルで写真のレイヤーを複製。次に、複製したレイヤーに対して、“その他”→“ハイパス...”フィルタを選択し、表示されたダイアログで［半径：5.0pixel］の値で実行した 1-1 。続けて、レイヤーを［描画モード：オー
MdN Design｜総合情報サイト
脱メタボなWEBサイトのススメ あれもこれも伝えたい、もっと華やかにしたい。そうしていつの間にか過剰なデザインと情報を詰め込んだサイトになっていないだろうか。余分なものが増えすぎたサイトは、さまざまな弊害を起してしまう。この特集では、サイトの余剰部分を見極め、シェイプアップさせる方法を紹介していく。
万華鏡の基となる塗り面を作成 - MdN Design Interactive
万華鏡の基となる塗り面を作成 1-1 1-2 まず、最初にPhotoshopで、カンバスサイズが1,920×1,920ピクセルの新規ファイルを作成した。続けて、新規レイヤーを作成し、白で塗りつぶしたら、ブラシツールで適当に塗りを施していく1-1。ここで塗りつぶした塗り面が万華鏡の基となるため、ブラシを変更して、さまざまな質感をつけたり、色数を増やしてカラフルに着色しておくといいだろう。さらに、塗り面が出来上がったら、レイヤーを複製し、編集メニュー→“変形”→“水平方向に反転”を実行しておく1-2。 塗り面を複製して回転し、重ねていく 2-1 2-2 2-3 次に、Lesson1で複製したレイヤーを［描画モード：スクリーン］とした2-1。これで、塗り面が左右対称の模様となった。さらにここで、塗り面のレイヤーは結合しておく。続けて、このレイヤーを複製。今度は複製したレイヤーを、編集メニュー→“
デザインの質を左右する！ 演出のアイデア2010 - MdN Design Interactive
いざデザインに取りかかろうと思っても、時間がなかったり、忙しかったりして、なかなか思うように形にできないという経験をした人は、少なくないのではないでしょうか。とはいえ、もちろんデザインのクオリティを下げるわけにはいきません。そこで今回の特集では、どんなに忙しく時間がない状況でも、クオリティをきちんと保つのに役立つデザインアイデアを、さまざまな切り口で紹介していきます。
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」 by. 菊池 崇 - MdN Design Interactive
「CSS 3をクロスブラウザで実装するプログレッシブ・エンハンスメント」 2009年10月22日 TEXT：菊池 崇 Web制作時にはどのブラウザをターゲットにすべきか ブラウザの開発スピードは、3年前と比べて約3倍に向上している。おもな開発の焦点はレンダリングエンジンの高速化であったのだが、その脇で進められていたCSSの実装でも各ブラウザに違いがでてきた。特に、2008年よりCSS 3の実装に大きな差がでてきている。それもそのはず、1999年に開発されたInternet Explorer（IE）6と、2009年6月にリリースされた Firefox 3.5が同時に存在しているのだから、大きな差がうまれるのは当然だ。 しかし、このふたつのブラウザには似ている部分がある、シェアが20％前後（2009年9月時点）と非常に近いのだ。 ブラウザのシェア（Browser market shareより）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
点灯/点滅する豆電球型USBメモリ - MdN Design Interactive
