グラフィックソフトで扱う色には、大きく分けて2種類あります。
一つは、印刷などで扱うCMYKカラーで、もう一つは、主にディスプレイなどに表示するときなどに使われるRGBカラーです。
このことはご存知の方も多いと思いますが、WEB素材などを作る時に注意が必要になることがあります。
特にillustratorで作ったものをPhotoShopに持ち込むときです。
PhotoShopでは、カラーモードをRGBに設定していてもIllustratorのカラーモードをCMYKのままにしているとPhotoShopに持ち込んだ時にCMYKの色になってしまい色が微妙に違ってしまいます。
IllustratorとPhotoShopを組合せてWEB素材を作るときなどは、どちらのソフトもカラーモードをRGBにすることを忘れないように!!
バナー制作時に困るのが88×31(Micro Bar)という企画のサイズです。
サイズが小さいので画像を作るにも苦労します。
そんなバナー作りに最適なサイトをご紹介します。
無料バナー作成工房
http://www.bannerkoubou.com/
このサイトは「完全無料」「商用OK」「登録不要」「報告不要」で1500種類以上のバナー素材を提供しています。
フリーの素材ってデザイン的にいいものってあまりないんですが、こちらの素材は、種類も多く、デザインも豊富で使いやすいかなって思ってます。
このサイトの一番すごいところは、グラフィックソフトを使わずにブラウザ上で自分の好きな写真をつかってバナーが簡単につくれてしまうところです。
パソコンに保存してある好きな画像を選択すると、切り取り枠が出て、88×31のサイズでトリミングし、その中に入れる文字を入力し、色やフォントを指定するという流れになっています。
文字入力時の色の選択、選べるフォントの種類が増えるともっと使いやすくなるかもしれません
バナー作りの参考にしてみてはいかがでしょうか?
最近のトレンドとしてサイトの幅が広くなってきてますよね (Yahooも950px)になってる
サイトの幅が広くなるとホームページの表現力の向上になるのでユーザーからするとメリットが大きいと思います。
サイト幅が広いとそこに使用する画像の幅も広くなければならなくなります。
多くの写真素材は、640×480pxが多く、800pxオーバーのサイト作りには、不向きです。
高解像度の写真となると、1枚の画像も高額です…
そんな時に役立つサイトをご紹介します。
プロカメラマン撮影の無料写真素材・著作権フリー画像素材 –LinkStyle–
http://www.linkstyle.co.jp/
プロのカメラマンが撮影した高解像度の写真がダウンロードできます。
やっぱりプロが撮影しているのでクオリティーは高いです。
ブログの画像とかに最適かもしれませんね。
高解像度の写真が必要なときは一度ご覧になってみてください。
ホームページ用の画像はほとんどPhotoShopで制作しているのですが、スライスによる切り出し時(WEB用に保存)の際、画像の形式、画質が選択できます。
もちろん、ホームページ用画像なので画像の形式は、「GIF」「JPEG」のどちらかの場合が多いのですが、今回、ちょっと考えてみたいのは、「JPEG」で保存する時の設定です。
ホームページ用画像なので容量はできるだけ軽く、尚且つ画質がキレイが条件です。
軽さは、画質を半分に落とすだけで容量は、半分以下にすることが可能です。
しかし画質が納得のいく画質ではなくなってしまいます。
最近は、横幅の広い(800~900ピクセル)サイトが増えていて、そこに載せている写真のイメージがそのサイトの印象を決めるといってもいいぐらいになっているので低画質の画像はなるべく避けたいところ…
そこで軽さと画質を満たすギリギリのラインを探してみました。
その設定は、「画質70」
これが私の中で最適かな?と思える設定でした。
ホームページを制作している中で雑誌の掲載情報や、チラシ広告などをPDFでアップすることがあります。
この場合、スキャナーで画像を取り込み、PhotoShopで加工し、PDFにするという流れになります。
PhotoShopで画像を補正した後、「別名で保存」でPDFを選択し、保存するわけですが、このまま保存すると数メガのファイルとなってしまいます。
このままでは、容量が大きすぎてWEB上へのアップができません。
そこでこの容量を抑える小技をご紹介します。
すごく簡単なんですけどPhotoShopで加工した画像を統合することで容量を抑えたPDFを作成することができます。
やり方は簡単。加工や補正を行なった後「レイヤーパレット」のオプションから「画像を統合」をしてレイヤーを「背景」にしてPDFに保存するだけです。
PhotoShopでPDFを保存する際は、この方法をおすすめします。
以前にもちょっとご紹介したファビコン(favicon)を再度挑戦しました。
挑戦するに当たり、まずは、ファビコン作成のソフトをはじめることに…
しかし、簡単に作成できるフリーソフトはたくさんあるのですが、画質がボロボロ…こんなんじゃ使えない
もっときれいにつくる方法はないかと検索しているとなんとPhotoShopでファビコンをつくるためのプラグインを発見!!
こちらのサイトで紹介されています。参考になりました。
http://2xup.org/log/2006/04/28-2323
早速、ダウンロードし、使ってみることに。
ファビコンのサイズは、お気に入りのアイコンが16×16、ショートカットアイコンが32×32で表示されるので32×32でアイコンをデザインします。(やりにくい場合は、64×64で作成後、画像解像度の変更でもOK。)
デザイン後、保存すると、追加したプラグインにより、.ICOという拡張子での保存ができるようになります。
保存時にこのICOを選択し、ファイル名をfavicon.icoにすればOKです。
あとは、Favionを表示させたいページの<head>タグの中に下記のタグを挿入し、アップロードして完成です。
<link rel=”shortcut icon” href=”ファビコンまでのパス/favicon.ico”>
フリーソフトを使うよりもきれいな画質のファビコンがつくれますのでおすすめです。
ホームページのボタンや、背景画像、写真の加工などをする際に、非常に簡単ですが、見た目を美しくする方法があります。
それは、「境界線を描く」ことです。
描き方は簡単、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用に保存するわけだが、ボタンを複製するとき、背景レイヤーを複製し、文字レイヤーを複製し、その後、移動させ、位置を合わせるという2度手間だったわけです。
しかし、ボタンをレイヤーセットで作ると、そのレイヤーセットを複製し、レイヤーセットを選択した状態であれば矢印キーだけでまとめて簡単に移動できちゃうわけです。(なんでもっと早く使わなかったんだ…
)
そんなわけでPhotoShopでホームページ用の画像を製作するにはレイヤーセットが有効です。