セラミックインターフェース

□はレイヤー、■はチャンネルのお話。
このホームページで使っていたインターフェースの作り方です。

では、いってみましょう。

200px * 200pxの新規画用紙を開きます。

■チャンネルのタブに移ります。角に丸みをつけます。

新規チャンネルを追加し、全体を選択CTRL+Aを押します。

背景色が白になっていることを確認し、DELETEキー、または、編集＞消去、します。

全体が真っ白になるはずです。

そこから、イメージ＞画像サイズ、を選択して、幅:210、高さ210、にします。

200px * 200pxの白い四角の下に210px * 210pxの黒い四角がある状態です。

フィルター＞ぼかし＞ぼかし（ガウス)を選択し、半径3pxにします。

こうなります。

お次に、イメージ＞色調補正＞レベル補正、を選択。

レベルを左から、120, 0, 140、とします。

はい、角の丸みができました。
この角の丸みは、アクションに登録しておくと便利ですね。

このチャンネルを複製します。複製されたチャンネルをCTRLを押しながらクリックします。そうすると選択範囲が現れます。

選択範囲が現れた状態で、フィルタ＞ぼかし＞ぼかし（ガウス）、を8pxかまします。

そして、[ CTRL ] + [ D ]で選択範囲を解除します。

お次に、また、フィルタ＞ぼかし＞ぼかし（ガウス）、を2pxかまします。

こうなってれば、正解です。

 

□新規レイヤーを追加し、#CCCCCCで全面を塗りつぶします。

 

フィルター＞描画＞照明効果、を選択して、ライトを単一指向系にして、値をこんな感じにします。

テクスチャチャンネルで、さっき、ぼかし（ガウス）をしたチャンネルを選択するのを忘れないようにしてください。あれが盛り上る元になってるので選択しないと、なにも起きません。

ぐぉ、いまごろになって気づいたのですが、レイヤー効果のべベルでできるんじゃないか、とも思えるのですが、、（笑。

こちらのほうが美しいと信じて・・・まぁ、最後に検証します^^;;;

■ひとつめのチャンネルを[ CTRL ]とクリックで選択範囲を出します。

□選択範囲を残したまま、レイヤー１、に戻ります。その後 [ CTRL ] + [SHIFT ] + [ i ]、または、選択範囲＞選択範囲の反転、をし、[ DELETE ]ボタンを押します。

はい、背景を白とかにしてると、かなり、わかりにくいですね〜。特に左上の方なんか。
そこで、薄いグレーの境界線をつけて、わかりやすくします。

□切り取られたレイヤー１の選択範囲をいただきます。[ CTRL ]とレイヤー１をクリック。

□選択範囲がでたまんまで、レイヤー１の下に、新規レイヤーを追加します。

編集＞境界線を描く、で、幅 : 1px、色 : #CCCCCC、位置 :外側にします。

はい、出来ました。あとは、とどめに下に影なんかつけるともっと、いい感じになります。

完成で〜す。

 

途中で気づいたべベルでできるんじゃねぇの？の検証

はい似たようなの出来ました。んー影が単調なような気がします。そのかわり、15秒くらいでできちゃいます（笑

ええ、丸みが違います、やわらかさが違います。ええ、違いますとも、、、。

詳細は以下の通り

 

んー、なんかべベルのクセにという感じでしたけど、やっぱ、きれいなものを作るのは時間がかかりますね。

あとは、横幅、大きさを変えたりして、CSSで配置するだけで、ここのホームページのようになります。

あなたのホームページに合わせたり、変形させたりなど、わからないことがありましたら、お気軽にメールくださいませ。