今更、かもしれませんが、iPhoneブックマーク用のアイコン作成法のエントリがあがっていたので参考にやってみました。iPhoneユーザ用のアクセシビリティ向上に使えます。 次のような 57x57 ピクセルのPNG画像を作ります。 作ったらサーバにアップロードします。 そして、HTMLタグを追記します。 アイコン画像を光らせたい場合 iPhoneにはボタンを立体的に光らせる機能がありますがこれを実装するためのHTMLです。 <link rel="apple-touch-icon" href="/path/to/icon.png" /> アイコン画像を光らせたくない場合 自分で光る部分もデザインしたいという場合は以下のコードが使えるみたい <link rel="apple-touch-icon-precomposed" href="/path/to/icon.png" /> 実際にコードを仕込

知人のアプリ作者の人に、アイコンを探すのに苦労したという話を聞いたので、iPhoneアプリのツールバー部分に使えそうなアイコンを色々まとめてみました。 全部足すと545種もありますので、ツールバーアイコンには困らないかもしれません。 iPhoneアプリケーション作者の方や、今後作ろうと思っている場合に参考にどうぞ。 30 Free Vector Icons | Dezinerfolio 綺麗にまとまったデザインで種類も次のような３０種類がまとまってます Glyphish – Great icons for great iPhone applications 130種類の商用利用可能な汎用アイコンセット。 Free iphone toolbar icons こちらも、商用利用可能な160種類の汎用アイコンセット app-bits : iPhone Toolbar Icon Set : iPh

肌をツルツルに綺麗にしてくれるPhotoshopアクションが凄い。 普通の写真をクリック一発で次のように、綺麗な素肌にしてくれるアクションファイルがdeviantARTにて公開されています。 以下の写真を見れば一目瞭然ですね。 使い方ですが、ダウンロードした、.atn ファイルを、Photoshop の「アクション」部分にドラッグ＆ドロップすれば使えるようになります。 以下のエントリを参照してください。 Enhancing skin color by ~mermes on deviantART 関連エントリ 写真を一瞬でクールに出来るPhotoshopアクションが色々 写真をクールに加工できるPhotoshopアクション集 １クリックで写真の印象を簡単に変えてしまうPhotoshopアクション集

Create a Funky Retro Wavy Text Effect in Photoshop 次のような背景がウェービーでおしゃれなテキストを作成するPhotoshopチュートリアルが公開されています。 ベースとなる背景からデザインすればあとは簡単ですね。 特に難しいテクニックではありませんが、つい試してみたくなってしまいました。 関連エントリ あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ ５０のクールロゴ作成PhotoShopチュートリアル クールな惑星っぽいテキストロゴ作成Photoshopチュートリアル スターウォーズの映画ロゴ風テキスト作成用Photoshopチュートリアル

Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック

1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと

錆び等のグランジなテクスチャ２５セットがまとまったエントリのご紹介です。 次のようなテクスチャが２５種類まとまっています。 背景画像などに使えますね。 リンク先は以下のエントリを参照してください。 25 Free and High Quality Grunge Textures 関連エントリ フリーテクスチャを色々探せるサイト「Texture Lovers」 最近見つけた水彩・壁等の各種素材に関するテクスチャ集まとめ 種類が豊富で紙のテクスチャには困らないかもというまとめ

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

今年も沢山のアイコンセットを発見しましたが、2009年に発見した秀作アイコンをまとめてみました。 WEBアプリ汎用、ソーシャルアイコン、Eコマース用アイコン、その他に分類してます。 WEBアプリ汎用 Led Icon Set - Psdtuts+ MinIcons by ~kyo-tux on deviantART 32px mania Vaga Onebit free icon set いい感じのアイコンセット Project Icon Set | Dezinerfolio WooFunction: 178 Amazing Web Design Icons?|?WooThemes WP WooThemes Ultimate Icon Set ? First Release?|?WooThemes 綺麗で汎用に使えそうなアイコンセット集「Function Icons」 Icon Set b