デザイン制作・パソコンレッスン・メディカルアロマ講座・セッション・ハンドメイドアクセサリー販売 横浜市都筑区

初心者さんでも簡単!ブログヘッダーを作ろう

画像編集ソフトがなくてもできます

スマホの画像編集アプリ(LINEカメラなど)は気軽にできて便利ではありますが、ブログヘッダーやバナーをなど、サイズが決まったものを制作するには、ちょっと使いづらい。

Photoshopなど画像処理ソフトがなくてもできる!
Editor ACというサイトがとても便利です

https://editor-ac.com/

今日はこのサイトで、1枚の写真を利用したブログヘッダーを作成してみましょう。

こちらが完成品↓

この記事においてはPCでの作業画面の説明になりますが、スマートフォンでも可能です。ただし、ちょっと注意が必要なので、こちらも必ず目を通してくださいね。

作成手順

①サイトにアクセスします
 https://editor-ac.com
アクセスすると最初にサイズを聞かれる画面になります
 完成品のサイズを入れます。

②例では1000×350 としました。サイズを設定した後の画面です。

③ここに写真をのせていきます。アップロードというボタンを押します。
 「ドラッグまたはここをクリックしてアップロードする」をクリック。
 使用する写真をUPします

④大きいサイズの画像をUPしようとするとこのような画像がでますが
 今回は完成品サイズが横1000ピクセルなので、
 いちばん右の『ウェブ』でも問題なし。「サイズを変更」のボタンを押す。

⑤編集しやすいように、画面を広くします。
  「ドラッグまたはここをクリックしてアップロードする」 の下にある
 < ボタンを押すと、アップロードの画面を閉じられます

⑥この写真を全体に広げて使いたいので、
 写真をいちどクリック。四隅のどれかをドラッグして拡大します

⑦拡大するときに作業しづらい方は、左下にある虫眼鏡ボタンで
 一時的に画面を縮小するとよいでしょう
 完成品はタテが350ピクセルなので、タテはすべて入りませんから、
 完成品に入れたい部分に合せて調節します
 (上下の暗くなっている部分は完成したときに切り落とされます)
 そして、エフェクトというボタンを押します。

⑧エフェクトで、画像の明るさを調節します
 調節度合はお好みですが、
ここでは「文字入れしたときに見やすいこと」が前提とします

⑨エフェクトを調節したあと、そのまま、左上の「テキスト」ボタンを押します
 「テキストを追加」ボタンを押します

⑩画像の真ん中に「テキスト」と入っています
 そこをクリックすると文字を書き換えられます
 書体・文字色・大きさの変更もかけられます。

⑪ブルーの枠が表示されている状態で、
 文字を表示されている位置を動かすことができます

⑫保存します。右上のダウンロードボタンを押します。

⑬できあがりました。
 編集上の画面にある上下の暗い部分(はみでた部分)は
きちんと切り落とされていますよね

スマホで作る場合の注意

a)サイズが大きければ大きいほど、縮小表示がされてしまいます。
以下の画像は、PCでの操作の説明と同じ1000×350ピクセルにした場合です。文字入力しようとしても、字がものすごく小さく入力しづらい。
拡大縮小も、googleブラウザでは表示されず、YahooブラウザやSafari、Firefoxでは表示されており、使用するブラウザによって使い勝手が違いそうです。
制作手順の⑤にもある、メニューをたたむことも、いちいちしなければなりません。

b)

c)対して、こちらは横500ピクセルの場合
字も入力しやすい大きさで表示できました。

d)ブラウザをPCと同じ表示に変えてみた場合です。
cの説明と同じヨコ500ピクセルですが
google chromeではスマホの画面の向きをタテにしてもヨコにしても、画面からはみだしており、スクロールも効きません。

e)google chrome以外のブラウザでPC表示にすると
画面にきっちり収っており、編集しやすい大きさに拡大もできました

スマホで操作する場合は
・ブラウザはGoogleChrome以外を使用してください。(iphoneの方はSafariで!)
・ヨコが600ピクセルを超えると縮小表示されます(端末の大きさによるかも?)
・サイズの大きな画像の編集をする場合はブラウザをPC表示に変えてください。このときも、GoogleChrome以外のブラウザを使用してください。
・編集中にブラウザをPCサイト表示に変えたり、その逆にすると、編集内容はすべてリセットされますので気をつけてください(編集途中で保存をかけられないし、自動保存もないし、メッセージボックスも出ません)

まとめ

「ダウンロード」ボタンを押すことで、完成品のダウンロードはできますが
編集中の作業ファイルの保存はできません。
※まだベータ版ですから今後改良されていくことに期待しましょう

今回は使用しませんでしたが、背景画像や写真が 標準搭載されています。

ブログヘッダーでは抵抗あるという方は
facebookの個人ページのカバー写真(プロフィール写真の大きいほう)を制作してみたらいかがでしょう
851×315ピクセルです
facebookページの場合は820×312ピクセルとなります。

こちらもおすすめです

スマホからもPCからもアクセス可能
画像の切り取りも可能ですし、予め用意された「加工」がたくさんあります。

わたなべ あいこ
この記事を書いた人
デザイナー、メディカルアロマアドバイザー、 ヒーラー・占い師、ハンドメイド作家
SNSでフォローする