ラベル -画像 の投稿を表示しています。 すべての投稿を表示
ラベル -画像 の投稿を表示しています。 すべての投稿を表示

バナー工房を使って3分で写真に文字入れ

愛知県のホームページ専門家:田口相です。
岐阜県恵那市(恵南商工会議所)で、商売に活用できるウェブサービスのあれこれ相談会をしています。今日の相談は、、、

  • ホームページの構成をチェックしてほしい
  • YouTubeチャンネルの作り方〜動画の載せ方
  • YouTube動画をホームページに乗せる方法
  • ホームページの見え方をスマホ対応にしたい
  • はてなブログに定型文を設定する方法
  • 内部リンクと外部リンクの違いとその貼り方
  • Googleマイビジネスの使い方

など。
その中で、恵那市岩村のバイク工房 岩月さんから「新しいブログを始めたことをホームページでもお知らせしたい」というご要望がありました。ホームページを確認したところ 2カラム形式だったので、左カラムにブログへの誘導バナーを作ることにしました。


3分でできあがり!サクッと作ったバナーがこれ。


バナーの作り方



画像加工ソフトがなくてもバナー作成


バナー1つ作るのに、わざわざソフトをダウンロードして…というのは面倒です。
スマホでも簡単にバナーを作れるアプリはありますが、今回の相談者さんは「パソコンでやりたい!」とのご要望。

そこでオススメしたのが、オンラインで画像加工と編集ができるバナー工房です。
画像に文字入れ」はもちろん、いろいろと高度な加工ができます。

バナー工房の便利なツール



バナー作成は 技術よりも画像選び


バナーの土台となる画像選びは大事です!
デザイン的に美しく作成したいのなら、単色無地グラデーションがオススメです。

しかし、今回は

  • 限られたコンサル時間の中でサクッと作る
  • ブログタイトルは「バイク女子渚ちゃん〜」
  • たくさんの人にクリックしてもらうことが目標

であれば、やはり、バイク渚ちゃんに登場してもらいましょう!
楽しい雰囲気が前面に出ている写真であれば、なおGoodです。

バイク工房岩月のバイク女子渚ちゃん

渚ちゃん、カワイイですね!明るくていい写真だと思います。

しかし、この写真一択というのがツライです…。
背景がごちゃごちゃしている画像ほど、文字の載せにくいものはないんです。

ですが、「これしかないです!」と言い切られてしまったからにはこれでいきましょう!



文字には「影」や「縁どり」をつける


背景に色がいっぱい入っている場合、文字を浮き立たせて読みやすくします。
バナー工房には「」をつけたり、「文字枠」をつけて画像と文字の境界線をはっきりさせたりする機能があります。

どちらも大きくつけすぎると、かえって見づらくなるので、サイズは「1」にしました。文字色は、言われなければ分からないレベルの「ほんのりピンク」です。女子っぽく。

オンラインでホームページバナーが作れるwebツール

バナーなので横長にカット。
バイクと渚ちゃんがギリギリ入るところで切り抜きました。

ブログタイトルが長かったので2行に。
それでもまだ文字数多く見えますが、ここを3行にしてしまうとダサくなります。

誘導バナーを3分で作る方法



パソコン・スマホ両方から見え方をチェック


完成したバナーをホームページの左カラムに設置して、ブログURLにリンク!
...が、これで完成ではありません。

バイク工房岩月さんのホームページはジンドゥー(JIMDO)で作成されていました。
実は、ジンドゥーなどのCMSで作成されたホームページの場合、スマホで見たときに、左右のカラム(サイドバー)が表示されていないことが多いのです。ここ要注意です!

スマホからのアクセスが多いホームページですから、せっかく作ったブログへの誘導バナーが見られないのは困ります。そこで、メインコンテンツにもバナーを貼りました。(パソコンで見ると、バナーが近い位置2ヶ所にあって しつこい感じはしますが、これは仕方ないです。)

ついでにバイク屋おやじのブログも宣伝。

バイク工房岩月さんのホームページ(一部抜粋)

やはり、カワイイ女子がバナーになっていると、クリックしたくなりますね!

文字だけのバナーを ひと手間かけて画像つきのバナーにするだけで、アクセス数はグッと増えます。バナー画像が魅力的であればもっと伸びます!

ひと手間といっても、バナー工房などのWebツールを使えば、ほんの数分で見栄えのするバナーが作成できるので、使わない手はないですね。





オススメホームページ専門家によるホームページ採点!

今回ようなコンサルティングは60分〜受けられます。
ホームページやブログのちょっと手伝ってほしいトコロ、どこを直したらアクセスが増えるんだろう?というお悩み、スマホ対応型にリニューアルしたいけど予算があまりないという相談など、出張講習で解決します。

Canvaでヘッダー画像をサクッと作ろう

愛知県のホームページ専門家:田口相です。
ホームページ制作で欠かせないのが、画像作成・画像加工です。特に、ホームページのいちばん上「ヘッダー」と呼ばれる部分には、ページ内容が一目でわかる写真を入れるといいですね!


ホームページのヘッダー画像を変えてみよう


以前ペライチで作成したLP「先生のための生徒集客ホームページ制作講座」を久しぶりに見たら、ヘッダーの黄昏感がすごかったです。

たぶん、そのときは、オレンジ色で統一したかったんだと思います。オレンジ色は元気カラーでもあるのですが、集めすぎてしまうと“たそがれ”てしまうんです。

ヘッダー画像、オレンジ色が強すぎてたそがれ感がすごい


そこで、時間をかけずにサクッと画像を差し替えしたいと思います。

今回、ヘッダー画像の作成に使うツールは...

アプリでもPCでも無料で使えるCanva(キャンバ)


テンプレートからイイ感じのレイアウトを選びます。

無料の画像加工ツールCanvaの使い方

テンプレートにある元写真(この場合、結婚式写真)を抜いて、いや、抜かずに上書き(上乗せ?)でもOK!

画像デザインツールのCanvaの使い方

ホームページが「先生のための〜」なので、習いごとを意識した画像を並べたいと思います。

Canvaスゴイところは、検索窓に「手芸」とか「子育て」とか 入力するだけで、いい雰囲気の画像がたくさん出てくるところです!
*有料写真を使うとさらにクォリティーがあがります。

Canvaには無料で使えるオシャレな写真がたくさん!


文字を入れることもできるのですが、ホームページに入れたときのことを考えないと、もじもじくんになってしまい、伝えたいことがかえってボケてしまいます。

ホームページのヘッダーに入れる画像はここが注意!


なので、今回は、画像だけのヘッダーに変更したいと思います。

ここで便利なのが 複製ボタンです。同じデザインが下にコピーされるので、元を残しつつ、何枚でも微妙にデザインを変えたものを作成できます。

グラフィックアプリCanvaの使い方


完成!


レッスン・講座・教室のホームページ画像を作ろう



ホームページに入れてみました


*実際のホームページで見てみてください
「先生のための〜」なイメージを残しつつ、落ち着いたヘッダーになりました。

ホームページのヘッダー画像の作り方


スマホ側ではこういうヘッダー画像です。

ヘッダー画像は、パソコンとスマホでの見た目を変えましょう




Canvaにデザインを保存しておく


1-2年前に作成したFacebookイベントページのヘッダー画像。
以前のCanvaインターフェイスで表示されます!もちろん修正も複製もできます。

Canvaにデザインを保存しておくと便利


お客さんのショップロゴ。
*初心者のためのネットショップ制作講座の中でサクッと作成しました。

Canvaでロゴやバナーも作成


Canvaには「デザインが苦手」とか「センスないから」とかいうイイワケは通用しません!テンプレートに沿って写真やイラストを置いていくだけで、きれいなヘッダーかっこいいロゴが作れます。

みなさんも、フォトショップを立ち上げて うーんと悩んでいる時間があったら、ウェブ上でサクッとデザインしてみてください。




オススメそうは言われてもやっぱり自信ない...という人へ
はじめてCanvaを使う人でも、登録から使い方まで30分もあればマスターできます。瀬戸・伏見・一社・長久手・尾張旭・鶴舞などのカフェで開催しているウェブカツinカフェでご相談ください。田口といっしょにCanvaを使ってみましょう。
はじめてストアカを使う方は、ココから500円クーポンをもらってそれを使ってください。

名古屋駅でパソコンでお絵かき講座

名古屋駅前の名鉄百貨店 文化教室で、【パソコンでお絵かき講座】と【パソコンでハガキ作成講座】を開催しました。

「パソコンでお絵かき講座」では、

を目標に実習してもらいました。


ペイントソフトでできる画像加工

レッスンに使用した画像加工ソフトは、Windows付属の「ペイント」のみです。

「ペイント」は機能が少なく、レイヤー重ねもできないので、仕事に使うには役不足ですが、パソコン初心者がデジカメ画像の加工を体験するには十分だと思います。


作業に慣れてくると、みなさん無言になります…。

パソコンでお絵かき&ハガキ作成講座は土曜日開催なので、お子さんもいっしょに受講できます。


名鉄文化教室のレッスンは 名鉄百貨店友の会会員さんが対象なので、いつもの定期講座は年齢層高めなのですが、今回は夏休みだったためか、中高生のお子さんといっしょに受講して下さるお母さんもいらっしゃいました。




オススメ同じ内容の講座やります!
次回は8月27日(土)10:30-12:00開催です。
詳細は、名鉄百貨店友の会文化教室 (TEL:052-585-1787)へお問い合わせください。




Googleフォトの検索機能がスゴイ!

5月29日のGoogle I/O 2015で、グーグルのフォトストレージサービス「Googleフォト」が正式にリリースされ、Web界が賑わってますね!

Googleフォトみなさんの注目は、、、

無料で容量無制限

だと思います。※ただし、写真は1,600万画素まで/動画は1,080pまで

これまでも、Google+ や Picasaウェブアルバム を使っていれば、2048px(300万画素くらい?)までの写真はアップし放題だったのですが、今回のリリースで、容量制限がさらに緩和されたことになります。

私も早速、設定を「高画質」に変更してみました。
※設定変更は、スマホのアプリからでもできますが、パソコンで使い慣れている人は、Web版Googleフォトを使った方がラクです。

Googleフォトの使い方

は、Gigazine や engadget が まとめページを作ってくれているので、そちらを参考にしてください。


私は、Googleフォトの検索機能がスゴイ!と聞いたので、

“じぶん画像倉庫 検索機能”を使ってみたレポート

をしたいと思います。

…とはいえ、私、 じぶん画像倉庫にはロクな写真が入ってないので、母のGoogleフォトを借りました。


1)「アジサイ」と検索。

Googleフォトで紫陽花を検索

今年のアジサイから、数年前のアジサイまで、ちゃんと表示されました。
Googleフォトには、日本紫陽花も 西洋アジサイも ガクアジサイも判るようです。全部ちゃんと集めてくれました。


2)「くも」と検索。

Googleフォトで「くも」を検索

「蜘蛛」と「雲」、両方が出てきました。
「ヤモリ」は、たぶん、Googleフォトの勘違い。こういうミスが、Google先生のかわいらしいトコロです。「セミ」は眼中にありません。


3)改めて、「蜘蛛」と検索。

Googleフォトで「蜘蛛」を検索

一応「蜘蛛 spider」が集合しました。
蜘蛛じゃないのもいる(=蜘蛛の形をした植物)という点で、文字検索ではなく、あくまでも“見た目で検索”しているんだなーと分かります。


4)ちなみに、「雲」と検索してみると…。

Googleフォトで「雲」を検索

「雲 cloud」が集合します。



なかなか面白いですね!
これまでに、Google+やPicasaで写真を貯めこんでいる人は、ぜひ 遊んでみてください。





スマホで撮った写真を自動バックアップさせない方法

ウェブカツ!でこんな質問を受けました。

スマホ(iPhone)で撮影した写真が Google+フォト(旧 Picasaウェブアルバム)に自動で流れてしまうのを止めたい」と。

画像の自動バックアップは便利な機能ですが、保存する写真が多くなってくると、Googleのストレージを圧迫してしまいます。無料で使える保存容量を考えると、バックアップする画像は取捨選択したいですね!

iPhoneからGoogle+フォトへの自動バックアップ機能を切る方法

①Google+アプリを開いて、「メニューアイコン」をタップ。
②「歯車アイコン」をタップ。
③「カメラと写真」をタップ。
④「自動バックアップ」をタップして「オフ」にする。

Google+アプリを開いて、「メニューアイコン」をタップ。

「歯車アイコン」をタップ。

「カメラと写真」をタップ。

「自動バックアップ」をタップして「オフ」にする。





ドロイドくんとGoogle+フォト
ちなみに、、、

アンドロイドの場合は以下の手順で

①「写真アプリ」を開く。
②「メニューアイコン」をタップ。
③「設定」をタップ。
④「自動バックアップ」をタップして、オン/オフを切り替える。




Picasaウェブアルバム(Google+)でキラキラGIFアニメ

Gigazinの「Google+でアップした写真を自動的に雪の降るGIFアニメに変換する機能が追加される」という記事を読んで、私も早速トライ!

画像をおまかせビジュアルでgifアニメに
説明によると、Google+で #AutoAwesome というハッシュタグをつけると、自動変換されるらしいのですが、私の場合、24時間待っても ウマくできなかったので、強引に、Picasaウェブアルバムで…。

ちなみに、、、
雪が映っている写真をGoogle+にアップすると、雪を降らせてくれるのが Snow.
イルミネーション写真をアップすると、キラキラをかけてくれるのが Twinkle.

…結果、Twinkleできました!↑↑↑(フクロウさんまでキラキラしています…。)

どちらもクリスマスシーズン限定のGIF変換機能だそうです。


Picasaウェブアルバム側から GIFアニメに変換する方法

  1. Picasaウェブアルバムにアクセス。
  2. 「アップロード」をクリック。
  3. ピカサウェブアルバムに画像アップロード
  4. 任意の画像をアップロード。
  5. 画像のアップは「ドラッグ」でも「ファイルから選択」でもどちらでもよい
  6. 「OK」をクリック。※アルバム名はお好みで…
  7. 画像が入ったことを確認してから「OK」をクリック
  8. しばらく待つと、元画像のとなりに GIFアニメ画像が作られる
  9. ※これで見ると、どんな写真がエフェクトがかけられやすいのかが分かります。 元画像のとなりにGIFアニメが出来ている
  10. アルバムメニューの「整理」→「削除」で、自動変換されなかった画像を削除。
  11. いらない画像は「削除」または「移動」
  12. アルバムの公開範囲を編集。※「自分だけ」から「一般公開」に変更。
  13. ピカサウェブアルバムの公開範囲を編集する
  14. アルバムの「共有」をクリックして、Google+にも共有(投稿)する。
  15. グーグルプラスにも記事として共有する
  16. こんなカンジになりました。
  17. 他にもいろいろ…♪

    おまかせビジュアルで教会もキラキラおまかせビジュアルで雪を降らすおまかせビジュアルで窓枠電飾



オススメそのうちやります、「AutoAwesome講座」!

autoawesome…日本語訳で「おまかせビジュアル」。
期間限定の「snow」や「twinkle」以外にも、複数枚の画像をつなげてアニメにするエフェクト,邪魔な物を消すエフェクト,放物線を描くように対象物を並べるエフェクトなどがあります。

今のところ、上手くいったりいかなかったりなので、もうちょっと実験して、AutoAwesomeが使いこなせるようになったら、ウェブカツ!のショート講座に取り上げたいと思います。



スクリーンショットを撮って 画像加工してみよう

Web500のサービスに「メールサポート」というものがあります。
文字通り、会員さんからメールで質問をもらって、メールで回答をする…という内容です。

出張講習がパソコン&インターネットの家庭教師なら、メールサポートは通信教育の赤ペン先生みたいなものです。


スクリーンショットを撮るアプリ
最近気づいたのですが、このメールサポートで質問を送ってくる会員さんの半数以上が、パソコンの画面をデジカメで撮影してメールに添付してくるのです。しかも、ムダに大きい 3000ピクセルとか、スーパーファインとかで…。

当然、画像は、モアレ(干渉縞)が入った見にくいものに仕上がっています。

私はてっきり、スクリーンショットの撮り方を知らないのかな?と思っていました。

・・・違いました。

中には、知らなかった~!と、プリントスクリーンを初めて使う人もいますが、スクリーンショットは知っているけど、画像加工ができない(orグラフィックソフトを持っていない)から…という人がほとんどなのです。

ペイントソフトを使うと便利ですよーとお知らせしましたが、ソフトを起動させるのが面倒なようで、みなさん、なかなかスクリーンショットを使ってくれません。


---
前置きが長くなりましたが、本題です!

そんなわけで、今月のウェブカツ!尾張旭は、「スクリーンショットアプリで 画面切り取りや画面カキコミをやってみよう!」をショート講座のお題にしました。

※ソフトウェアではないので、立ち上げにイライラすることもなく、使い方を覚える必要もなく、インストールする必要もありません。

画面キャプチャー01質問したい箇所を囲う
質問したい箇所を囲うことができます!

※形はマルとシカクのみ。
画面キャプチャー02直線や矢印をひく
直線や矢印をひくことができます!
画面キャプチャー03ボカシをかける
ボカシをかけることができます!
画面キャプチャー04文字を入れる
文字を入れることができます!
画面キャプチャー05フリーハンドでラクガキ
フリーハンドでラクガキできます!
画面キャプチャー06キリトリ
必要箇所のキリトリができます!

記事の右上にあるように、どんなに縦長ページであっても、上から下までページ全体をキャプチャすることもできます!
また、このアプリはGoogleChrome上で動くものなので、Win/Macを問いません。




オススメウェブカツ!ショート講座のご案内
このスクリーンショットの使い方レクチャーは、11月13日(水)13:30-14:00 尾張旭市の新池交流館「ふらっと」で行います。パソコン持参でお越しください(聞くだけ参加もO.K.)。先着10名様までの受付です。お申し込みは、Google+またはFacebookでどうぞ!



 
ホームページ制作とウェブ学習支援のWeb500(うぇぶごひゃく) © 2023 | ホームページ | Blog 💀 Web500 | Linktree |