タグ

designに関するs-edyのブックマーク (61)

  • ウェブ配色ツール Ver2.0

    的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています(ただしフォントは変更出来ません)。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ

    ウェブ配色ツール Ver2.0
    s-edy
    s-edy 2010/08/16
  • 非デザイナーのためのデザイン基本テクニック その1 | 07design.blog

    デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で

    s-edy
    s-edy 2010/08/01
  • GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
  • 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ

    最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT

    3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
  • Photoshop Vip » 保存版、合計1万個以上のベクター素材をダウンロードできるサイト21個まとめ

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    Photoshop Vip » 保存版、合計1万個以上のベクター素材をダウンロードできるサイト21個まとめ
  • Generic Work Process - v1.0

    View complete list | Go to Admin Panel About this toolkit (version 1.0) This toolkit offers an overview of the methods and techniques which can be used throughout the user-centered design process. Note: this site is still under construction, for more information contact Bas Leurs (Rotterdam University of Applied Sciences, b.l.f.leurs@hro.nl) This toolkit was created by: Bas Leurs, Peter Conra

  • フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ

    Webデザインパーツごとのデザイン例 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。 ヘッダーだけ、フッターだけみたい、 というように、部分的にデザインの 例を見たいことが多いのでそんな 記事をまとめました。まとめのまとめ です。少し重いかもしれません。 主にブログデザインになってしまいますが、ヘッダー、フッター、ナビゲーション、フォームデザインなどなど部分的なデザインを参考にしたいとこに役立つまとめ記事を備忘録としてまとめています。 ヘッダーデザインユーザーにインパクトを与えるヘッダー。派手なデザインが多めです。 30 Creative Website Headers クリエイティブなヘッダーのデザインを30個ほど。凄いのばっかり。 30 Creative Website Headers 27 Stunning

    フッターやヘッダー、ナビゲーションなど、パーツ別のデザイン例のまとめ
    s-edy
    s-edy 2010/02/20
  • ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」

    CCライセンスで提供されており、個人利用ならフリーのアイコンセットがこの「Legendora Icon Set」です。ゴミ箱がクリスタルで表現されていたり、ファンタジーRPGでよく出てくるようないかにもそれっぽいアイテムの数々がくっついてフォルダアイコンが揃っていたり、Firefoxのアイコンがあったり、見た目のかわいさと実用性とを兼ね備えた使いやすくバランスの取れたアイコンセットとなっています。 ダウンロードとその他の同じような雰囲気のアイコンいろいろは以下から。 Legendora Icon Set by *Raindropmemory on deviantART http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011 作者はRaindropmemoryさんで、以下がアイコンセットの中身を紹介した画像で

    ファンタジーRPGのアイテムっぽくて手書きのアイコンセット「Legendora Icon Set」
  • Web design and development articles and tutorials for advent

    24 ways is the advent calendar for web geeks. For twenty-four days each December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer. Learn more Drew McLellan puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what it’s meant to run this site as a site project,

    s-edy
    s-edy 2009/12/01
  • http://www.designwalker.com/2009/09/jquery-table.html

    http://www.designwalker.com/2009/09/jquery-table.html
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    s-edy
    s-edy 2009/09/08
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • 無料で利用できるウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコン集

    ウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコンをFree Icons Webから紹介します。

  • 【配色 - デザイン ★★★★★】 - Color Scheme Designer 3

    Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty

    s-edy
    s-edy 2009/08/20
  • Color Palette Generator

    Color schemes from any image.

    s-edy
    s-edy 2009/08/20
  • CSSの実装状況で変わるボックスのデザイン方法

    Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない1つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

  • ユーザビリティの専門知識に対する敬意を育てる

    ユーザビリティの敵達は「専門家の意見が一致していない」という理由で主張し、ユーザを擁護する者の専門知識を難なく無視し、彼らが個人的に好きなデザインなら何であれ推進する。 Building Respect for Usability Expertise by Jakob Nielsen on July 6, 2009 よくある問題について、ある読者が私にアドバイスを求め、以下のようなメッセージを送ってきた: 対象分野の専門家と、彼らのコンテンツがウェブの読者のニーズにいかに合ってないかについて、職場で激しい口論をした後、今日、あなたの記事(デザインアドバイスの根拠としての、推測 vs. データ)を読みました。 私は小規模な州政府機関のウェブサイト管理者として、コンテンツの所有者の主観的な意見にいつもフラストレーションを感じています。彼らは私の提案を断固として拒否しつつ、私を非難するのです:

    ユーザビリティの専門知識に対する敬意を育てる
  • 続:PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン

  • デザイン勉強会の資料を公開します。 - El diario de la diseadora viviendo en tokio

    すみません、昨日今日とだらだらしてしまって、すっかり資料の公開が遅くなってしまいました><2007年9月8日にノッキングオンさんにて行なわれたデザイン勉強会で、私がお話したことの資料を公開いたします。「デザイナーでない人のためのレイアウト入門」(pdfファイル・約41MB)当日お見せしたものから不要なアニメーション部分を取り除き、1ページ説明を追加してあります。このpdfだけでは当日お話したことがカバーし切れていないのですが、 そこは素晴らしき「ついったったー」の皆さまにより、完璧フォローされておりまする!(皆様に大感謝!!!)デザイン勉強会まとめサイト(by woopsdez嬢)デザイン勉強会のまとめをするよ!(by hamashunさん)「デザイン勉強会」に参加してきました!(その2)(by necozeさん) あ、あと、まとめサイトから、floralさんが録音してくださった音声データ

    s-edy
    s-edy 2009/07/27
  • PNG画像をより美しく、より軽量に最適化するテクニック | コリス

    先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記:2009/07/27 エントリには続きがあります。 続:PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop(あるいは他の画