ホームページ制作会社の雑談

ホームページのボタンや、背景画像、写真の加工などをする際に、非常に簡単ですが、見た目を美しくする方法があります。

それは、「境界線を描く」ことです。

描き方は簡単、PhotoShopで作成した画像を選択し、「編集」メニューの「境界線を描く」を選択するだけです。

表示されたダイアログで境界線の設定をするだけできれいに境界線を描いてくれます。

そこで境界線を描くだけでビジュアルアップさせるには、境界線を2重に描きます。
以下のような設定をしてみて

意外とあるPhotoShopの使ったことのないツールを使ってその実用性を検証してみたいと思います。

今回使ってみるツールですが、「覆い焼きツール」です。

正直、名前だけじゃどんなツールなのかわかりません。
とりあえずどんなツールか調べてみると画像の暗い部分を明るくできるようです。

さて、使いどころは？となると…

そんな時、お客様から提供いただいたホームページ製作で必要な画像で、画像の一部が暗い画像を発見!!

まずは、レベル補正をかけ調整。しかし、一部の暗さは変わりません。

きっとここだ！と思い、覆い焼きツールを使用。

結果は、見事、全体のバランスを崩さず、画像の一部を明るくすることができました。
「覆い焼きツール」意外な実力を持っていることが判明。
画像の一部が暗く補正が効かない時に一度お試しを

ソフトバンクが日本での販売が期待されていたアップル社製の携帯電話「iPhone」の販売を発売しました。

アイフォーンと言えば、アメリカで07年6月に発売され、アイコンにタッチして操作する独特のデザインなどが人気を呼び、これまでに500万台以上が販売される大ヒット商品です。

まだ、発売時期や価格などについてはベールに包まれたままですが、期待値はかなり高いの話題になっています。

アイフォーン版のページ作成に便利なiUIというライブラリがあるそうです。

iUI自体は、オープンソースで公開されていてgoogle codeにてオープンソース公開されています。

iUIプロジェクトホームページ
詳しくは　→　http://code.google.com/p/iui/

Yahoo!スタッフブログでも簡単な使い方が紹介されています。
詳しくは　→　http://searchblog.yahoo.co.jp/2008/06/yahoo_iphone.html
はたして、アイフォーンは、日本でも普及するのでしょうか？

PhotoShopには、レイヤーセットという機能がある。とは言うもののこれまでほとんど使ってこなかった…

実は非常に便利なものであることに最近きづいた。

たいてい、ホームページ用の画像（たとえばボタン）は、背景レイヤー、文字レイヤーなどと複数のレイヤーに分けて最後にスライスしてWEB用に保存するわけだが、ボタンを複製するとき、背景レイヤーを複製し、文字レイヤーを複製し、その後、移動させ、位置を合わせるという２度手間だったわけです。

しかし、ボタンをレイヤーセットで作ると、そのレイヤーセットを複製し、レイヤーセットを選択した状態であれば矢印キーだけでまとめて簡単に移動できちゃうわけです。（なんでもっと早く使わなかったんだ…）

そんなわけでPhotoShopでホームページ用の画像を製作するにはレイヤーセットが有効です。

PhotoShopに持ち込むとレイヤーパレットに「インデックス」というのが表示されます。

この状態だと、ブラシや、消しゴムは、普段どおり使えますが、「編集」メニューの「変形」などが使えなくなります。
また、別のファイルに画像をコピーすることもできません。JEPGだとなんら問題はないのですが…

こんな経験ありませんか？

実は簡単にGIF形式も編集できるようにできるのです。

やり方は実に簡単!!　「イメージ」メニューの「モード」をクリックし、「インデックスカラー」となっているものを
「RGBカラー」にするか「CMYKカラー」にするだけでいつものように編集できるようになるのです。

GIF画像の編集の際にお試しあれ！！

ホームページのデザインは、PhotoShopを利用していますが、デザインとくにレイアウトを決めていくときに画像のサイズを意識します。

とくにWEB用の画像は、1ｐｘのずれが許されません。
しかし、サイズぴったりの画像をつくることも意外と神経をつかうところです。:cat_6:

その作業を楽にしてれる小技を紹介します。

ガイド機能です。
ガイド機能は、「ビュー」メニューより「定規」を表示し、表示された「定規」の上からドラックすることでガイドを表示させることができます。

WEBデザインをするなら「環境設定」で定規の単位をピクセルに変えることをお忘れなく:hand:

また、定規は、shiftキーを押しながらだと、5pxずつ動いてくれるので200×50などのピッタリサイズを作成するのに役立ちます。

また、「ビュー」メニューの「スナップ先」の設定次第で画像をガイドの位置に合わせることもできるのでレイアウトを決める際に役立ちますよ

私が常日頃愛用しているPhotoShopの便利なフィルタを紹介します。

ホームページを制作しているとボタンやナビゲーションを作成する機会が非常に多いです。

ボタンを作成するとき、サイトにやわらかさを出すためになるべく角を丸くしたデザインを心がけています。
しかし、PhotoShopで画像の角を丸くするのは非常に面倒な作業になります。:body_deject:

そんなときに便利な角を丸くするフィルタがあります。

PENTACOM
http://www.pentacom.jp/

こちらのサイトの真ん中あたりに「Rounded Corner 」というフィルタがあります。
このフィルタをダウンロードし、PhotoShopのプラグイン/フィルタに保存します。

するとPhotoShopのフィルタメニューにpenta.comというのが追加され、その中にroundcorner anti-aliasとroundcornerの２つが表示されます。

画像をきれいに仕上る場合は、アンチエイリアスを選ぶとよいです。

角を丸くしたい画像を選択し、このフィルタを選択すると、角丸の比率を入力するダイアログが表示されるのでここで比率を決めるだけで簡単に角の丸い画像のできあがりです。:b_body_jump:

角丸の比率は、５、１０あたりをよく使ってます。

以前、紹介した髪の毛まできれいに切り抜けるソフトMask Pro 4をインストールしました。

早速のレビューですが、すばらしいソフトです。我々のようなホームページ制作会社にとっては欠かせないソフトになりそうです。

髪の毛まできれいに抜ける仕組みは、背景を消していくのに「保持」したい色、たとえば髪の毛であれば、髪の毛の色の明るい色、暗い色の何色かを取り、「除去」したい色、背景の色を何色か取ります。

すると、この登録した色を基準としてブラシをかけるとさっと背景の色だけを取り除いてくれます。
このソフトの導入で背景の消しこみ作業の時間が大幅に短縮されました。

また、ガラスを消さずにガラスに写りこんだ色だけを消すこともできるので、合成写真を作成する場合にも重宝しますよ

PhotoShopのプラグインですが、操作も簡単できれいに仕上がります。
写真加工されている方、おすすめです。:sayonara:

ホームページの制作では商品の写真やイメージ写真を切り抜き、合成、補正するのがあたり前ですが、この作業をする上で非常に効率が悪いのが背景を消す（切り抜く）作業です。

写真の中の切り抜きたい（残したい）部分と切り捨てたい（消したい）部分の色がはっきり分かれていれば
自動選択ツールでちょちょいのちょいで切り抜けるのですが、切り捨てたい部分の色が何色かに分かれていたり
建物や木などのいらないものまで写っているとペンツールや消しゴムツールを使って地味な作業を延々とやること
になります。:body_deject:

慣れてくれば、少しは効率よくできるようにはなりますが、地味すぎる作業に集中力が続かなくなります。

この問題を解消してくれそうなソフトを見つけました。:hakusyu:

Mask Pro 4
詳細はこちら:hand:http://www.swtoo.com/product/onOne/mkp/detail.html

PhotoShopのプラグインで「４」はCS2に対応しているようです。ちなみに私はCSユーザーなので「３」を探さないとダメです。

上記のサイトからビデオのチュートリアルが見られるのですが、女の子のクリクリの髪の毛をきれいに素早く切り抜いているのには驚きです。

このソフトがあればもう地味な作業から開放されそうですよ:otya:

また、上質なベクター画像をフリーでダウンロードできるサイトをご紹介。

:hand:Vector４free.com
http://vector4free.com/

このサイトは、素材の数はそれほど多いとはいえませんが、素材の質がいいし、サイト自体のユーザビリティーがいいです。

やはり英語サイトですが、ユーザビリティーが良いので英語が分からなくても簡単にダウンロードができます。
この手のサイトはダウンロードをどこからすればいいか？分からないってことが多いです…

私の何点か試しにダウンロードしてみましたが、素材自体のクオリティーも結構高いと思います。
この素材で携帯の待受けでも作ってみようと思ってます。

フリー素材を中心に探してますのでまた見つけたら報告します:hiyoko: