【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に
無料の写真画像の利用条件の確認方法と検索方法
写真画像を無料でダウンロードできるサイトの利用条件の確認方法や画像の検索方法をPXLEyesから紹介します。 How And Where To Find Legal Source Images 下記に写真画像を無料でダウンロードできる代表的なサイトの利用条件の確認方法と検索方法を紹介します。 また、写真画像を無料でダウンロードできるサイトは他にも多数あるので、下記エントリーを参照ください。 商用・非商用で使用できるフリーの写真素材サイト集 商用・個人サイトで利用可能なロイヤリティフリーの写真素材サイト集 商用サイトでも制限無しで利用できる無料の写真素材サイト集 stock.xchng
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
[CSS]背景画像をページの最下部に固定表示させるスタイルシート
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の２パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv（headwrap）を設置し、ページ上部に表示される背景画像を指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea>
ウノウラボ Unoh Labs: Macでのスクリーンショットの撮り方まとめ
yamaokaです。 Mac（Mac OS X）でスクリーンショットを撮る方法についてまとめてみます。いつも忘れてしまうので個人的な備忘録だったりしますが、同じことで悩んでしまう方にとって少しでも参考になれば幸いです。 「Command + Shift + 3」を押下 単純に画面全体のキャプチャ画像が必要な場合に使います。ショートカットキーを押した瞬間、デスクトップに画面全体のキャプチャ画像が保存されます（PNG形式）。 「Command + Shift + 4」を押下 マウスカーソルが十字（ヘアライン）に変わり、画面上の範囲を選択できるようになります。ドラッグして範囲選択した上でマウスのボタンを離すと、選択範囲のキャプチャ画像がデスクトップに保存されます（PNG形式）。 「Command + Shift + 4」を押下、さらに「Space」を押下 マウスカーソルがカメラの形に変わり、その
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
プロレベルのバックグラウンド画像作成Photoshopチュートリアル集:phpspot開発日誌
40 Cool Abstract and Background Photoshop Tutorials | Photoshop Tutorial プロレベルのバックグラウンド画像作成Photoshopチュートリアル集 次のような超クールな背景画像の作成の流れが分かります。こんな大量の教材があれば、もう他に教材は要らないというぐらいの充実ぶり。 Abstract Signature Windows Vista Aurora Effect Abstract Walkthrough Luminescent Lines Space Lighting effects Calculations And Colorization Abstract Light Rays Signature tutorial Movement Light Rays Abstract art wallpaper Signat
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
素人が撮影した写真を、10秒でイケてる写真にする方法 : LINE Corporation ディレクターブログ
こんにちは、佐々木です。 予算やスケジュールに余裕のある案件であれば、プロのカメラマンやデザイナーをアサインするのが一般的ですが、ちょっとした案件であればディレクターが写真の撮影や編集を行うことがあります。しかし普段専門でやっていない、いわゆる素人が撮影した写真は「そのまま使うにはちょっと…」というクオリティであることがほとんどです。 そこで今回は、Photoshopの「色調補正」機能を使って、誰でも簡単に「素人が撮影した写真を10秒でイケてる写真にする方法」をご紹介します。 ※写真の補正を本格的にやろうとする方には参考になりません。あくまで、簡易的な方法にすぎませんので、その点もあらかじめご承知おきください。 今回使用したソフトは、かなり昔の『Photoshop 6』ですので、最新バージョンと食い違う部分も出てくるかと思います。そのあたりは適宜読み替えて該当する機能をお探しください。 ぼ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例 | 初代編集長ブログ―安田英久
はてなブログ | 無料ブログを作成しよう
CSS Spriteを活用しよう - DesignWalker