2018年2月13日火曜日

写真から、Bloggerのページを飾るバナーをつくりました。ー私の忘備録ー

Bloggerのページを新規に作って、ページを写真バナーで飾りました。

面倒くさがり屋の私がごくごくシンプルな方法で、初めて、バナーをつくりました。パソコンブログ超初心者の方にも簡単にできるバナー作りだと思いますのいで、ご紹介します。
バナー類を、無料素材で探すのも良いけれど、お天気の良い日に出かけて写真を写して、バナーを作りませんか?
今回初めて挑戦して作ったバナーは、ミラーレス1眼カメラのオリンパスペンで写した写真をPhoto Scapeで切り取り縮小したものです。
私がチョイスしている、Bloggerの シンプルページテーマ に合わせて作りました。
ああでもないこうでもないと、色々大きさを変えてみて、一番マッチした大きさです。




さあ、写真でバナーを作りましょう。

準備するもの

1スマホやタブレット、ガラ携のカメラやデジカメ&写真、2パソコン、3画像加工ソフト、

1 カメラを持って出かけましょう。道端の群生している花、木の枝、花束、寄せ植え、景色や空の雲など、片っぱしから写しておきましょう。今回使った写真は、いつどこで写したか忘れたけど、デジタル1眼ミラーレスカメラに残っていた、データーを利用しました。
 
2 パソコンを準備しましょう。

3 パソコンに画像加工ソフトが入ってなかったら、フリーソフトをダウンロードしましょう。

フリーソフトで高性能なソフトは色々あるようですが、私が主に使っているのは、Gimp とPhoto Scapeです。

 ここでは、Photo Scapeを使いました。ゲーム感覚で直観的に使えるソフトです。又Photo Scapeは、Windows、Mac、で使えます。Vecterからダウンロードできますから、ダウンロードして、インストールしましょう。

 ここでは、ごくごくシンプルに作る、バナー作りをご紹介します。

では、バナーを作ってみましょう

Photo Scapeを開きます。画像編集をクリックします。


画像編集をクリックします。左上部から写真のファイルをクリックすると、左下側に取り込まれます。


使う写真をクリックすると、編集画面に反映されます。編集画面下部のトリミングタブをクリックします。


バナーに使いたい部分の幅と高さをトリミングします。左クリックで、左上部始点を左クリックしたまま、バナーの形に右側にスライドして、形ができると、クリックをはなします。次にバナーの中を、左クリックしたまま上下左右に動かすと、バナーの枠が動くので、好きなところで、クリックをはなします。


トリミングタブ内のトリミングをクリックして確定します。


次にリサイズして、Bloggerの記事ページの幅に合わせてリサイズします。写真編集画面下部のホームタブをクリックし、リサイズをクリックします。(▼はここでは、使いません。写真全体を一定幅に縮小するときに便利な機能です。)アスペクト比を保持にチェック幅を570に変更すると自動で、同比率に高さが変更されます。OKをクリックして確定します。


W570のバナーができました。名前を付けて保存します。



ブロッガーの記事に取り込みましょう。


ファイルを選択をクリックして、パソコン内のバナー画像をクリックすると、アップロードがはじまります。アップロードが完了すると、使う画像をクリックして、選択した画像を追加をクリックします。



W570のバナー写真をクリックして、ブログ記事編集画面に追加された状態です。バナーは小さくなっています。バナーの上を左クリックして反転させます


元のサイズと左をクリックします



するとこのようになります。ブログ内記事一覧のページトップを飾っています。

 記事一覧