| PAGE-SELECT |

≫ EDIT

バナーの貼り付け方

***勝手に応援***
 里親募集@とらじ 里親募集@しまじろう
 里親募集@ひな 里親募集@りん 里親募集@レオン
**************



 本日は、折角作ったバナーの貼り付け方を。
 ブログでは「バナー画像はお持ち帰りで」と記載してあるところが多いと思いますので、その方法で行きます。
 ちなみに軽く補足しますと、画像の表示方法には「持ち帰り」と「直リンク」の二種類があります。
 「持ち帰り」は、自分のHPなりブログなリに画像をアップロードする方法。
 「直リンク」は、画像作成者のHPなりブログから直接画像にアクセスする方法です。
 後者は負荷がかかるので、大抵のブログでは許可されていません。
 もちろんメリットもあるのですが、リンクするということは相手方様に好意があるということ。相手方様の指示に従い、マナーを守りましょう。
 ちなみ、に。

 私のように画像を無断で持ち帰って、勝手にバナーを作るのも、本来マナー違反です。

 不愉快に感じられている保護主さんがおられましたら、謹んでお詫び申し上げます。
 一応、お世話になったみいさん繋がりの方のとこだけ、というのが私なりの勝手に応援企画の基準ですが。
 この辺は現実と同じで、「応援させていただきたいので、こちらの写真をお借りしてバナー作成+リンクしてもよろしいでしょうか?」とお尋ねするのが本来の筋……だと思います。
 とりあえず、その辺は読んでくださる方の常識とか良識とかそんな名前のものにお任せするとして、本来の話題。バナーの貼り付け方へ。

1.バナー画像をダウンロードします。
 Windowsの場合、右クリックで「画像を保存」系のがあるはずです。
 この辺がわからない場合は、超初心者向けから始めていただくしか……。

2.ダウンロードした画像を自分のブログにアップロードします。
 ブログのヘルプ機能を参照して下さい。

3.画像をブログ記事に貼り付けます。
 おそらくここらへんで問題が発生。
 大抵のブログって、画像をクリックすると大きい画像が表示されますよね。そのへんを弄ってやる必要があります。
 おそらく、こんな文字列が表示されていると思います。

 < a href="https://blog-imgs-33-origin.fc2.com/n/u/k/nukocan/shion.gif" target="_blank" >< img src="https://blog-imgs-33-origin.fc2.com/n/u/k/nukocan/leon.gif" alt="leon.gif" border="0" width="88" height="40" / >< /a >

 これを解説するとこうなります。

 < a href(リンクする先)="http://blog-imgs-33.fc2.com/n/u/k/nukocan/shion.gif"
   target(リンク時の表示方法 この場合別窓で表示)="_blank" >
 < img src(参照する画像のURL)="http://blog-imgs-33.fc2.com/n/u/k/nukocan/leon.gif"
   alt(画像の上にマウスを置いたときの表示)="shion.gif"
   border(画像周辺に線を引く場合の線幅)="0"
   width(画像の横幅と縦幅)="88" height="40" / >
< /a(リンクの指示はここまでですよ) >

 多少の差はあると思いますが、こんなとこですね。
 すると、弄るべき場所が見えてくると思います。

< a href(まずはここをリンク先のURLへ)="http://nekomabusi.blog85.fc2.com/"
   target(ここはお好みのリンク形式に)="_blank">
< img src(画像のアドレスそのままで)="http://blog-imgs-33.fc2.com/n/u/k/nukocan/leon.gif"
   alt(お好きな感じに)="里親募集@シオン"
   border(ここも好き好きで)="0"
   width(サイズは遵守しましょう)="88" height="40" />
< /a(以上!)>

 そうすると、こうなる。

 里親募集@レオン

 今回は説明部分では一部不要なスペースなど入れてます。でないと普通にリンク表示されてしまうので~。
 あくまで説明部分だけを参考にして、ご自分のとこに表示されたタグ表示で試してみて下さい。
 二日続けて小技ネタですが、参考になれば幸いです。

| Web小技 | 07:40 | comments:0 | trackbacks:0 | TOP↑

≫ EDIT

バナーの作り方

***勝手に応援***
 里親募集@とらじ 里親募集@しまじろう
 里親募集@ひな 里親募集@りん 
****************



 今日は、先ごろ大量生産したバナーの作り方を簡単に紹介させていただきます。
 まず前提として、私の作成環境。

・Windows XP
・Photoshop Elements(無印 とっても古い)
・経験年数 独学で15年くらい

 あくまで私のやり方です。
 他のOS、画像編集ソフトでも一部は参考になるかも知れません。
 なお、基本的にわからない単語がある場合はぐぐって下さい。それで解決出来ない場合は、もう少し初歩から始めてみることをお勧めしますです。
 今回は私が今勝手にイチオシの、にゃんだふるすとーりーのレオンくんで作ってみたいと思います。

1.バナーを作りたい画像を用意します。
 1.jpg
 写真はある程度の解像度があった方が縮小した時きれいです。
 この時点でどんな感じにするか決めて選ぶと後がスムーズです。


2.画像を「切り抜きツール」でトリミングします。
 3_20090822000018.jpg
 バナーに使いたい部分を残して画像を切り取ります。
 切り取りすぎると後で足りなくなるかも知れないので、そこんとこ注意。後からでも縮小はできます。


3.バナーは大抵横長なので、必要な場合軽く回転かけます。
 4_20090821235609.jpg
 最初にレイヤーをコピーします。
 次に「移動ツール」で画像を回転させます。
 5.jpg
 頭の中には常に完成形をイメージしてください。


4.画像をきれいに編集します。
 6.jpg
 私がいつもしているのは「フィルタ→シャープ→シャープ」です。この加工で毛の質感がはっきりします。不要の場合もあります。「シャープ」がきつく感じる場合は「シャープ(輪郭)のみ」がいいかも。  
 バナーにする場合、多少明るめにした方が映えるので「バリエーション→明るく」をかけると良い感じになることが多いです。
 その他、大体するのは「画像調整→自動コントラスト」ですね。日中の自然光撮影なら不要ですが、蛍光灯下の撮影だと色がはっきりします。時々とんでもないところに調整してくれますが、今回はあえて手動調整の仕方は説明しません。
 また、「画像調整→自動レベル補正」が効果的な場合もありますが、その辺は写真の状態によるので色々試してみて下さい。
 説明長いけどついてきてますかー(笑)
 そんな諸々加工をしたのが↑の画像です。元と比べてみてください。
 まあ、がんばって加工しても、PC違うと台無しだったりとかは見詰めちゃいけない真実ですネ。


5.新規にキャンバスを作ります。
 2.jpg
 ファイル名は好きな名前で構いません。
 サイズも任意ですが、よくあるのは200×40とか88×31ですね。
 私は最初にうっかり88×40で作ってしまったので、このまま……。
 全ての子が同時に卒業できたら一新してもいいけど、猫ちゃんのかわいさがわかるように大きめでもいいかもです。
 解像度はあんまり低いと画像が荒れます。


6.加工したレイヤーをクリックし、新規に作ったキャンバスにドロップします。
 7.jpg
 ぐっと掴んでがっと放す。
 わかりにくいけどコピーできます。
 ここからバナー用のキャンバスへ移ります。


7.バナー用に画像サイズをあわせます。
 8.jpg
 選択ツールで画像の位置を合わせたら、角の四角を摘んでサイズ調整。必要に応じて角度もですね。
 「縦横比を固定」の選択を忘れるとえらい目にあいますので要注意。


8.ベースとなる画像が完成しました。
 9.jpg
 縮小するとにゃんこのお顔がぼけるので、「フィルタ→シャープ→シャープ(輪郭のみ)」かけました。
 ここからは文字入れとなります。


9.好きな文字を入れましょう。
 10.jpg
 白文字ですのでこの段階では見づらいですね。
 ここから小技です。


10.文字に枠をつけます。
 11.jpg
 最初に「レイヤー→新規→レイヤー」で新しいレイヤーを作ります。
 新しいレイヤーは必ず文字レイヤーの下に配置して下さい。
 文字レイヤーを「Ctrl+クリック」で選択します。点線で囲まれると思います。
 新規レイヤーを軽くクリックし、「選択範囲→選択範囲を変更→拡張」します。拡張範囲は「1Px」でいいと思いますが、適宜増やして下さい。
 「編集→塗りつぶし→背景色」で点線範囲内が塗りつぶされます。
 12.jpg
 最後に画像を統合し、ウェブ用に保存で出来上がりです。GIF形式の方がよりベター。
 アニメーションの方法などは割愛させていただきます。まずは基本形からねー。ということで。
 最終形は↓です。

 里親募集@レオン

 色が違うのは、他の子と被ってたことに気付いたから。
 慣れると10分くらいで作れるようになります。
 また気が向いたら他のことも書いてみますー。

| Web小技 | 00:50 | comments:5 | trackbacks:0 | TOP↑

| PAGE-SELECT |