2015年03月08日

画像の下部を波形や千切れたように加工する方法


 画像の「以下省略」的な効果として、画像の上部だけを表示して、下部の方は波形にカットする方法があります。あるサイトで、きれいな波形のギザギザ、影付きカットを見かけました。とてもきれいに仕上がっていて、どうやって作ったんだろうと興味を持ちました。そこで、自分でも作ってみました。やり方は自己流ですが、きれいに仕上がったと思います。

画像下部の波形カット


 この波形カットを基本形にして、ギザギザカットにします。ついでに影も加えました。
 下の画像は、解像度を落としたので、少し画質が劣化してしまいました。

画像下部のギザギザカット


波形ギザギザカット写真の作り方
 今回は、PowerPointを使います。
1.PowerPointのスライドに写真を挿入します。([挿入]⇒[図])

2.[挿入]⇒[図形]で、「星とリボン」グループの[大波]を選択。
図形、大波

 「大波」の図を写真の前面に表示し、位置を合わせる。[図形の塗りつぶし]と[図形の枠線]で白を指定する。

PowerPoint_figure002.jpg


3.[Shift]キーを押したままで写真と図形の二つを選択。右クリックし、[図として保存]で保存する。png形式で保存される。

4.保存した図をIrfanViewで開き、必要な部分だけ選択して、[編集]⇒[選択範囲を切り出す]でトリミングする。次に、[ファイル]⇒[名前を付けて保存]。下のようにチェックが入っていることを確認して保存。
IrfanView_png_transp1.png

 透明色を聞いてくるので、画像の白い部分をクリックして、白を透明色に指定。これで、白い部分は透明になる。

 ギザギザにするには、上の2.のところで、図形の[フリーハンド]を選び、ギザギザ図形を描く。
 [描画ツール]の[図形の編集]⇒[頂点の編集]で[閉じたパス]を選択。後は、塗りつぶしと枠線の色を白にする。以降、上と同じ手順。

 影を付けるには、透明処理した図をPowerPointに読み込み、[図のスタイル]グループの[図の効果]で[影]を選択。影を付けられるのは、上の4.で透明処理をしているからです。透明処理をしないと写真全体の影になってしまいます。

 この方法はいろいろな場面で役立ち、用途が広いと思います。楽譜なども下の画像のように簡単に、きれいに加工できます。
 
score002.png


 写真に白い部分があると透明になってしまうので、その場合は、図形の塗りつぶしで写真に使われていない色を指定します。


posted by ネコ師 at 00:54 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする

2015年03月01日

小さなバナーなのに文字がはっきり読める:作り方


(以前書いたこの記事の内容に不満があったため全面的に書き直しました。写真に文字入れする場合にも役立つ情報だと思います。 2015/03/01)

  webサイトで、小さなバナーなのに文字がしっかり読めるものがあります。小さなバナーに多くの文字が入っているのに、なぜ読めるんだろう。自分で作るとぼやけてしまい、文字がクッキリと見えない。そんな不満を抱えていませんか?

 今日は、小さなバナーなのに文字がクッキリ見えるようにする方法を紹介します。
 先ずは、下の三つのバナーをご覧下さい。サンプルは本館のタイトル「ネコ肉球4個分の幸せ」です。10文字と長いタイトルなので、文字がクッキリ見えるかどうかのサンプルとして適していると思います。
バナー1 (160px X 26px)
png_LOGO_TEST001.png

バナー2 (90px X 15px)
png_LOGO_TEST001.png

バナー3 (60px X 10px)
png_LOGO_TEST001.png


 いかがでしょうか。小さな文字もクッキリ見えると思います。マウスのジョクダイヤルを回して拡大表示してみて下さい。「バナー3」も驚くほどクッキリと表示されているはずです。

 実は、上の三つのバナーはまったく同じものです。表示の仕方を変えているだけです。
 ただし、表示方法を変えただけではこのようにクッキリしたバナーを作れるわけではありません。

 このようにきれいなバナーを作り、表示する方法を以下で具体的に説明します。


1.バナーをきれいに作る方法
 バナーは、背景と文字で構成されます。背景は単色の場合もあれば、写真が使われることもあります。このバナーにクッキリした文字を入れるには、以下の方法を採ります。

 (1) officeで文字入れする
   上のサンプルバナーはWordの「ワードアート」を使って文字を書き、それをPowerPointのスライドにコピーし、png型式で保存しました。わざわざPowerPointを使っている理由は、png型式で保存が簡単にできるからです。好みの問題でしょうが、管理人はいつもこの流れでやっています。
   Wordの「ワードアート」を使って文字入れすると、さまざまな効果を加えることができます。

 (2) 文字入れしたバナーはpng型式で保存する
   JPG型式の写真の上に文字を挿入し保存するとき、そのままJPGで保存すると文字がボケてしまいます。文字入れした場合はPNG型式で保存します。

 (3) 文字入れ後は縮小しない
   画像に文字を入れをしてpng型式で保存し、後で画像のサイズを縮小しようとすると文字がボケます。あまり小さく作るとやはりボケてしまいます。これを避けるため、最初からある程度の大きさで作ります。たとえば、上のバーナーのサイズは、「590px x 99px」です。どのくらいの大きさが良いかはいろいろな条件に影響されるので一概には言えません。幅500pxくらいで作っておけば無難でしょう。仕上がりのファイルサイズが50kb程度なら良いのではないでしょうか。本当は、20kb以下を目指したいところです。

2.バナーをきれいに表示する
 上の方法で作ったバナーを表示してみると文字がクッキリ見えていると思います。
 これは、web上で小さく表示しているからです。

 このサイトの記事欄では、基本的に幅570pxの画像を使っています。上のバナーのサイズは「590px x 99px」なので、そのまま表示すると枠からはみ出てしまうくらいの大きさになっています。そこで、小さく表示されるように設定します。アスペクト比に従い、縮小表示します。管理人は、以前は比例計算していましたが、最近はIrfanViewの「リサイズ/サンプリング」で縦横のサイズを調べています。
IrfanView_Size01.png


 横幅を指定すると高さが表示されるので、その値をタグに書き込みます。例えば、幅60pxでは高さが10pxになります。画像の貼り付けタグは以下のようにします。
バナーの縮小表示用貼り付けタグ

 以上です。

 以下は以前の記事です。参考程度にご覧下さい。あくまでもjpgにこだわるのであれば有効な方法かも。

 以下は一般的なバナーサイズとして、幅120pxで作ったものです。ソフトは「彩彩畑」を使っています。

Sai120.gif


 下は、幅80pxにしたものです。

Sai80.jpg


 バナーいっぱいに文字が書かれていて、何とか読めますが、拡大してみると、文字が汚い印象を受けます。

 次に、下のバナーをご覧ください。
 やはり、幅120pxのものと80pxの二種類です。

120x40Cat.gif


80x27Cat.gif


 違いが分かりますか。下のバナーは、文字がずっと小さいのに鮮明に見えます。文字の背景もきれいです。

 これは、画像縮小ソフトの問題ではなく、そもそもの作り方が違います。

 余分な部分を切り取り、幅60pxで作ったミニバナーが、下のバナーです。小さなバナーの中に「ネコ肉球4個分の幸せ」の10文字をしっかり読むことができます。

l60.gif


【作り方】
 さて、作り方です。

 Photoshopのロゴの作り方のチュートリアルを見ていて気づいたのですが、綺麗なロゴを作るには、最初にキャンパスサイズを4000px× 3000pxなどの巨大なサイズに設定しているということです。

 この設定で作っていき、保存。あとで好きなサイズに小さくします。
 縮小ソフトをいろいろ試したのですが、Irfanで縮小したものと大きな差を見つけることはできませんでした。

 JTrim、PictBearの高品位縮小プラグイン、このブログでもご紹介した「縮小専用。」など、高品質で縮小できると言われていますが、Irfanによる縮小も同様に高品質でした。

 上のバナーは幅3000pxのキャンパスで作っています。

answer.gif



posted by ネコ師 at 00:03 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする

2015年02月16日

写真への袋文字の文字入れに便利なソフト


 web上にアップする写真に文字入れをしたい時があります。
 この文字入れをする方法はたくさんあるのですが、「きれいに文字入れする」となると、それができるソフトはとても限定されます。

 管理人は、普段は、IrfanViewで文字入れしていますが、この方法の欠点は、入れた文字が汚いということ。クッキリしていません。そこで、クッキリした文字を入れたいときには、PowerPointに写真を読み込み、文字入れして、png型式で図として出力する方法を採っています。この方法が個人的には好きです。

 ところが、袋文字となると話は別です。もちろん、上の方法でも十分できますが、手間がかかります。
 そこで、今日は、写真に簡単に袋文字を入れることができるフリーソフトをご紹介します。

 下の画像は、先日、このソフトを使って作った画像です。

 
APNG_Assembler_exp0.png


 入れた文字がクッキリしています。

 これは、EVERNOTEが配布している「Skitch」というフリーソフトを使っています。

【使い方】
 
1.EVERNOTEから「Skitch」をダウンロードします。

2.「skitchsetup-2.3.2.173.exe」という実行ファイルがダウンロードされるので、これをクリックして、ソフトをインストールします。後で、「EVERNOTE」のインストーラーが起動しますが、インストールしたくない場合は「キャンセル」してください。

3.デスクトップにピンク色の「Skitch」のアイコンが作られているので、それをクリックしてソフトを起動します。

4.後は、好きな文字を入れるだけ。特に説明する必要はないでしょう。機能はそれほど多くはないので、直ぐに使い方を覚えます。袋文字だけでなく、矢印など図形もきれいなので気に入っています。

Skitch_exp.jpg



posted by ネコ師 at 03:47 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする

2015年01月26日

文字入りのGIFアニメを簡単に作れるサイト


 文字入りのGIFアニメを作るのは、どうしても、文字がクッキリと表示できないため簡単そうで実は難しい。
 今日は、文字を入れたGIFアニメを簡単に生成できるwebサービスをご紹介します。

 似たサイトはたくさんあるのですが、日本語に対応しているサイトは意外に少ないのが現状です。
 しかし、『Image Chef』というサイトは、たくさんの機能があり、しかも、大量のテンプレートを提供しています。たとえば、・・・・、下のようなGIF画像を簡単に作ることができます。結構センスが良いなぁと思いました。

image_chef1.jpg

flower_hokanko8.gif
paper0012.gif
Paperplane.gif
sandbeach.gif


posted by ネコ師 at 02:02 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする

2014年12月20日

JPEGに字を記入したい:WORDを使ってきれいに文字入れする方法


 「JPEGに字を記入したい」というキーワードでアクセスがあったので、簡単な方法をご紹介します。

 写真に文字を入れる方法は色々あるのですが、今回は、たいていのパソコンにインストールされていると思われるWORDを使った文字入れ方法をご紹介します。

【OFFICE(WORDやEXCELなど)を使った文字入れ方法】
 
 この方法のメリットは、文字の種類や形、位置などが自由に設定できることです。以下、WORD2007を使って説明します。

@ WORDを起動し、メニューバーの[挿入]⇒[図]から、文字入れしたい画像を選択し、[挿入]をクリックすると、シートに画像が読み込まれる。

A メニューバーの[挿入]⇒[ワードアート]
  [A]がたくさん書かれたメニューが表示されるので、適当に選択する(後で変更可能なので)。

B 「ここに文字を入力」というテキスト枠が表示される。適当な位置に移動する。枠内の文字を消して、書きたい文字を入力する。
LETTERINSERT1.jpg


C 後は、文字のフォント、色やサイズを変更。影を付けたり加工します。
LETTERINSERT2.jpg


D 文字を選択した状態で、メニューバーの[挿入]⇒[ワードアート]と進み、アート効果を選び直します。グラデーションをかけるより、通常のワードアートの効果の方がきれいなのでこれに決定。
LETTERINSERT3.jpg


E 最後に保存です。実は、これが一番難しい。保存段階でぼやけた文字になってしまうからです。
 一番簡単な方法は、画面をハードコピーするものです。[Fn]キー + [Prt Scr]キーで表示画面をハードコピーして、IrfanViewなどのソフトに[Ctrl]+[V]で貼り付けます。
 Excelにはカメラ機能があるので、リボンに登録しておくとスクリーンショットを簡単に撮ることができます。Wordにはこの機能はないようです。

【画像の出力方法】
 
 画面をハードコピーする方法は少し原始的な感じなので、もう少しスマートでよりきれいにできる方法をご紹介します。
 まず、画像とテキストボックスをグループ化します。

 読み込んだ画像を選択し、右クリックして最前面へ移動をクリック。すぐに、右クリックして[最背面へ移動]をクリック(この操作で「画像」と「テキストボックス」をグループ化することが可能になる)。「画像」と「テキストボックス」をグループ化する。

 ファイルを保存します。その時、[名前を付けて保存]を選定し、ファイルの種類で "webページ(*.htm;*html)"を選択して保存します。保存すると、先ほど付けたファイル名と[同じ名前+files]というフォルダができます。そのフォルダの中に、画像をpng型式にしたファイルが保存されています。これが、とてもきれいに出力する方法です。

 png型式はとてもきれいなのでそのままで使えますが、どうしてもjpg型式にしたい場合には変換して下さい。

 png型式からjpg型式に変換するには、管理人ならIrfanviewを使いますが、無料の多機能ファイラー「Seez」でも簡単にできます。たくさんの画像を一括変換するときにはSeezを使っています。これについては過去記事でご紹介しています。

JPEGからGIFへの一括変換、「Seez」が一番


posted by ネコ師 at 22:51 | Comment(0) | 役立つ知識(画像編1) | このブログの読者になる | 更新情報をチェックする

▲ このページのTOPに戻る