タグ

ブックマーク / tikeda.hatenablog.com (6)

  • favicon2dotsで遊んでみました。 - tikeda's blog

    5年以上昔に描いた当時のMacOS用のアイコンをほじくり返してみました。

    lomo_lomo
    lomo_lomo 2007/02/07
    favicon2dotsでいろんなアイコン変換したら楽しそう
  • 効率よく育てやすくデザインする - tikeda's blog

    デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに(ダイアリーだと「日記を書く」、人力だと「質問と回答」)。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh

    効率よく育てやすくデザインする - tikeda's blog
    lomo_lomo
    lomo_lomo 2006/12/31
    効率のよいデザインワークのためのTips
  • 角丸ライブラリ - tikeda::Diary:

    最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。 ベーシックなタイプ 01:小さ目な角丸 02:大き目な角丸 03:斜線の角丸(背景画像をループ) 04:ストライプの角丸(背景画像をループ) 05:木模様の角丸(背景画像をループ) 06:リボンのついた角丸(背景画像を固定) 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

    角丸ライブラリ - tikeda::Diary:
    lomo_lomo
    lomo_lomo 2006/12/31
    角丸のバリエーション
  • マテリアル探求 - tikeda's blog

    素材感を研究しながら作るのが好きで、その度に作ったたものは、ストックして以降の参考にしたりしてます。アクア風とかは明らかに質感を意識したボタンとしてよく利用されてますね。 眺めると全部、同じ50×50の四角でもphotoshop一つでそれぞれ違う表情で生きてる気がしてきます。 上の画像を、PSDデータで見たい人がいたら使ってみてください。(このブログにそういう物を求めてきてる人も多いみたいなので)サイズ変更や着色したらボタンとかは作れます。細かいレイヤーは残ってませんが。

    マテリアル探求 - tikeda's blog
    lomo_lomo
    lomo_lomo 2006/12/31
    PSDデータ配布
  • tikeda::Diary - アクア風素材などのEPSデータ

    以前、アクア風に関して描いたのですが、少し改良してバリエーションもできたので、よかったら使ってください。 aqua.zip 「!」とか「?」とかなんか描いてシャドウ落とせばそれっぽくなると思いますので。EPSデータだから、パスのままです。印刷にも使えます。分析したり、改造もできます。 もちろん、僕もはてなのサイト内でもアクセントに使っていくつもりです。

    tikeda::Diary - アクア風素材などのEPSデータ
    lomo_lomo
    lomo_lomo 2006/12/31
    印刷にも使える3色セット
  • tikeda::Diary - 今更だけどAqua風デザイン分解

    OSXアイコンやWidgetなんかでは定番となってるAqua風のデザイン。ちょっと遅い感じですが、今更ながらAqua風を突っ込んでみました。 Photoshopを使った簡単な作り方のTIPSなんかは時々目にしてたので、自分はIllustratorでやってみた。現物は以下のドロップと矢印です。 簡単なパスで作られたデータです。これだと印刷物なんかでも大丈夫。色々な応用も可能です。実際CMYKカラーで作りました。Photoshopでアルファやレイヤースタイルをいじらなくても、コツを見つければなんとなく作れます。拡大するとこういう感じ どちらも、単なる単体のシンプルなグラデーションで塗られたオブジェクトを3つ・4つ重ねているだけです。 今の所感じてるポイントとしては以下2つ 面をはっきり出すこと お互いのグラデーションの終わりと始まりがはっきりしていることで面がはっきりして「パリ」っとした硬い質

    tikeda::Diary - 今更だけどAqua風デザイン分解
  • 1