ブログ練習帳

Photo Shopで角丸バナーに枠をつけたい

このまえ、やっとのことでPhoto Shopで角丸四角のバナーを作りましたが、そのとき、まだワクがついていませんでした。でも、角丸のバナーって、サイトのイメージカラーとか、薄いグレーとかで、1pxくらいの細いフチがついていることが多いです。

前回のPhoto Shopで角丸四角のバナーは、こちら。

Fire Worksでは、内部にペーストで線を残すとか、塗りのない角丸四角を上からもう1つ乗せるとかで対応できました。

Photo Shopのほうは、そのままでした…。Fire WorksやIllustratorとかではある、「塗りなし」という選択がが、Photo Shopでは見当たらない！
「うへー」となりましたが、見習、なんとかできました。

ということで、この前作った角丸四角のバナーに角丸のフチをつけます。Photo Shopで。ちなみに使ったのはPhoto Shop CS5です。

今回準備してあるのは、この左側の画像です。サイズが200×138です。このサイズぴったりに収まるようにしてフチをつけます。

まず、Photo Shopで画像を開きます。(ってあたりまえか…)

角丸長方形ツールをクリックします。

ここで、「シェイプレイヤー」「丸み5px」を選択します。そして「丸み」の横にある下向き▼のオプションをクリックすると、

角丸長方形オプションが出るので、ここで「固定」をチェックし、指定のサイズ（ここではW200px　H138px）を入力します。

この状態で画面をクリックすると、指定のサイズのシェイプレイヤーができます。ぴっちりと、元の画像とかどをあわせます。ここでは、塗りに指定された色で塗りつぶされているので、元の画像が見えなくなっています。

レイヤーパネルで、いま作ったシェイプレイヤーを選択して、塗りを0%にします。

そしてこのレイヤーパネルの下にある[fx]をクリックするとレイヤースタイルが設定できるので、「境界線」を選択します。

レイヤースタイルの設定ダイアログボックスが出るので、ここで「サイズ」を1px（ここは任意の値、線の太さ）、位置を「内側」、カラーで、フチの色を指定します。

ここで位置を「内側」にすることで、先ほど作ったシェイプレイヤーのサイズの内側に線が引かれるので、指定のサイズぴったりのバナーが作れます。内側意外にすると、先ほどつくったシェイプレイヤーのサイズより大きくなってしまうので、注意です。

OKをクリックすると…。

でけた！でけた！でけた！

みょーにうれしくなっている見習です。よーし、もっとがんばるぞー。

2012年1月20日1:27 AM| カテゴリー： Photoshop,画像処理,見習い奮闘記| コメント (0)

Fire Worksでパスに沿った文字を書く

この例の「どひぇぇぇっ～」という文字のように、円形にながれる文字を作ることになりました。
(でも、こういう状況には、できたら、なりたくない…)

Fire Works CS5でトライです。

まずは楕円形ツールを使って、テキストを沿わせるためのパスを書きます。

書いたパスのそばに、テキストを書きます。

パス（ここでは楕円形）とテキストの両方を選択します。

「テキスト」→「パスに結合」と選びます。

できあがり！

やっぱり元に戻したい、というときは、「テキスト」→「パスから分離」を選択すればOKです。

---

テキストの開始位置

ところで、テキストの開始位置はどうやって決まるのかというと…。

パスに結合して、テキストを配置すると、文字のスタートラインは、基となるパスを書いたときに、最初に書き出したところからとなります。

開始位置の微調整は、テキストを選択した状態で、「テキストのオフセット」に数値を入力すると、変更できます。

また、パスを終了した位置からテキストを開始したい場合は、「テキスト」→「逆方向」を選択するとできます。

ということで、楕円にテキストを流してみました。

楕円形ツールで書いた円は、どこがパスの始点で終点かはほとんど意識していませんでしたが、左横からスタートして、時計回りに回っているようです。

なので、楕円形ツールや、その他のツールを使って、パスを合体したり、型抜きしたりして作った図形にテキストを流そうと思うと、なかなか思うとおりになりません。

---

複雑な図形のパスにテキストを沿わせる

たとえば、このきみどり色の、山風の図形です。これは楕円ツールと、長方形ツールを使って書いた図形のパスを合体したり型抜きして作りました。
この山のような曲線に沿わせて、テキストを書きたいと思ったのですが…。

さきほどと同じように、この山風の図形とテキストを選択してから、「テキスト」→「パスに結合」を実行すると、

ありゃ、思いも寄らないところにテキストが流れています。底辺の左端が、パスのスタートラインとして認識されているようです。

ではではと、「テキスト」→「逆方向」を実行してみます。

またまたありゃ、です。こんどは、山のてっぺんからスタートしちゃいました。
ペンツールを使ったりして、どこがパスの始点かわかればいいですが、これでは、どこがどこだか…。

なら…と、自分でパスをペンツールで書いてみます。

最初から楕円形ツールなど使わずにペンツールでパスを書けばいいのですが、見習にとってはパスを自分で全部書くのは、ちょっと大変です。でも、最初から全部自分でパスを書くよりは、楕円形ツールなどで作ったパスを見ながら、ペンツールでなぞっていくほうが少しはラクです。だいたいどこにポイントを置いたらいいかとか、方向線はどこにどれくらい出ているかとか、見ることができるので、それにあわせていけばOKです。

どうでしょう、見習、がんばってパス書いてみました。山の稜線になるようにテキストを流したいので、下の部分は要りません。そもそもテキストを流したくないところはパスがないほうがコントロールしやすいです。

ペンツールで書いたパスと、テキストを選択してから、「テキスト」→「パスに結合」を実行します。

やった、でけた。それっぽくなったかな？

山の稜線にあわせるように、テキストがキレイに見えるよう、パスの角度を変えたりして、整形してみました。

ちょっとうれしい見習です。（でも、人生、山あり、谷あり、ワケありです…）

2012年1月14日1:23 AM| カテゴリー： Fireworks,画像処理,見習い奮闘記| コメント (0)

Photo Shopで角丸四角のバナーを作る

この前は、Fire Worksで角丸バナーを作りましたが、Photoshopで作るには…。

バナーの場合（って、どんな場合でもですけど）、きっちり指定のサイズで作らなければならないです。1pxでも大きかったり小さかったりすると、ありゃありゃ、ちょっと見苦しいですぅ、ではなく、レイアウトがぐちゃぐちゃに…。ということも。「見習さんが作ったバナーを入れたら、サイズが間違ってたので、サイトの段組が壊れた～」という事態は避けたいものです。とほほ。

これが、今回作るバナーのサイズ。
ちなみに、高度なテクは使ってませんが、使ったアプリケーションは、PhotoShopCS5です。

画像を準備します。200px×138pxの画像です。

あとは角丸にするだけ。

まず、「角丸長方形ツール」を選択します。

角丸5pxの200px×138pxのパスを作成したいので、「パス」「丸み5px」を選択し、「幾何学オプション」をクリックします。

この下向き▼をクリックすると、オプション画面がでます。

ここで「固定」にチェックをつけ、指定のサイズ幅200px、高さ138pxを入力します。

指定のサイズを入力したら、画面をクリックすると、その場に指定サイズの角丸四角形がかかれます。

パスコンポーネント選択ツールに持ち替えて、切り抜きたい位置へパスを移動させます。

Jpgで読み込んだので、背景をコピーしてレイヤーにしておきます。

コピーのほうを選択した状態で、パスのパネルを開き、「作業用パス」を右クリックして、「選択範囲を作成」を選択します。

ぼかしの半径は0pxにしてOKをクリック。

これで角丸バナーの形の選択範囲ができました。

この状態で、選択範囲の反転をクリック。

角丸バナーで不必要な部分が選択されている状態なので、ここでdeleteキーを押します。

これで角丸バナーの形はできたので、選択状態を解除するために、CTRL＋Dを押します。

この状態で、角丸になっているのは、先ほどコピーしたほうのレイヤーです。元からある背景のほうは角丸になっていません。
あとあと、「やっぱり角丸じゃないほうがいいから、元に戻してね」といわれたときにあせらないよう、背景のほうはいじらずとっておきたいので。

ここでは、背景のほうのみ、目玉マークをはずします。

あとはWeb用に保存すれば、指定サイズでの角丸バナーのできあがりです。

なんとか、できた…。

2012年1月8日1:37 AM| カテゴリー： Photoshop,スクリーンショット,画像処理,見習い奮闘記| コメント (0)