mBlog - Webデザイン, CSS, Javascript, Flash, ウェブサービスのホットなネタを紹介

[Icon Design] App Icon Template – iOSアプリアイコン制作のテンプレート

Tweet
Check

by Quattro on 1月.27, 2012, under UI Design

本日のナニコレ超便利。いやこれマジに便利っす。iOS向けアプリのアイコン制作時に役立つフォトショップ用テンプレート。この手のテンプレートは他にもあるけど、これの素晴らしい点は2つ。まずアイコンの各種解像度に一括対応するため、ベースとなるアイコンデザイン部分をスマートオブジェクト化してある点（「EDIT THIIS SMARTOBJECT」のレイヤー）。なのでこのPSBファイルをベースにデザインすれば、全解像度に適用されます。もう1点は同梱されているアクションファイル。CS5.1では動きが変だった印象もあるけど、これ使えばAppStore申請用のファイル書き出しがサクっとできます。デザイナーのワークフローの作業的な部分をウマい事バッチ化した素晴らしいテンプレート。ありがたく使わせて頂きます。

App Icon Template

コメントを書く :Photoshop, UIDesign

[Game] Color – 色相環をベースにしたカラーマッチングゲーム

Tweet
Check

by Quattro on 1月.27, 2012, under Games

色相還をベースにしたカラーマッチングゲーム。スタートすると二重の円が中心に出現し、内側の円はカウントダウンしていきます。ゲームの目的は内側の円と同じ色を見つける事。マウス操作で内側と外側が同じ色になるようにしてクリックしていけばゲームが進んで行きます。最初のステージは色を選ぶだけですが、次のステージからは色相に加えて彩度も加わるので難しくなります。後半のステージでは隣接色相や中差色相にからませた問題も出てくるので、なんつーかデザイナー向けのゲームだなーと思いました。色検定とかソレ系のスキルある人はこういうのウマいのかも。

Color

コメントを書く :Design, Game

[HTML5, CSS3] 50 Beautiful Yet Free HTML5 And CSS3 Templates – HTML5 / CSS3で記述されたWebテンプレートまとめ

Tweet
Check

by Quattro on 1月.26, 2012, under Web Design

HTML5 / CSS3で記述されたWebテンプレートのまとめ記事。50の作例が紹介されてます。JSスライダーと組み合わせたものも多くあります。まぁこのへんは流行りでしょうな。仕事柄クールなウェブサイトを発見すると当然のようにソース見るわけですが、最近じゃ<!DOCTYPE html>から始まるサイト増えたなーってよく思います。HTML5のサイトをこれから制作しようって時のベースソース探しにも良さそうです。

50 Beautiful Yet Free HTML5 And CSS3 Templates

コメントを書く :CSS3, HTML5, Template, WebDesign, ネタ帳

[Bookmarklet] deCSS3 – 閲覧中のページ内のCSS3指定だけをオフにできるブックマークレット

Tweet
Check

by Quattro on 1月.26, 2012, under Web Design

閲覧中のページ内のCSS3指定のみを一時的にオフにできるブックマークレット。サイト内の「deCSS3」のリンク（JSが格納されてます）をブックマークしておく事で使えます。サイト内でCSS3が使われてる箇所がすぐに分かるので、かっこいいページ見つけた時なんかに使えそう。あと普段モダンブラウザを使うのが当たり前になってる人が、レガシーブラウザでの描画を簡易的に確認したい時なんかに便利。とりあえず自分もブックマークレットフォルダに突っ込んでおきました。

deCSS3

コメントを書く :Bookmarklet, CSS3, WebDesign

[CSS3] CSS3 Filter Effects – WebKit向けのCSS3フィルター

Tweet
Check

by Quattro on 1月.26, 2012, under Web Design

WebKit向けのCSS3を使った各種フィルターのまとめ記事。指定方法とリザルトを一覧にしてくれてます。ブラー（ぼかし）やブライトネス（輝度）、コントラスト、アルファ（透明度）などをGoogleのトップページを題材にして指定してます。セピアとかグレースケールなんてのもあるんすね。指定内容がページ全体に影響してるので、htmlだかbodyだかに一括して指定してるんでしょうか。トランジション作る時なんかに使えそうですねこれ。

CSS3 Filter Effects

コメントを書く :CSS3, WebDesign

[CSS3] Mac OS X Lion CSS3 – CSS3で作ったLionぽいインターフェース

Tweet
Check

by Quattro on 1月.25, 2012, under Web Design

本日のナニコレスゴい。Mac OS X Lionの起動画面からデスクトップまでの流れを、CSS3で再現しちゃいました作例。サイトに入るとお馴染みのアップルマーク起動画面がしばらく表示されて、その後ログイン画面が出ます。パスワード“admin”でログインすると、Lionの見慣れた初期画面に遷移します。ここまでの流れの、なんつーか再現性がスゴくて色々チビりました。奥から手前に出てくるトランジションとかLionそのまんま。正直何の実用性もありませんが、よく作ってあんなーと感心しました。コーディング魂みたいなものを感じたのであります。

Mac OS X Lion CSS3

コメントを書く :CSS3, UIDesign, WebDesign

[CSS3] CSS3 Facebook Buttons – CSS3で作ったFacebookっぽい汎用ボタン

Tweet
Check

by Quattro on 1月.25, 2012, under Web Design

CSS3で作られたFacebookっぽいボタン。ダウンロードはGitHubから。複数ボタンのグルーピングやアイコン付与もできるようで、なかなか汎用的に作ってあるようです。なんかこう、技術的に特にスゴいとかソレ系のアレではないんだけど、最近どのWeb屋さんもFacebook関連の案件多いだろうから、こういうの意外と重宝するかと思って紹介。ボタンとは全然関係ないけど、Facebook関連のMeta情報入力とかなんつーか面倒っすよねー。

CSS3 Facebook Buttons

コメントを書く :CSS3, UIDesign, WebDesign

[Lion] 40+ Super Secret OS X Lion Features and Shortcuts – Lionの隠された機能やショートカットまとめ

Tweet
Check

by Quattro on 1月.20, 2012, under Apple

Mac OSX Lionで使えるTipsやショートカットを集めた記事。例えばフォルダの上書き時、リプレイス以外にも差分統合ができたり、アプリケーションフォルダ内をカテゴリ分けできたり、ファイル選択してOption + Spaceでフルスクリーンクイックルックができたり、隠し機能というほどではないけど、意外と知られてない新機能がいっぱいあるようです。Spotlightの検索結果からプレビューできたり、iTunesのアートワークスクリーンセーバーから曲再生できるってのは結構便利そう。Lionちゃん出てからもう半年くらい経ちますが、こういうの見てるとまだまだ発見がありますな。

40+ Super Secret OS X Lion Features and Shortcuts

コメントを書く :Apple, Lion, Mac

[Web Service] Notification Control – ウェブサービスの通知設定へのショートカットまとめ

Tweet
Check

by Quattro on 1月.20, 2012, under Webservice

ウェブサービスからの通知メールってウザくね！？という事で、各種ウェブサービスの通知パネルへの直リンクをまとめたサイト。それだけのサイトなんだけど、これが意外と便利。用意されてるウェブサービスはTwitter, Facebook, Tumblr, Youtubeなどの有名どこから、Foursquare, LinkedIn, Pinterest, Google+, Dribbble, Pathなどのちょっとマイナーなものまで多数用意されてます。各リンクをクリックすると該当サービスの通知設定に行くので、そこでメール通知を切るなりオンにするなりすればオッケ。自分も通知メールUZEEEEEって思う事多いので、これはなかなか便利。

Notification Control

コメントを書く :Webservice