2010年は寅年！ということで、虎（寅）の絵を描きました。
（ちょっとかわいい感じになっちゃったので、トラ猫っぽいですね・・・。）
けど使わなかったので、なんとなくここに置いておきます。
もし気に入ってくださる方がいましたら、良識的な範囲でご自由にお使いください。
（もし何かの間違いでいっぱいダウンロードされるようだったら、その時考えよう！）
商用利用も可！と一応書いておこう。
こちらからどうぞ。
File Download（Zip）
形式はPNG、背景は透過です。
あ、入ってるイラストは上の1個だけですので・・・。
最近はWordPressの勉強をちょっとだけしています。
と言ってもデザイナーなので主にデザインまわり。
フリーのテンプレートはいっぱいありますが、英語に最適化されてるのが多いし、一通り理解するためにもテンプレートを最初から自分で作ってみたりしたのですが、タグがいっぱいあってめんどくさいんです・・・。
シンプルなテーマを加工した方がいいかなぁ、と思い始めて探してみると、カスタマイズ用のフレームワークっていうのがいっぱいあるんですね。
個人的な好みでいくつか選んでみました。
<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true
}
curvyCorners(settings, "#myBox");
}
</script>
<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script><br /><script type="text/javascript" src="/js/corner.js" charset="utf-8"></script>
<script type="text/javascript">
$('#corner').corner("10px");
</script>
「You The Designer」のこちらの記事
18 New Design Freebies
を見ていたら、かわいいアイコンがあったのでメモっておきます！
define('MODREWRITE', false);
を
define('MODREWRITE', true);
いいな〜と思ったフリーフォント（商用利用可のもの）をメモ。
日本語のサイトをデザインしていると、英字フォントは見出しとかアクセントに使うことがほとんどなので、太めのフォントをよくチェックしています。
今度、ある会社の公式サイトをデザインすることになりそう。
そこで、参考になりそうなコーポレートサイトっぽいものをチェックするようにしているんですが、instantShiftでちょうど良いまとめ記事を発見！
80 Corporate Website Designs For Design Inspiration | instantShift
どれもいまどきな感じのきれいなデザインです。
困ったときにはこれを見れば！という充実したまとめですが、80サイトは多いなぁ。
今回の制作で参考になりそうなのはこの辺かな・・・
昨日のアドビエッジニュースにちょこっとFlash CatalystとFlash Builderのことが載っていたので見てみたんですが、何だかおもしろそうです。
ベータ版ダウンロードしてみようかな～。（新しい会社のPCが来たら…。）
「Flash Builder 4」は以前の「Flex Builder」で、RIAの開発ツール。
「Flash Catalyst」の方が馴染めそうです。
Adobe Edge: 2008年12月 Flash Catalyst：PhotoshopデザインがそのままFlexアプリのViewへと変わる！
Flash Catalystは、MXMLやActionScriptの知識がなくても静的なアートワークからFlexアプリケーションのView部分を作成できる画期的なツールです。
Photoshop Ladyで紹介されていたチュートリアル、
「Planet Tutorial by `dinyctis」
を見ながら作ってみました。
チュートリアルではいい感じの高画質テクスチャ画像を使うことになっているんですが、私はそんなに解像度の高いデータを作ることはないので、雲模様とパターンで誤摩化してしまいました。
Webのアクセントぐらいだったら十分使えますね〜。
このごろ気に入っているサイト3つ。
自分の趣味とはちょっと違うお仕事用のデザインばっかりしてると、違うものが見たくなるようです。
siiimple
シンプルなWebサイトを集めてあるサイト。
トップページがいい感じで、眺めているのが楽しい。
grain edit
1950〜70年代あたりのクラッシックなデザインやイラストが集められています。
あとデザイナーのインタビューも。
ちなみに、ロゴのフォントはFarao Boldだそうです。
sfgirlbybay
デザインとかインテリアとか。
写真がかわいい。
「人喰いの大鷲トリコ」(The Last Guardian)は「ICO」「ワンダと巨像」の上田文人氏の新作ゲームソフト。
楽しみだけど、それまでにPS3買っておかないと・・・。
この大きい生き物かわいいな〜
便利そうだと思いつつほとんど使ったことがない「AppleScript」。
Smashing Magazineの記事「Mac Hacks: 17 AppleScripts To Make Your Life Easier」にまとまっていたので、あとで試そう！
Droplet
Web Designer Wallの記事「30 Examples of Attractive Nav」で紹介されていたサイト、
「Red Nose Day 09」
のデザインがおもしろかったのでメモっておきます。
（「2009」となってるので来年には消えていそう。）
イギリスのチャリティイベント「Red Nose Day」のサイト（・・・だと思います）。
赤い鼻をモチーフにしていて、全体が手描き風のかわいいデザイン。
立体っぽくするのは流行っていますが、手描きなのがおもしろいな～。
ナビゲーションはマウスオーバーで震えたりボタンが引っ込んだりして、触っていて楽しいです。
小さいアイコンもちゃんと手描き風だったり、ロゴをマウスオーバーすると「HOME」っていう看板が出てきたりして、細かい。
同じ記事にあるその他のサイトも勉強になります。
詳しくはこちらで。
30 Examples of Attractive Nav
「ahkslog: 今使っているFirefoxのアドオン」のつづき。
自分でダウンロードしてインストールしたソフトもメモしておこうっと。
使ってないのも多いけど。
ブラウザ
会社のPCを買い替えてもらえることになった。
もう4年使ってて重くて困っていたので嬉しい！
そこで、いま使っているアドオンを自分用にメモしておきます。
（ちなみに家のMacもほぼ一緒。）
「Six Revisions」の記事「30 Beautiful Web Designs Inspired by Nature」がきれいです。
やっぱり自然のモチーフはいいな〜。
好きなのはこの辺。
「Vectortuts+」の記事「Icons, Icons, Icons!」で紹介されていた、「48 Ultra Cute Vector icons」というアイコン集がすごくかわいい！
私もこんな感じのアイコンを作ってみたいな～。
$15.00でeps、ai、svg、psdファイルをダウンロードできます。
購入ページはこちら。
48 Ultra Cute Vector icons - Icons - GraphicRiver
同じデザイナーのこれもかわいい。
Winter-wonderland - Icons - GraphicRiver
「Veerle's blog」に紹介されていたチュートリアルを見て作ってみました。
Adobe Creative Suite 4 familyの箱みたいな、四角が並んだグラデーション。
ただのグラデーションよりもちょっと凝った感じで、印象的な背景として使えそうです。
Illustratorのブレンドツールを使用して作ります。
詳しくはこちらで。
Illustrator swatches gradient background effect | Veerle's blog
「Vectortuts+」にIllustratorで巻いた紙を作るチュートリアルが載っていたので、早速作ってみました。
おもしろ〜い！
渦巻きのパスを描き、3D押し出しで立体にするだけなんです。
簡単ですのでぜひ。
How to Create Sheet Rolls with Custom Spirals - Vectortuts+
Small web design elements tutorials collection | Design-Notes
という記事にある「3D illusion in two dimension web design」がおもしろかったのでメモ。
3Dっぽく見えるグラデーションのやり方です。
上から、
ブックマークしっぱなしになっていたPhotoshopのチュートリアルを、まとめて試してみました。
レイヤー効果を使った、ダークカラーの背景に浮かび上がるようなテキストエフェクトです。
Colorful Glowing Text Effect in Photoshop - Tutorial9
1文字ずつ切り抜いてコピーして、色を重ねます。
Text Effect Quickie: Moon Shine Text Effect - Tutorial9
レイヤー効果だけで簡単に設定できました。
Advanced Glow Effects - Psdtuts+
フィルタやペンツールを使って背景を描きます。
6 Quick’n'Dirty Photoshop Text Effects From Scratch - Psdtuts+
6つのエフェクトの中のひとつ、「Quick Gold Text」です。
リンク先のプレビューを表示する「websnapr」を試してみました！
リンクにマウスオーバーすると、リンク先のスクリーンショットがバルーンで表示されるスクリプトです。
「Snap」は知っていたのですが、ちょっと高機能すぎる感じがして、もっとシンプルなのがいいな〜と思って探してみました。
それで、見つけたのがこちら。
websnapr - Website Thumbnails For Your Site
最初は普通にwebsnapr 2.0をダウンロードして設置してみたのですが、Bloggerではうまく動かず。（私、JavaScriptはほとんどわかりません・・・。）
ダメかと思ってサイトを見ていたら、「v3.0 beta」を発見！
こちらはまだベータ版なのですが、
http://www.websnapr.com/bubble/
から登録して、コードを1行追加するだけでOKとのこと。
早速やってみるとこちらはちゃんと動きました！
class指定やアイコン付きも選べて、いい感じです♪
↓アイコンはこんな風に表示されます。
websnapr
「Desizn Tech」の記事「Use of White in Web Design: Tips and Trends」がすてきなので、メモ。
紹介されていたサイトの中では、↓このへんが好き。
「FireMobileSimulator」がすっごく便利で感動！
DoCoMo、au、SoftBank各端末のブラウザをシミュレートしてくれるFirefoxのアドオンです。
私はデザイナーなのでプログラムとか位置情報などはあまり関係ないのですが、3キャリアの実機でデザインをチェックするだけでも結構めんどくさくて・・・
でもこのアドオンがあれば、普通Webブラウザからは見られないキャリア公式メニューサイトもFirefoxで確認することができます。
絵文字は出るし、横幅も合わせてくれるし、最新端末も追加できるので、ものすごく助かります！
机にずらっと端末を並べてチェックしなくてもいいんですよ～
あともちろんFirefoxなので、Macからでも大丈夫です。
（公式シミュレータはみんなWindows用なのです。）
ちなみに、私が仕事で使っているサイトは全部見られましたが、見られないサイトもあるようです。（リダイレクトされるとダメなのかな？）
ダウンロードはこちら。
FireMobileSimulator.org
Firefoxのアドオンは便利ですが、Mac＋Safariの使い心地も捨てがたくて、両方使っていたりします。
でも実はSafariにも便利なプラグインがいっぱいあるんですね～。
「Webdesigner Depot」でSafariのプラグインが紹介されていたので、自分用にメモ！
試してみたいものばかりなので、ちょっとずつ入れてみようと思います。
時々紹介されているのを見かけては気になっていた、フリーフォント「Museo」をようやくダウンロードしてみました。
実際に使ってみると、やっぱりいい感じです！
MUSEO :: a Free Quality Font from exljbris
ダウンロードはMyFontsから。無料の会員登録が必要です。
Museoフォントはウェイト別に5種類あって、300・500・700がフリー、100と900は有料（$16.50）です。
サンセリフのMuseo Sansもありますね。
Webdesigner Depotの記事には、作者のJos Buivengaさんのインタビューが載ってます。
いろいろなサイトで使われてますね～。
Museo Sans Roundedも作ろうかと思っているらしいですよ！
Meet Jos Buivenga: The Designer of the Museo Font | Webdesigner Depot
Abduzeedoのちょっと前の記事なのですが、Illustratorで描くポスターのチュートリアルがいい感じなので、自分でも作ってみました。
どうでしょう？
（ちょっと違うな・・・）
記事はこちらです。
Retro Geometric Vectors in Space with Illustrator and Photoshop | Abduzeedo
TechCrunchを読んでいたら、こんなのが。
Make Your Firefox Browser Look Better With Mozilla Labs’ Latest Skins
Mozilla Labs、Firefoxのお洒落を楽しむスキン機能を発表
Firefoxにアドオンを追加すると、スキンが使えるようになるようです。
きれいなスキンがいっぱい用意されていました。
あとで試してみようっと。
RJDesignz » Create a Speed Gauge and Watch Icon in Photoshop
という記事のアイコンがきれいだったので、私も作ってみました！
どうでしょう？
時計も作ってみました。
簡単できれいなのでおすすめです。
via:Photoshop Lady
便利なCSSデバッグツール「XRAY」 | バシャログ。
こちらで紹介されていたブックマークレットが便利そうなので、早速使ってみました！
XRAY :: for web developers
Use it to see the box model for any element on any web page.ブックマークレットを起動してから、見たいエレメントをクリックするとプロパティが表示されます。
Admix webで紹介されていた
「30+ Beautiful menus examples」
が良かったのでメモ！
好きなデザインばっかりで、すごく参考になりました。
いくつかピックアップ。
Smashing Magazineで紹介されていた
Photoshop用のブラシセット
「Painted Canvas Brush Set」
をダウンロードしてみました！
透過具合とかがいい感じです。
ヘッダーや見出しのアクセントに使ってみよう。
ライセンスは
You can freely use it for both your private and commercial projects, including software, online services, templates and themes.ということで、個人・商用利用共にフリーだそうです。
投稿
すべてのコメント
ahkslog ©Template Blogger Green by Dicas Blogger.
