[psd] Photoshop Mockup Template for iPhone

iPhone用モックアップテンプレートの必要性を感じたので作ってみた。

Safari View App View Keybord View

左から、Safari、アプリ、キーボード表示

キーボードと一部アイコン以外はベクトルマスク使ってるので色変更が出来ます。
画面のピクセルサイズがレイヤー名に書いてありますが、目算なので間違ってるかもしれない。

なお、zipに入っているpsdファイルのバージョンはCS2です。

“Photoshop Mockup Template for iPhone” をダウンロード iphone_template.zip – 647 回のダウンロード – 200 KB

[icon] 桜の花 (昼)

桜の花のアイコン素材を作ったので晒しておきますね。
細い方が芝桜で太い方が染井吉野。のつもり…

桜の花 アイコン素材

png24形式のファイル(上と同じサイズ)とpdf形式のファイルが入ってます。
pngの方はweb素材用で、pdfは直接編集用です。適当に加工して使ってください。

“Sakura-icon” をダウンロード wtn-sakura.zip – 1478 回のダウンロード – 53 KB

枝と合体
桜の枝

Creative Commons License

[mootools] Button CSS Generator

ボタンタグのCSSジェネレータ作ってみた。誰か先にやってる人いたらゴメンナサイ。
背景色からボーダーカラーを計算して設定するっていうのがやりたかったんだ。
あとmooRainbowも使ってみたかったんだ。

今のところ、ボタンの背景色、文字色、サイズ、線幅が設定可能。
線色は背景色選択時に自動計算して設定するよー。

線種、反転、フォントあたりの細かいところは休み中に作る予定。
ソースももうちょっと綺麗に書き直したいんだぜ…

[button]ボタン ベース素材 (アクア&楕円形)

ボタンのベース素材です。大きい楕円のボタンなので、メニューボタン以外にアイキャッチ、ワンポイントとしても使えると思います。

メニューボタン ベース 素材

配布zipはFireworks(png)またはPhotoshop(psd)の直接編集用ファイルと、PNG24形式のWeb用ファイルのセットです。
Fireworks PNGとPSDは白背景用と黒背景用とサンプルテキストが全て含まれています。

“Aqua-egg Button Packs” をダウンロード WTN-button01.zip – 881 回のダウンロード – 90 KB

Creative Commons License

[icon]クリスマス用フォルダアイコン(プレゼントボックス)

クリスマスっぽい赤リボン+緑箱のアイコンと緑リボン+赤箱のアイコンを作ったので晒しときます。

クリスマス用プレゼントボックス デスクトップアイコン

icoファイルとpng24形式のファイル(300pxサイズ)が入ってます。
pngの方はweb素材用です。適当に加工して使ってください。

“Xmas-Box Icon” をダウンロード WTN-xmas_box.zip – 826 回のダウンロード – 185 KB

Creative Commons License

AptanaをDreamweaverっぽい色にする

コードビューのカラーリングが違うと計り知れない違和感を感じる件…ってなわけで
AptanaのコードビューをDreamweaverっぽい色にするcolファイルを晒してみるテスト。
完全に同じ色にはならないけど雰囲気は似てると思います。
使い方は、ウィンドウ→設定から各言語の設定(Colors)でインポートするだけ。

HTML、CSS、PHP、Javascriptのcolファイルが入ってます。気に入らないとこは適当に変更してください。
ダウンロード:

PHPはコメントの色が変わらないところがあるので、気になるなら
Colors:PHPDocもオレンジ色に変更しとくといいかもしれない。

Javascriptのcolファイル追加 細かいところ変更。

“Aptana DW colors” をダウンロード Aptana_DW_col.zip – 1579 回のダウンロード – 4 KB

クリエイティブ・コモンズ・ライセンス

[bg]CSS用ドロップシャドウ背景 8ColorPack(パステル系)

コンテンツ部分の両端にドロップシャドウを付ける、repeat-y用の背景画像をまとめたパッケージです。
パステル調の8色セット。コンテンツエリアはwidth:900pxです。

8Color Backgrounds Pack
サンプルページ

フリー素材です。色変更、サイズ変更、加工etcは自由なので、煮るなり焼くなりしてお好きなように使ってください。
Creative Commons License

ダウンロード:

“900dsbg_pack01” をダウンロード WTN_900dsbg_pack.zip – 971 回のダウンロード – 15 KB

使い方は解凍ファイル内にあるサンプルHTMLファイルのソースにも書いてありますが、
background-imageプロパティで背景画像指定してrepeat-yするだけです。
background-positionは横方向をcenterに。
コンテンツエリアのサイズ変更は切り貼りでおk。