« フォトショの力 | トップページ | かもめの玉子いろいろ »

2006.01.14

画像にロゴを載せよう

最近、私のブログに掲載している写真にSHINOblogのロゴが入ってるのに気づかれた方も多いんじゃないでしょうか。
これは「私が撮った(作った)画像ですよ」ということを示すためのもので、まあ、サインみたいなもんですねっ。
今回は、このロゴの作り方をおさらい代わりに説明します~。
たいていの人は、Photoshop LiteやPhotoshop Elementsを持ってらっしゃると思うので(PCやデジカメにオマケでついてきますもんね)Photoshopでのやり方です。
Windows付属のペイントでのやり方は「キノミキノママ」の檬花さんが、とても丁寧な説明をしてらっしゃるので、そちらを参考にしてねっ。
「写真に文字を載せようぜぃ」

・・・実は、私自身はマクロメディアのFireworksを使っているので、Photoshopでの作り方はあまり詳しくありません(おい)。
もっと簡単な方法があったら、教えてくださると助かります・・・。
ちなみに今回使用しているのはPhotoshop5.0(かなり旧式)ですが、基本はあまり変わらないんじゃないかな(と・・・思います・・・)。

■ロゴの作り方
まずは新規ファイルを開きます。
「ファイル名」は適当な名前を。
「画像の大きさ」は、「幅」と「高さ」だけ適当に設定しましょう、少し大きめにしておくといいかもね。
「モード」は「RBGカラー」で。
「内容」は、必ず「透明(T)」をチェックしておいてね。

「レイヤーパレット」で「新規セット」を追加します。
すると「セット1」というフォルダが作られますね。

初めての人には「レイヤーって何?」って感じかも知れませんが、要はアニメのセル画みたいなもの。
背景を1枚作っておけば、上に人物を書くだけで使い回しできたり、それぞれのパーツごとに加工ができるのです。

次にサイト名や自分の名前を入力しましょう。
「文字ツール」を選択、本当は白い文字がいいんですが、画面では分かりにくくなっちゃうので、分かりやすいよう赤とかで書きます。
フォントはPCによっていろいろあるので、自分の好きなものや、サイトの雰囲気に合うものを選んでみてねっ。

丸にCのマークは「Copyright(著作権)」という意味。
これは辞書にはない文字なので「○」と「c」を別に作って、後で重ねちゃいましょう。
私は「○SHINOblog」と、小文字の「c」を作りました。
「レイヤー」で「c」が選ばれている状態で「長方形選択ツール」をクリックして画面上の「c」を囲みます。
Ctrlキーを押しながらドラッグすると移動できるので、うまく○の中に配置します。
これでロゴの形は完成。

次は文字色を白にします。
ツールパレットで「文字ツール」を選択、「レイヤーパレット」で「c」を選択します。
画面上でカーソルがこの形になったところで「c」をなぞると文字が反転します。

そこでカラーパレットを使って白をクリック。

同じように「レイヤーパレット」の「○SHINOblog」を選択、画面上の「○SHINOblog」をなぞって、カラーパレットで白をクリック。

いよいよ仕上げです!
「レイヤー(L)」→「表示レイヤーを結合(V)」で2つのレイヤーを合体させちゃいましょう。

このままPSD形式で保存。
これでこのロゴをいつでも使えるようになりました。

■写真への載せ方
アップしたい写真と、作ったロゴを開きます。
「長方形選択ツール」でロゴ全体を囲みでコピー(Ctrl+C)。
写真の上にペースト(Ctrl+V)します。
いきなり真ん中に配置されるので、「長方形選択ツール」でロゴを囲んだらctrlキーを押しながら好きな位置にドラッグします。
こんな風に文字に斜線が入ってるときは好きなとこに移動できますよ。

このままだと真っ白なままなので、「レイヤーパレット」の「不透明度」で透明にしてあげましょう。
20%くらいにするとこんな感じ。
写真との兼ね合いを見ながらちょうどいい感じに薄めてね。

あとはこれをjpeg形式で保存すれば完成!
いつものようにアップしましょう~。

余談ですが、こんなロゴたちも作ってみたよ。
rogoiroiro

rogoirorio1

|

« フォトショの力 | トップページ | かもめの玉子いろいろ »

ウェブログ・ココログ関連」カテゴリの記事

コメント

追記コメントです。
うーん、やっぱフォトショの使い方をブログで説明するって無理がありますなあ・・・。
バージョンによって使い方も変わるだろうし。

これからインストールして初めていじろう、って方には
かなり分かりにくいかも知れません(涙)。
気合い入れて「やってみる!」って言ったのに
うまく説明できなくて本当にすいません・・・。

投稿: しのぶ | 2006.01.14 06:47

 早起きのしのぶさん。
 フォトショップは、文字機能があるので、そのまま新規画面で、ロゴ作ればいいです。

投稿: 南郷力丸 | 2006.01.14 06:51

>南郷さん
最近ハマッてるオンラインゲームが鯖落ちして昨日遊べなかったので
ふてくされて早寝しちゃいました。
だけど、今日はこれから遊びに行くのでちょうど良かったよ。

>>フォトショップは、文字機能があるので、そのまま新規画面で、ロゴ作ればいいです。

え・・・すいません、やり方が分かりません。
記事にしてトラバください(笑)。

投稿: しのぶ | 2006.01.14 07:49

ちなみに、最後のロゴ集で使った戦闘機のアイコンは
こちらでいただきました。
http://www.trancymick.com/g8/content/material.html

投稿: しのぶ | 2006.01.14 08:23

お手数かけちゃいまして、お疲れ様でした~~
いやいや、わかり易いです~。
ちなみに私もこんな感じのやり方でやってました。
南郷力丸さんの文字機能ってのに興味ありです。

・・・で。
もしかして早起きじゃなくて、夜更かしでは?
というか、もはや徹夜の域かしら?

投稿: 檬花 | 2006.01.14 10:15

こんにちは!
元フォトショ使いの現ファイアーワーカーです(笑)。
でも、ペイントだって結構使える代物なんですよね。

これは良いレッスン記事でした!
「余談」のロゴがまたクオリティ高いじゃないですか~。
フォント次第でも随分と見栄えが変わるものですよね。
私も新しいのを挑戦してみようと思います!

「バナーを作ってあげよう」という記事にも期待(おいおい^^)。

投稿: ads(あず) | 2006.01.14 16:34

 やりかたって、しのぶさんが図解してる通り。うちのフォトショップとあまりに画面が違うんで、何か違うソフト使って、ロゴ作って、それを使ってるんだとばっかり思ったんです。

投稿: 南郷力丸 | 2006.01.14 17:32

著作権©は辞書になくても、ネット上のどっかでコピペして登録するといいかも。(好みの字体で出力されない場合もありますけど)

が、
私はこれまた古いフォトショップエレメンツ2.0をインストールしていて使ってみたんですが、なるほど、著作権©出力されないですねぇ。マイクロソフトのペイントは出力されるんですけど。へ~。

写真に文字を入れる作業は私の場合、
1:文字を入れたい写真をエレメントで開く
2:文字ツール(Tのマーク)を選択する
3:丸「○」を入力する。
4:「C」以下の文字を入力する
 ※丸○と重ねるから二回にわけて文字入力。レイヤーが別々になります。
5:移動ツール(上矢印マーク)で「○」と「C」以下の文字を好みの位置に移動して重ねる。
6:色、透明度はお好みで調節
7:最後に好みのファイルタイプで保管。
となります。

文字ツールで入力すると、一回ごとの入力で自動的に一つ一つのレイヤーに分かれるので、基本の画像があればレイヤー作成を意識しないで大丈夫でした。ソフトのバージョンや設定で違うのかもしれませんけれど。レイヤーの統合をせずとも、JPGやGIF形式で画像の保管すると1枚の画像になりますし。

私にとって、ペイントとフォトショップ系との違いは、部品が一度に一枚の画像にくっつかかそうでないか、とフォトショップ系は一つの作業をする度に、操作の選択とツールの選択の二つを確認しなければならない、ということです。これ、最初面倒でした。

でも、たまにしか使わないのですが、使っているうちにソフトごとで使い分けができるようになってきました。ペイント、フォトショップエレメンツ
、ピクチャーマネージャー、ウェブアートデザイナー(アニメーター)・・・。なんだかんだと慣らされました。笑

っても、未だにフォトショップ上では透明な背景がJPGに変換したら真っ黒、気が付かずにアップロードしてたりしますけどね。遊びだから、ま、いいか、レベルです。笑

投稿: ちゃぼ | 2006.01.15 01:54

うわーなんか実はとっても高度なことをしてらしたんですね。なんかのアプリでテキスト入力してポン、で終わりかと思ってた。改めて尊敬のまなざし。。
まだまだ佐官への道のりは遠いなぁ(+_+;

手持ちのアプリで研究してみまする・・。にしても半透明なんて絶対無理ポ(涙)

投稿: 三尉 | 2006.01.15 11:57

>檬花さん
初めてフォトショをいじる人でも分かるように説明するって
ものすごく難しいですね(大汗)。
でも私もとてもいい復習になりました~。

どうやら南郷さんのフォトショと画面が違うので
私が使ってるのがフォトショじゃないと思われたようです~。
たしかに、画像加工ソフトってバージョンが変わると
画面が全然違っちゃいますもんね。
私が使ってるFireworksも一個前のと現行のとでは
とても同じソフトとは思えないくらい変わっています。
こういうのってちょっと足踏みしてるとあっという間に置いてかれますね・・・。

>>もしかして早起きじゃなくて、夜更かしでは?

あっ!こらっ!シーーーーーッ!!!(爆)
いや、実はものすごく早い時間(8時頃)に寝ちゃって
起きたのが夜中だったので、
いちおう徹夜ではない、ということにしておいて~~っ(爆)。

>adsさん
おお!私と同じ花火師ですねっ。
フォトショは写真などの画像加工には強いけど、
バナーのようなビットマップ画像にはあまり適してないから、
作り方が面倒なのも仕方ないっちゃ仕方ないんですよね~。
Fireworksを初めて使ったときは、ものすごいショックを受けました、
こんなに簡単にできるなんて、
今までの私の苦労は何だったんだ~~~っ!みたいな(笑)。

>>「バナーを作ってあげよう」という記事にも期待(おいおい^^)。

うへ~~~、私ごときが人さまのバナーを作るなんて
とんでもないことでございますよ~(汗)。
でも、余談系のバナー程度のものなら
テキトーに参考になさってくださいませねっ。

>南郷さん
すいません、私のフォトショは何十年も前のものなので
現行のやつと比べるともうインターフェース変わりまくりなんだと思います。

やっぱフォトショでバナーやロゴを作るのって
そうとう無理がありますね(大汗)。
ただ、今回はフォトショもライト版がだいぶ浸透してきて
持ってる人も多いだろうということで、この記事を書いたのでした。

>ちゃぼさん
今回の例のように簡単なテキストだけで作った場合は
毎回写真の上に文字を書くだけでいいんだけど
たとえば、この記事の最後で紹介したような
一工夫デザインされたロゴだといちいち作り直すのは面倒でしょ。
だからロゴのレイヤー統合をしてから保存しておくと
次回からはロゴのファイルを呼び出してコピペするだけで良いのです。
あと、ロゴをJPEGで保存すると背景色を透明にできないし
gifで保存するとフォントによって文字がギザギザになることがあるので
これはお薦めできません。
やはりフォトショ形式(PSD)で保存しておきましょうねっ。
フォトショで「丸にC」が表示されなかったのは
ちゃぼさんが使ってるフォトショのデフォのフォントに
その特殊文字がないから、だと思います。
フォントを変えたら表示されると思うよ。
ただし、そういうときに限ってあんまり好きじゃないフォントだったりするんだけどね・・・。

ペイントとフォトショの決定的な違いは「値段」です、
・・・と言ったら話はそこで終了なので(笑)
ペイントはドローソフト、フォトショはレタッチソフト、ということでしょうね。
つまり、ペイントは絵を描くのが得意だけど
画像の加工は難しいどころかほとんどできない。
フォトショは画像加工が得意(てか本職)だけど、
絵を描くには無理がある(ドロー系はAdobeならイラストレーターの仕事)
ということになります。
それぞれに長所・短所があるので
使い手がお互いの利点をうまく利用して活用していくことが大切であろうと。
どんなに良いソフトを持っていても、それを使いこなせなければ
宝の持ち腐れになる訳ですね。
・・・そんな訳で、私は自分が持っているソフトを公表することに
少し抵抗があるのです、
「そんなもん持っててその程度か」と思われるのがツライので(笑)。

>三尉
うーん、ちゃぼさんへのコメントでも書いたけど
フォトショに絵を描かせるのは少し無理があるのは確かなんですよね~。
ただ、三尉が持っているソフトなら
もっと簡単にできるのもあるハズなので、
ヒマなときにでもマニュアルを眺めてみてくださいね。

これだけWEBが一般的になってきて
趣味でホームページを作る人も増えてきたので
バナー作り専用のソフトもいろいろあるんですよ。
かと言って、わざわざ最新ソフト買うほどの労力は全く必要ないと思います。
それこそ、今自分が持っているソフトを使って
アイディア次第でどんなこともできるはず。
持てる道具を最大限に利用して最強の武器とする、
それこそがDAIS職員としての本懐であろうと確信しております(笑)。

投稿: しのぶ | 2006.01.15 15:37

何度も使うことを考えた場合は私もフォトショップのファイル形式です。必要に応じて他のファイル形式で保管しています。っても葉書の住所くらいなもんかなぁ、何度も使うのって。ほとんどの場合、繰り返し使うことがないので流用がきかないファイルで残すことも多いです。

ペイントを使っていた後にフォトショップエレメンツを使ってまごついた経験があり、未だに使いこなしていない人間でもできる方法を載せれば初めて使う方に参考になるかと思いましたが、この件に関してはお呼びじゃなかったですね。

きっとデザインにこだわる方、プロかそれに近い方だと思いますが、そういう方が「その程度と思われる」のはツライのでしょう。要求されたものに答えられないということになっちゃいますもんね。

でも、しのぶさんのデザインに対しては、私は「その程度」と思ったことないですよ。自信もってください。私ごときにそう思われても嬉しくない?レベルの高いものを作ることはできないし、しのぶさんとは好みが違うけれど、見た目を判断する基準は低くないんですよ。笑 ま、高いところを目指しているから自分を叱咤激励してるんだと思いますけどね~。

ところで、フォトショップ(エレメンツ)にフォントを持たせる方法、というがわかりません。同じパソコンでマイクロソフト(オフィス)系のソフトでは出力される著作権©がフォトショップエレメンツで出力されないんですね。IBMのホームページビルダーについていたウェブアートデザイナー等でも出力されません。…や、特に急ぎで必要じゃないことなので、自分で暇みて調べます。今はとりあえず、ご飯が炊き上がった音がしたので、朝食準備に戻ります。出勤前のオヤジがでてきたし。笑

投稿: ちゃぼ | 2006.01.16 06:50

>ちゃぼさん
今回はブログに貼る「画像にロゴを載せよう」というのがテーマなので
何度も使うことを前提としてるんですよね。
だもんで、少し手順が面倒でもフォトショ形式で保存した方が
後々作業がラクになるであろうと。
gifやjpegで保存するならペイントで充分だしね。

>>ところで、フォトショップ(エレメンツ)にフォントを持たせる方法、というがわかりません。

フォントを持たせる・・・うーん、どういうことかな・・・。
ワードなどで使っているフォントをフォトショなどでも使いたい、ってことかしら?
フォトショもウェブアートデザイナーもWindowsのフォントを参照してるので
ワードで使えるフォントなら、これらの画像ソフトでも使えるはずです。
ワードで©(丸にC)が表示されるのと同じフォントを
ウェブアートなどのフォントメニューで探して指定したら表示されるんでない?
ちなみに頭に「MS」がつくフォント「MSゴシック」とか「MS明朝」でやったら
ちゃんと表示されてました(byフォトショ)。

投稿: しのぶ | 2006.01.16 18:44

MSシリーズのフォントも含めて試してみたんだけど、仕様のため出力されないようです。
フォトショップだと出力されるのですね。やっぱ金ださないとダメね。

投稿: ちゃぼ | 2006.01.16 22:00

>ちゃぼさん
へ~、MS系のフォント、ダメだったんだ~、と思って
私もElements3.0を持っていたので
インストールして試してみました。

・・・・うっは~~~!ちょっとメチャやばいよ!!
私が持ってるフォトショと全く別物のソフトだよこれ!(大汗)
なんだこのマックちっくな画面は~~~っ!
ということで、南郷さんが「フォトショじゃないと思った」とおっしゃった意味が
今頃になって分かりました・・・。
3.0とか現行フォトショ持ってる人が見たら
確かに「何やってんだコイツ」状態だわ・・・。

・・・気を取り直して・・・・。
Elements3.0だときちんとマークが表示されてました。
2.0だとなんでダメなんだろう?ちょっとそれは良く分かりません。

投稿: しのぶ | 2006.01.17 10:29

nb鞋

投稿: nb鞋 | 2016.04.08 18:58

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12358/8150537

この記事へのトラックバック一覧です: 画像にロゴを載せよう:

» 写真に文字を載せようぜぃ:追記あり [キノミキノママ]
様々な事情から、ブログに自分が撮った写真をUPする時には、サイト名を載せる様にしているんですが、それをウィンドウズ付属のペイントでやってみようという企画です(企画なのか?w) [続きを読む]

受信: 2006.01.14 09:55

« フォトショの力 | トップページ | かもめの玉子いろいろ »