小技: 2009年7月アーカイブ

いざという時に役立つ、ちょっとしたPhotoshop講座です。

わりと初級な内容ですので、どっぷりとPhotoshopに浸っている上級の方には物足りないです。


さて、初回の今日は「写真などの画像を角丸に切る」です。



↑例えばこのような画像です。


では順を追って解説いきます。
※ちなみにこの講座はCS3での解説ですのであしからず。


1.元画像を用意
作りたいものの元となる画像をPhotoshopへ。
「レイヤー」メニューから「新規」→「背景からレイヤーへ」でレイヤー化しておきます。




2.新規レイヤーを作成
「レイヤー」メニューから「新規」→「レイヤー」で、角丸用に新規レイヤーを用意して、レイヤーパレットで元画像の下層へ移動させます。




3.角丸を作成
先ほど作成した新規レイヤーを選択しておきます。
次にツールメニューから長方形ツールを長押しして、角丸ツールを起動させます。
そのままドラッグで角丸を描画します。
描画した後は移動ツールを使いカンバス内の適宜の大きさに合わせます。







4.クリッピングマスクを適用
レイヤーパレットで元画像のレイヤーを選択して、「レイヤー」メニューから「クリッピングマスクを作成」を選択します。







以上で完成です。
あとは切り取りツールなどで余分なスペースをカットして、web用に保存しましょう。
背景画像を生かしたい場合などはgifや透過pngなどで保存すればOKです。

要するに透明部分をもった画像なりシェイプなりを下のレイヤーに置いて、上のレイヤーでクリッピングマスクを作成すればOKという訳です。

これを応用すれば、いろんな形に切り抜いた画像が作成できますね。

ここぞというポイントでぜひお使いください。

javascriptファンの皆さんも、そうでない方もこんにちは。

特にIE6の表示に悩まされ制作に行き詰った方は必見です。


IE6ify!

このブックマークレットを使うと、
表示されているページのレイアウトがかのIE6のごとく崩れます。

使い方は簡単です。

下の画像のリンク先をブックマークとして保存。
崩したいページで使えばOK。

↑簡単に楽しみたい方はクリック連打！

または以下のスクリプトをアドレスバーへ貼り付けてみてください。

javascript:(function()
{var%20i=0,r=function(n){return%20Math.floor(Math.random()*n)},
f=document.getElementsByTagName('body')[0].getElementsByTagName('*'),
o=function(e){return%20typeof(e.style)=='object'&&e.tagName!='SCRIPT'},
s=function(){while(!o(e=f[r(f.length)])){}return%20e.style};while(i++<5)
{s().display=r(2)?'block':'inline';s().position=r(2)?'absolute':'relative';
s().margin=r(2)?'0':'1em';s().padding=r(2)?'0':'1em';s().width=r(2)?'':'auto';}})();


連続で使っていく（つまり連射する）と、どんどん崩れていくのですが、
「IE6のアルゴリズムを追及した」という、
妙にリアルなIE6な動きで崩れていくのが皮肉たっぷりで楽しいです。

特に意味はありませんけど、一息入れたい方はぜひどうぞ。

javascriptファンの皆さんこんにちは。

今日はフォーム内のパスワードを確認する小技をご紹介します。

ログインが必要なサイトのほとんどはＩＤとパスワードを入力するためのフォームが設置されています。

このようなフォーム内のパスワードは通常アスタリスクで隠されています。

...が、たまに「なんだっけ？」と確認したい時がありますね。



そんなときは以下のjavascriptをぜひアドレスバーへ貼り付けてみてください。

javascript:(function(){var s,F,j,f,i; s = ""; F = document.forms;
for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i)
{ if (f[i].type.toLowerCase() == "password") s += f[i].value + "\n"; } }
if (s) alert("Passwords in forms on this page:\n\n" + s);
else alert("There are no passwords in forms on this page.");})();

するとあら不思議。

ダイアログにパスワードが表示されます。

ブックマークレットとして利用すると便利かと思います。