これはすごい。 Photoshop CCに、GIF, JPG, PNGを自動書き出しする機能がありました。 ・「Photoshop / 環境設定 / プラグイン」の「Generatorを有効にする」にチェック ・PSDデータを開き、「ファイル / 生成 / 画像アセット」を選択 ・レイヤーやレイヤーグループに、書き出したいファイル名（拡張子を含む）をつける。 GIF, JPG, PNGに対応 PSDと同階層に、「xxx-assets」（xxxはPSDのファイル名）というフォルダが作られ、 画像が書き出されます。 PSDがアップデートされた場合にも、自動書き出しされます。 以前紹介したslicyはGIFを書き出せないし、 アプリケーションの機能でこれが追加されたのはすごいですね。 新搭載「Generator（生成）」について 新テクノロジー Generator が Photoshop CC

WordPress（ver. 3.5.2）で画像をアップロードすると、 以下の5ファイル（5サイズ）が生成されます。 ・オリジナルサイズ ・width:624px ・大サイズ（「設定 / メディア」で設定されている値） ・中サイズ（「設定 / メディア」で設定されている値） ・サムネイルのサイズ（「設定 / メディア」で設定されている値） width:624pxの画像は、WordPressのデフォルトで生成される設定となっていて、 不要な場合は以下のようにします。 functions.php の以下の行をコメントアウトするか、削除。 set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop

HTML5のvideoタグは、以下のように記述します。 <video id="movie01" width=”300″ height=”400″ autoplay loop> <source src="movie01.mp4" type="video/mp4" media="all"> <source src="movie01.webm" type="video/webm" media="all"> <p>このブラウザではビデオを再生できません。</p> </video> mp4とwebmでほとんどのモダンブラウザで再生できるようですが、Firefox（確認version:17）はmp4を再生できず、さらにwebmがデフォルトでは認識できず再生できないため、.htaccessに以下を記述し、動画ファイルであることをサーバに認識させます。 2行目はogvが必要な場合に記述。 AddType

YouTubeの動画埋め込み時に関連動画を非表示にするには、以下のようにします。 https://youtube.com/watch?v=xxxxxx%3Frel%3D0%EF%BC%88xxxxxx%E3%81%AF%E5%8B%95%E7%94%BBID%EF%BC%89 ※URLの後ろに、「?rel=0」を付けます。

WordPressで、画像投稿時に画像リンクURLの初期値をなしにするには、以下のようにします。 【管理画面のURL】/options.phpにアクセス（隠しオプション画面に遷移します） 例：http://yourdomain.com/wp/wp-admin/options.php image_default_link_typeの値を、「file」から「blank」に変更します。

Photoshop CS6で点線を描く機能が追加されましたが、うまく描けないときがあるのでメモ。 ラインツール(U)で「シェイプ 塗り：透明 ストローク：線の色」を指定。 「ストロークオプション / 詳細オプション」で以下のように指定。 これでいい感じになります（この場合は1pxずつのドットラインになります）。 幅を伸ばすことが可能なのと、高さを変えると、塗りが透明なので枠線が点線になります。

MBAのデータ移行をしているのでメモ。 OSはどちらも10.7.3。どちらもthunderboltポートあり。 シャットダウン後、起動時にTを押したままにして、元のMacをターゲットディスクモードで起動。 thunderboltでつなぐと、Finderのデバイスに元のMacの名前が表示される（元のMacにはthunderboltアイコンが表示される）。 ※ターゲットディスクモードにしないと（thunderboltでつないだだけだと）Finderの共有に表示されるが、元のMacのアプリケーションが表示されない。 その後、新しいMacにファイルをドラッグして移行。 ただこの方法だと「username/ライブラリ」フォルダにある以下のフォルダ等が移行できません。 ・Application Support ・Fonts ・Preferences ・Saved Application State ・

86496010, Jupiterimages/ Comstock/ Thinkstock iPhoneやAndroidでの表示を確認したい。 そんなときにおすすめなのが、『Mobile Web and App Development Testing and Emulation Tools』。モバイルサイトをテストするためのツール集です。 たくさんのツールが紹介されています。 Google Android Emulator Windowsでスタンドアローンのソフトとして動作するAndroidのエミュレータ TestiPhone.com – iPhone Application Web Based Simulator iPhoneでの表示のされ方をブラウザ上で確認できるシミュレータ iPhoney iPhoneの解像度（320x480px）での見え方を確認できるiPhoney W3C mob

HTML5でメニューを作りたい。 そんなときに参考になるのが、『How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery』。HTML5を使ったドロップダウンメニューです。 CSS3で、角丸やグラデーションが適用されていますね。XHTMLはシンプルで、動きをつけたjQueryの動きもスムーズになっています。 デモは以下から。 Demo 一度見てみてください。 How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery 一旦落ち着いたけど急いで進めなくては。

98312899/ iStockphoto/ Thinkstock illustratorでアイコンを作りたい。 そんなときにおすすめなのが、『40 Excellent Adobe Illustrator Icon Tutorials』。illustratorでアイコンを作るチュートリアル集です。 かなりクオリティーの高いものが揃っていますね。 Create an Aperture Style Camera Lens Icon Apertureライクなカメラレンズのアイコン How to Create a Shiny Bucket Icon 光沢のあるバケツアイコン Create a Stylized GPS Icon iPhoneアプリに使えそうな、GPSアイコン Tutorial: How to Create a Television Icon かわいい旧式のテレビアイコン How t

floatした画像の横のテキストを回り込ませたくない。 そんなときにおすすめなのが、『Correcting Orphans w/ Overflow』。floatした画像の横のテキストの回り込みをクリアするCSSです。 右に配置したテキストをwrapするdivに、widthを指定してfloatさせなくても、overflow: hidden;で実現できるようですね。 デモは以下から。 View Demo ぜひ見てみてください。 Correcting Orphans w/ Overflow 物件を探しすぎてんーちょっと疲れてきた。 ちょっと広尾を見に行ってきていい感じ。

83329211, Darrin Klimek/ Lifesize/ Thinkstock Photoshopのカスタムシェイプを探している。 そんなときにおすすめなのが、『40 Handy Photoshop Custom Shape Sets: Save Time』。Photoshopのカスタムシェイプ集です。 いい感じのものが揃っていますね。 Flower Shapes 花の形のシェイプ集 Sexy Fashion Models セクシーな女性のシルエット Natural Like Leaves & Bushes 草木のシェイプ集 Photoshop Filmstrip Shapes フィルムの形のシェイプ集 Arrow Symbols Icons いろいろな形の矢印のシェイプ集 使いやすいシェイプを探している方は、一度見てみてください。 40 Handy Photoshop Cus

紙や石などのいい感じのテクスチャを探している。 そんなときにおすすめなのが、『40 Fresh Free Texture Packs』。紙や石、水滴などのフリーテクスチャパック集です。 使いやすそうなのが揃っていますね。 Textures 8 綺麗なぼけ感のあるテクスチャ Designer Texture Pack #1 しわしわの紙やコンクリートなどのテクスチャ Texture set 12 ぼかしや引っ掻き傷が入ったようなテクスチャ画像集 8 Re-Stained Paper Textures 汚れた紙のテクスチャ。商用無料 Droplets – Texture Pack 美しい水滴のテクスチャ集 テクスチャを探している方は一度見てみてください。 40 Fresh Free Texture Packs 複雑な要件がやっと整理できた。一気に進めるぞ。 今日は前前職の人とランチ。起業したよ

サイトにスライドショーを使いたい。 そんなときに参考になるのが、『30 Examples Of Great Slideshows In Web Design』。かっこいいスライドショーを使ったWebデザイン集です。 洗練されたデザインが揃っていますね。 Agnarson jQueryを使った、フェードイン&アウトで切り替わるスライドショー。動きがとても気持ちいいです Boerdam 大胆に画像が切り替わるインターフェース Dconvulsions PCの中で、画像がクールに切り替わるDconvulsions Etondigital 手作り感のある背景の上に、スライドショーを乗せたデザイン Graphik グラデーションが美しいスライドショー サイトデザインもかっこいいものが多いので、一度見てみてください。 30 Examples Of Great Slideshows In Web Des

かっこいいスライドショーを作りたい。 そんなときにおすすめなのが、『28 Useful JQuery Sliders You Need To Download』。jQueryのかっこいいスライドショースクリプト集です。 かなりいい感じのものが揃っています。 Automatic Image Slider w/ CSS & jQuery CSSとjQueryで作られた、自動でスライドするギャラリー Animate Panning Slideshow with jQuery 大きい画像の一部がパンしながら移動するスライドショー SlideDeck jQuery plugin とてもかっこいいスライドショー。無料版と$99の有料版がある。Basecampのサイト等、実装例多数 jQuery Infinite Carousel スムーズな動きのカルーセル（イメージスライダー） Easy Slider

WordPressでサイトを構築してクライアントに納品する。 そんなときにおすすめなのが、『9 Plugins Your Clients Will Love For Their WordPress Website』。クライアントへの納品時につけたいWordPressプラグイン集です。 かなり便利そうなのが揃っています。クライアントに渡す際には、管理画面のデザイン等もカスタマイズしたいですよね。 My Brand ログインページをオリジナルのデザイン・レイアウトにカスタマイズできる。ロゴをクライアントのロゴにするなど Branded Admin 管理画面のヘッダとフッタを、オリジナルのデザインにできる Ozh Admin Drop Down Menu 管理画面の左サイドバーのメニューはクリックしてサブメニューを開きますが、それを水平のドロップダウンメニューに変更でき、マウスオーバー&ワンクリ

おっと思わせる仕掛けのあるフォームを実装したい。 そんなときにおすすめなのが、『Sliding Labels v2』。jQueryで作るスライドするラベルです。 フォームにフォーカスすると、ラベルがすっと左に移動しますね。とてもさりげない動きなので、ユーザビリティーを損なわず、おっと思わせる効果があると思います。 デモは以下から。 View the Demo 一度見てみてください。 Sliding Labels v2 DTPデザイナーと近場で飲み。楽しかった。共通点がいろいろあるんですが、やっぱりやりたいのはロックだということを再認識しました。 昨日、CREAMUのコンセプトを見直しました。「web2.0を紹介するデザイナーブログ」としていましたが、「WEB制作・ブランディング」に変更。やりたいのは制作と、アウトプットする対象のブランド価値の向上なので、ワードを絞り込みました。SEO的な観

フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォーム Build an Incredible Login Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels as Text Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォーム Create a Progress Bar with JavaScript フォームの進捗状況をプ

最近のフォーム要素にはラベル（透かしテキスト）を入れているものが多いですが、通常の実装方法は以下のソースで可能ですね。JavaScriptのonfocus、onblurイベントハンドラでvalueを切り替えています。 XHTML, JavaScript <input type="text" value="メールアドレス" id="email" onfocus="if (this.value == 'メールアドレス') {this.value = '';}" onblur="if (this.value == '') {this.value = 'メールアドレス';}" /> これは使いやすいんですが、ソースが綺麗じゃないのと、これからはよりリッチなインターフェースが求められるので、もう少し自然な動きだといいですよね。 そこで、jQuery In-Field Label Pluginを使えば