another side of view

無料で使えるPhotoshopカスタム・シェイプいろいろ

クオリティの高いものが豊富。
人物や蝶などいろいろ実用性あるものがいっぱいです。

多種多様なPhotoshopのカスタムシェイプのコレクション

商用利用可、クレジット表記・バックリンク不要のフリー素材サイト

ファイル形式からも探せて便利です

商用利用ＯＫ＆無料の写真・フリー素材を集めました！総合素材サイト

最良の画像フォーマット

* GIF: 256色、可逆圧縮、透過機能あり(ただし透過かそうでないかの2種類だけ)、アニメーション機能あり
* JPEG: 何百万の色表現可能、非可逆圧縮、高い圧縮率、透過機能なし、アニメーション機能なし
* PNG8: 256色、可逆圧縮、高い圧縮率、透過機能あり、アニメーション機能なし
* PNG24/PNG32: 何百万の色表現可能、可逆圧縮、JPEGよりもサイズが増える、透過機能あり、アニメーション機能なし

IE6およびそれよりも前のIEにはPNG8、PNG24/32の透過機能に関して次の問題があることも説明されている。

* PNG8の透過はGIFのブール透過のように透明かそうでないかに分けられてしまう。透過部分はすべて完全透過として表示される
* PNG24/32の透過部分はすべてグレーとして表示される

こうした状況を加味し、次のように利用するケースをまとめている。

* 写真データ: JPEG
* アニメーション: GIF
* それ以外すべて: PNG8

PNG8であれはIE6であっても最悪でGIFと同じ表現まで落ちるだけで済み、さらにファイルサイズをGIFよりも少なくできるうえ可逆圧縮で透過表示もできる。ほとんどの場合で推奨されるというわけだ。

PNG24/32はファイルサイズがJPEGよりも膨れ上がるため推奨されていない。もしPNG24/32が必要とされるケースでもPNG8に変換してクオリティが低下しないで済むか確認し、可能であればPNG8を使った方がいいとしている。もちろん画像の内容によるが、場合によって人は1,000 色あっても200色であっても違いを認識できないものがあり、そういったケースではPNG8を使った方がいいというわけだ。

色数が256よりも多くしかも透過機能を使っている場合にはPNG24/32が唯一の選択肢となるわけだが、この場合はCSSと AlphaImageLoaderを使ってIE6やそれ以前のブラウザでも表示できるように処理を加える必要がある。こうした処理を実現するためのライブラリにはIE7.jsやIE PNG Fixなどがある。

Stoyan Stefanov氏はPNG24/32をWebサイトで使うことを避けるべきとしているが、中間形式として使うにはいいと説明している。JPEGは非可逆圧縮であるため画像編集のフォーマットにJPEGを使うと品質の低下を招きやすい。編集中はPNG24/32をフォーマットとして使い、アップする段階で JPEGにするという方法があるとしている。

画像ファイル形式、使い分けていますか？

病院参考サイト

タイトルや見出し文に利用したいプロ仕様のフリーフォント20個まとめ

【au】バイナリエディタを使用した絵文字の作成方法CommentsAdd Star

auの絵文字はimgタグを使うか、もしくはDoCoMoの絵文字を使ってたけど（自動変換）、

バイナリで絵文字を埋め込む方法もあるらしい。

バイナリエディタを使用した絵文字入りメールの作成方法

http://www.au.kddi.com/ezfactory/tec/spec/3.html

メールとなっているけど、携帯ブラウザからでも良いっぽい。

まずはバイナリエディタのダウンロード

Stirling

http://www.vector.co.jp/soft/win95/util/se079072.html

そして絵文字一覧からシフトJISのコードを取得

My First HDMLさんのページ

http://cgi.wap2.jp/emoji/ezweb/?act=list

そしたらバイナリエディタ（Stirling）を起動して、新規ファイルボタンを押して、

例えばシフトJISコードが「f65a」だったら一番左側のマスに「f6」、次のマスに「5a」を入力。

すると右側に文字化け気味の文字が表示されるので、それをコピー。

ファイルにそれを貼り付ければOK。eclipseだと’□’表示になってしまって上手くいかないので、秀丸等でやる。

ファイルはUTF-8で保存して終了。

Photoshopの面倒なガイドを簡単に配置するエクステンション -GuideGuide

Photoshopのガイドをドラッグして配置するのが面倒だな、という人にぴったり！
数値を指定して1クリックでドキュメントにガイドを配置するPhotoshopのエクステンション

guideguide

GuideGuideはPhotoshop CS4, 5に対応しており、数値を指定してカラムや溝のガイドを簡単に配置することができます。
GuideGuideのインストール

ページ下部の「Download GuideGuide 1.0」からファイルをダウンロードします。
ダウンロードした「guideguide_1.0.zip」を解凍します。
解凍した「GuideGuide」を下記のフォルダ内に移動します。
Win: \Program Files\Adobe Photoshop \Plug-Ins\Panels\
Mac: /Applications/Adobe Photoshop /Plug-Ins/Panels/
Photoshopを起動します。
[ウィンドウ]-[エクステンション]から「GuideGuide」を選択すると、GuideGuideのパネルが表示されます。
GuideGuideの使い方

Photoshopを起動し、[ウィンドウ]-[エクステンション]から「GuideGuide」を選択し、GuideGuideのパネルを表示します。

GuideGuideのパネル

Find Middle
各ボタンをクリックすると、ドキュメントの中心線をガイドで配置します。
Margins, Columns and Rows
パネルは上左から順番に、下記のようになります。
一番上のガイド（px）
一番下のガイド（px）
一番左のガイド（px）
一番右のガイド（px）
縦列の数
縦列の溝
横列の数
横列の溝
各数値を入力後、「Create Guides」をクリックすると、指定した数値通りにガイドを配置します。

JQUERY事始めVOL.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる

内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向け

画像にマウスを乗せるとアニメーションエフェクトがかかります。

コード

$(function(){
$(“img.sample01″).hover(
function() {
$(this).stop().animate({“opacity”: “0″}, “slow”);
},
function() {
$(this).stop().animate({“opacity”: “1″}, “slow”);
});
});

css

div.effe_sample {
position: relative;
}

img.sample01 {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}

img.sample01a {
position: absolute;
left: 0;
top: 0;
}

HTML

ウスを載せてアニメーションしながらトイフォト風のエフェクトが「かかったように見えた」と思います。コードをご覧頂くと想像付くと思いますが、単に画像2枚(sample01.jpgとsample01a.jpg)を重ねて、上に配置した画像（cssでz-indexを与えます）にマウスを乗せるとゆっくりと透過(というか、opacityが0なので見えなくなります)され、トイフォト風に加工済の画像が表示されるだけ、という仕組みです。

1
$(“img.sample01″).hover(
2
function() {
3
$(this).stop().animate({“opacity”: “0″}, “slow”);
4
},
画像（img.sample01）にマウスを乗せると（hover）、アニメーション（animate）しながら透過（”opacity”: “0″）されます。

1
function() {
2
$(this).stop().animate({“opacity”: “1″}, “slow”);
マウスが乗っていないときは透過しません（”opacity”: “1″）ので、上に重ねた画像が再び表示されます。

画像に上手に加工を施せるデザイナーさんなら、難しいコードを覚えなくても、普段どおり画像加工すれば素敵なエフェクトを加えることが出来ますので、今あるスキルをうまく利用することも大事ですよね
余談：CSS3

この動作はjQuery不要でCSS3で実現できます。IEさえなけれb(ry

01
img.sample01 {
02
position: absolute;
03
left: 0;
04
top: 0;
05
z-index: 10;
06
-webkit-transition: all 0.5s ease-out;
07
-moz-transition: all 0.5s ease-out;
08
-o-transition: all 0.5s ease-out;
09
transition: all 0.5s ease-out;
10
}
11
img.sample01:hover{
12
opacity: 0 ;
13
}
14

15
img.sample01a {
16
position: absolute;
17
left: 0;
18
top: 0;
19
}
このようなcss3をクロスブラウザに対応させる、と言うとjQueryの良さがよく分かりますね。

jQueryのコードを応用するにはどうすればいいの？

このコードをリファレンスを見ながら好きに変更してみてください。リファレンスを見て真似てみると、より頭に入りやすいかと思います。

jQuery日本語リファレンス – animate()
アニメーションのスピードや透過、サイズの変更も出来ますのでコードを真似て、身体で覚えてみては如何でしょう。勉強し始めからリファレンスに目を通すクセを付ければ自ずと理解出来るようになるはずです。

今まで紹介されたマウスオーバーによる画像エフェクトもよくよく見てみると結構単純だったりします。

例) Create a Stunning Sliding Door Effect
例) Sliding Boxes and Captions
また、コードを全く変えずに、cssとマークアップの追加のみでも出来ることはあります。

50 High Quality Abstract Photoshop Brushes

光のエフェクトや、ペンキ状のもの、雲のブラシなど色々

セブンイレブンのコピー機でできること

・コピー
→もちろん両面コピー、カラーコピーができます。

・ファイルの出力
→USBメモリやSDカードに入れたjpegやpdfをプリントアウトできます。

・ネットプリント
→外からファイルを送ってプリントアウトすることが可能。外出先の人に書類を渡したい場合、「近くのセブンイレブンで！」と予約番号を伝えればなんとかなるのです。

・スキャン
→jpegやpdfを、USBメモリへ保存できます。

そのほか、

・FAX
・nanacoでの支払い
・チケット購入

セブン-イレブンのマルチコピーで、できること

キンコーズ