宗像 誠之 日経ビジネス記者 日経コミュニケーション、日本経済新聞社産業部、日経コンピュータを経て、2013年1月から日経ビジネス記者。 この著者の記事を見る
宗像 誠之 日経ビジネス記者 日経コミュニケーション、日本経済新聞社産業部、日経コンピュータを経て、2013年1月から日経ビジネス記者。 この著者の記事を見る
CREATE NOW DESIGN TOUR『CS VS CC 徹底比較セミナー』では、まだCreative Cloudへ移行していない デザイン、印刷、DTPユーザーに ぜひ知っていただきたいセッションをご用意しました。セミナー開催地は全国5カ所。 第一線で活躍するプロユーザーに 過去バージョンとの比較デモを披露していただく他、 各開催地の地元のクリエイターや印刷会社様に導入事例をご紹介いただくなど 、ここでしか聞けない価値ある情報をお伝えします。セミナー開催日・開催地・募集定員 2014年2月7日(金) 東 京 定員100名 2014年2月12日(水) 福 岡 定員100名 2014年2月19日(水) 名古屋 定員120名 2014年2月20日(木) 大 阪 定員130名 2014年2月26日(水) 札 幌 定員100名 参加費:無 料 主 催:アドビ システムズ 株式会
[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り!】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108
ズルいデザイン(4): ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン 今回のテーマは「ズルいボタン」。これまでの連載で出てきた数々のズルいデザインテクニックを駆使して作成しよう。(2013/9/12) ズルいデザイン(3): box-shadowで表現する、「セミフラット」なズルいデザインテクニック box-shadowを活用した各種ボックス表現の作り方を紹介。フラットデザインの中でも違和感なく使える「やりすぎていない立体感」とは?(2013/8/21) ズルいデザイン(2): SassやCompassを使って、ズルいデザインテクニック SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは?(2013/2/27) ズルいデザイン(1): 少ない手間と知識でそれなりに見せる
おとといに引き続き 「見えないものを暗示させる罫線」の 第2回目です。 こちらは『ピカイチ事典・からだの道具篇2010-11年版/5歳若い自分に戻る本』 (カタログハウス)という本、32ページの全体をスキャンしたものです。手首の写真に注目、下に罫線が用いられています。これによって、手首が何か別の場所(机の下など)から出てきたかのように暗示することができるのです。 ▲試しに罫線を消してみましたが、 突然手首が出てくると、 なんかグロテスクに見えませんか? ▲やはり罫線があるもののほうが安心して見られます。 ……なんですけれど、(これはどんなデザインにおいても言えることなのですが)どの場合においても罫線を使えば良いかというと、やはりそういうわけでもなくて、罫線を使うことなく、以下のように表現されることもあると思います。 ▲縁と影をつけて、写真を切り抜いたことを前面に押し出す加工。かわいい系・ポ
Tweet * WhatFont is not affiliated with MyFonts and/or the WhatTheFont service. ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. To embrace the new web font
このように@mediaを使用して出力先や解像度、サイズなどで条件分岐をしていき、必要のない要素を非表示にしたりして、見栄えを切り分けて製作していきます。 レスポンシブWebデザインのメリット・デメリット 前述のとおり、RWDでは同じCSSファイルで各デバイスのスタイルを共有します。そのため、共有しているスタイル変更の影響を受けやすく、制作をデスクトップとモバイルで分担している場合などは細かいレギュレーションを最初に決める必要があります。 とはいえ、モバイルとデスクトップをHTMLから切り分けた場合、完成後の更新の手間も二重にかかってしまいます。CSSで分岐して必要なプロパティのみ上書きしてデバイスに最適化するだけで同じ素材を共有できることは、サイト運営者にとって非常に魅力的です。 RWDのメリット デバイスごとに切り分けず1つのHTMLファイルで管理可能 スタイルを共有してテイストの統一性
普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。 1.色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。 2.どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困る
10/27(土)に 第一回プログラマ向けデザイン勉強会 を開催しました。 この勉強会は毎月やっている デザイナー向けプログラム部 (P4D) の逆バージョンで、デザイナさんにプログラマがデザインを教わるという趣旨で開催しました。 そして講師役として、いつもP4Dの方でもお世話になっている @machida さん、@ken_c_lo さん、@saucerjp さんの3人にお願いしました。 もっともこの3人をはじめ、P4Dに参加されているデザイナさんは普通にJSやFlash、ObjCなんか書いていたりして単にデザイナと呼んでいいのかどうかは怪しいところですが。 RailsエンジニアのためのTwitter Bootstrapカスタマイズ例 まずは@machidaさんのTwitter Bootstrapのカスタマイズ例の話からでした。 このテーマはP4D参加のプログラマからしきりにリクエストの
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
DTP TransitさんにIllustratorでアピアランスの[形状に変換]効果で囲み罫を付けるtipsが紹介されている。(コレは自動伸縮枠) しかし、[形状に変換]効果の形状オプションの元となる数値はどのように決定されているのかは説明されていない。 それが判らない限り数値的に正確なモノは出来ないだろう。 以前の記事に記したようにフォントのバウンディングボックスサイズというのがあり、そのサイズは同じフォントでもバージョンによって差異がある。 以下はモリサワのA-OTF 中ゴシックBBBに[形状に変換]効果の[形状オプション/値を追加]で幅・高さとも「0mm」の設定で自動伸縮枠を生成した例(32Q)。 ※作例はCS4*1 画像を見ていただくと、文字列をクリックした際のサイズ(バウンディングボックスサイズ)で枠が生成されているのが判るだろう*2。 以下、当初の理解しにくい記述をより理解しや
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
このエントリーは最新版があります。こちらもどうぞ 『まだCMYKで消耗してるの?〜大幅な色補正をCMYKで行ってはいけない理由〜 – やもめも』 いいわけ 印刷関係の方とお話していると、「とりあえずCMYKでないと感覚が掴めないよー」という方が多いかな、という印象を持ちました。WEBの人や合成大好きな方には今更なのでしょうが、ここではRGBでの補正を簡単に説明しようと思います。異論反論たくさん出ると思いますが、これをきっかけにRGBで触って慣れてもらえれば、というエントリですのでお手柔らかに。入ったJPEGをまずCMYK分解してから補正するぜ!な方向けのエントリです。 なぜRGBか フィルタが全部使えるぜ!とかいろいろ利点はありますが、印刷業に限って言うと きちゃない写真をいじくるのが楽になる! とりあえずものは試し、同じ写真(暗いやつ)のCMYKとRGB版を用意して、トーンカーブで明るさ
2011/05/17 画像タグのみ版追加→CSSだけでサイズ不定画像の中央を正方形に切り抜きサムネイル (かんたん!) 長方形の画像の中心部を正方形に切り出してサムネイル表示したいんだけど、縦横比が定まってない画像の場合ってどうやって中心部を切り出したらいいかしらね、という話。 画像の縦横比が分かっている(一定である)場合 このケースであればoverflow:hiddenな枠で画像を囲って位置を調整してあげればOK。特に問題は無いでしょう。 ↓等が参考になるかと思います。 http://www.multi.ne.jp/staff_note/2008/10/000543.php 画像の縦横比が不明だったり画像ごとにばらばらな場合 前述の方法だと、画像の真ん中辺を表示するために何pxずらして表示すればいいのか分かりません。できるエンジニアなら「じゃぁサーバーサイドでやるわ」とか「JavaScr
お前、誰よ @lanius 仕事:調査、研究開発、技術支援 趣味:脳科学、心、鳥 KoshiNukeってなに? Git Webフロントエンド Gitを便利に使うためのWebアプリケーション(e.g. GitHub) オープンソース 社内向け 簡単インストール タスク管理機能を搭載(予定) アプリケーションライフサイクルマネジメントをサポート(予定) e.g. Rational Team Concert, Team Foundation Server, Atlassian エンタープライズ向けGitのWebフロントエンド「KoshiNuke」 - MOONGIFT オープンソースのGit Webフロント GitWeb cgit Gitblit Gitalist ViewGit, GitPHP, InDefero gitorious, Ginatra, Gitlab pitweb, Rhode
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く