効率よく育てやすくデザインする - tikeda's blog
デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに（ダイアリーだと「日記を書く」、人力だと「質問と回答」）。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh
角丸ライブラリ - tikeda::Diary:
最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu
DOCTYPEとCSS - tikeda's blog
最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IEでIMGにpaddingがつかない FFでanchorのかかったimgにtext-decorationがつかない table内でのtext-alignが普通（？） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> IEでIMGにpaddingがつく FFでanchorのかかったimgにtext-decorationがつく ta
Hatena_tangoで金太郎の写真を別の写真にしたい - tikeda's blog
昨日公開したダイアリーの新しいテーマHatena_tangoですが、左上の画像を別の画像にできるように、psdファイルをアップしました。photoshopが使える方は好きに合成して作ってみてください。 hatena_tango.psd 少し敷居が高いので、サンプルでいくつかアップしました。該当のスタイルシートを「詳細デザイン」のスタイルシート欄に入れたら左上の画像が切り替わります。よろしければ使ってください。 しなもん h1{ background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/20060412/20060412142217.gif"); text-indent:150px; } 兜 h1{ background:url("http://f.hatena.ne.jp/images/fotolife/d/domu/2006
マテリアル探求 - tikeda's blog
素材感を研究しながら作るのが好きで、その度に作ったたものは、ストックして以降の参考にしたりしてます。アクア風とかは明らかに質感を意識したボタンとしてよく利用されてますね。 眺めると全部、同じ50×50の四角でもphotoshop一つでそれぞれ違う表情で生きてる気がしてきます。 上の画像を、PSDデータで見たい人がいたら使ってみてください。（このブログにそういう物を求めてきてる人も多いみたいなので）サイズ変更や着色したらボタンとかは作れます。細かいレイヤーは残ってませんが。
RSSモジュールを展覧会っぽく演出 - tikeda's blog
RSSモジュールで表示した写真を横スクロールで展覧会っぽく演出してみました。最近、ダイアリーのヘッダーを触っていて、何かヘッダーを使っていつもと違った見せ方が色々できそうだな〜と思いやってみました。普段ダイアリーのデザインをする時はテーマにする事が念頭にある為、「モジュール＝サイドバーに並べる」と考えてしまってますがその辺を考えず試してみました。 一見複雑そうですが、ヘッダーにモジュールを挿入しdivタグで囲んだだけで、後はCSSです。 <div id="art"> <hatena name="rss" url="http://f.hatena.ne.jp/domu/rss" template="hatena-photo" moduletitle="Okinawa Photo"> </div> <div class="main">CSSは、やっつけで、引き続きいじる予定なので日記には書きま
グラフィック素材でみるリニューアル - tikeda's blog
リニューアルに関してはデザインに色々なポイントがありますが、その一つとして、各サービスのシンボルを中心とした補助的なグラフィック素材です。上は今回のリニューアルで利用した主なものです。 はてなには「D」「F」「A」といったようなアルファベット1文字が表す各サービスの象徴があるのですが、これは一般用語であることや、インパクトを与えるにはビジュアル的に難しいので今回こういった素材を盛り込む事にしました。 目的としては、各サービスの内容やその良さを最大限に引き出し、絵一枚で訪れた人に楽しさやインパクトを与えるということです。 デザインするにあたっては、はてなっぽい感じを出すために、リアルでありながらイラスト的なやわらかさを含ませたくテイストの模索を重ねてきました。 もちろんこれからも、クオリティの向上や表現方法についての模索を続けようと思います。
tikeda::Diary - 今更だけどAqua風デザイン分解
OSXアイコンやWidgetなんかでは定番となってるAqua風のデザイン。ちょっと遅い感じですが、今更ながらAqua風を突っ込んでみました。 Photoshopを使った簡単な作り方のTIPSなんかは時々目にしてたので、自分はIllustratorでやってみた。現物は以下のドロップと矢印です。 簡単なパスで作られたデータです。これだと印刷物なんかでも大丈夫。色々な応用も可能です。実際CMYKカラーで作りました。Photoshopでアルファやレイヤースタイルをいじらなくても、コツを見つければなんとなく作れます。拡大するとこういう感じ どちらも、単なる単体のシンプルなグラデーションで塗られたオブジェクトを３つ・４つ重ねているだけです。 今の所感じてるポイントとしては以下２つ 面をはっきり出すこと お互いのグラデーションの終わりと始まりがはっきりしていることで面がはっきりして「パリ」っとした硬い質
はてなっぽいデザインマテリアル - tikeda's blog
最近、デザインする為の素材作りというのに時間を費やすことが多いです。昨日書いた、国会議事堂にせよ、これはデザインする為に利用する素材です。 はてなにはサービスを連想させたり、はてなそのものを連想させたりするビジュアルイメージは「？」「各サービスの頭文字のアルファベット」「しなもん（？）」くらいの為、サービスのWEBページやバナーをデザインする際は、連想させるイラストやアイコンを考え作ることも仕事のうちです。ただ、こういったアクセントとしてのグラフィック要素ひとつ作るのにも、全体的にみてグラフィック要素が少ないだけに、利用する時ははてなの印象を作ってしまう為、どんなテイストがいいのかを色んなパターンを作りながら模索しています。 主にコーポレイトサイトなんかをデザインする際はよく、素材集やストックフォトサイトなどから素材をかき集めたり、クライアントから提供してもらったりしますし、イラストサイト
ドット絵とベクター画を併用して議事堂を描く - tikeda's blog
総選挙はてなの告知用バナーの素材として国会議事堂を描いたのですが、短時間である程度の素材にするため、ベクターソフトで大枠を描き、フォトショップを使って締めるという流れを選びました。といってもさすがに、結構時間がかかったので制作過程を動画でお見せするのは無理なので、少しプロセスを紹介します。 まず、これは最終的な成果物です。 とりかかりとして国会議事堂全体の雰囲気とボリュームを計るため、Illustratorを使ってざっくりとした全体像を作っています。ここで主に意識しているのは、全体の骨格と色の雰囲気。大枠ができれば次はデータをPhotoshopにもっていきます。 これは、最終成果物の拡大画像です。ベクター画をPhotoshopに持っていった後に行った主な作業としては、 質感作り 窓のガラス、植物、レンガ調の壁、つやつやした壁、と形成していきます。1つピックアップすると、ガサガサした質感を出
リアルに描く - tikeda's blog
小さい描画領域やアイコンなんかを作成する時は、先日のエントリーで書いたようなドット絵でシンボルを単純化して作る事が多いですが、リアルな描画が向いている場合もあります。そんな時、自分はツールはAdobe Illustratorを用います。 ちょっと時期はたってしまいましたが、例えばはてな4周年記念のロゴのリボンですが、元はこんな単純な立体です。単純なグラデーションをもった形の組み合わせです。リアルな描画に必要なのは、まずそれが手で掴めるように描くかなので、これは形を的確に捉えてハイライト・陰・反射光・（影）というような流れで自然の法則にしたがって描くのがポイント。 世の中に存在しているほとんどの形は「球」と「立方体」の変形だと思っています。全てはこの延長線上にあると思うのでこの基本形状を描くのに慣れれば色々描けると思います。 リアルに見せるもう１つのポイントは質感。これは、上で述べたハイライ
はてなブックマークのロゴ - tikeda's blog
よくみててください。滑らかに動くようにするのと、全色準備するのに結構パワー使ったけど、あまり知られてない気がするので一応書いておこうと思います。
tikeda::Diary - 始まりは紙の上から
先日、はてなマップの写真アイコン作成のプロセスを掲載したら、「動きがスムーズ、迷いがないなんで？」みたいな質問を投げかけられたのですが、もちろん、何もない段階でパソコンにいきなり向かって書き出す訳ではなく、適当なラフを紙の上で書いています。それで簡単なあたりをつけて作っていくことがほとんどです。 人様にお見せするようなスケッチじゃないですが公開。パソコンに向かう前はこんな感じ。別にお洒落なアイデア帳とかじゃなく会社にあるCampusノートです。書ければ何でもいいので。 はてなマップのメモ 自分の中で写真アイコンを作る時は大体このパターンとルールを決めてます。ポイントは山と空の間の空間を作り出す雲。スケッチ上では鳥（アルファベットの「M」みたいな物）も飛ばしてますが入りませんでした。さらに一番手前と山の空間をつなぐ川。山と空だけではなく、雲や鳥や川を描く事で間の空間が生まれ絵的に生き生きして
ドット絵ができるまで - tikeda's blog
アイコンなどを作る時はよく、ドット絵をデザインの手法として使うのですが、これまで、とてもたくさんのドット絵を描いてきてテクニックをあれこれ身につけてきました。はてな社内でも、どうやって描いてるの？みたいな事を時々聞かれます。試しにはてなマップで地図に表示される「写真」アイコンをWinkを使って再現してみました。（実際の物はもっとディテールに手をいれてますが。）意外と時間がかかってしまい、1300フレーム6MBにもなりましたが、個人的にも客観的に見れて面白かったです。 ドット絵ができるまで ドット絵1つでも小さい領域ながらテイストや雰囲気を考えながら作る事ができ、非常に奥の深い手法だと思います。 追記 下書き：http://d.hatena.ne.jp/tikeda/20050715/1121441586
サイン関連の参考サイト - tikeda's blog
常用化されているサインは積極的に利用すべし。みたいな事をこの前書いたのですが、発案したサインのデータを公開しているサイトがいくつかありますので、私がブックマークしているいくつかをご紹介。 一般案内用統一記号 交通エコロジー・モビリティ財団と呼ばれる、バリアフリーな交通システムなどの推進をしている団体で交通施設、観光施設、スポーツ施設、商業施設等などのデータをダウンロードする事ができます。ガイドラインやサイン標準化へのプロセスなどためになる情報がつまっています。 Radiocom / Creator's Exchange こちらは、より手が加えられている生活の中で良く見るロゴマークです。カテゴリー分けされてますので、デザインアイデアの勉強にもなります。先日書いた、プロダクトで利用されているサインや日本の家紋といった物まで掲載されています。 AIGA - Symbol signs 海外サイトで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tikeda::Diary - はてなロゴ日記
tikeda::Diary - アクア風素材などのEPSデータ
はてなグラフのロゴ - tikeda's blog
Adobe CS2 - tikeda's blog
カラスに襲われた - tikeda's blog