ラジオ番組”BizHack MEDIA”の配信一覧(過去に放送したラジオが聴けます)

iPad mini+Pixelmatorで画像を加工する方法【ブログ画像の作り方】

ITを利用する
ITを利用する
この記事は約7分で読めます。

※この記事は、iPad miniでブログの画像をつくりたい人向けです。
画像加工はiPad miniでやっているコバヤシ(@BizHack1)です。

iPad miniの性能が良くなり「できること」が増えてきました。
画像に関することもiPad miniは向いています。

私もiPad miniで画像をつくっています。
ところ構わず作っていると、「どうやっているの?」って聞かれることが増えました。

今回は、iPad mini+Pixelmatorで画像を加工する方法【ブログ画像の作り方】を説明します。

スポンサーリンク

iPad mini+Pixelmator(ピクセルメーター)を使う

ちょうど良い大きさと重さ、そこそこの性能をもつiPad mini 第5世代以上のものが良いです。旧機種は性能がちょっと足りません。
⇒ 【iPad miniの使い方】簡単な画像加工に便利!向いている3つの理由。

画像加工するアプリは、Pixelmator(ピクセルメーター)を使います。
Pixelmatorは、2007年に登場したmacOS向けのペイントソフトで、iOS版は簡易版です。Mac版はプロ用といえますが、iOS版はホビー用です。別物として考えましょう。

iOS版のPixelmatorは、簡単操作です。
操作は覚えるほど複雑ではありません。楽です。

スポンサーリンク

iPad miniを使ったブログ画像の作り方

では、実際にどうやっているのかを説明します。

用意するもの

  • iPad mini 第5世代以上
  • iOS版 Pixelmator
  • 素材画像

これだけです。

タブレットとアプリは先の説明の通りです。
素材画像について補足します。

素材画像とは、こういうものです。

  • あなたが撮った写真
  • 素材サイトにある画像

あなたが撮った写真はオリジナリティがあり、世の中に1枚しかありません。
上手くとれてないくてもいいと思います。
世の中にたった1枚だから価値が高いです。

素材サイトは、無料、有料があります。
キレイな画像がたくさんあり、有料は、画像数が多いです。
⇒ 素材サイト[無料] Pixabayfoodiesfeed
⇒ 素材サイト[有料] PIXTAShutterstock

あなた以外も使っているので、同じ画像をあちらこちらでみかけます。
いくらでもあるので、キレイなだけで価値はありません。

スポンサーリンク

画像加工の手順

作例は、広告目的の画像作成方法ではありません。
画像作成の手順を示すためだけのサンプルとお考えください。

用意が出来たら画像を加工していきましょう。

完成画像
完成画像

この完成画像を作例に5つのStepで説明します。
作成時間は10分ほどです。

  • Step1 大きさを決める
  • Step2 読み込む
  • Step3 加工する
  • Step4 保存する
  • Step5 ブログに貼る

Step1 大きさを決める

画像の大きさを決めます。
ブログのアイキャッチだと16:4の比率でつくっておくと便利です。1920×1080がキレイに見えます。

iOS版 Pixelmatorのプリセット呼出説明画像(その1)

Pixelmatorを立ち上げて右上の+を押します。

iOS版 Pixelmatorのプリセット呼出説明画像(その2)

プリセットの画面が出るので、下にスクロールして[Web 一般]を選びます。

iOS版 Pixelmatorのプリセット呼出後画像
Step1-3

1920×1080の画面ができました。

iOS版 Pixelmatorのレイヤーウィンドウの呼び出し方説明画像

画面の左端に指で右側にフリックすると、レイヤーが見えます。
作業しやすいので、出しておきます。

Step2 読み込む

素材画像をPixelmatorに読み込みます。
先に作った大きさの画面と違っていても構いません。

iOS版 Pixelmatorの素材画像読み込み説明画像

画面上部の+を押す>写真を選ぶ>対象になる画像を選ぶ

Step3 加工する

読み込んだ素材画像を加工します。
まずは、大きさを調整します。

iOS版 Pixelmatorの素材画像の大きさ調整説明画像

みせたいところを拡大しました。

ポイント
iOS版 Pixelmatorのレイヤーウィンドウのサブメニュー呼び出し方説明画像

加工していくと、失敗することも多々あります。
元画像を複製して、プリセットより後ろに移動しておきます。
こうしておくと、Step2に戻る必要はありません。

iOS版 Pixelmatorの素材画像の白抜き部分指摘と、複製画像の移動説明画像

素材画像の大きさはマチマチですから、画面のサイズと会わない事がほとんどです。
作例の場合は、プリセットが白色なので白抜きになっています。

まずは、プリセットの色を変えてプリセットの問題なのか、素材画像の問題なのかハッキリさせます。

iOS版 Pixelmatorのペイントと消去説明画像

ツール>ペイントと消去>カラー選択>塗りつぶす

プリセット全体を塗り潰しても良いです。
作例では、両端だけ黒色にしています。(特に意味はありません。)

iOS版 Pixelmatorのプリセット塗終りと素材画像の白抜き部分指摘、説明画像

素材画像の左上隅に白抜きがあることがわかりました。
加工しましょう。

素材画像の周りは絨毯です。
似たような雰囲気になれば良さそうです。

iOS版 Pixelmatorのレタッチ>クローン説明画像

ツール>レタッチ>クローン

クローンを使います。
クローンは、マーカー部分を複製して塗りつぶしてくれます。

iOS版 Pixelmatorのレタッチ>クローン適用後画像

はみ出していますが、後で加工するので

気にしません。

次に、全体の雰囲気を把握したいので、iOS版 Pixelmator標準のエフェクトを使います。

iOS版 Pixelmatorのエフェクト選択説明画像

ツール>エフェクトを追加>ビネット

いくつか試してみて、

エエ感じ

のものを選びます。
作例は、[ビネット]がエエ感じでした。

iOS版 Pixelmatorのエフェクト>ビネット適用説明画像

どのくらいエフェクトをかけるか調整できます。
ぐるぐる回すと、200%がMAXでした。

MAXにします。

OKかなって思ったら、右上の[適用]を押します。

iOS版 Pixelmatorのエフェクト>ビネット適用後、詳細設定説明画像

[適用]すると、更に値を調整できます。
ここでも親切なことに、初期設定値がいくつか用意されています。

[鮮やか]を選びます。
そこから、更に値を変更できます。

私はしません。

さて、ビネットは、周りが暗くなる感じのエフェクトだとわかりました。
両端を黒色にしていましたが、境界線のなじみが足りません。
一番簡単な、ぼかしでなんとかします。

iOS版 Pixelmatorのレタッチ>指先説明画像

ツール>レタッチ>指先

ゴシゴシやると、

iOS版 Pixelmatorのレタッチ>指先適用後の説明画像

なんとなくなじみました。

次に、文字を入れます。

iOS版 Pixelmatorの文字入れ説明画像

画面上部の+を押す>Tを押す>対象になるフォントを選ぶ

フォントは、後から変更できるので、

なんでも良いです。

作例では、一番右上のフォントを選んでいます。

iOS版 Pixelmatorのテキスト設定説明画像

入れたい文字をソフトキーボードで入力します。
入力後、②選択でテキストの設定を呼び出します。

iOS版 Pixelmatorの別テキストの扱い説明画像

フォントや大きさが違う文字を入れたい場合があります。
その時は、改めてテキストレイヤーを作り個別で設定します。
作例のように、補足文字をいれる場合などです。

文字をいれてみると、

なんだか、見えにくいです。

これは、文字の色が素材画像の色や形に負けているからです。
文字部分下の素材画像の色調を落としてやればよさそうです。

文字と素材画像の間に半透明の帯をいれます。

iOS版 Pixelmatorの半透明帯入れ説明画像

画面上部の+を押す>■を押す>対象になる図形を選ぶ

やっていることは、図形を

塗り潰して半透明にしているだけです。

文字はハッキリしました。
だけど、

なんだか、パンチが足りません。

ひと工夫します。
図形があるので、それを変形させて使うことにします。

iOS版 Pixelmatorの装飾設定説明画像

画面上部の+を押す>■を押す>対象になる図形を選ぶ

それっぽく

iOS版 Pixelmatorで作ったブログ画像の完成画像

できました!

別の図形を使うと、

iOS版 Pixelmatorで作ったブログ画像の完成画像パターン2

こういうバリエーションもつくれます。
アクセントで使うと良いかもしれません。

Step4 保存する

加工した画像を保存します。
どこに保存するかを選んで、画像形式を選びます。

私はPCで記事を完成させています。
PCとのデータ共有が必要ですから、クラウドサーバー(Googleドライブ)に保存します。

iOS版 Pixelmatorで作った完成画像をGoogleドライブにupする場合の説明画像

画面上部の共有を押す>コピーを送信>保存形式を選ぶ>保存先を選ぶ

PCから保存したデータを取り出します。
取り出した画像の容量を軽くします。

TinyPNGというサービスを使います。

TinyPNGのサービス画面
TinyPNG 公式サイトより

画面にドラック&ドロップするだけです。
画像情報を保持したまま、かなりの容量削減をしてくれるので便利です。

Step5 ブログに貼る

保存した画像をブログに貼ります。

iOS版 Pixelmatorで作った完成画像をwordpressに貼った状態の画像

完成しました。

スポンサーリンク

まとめ

iPad miniを使った、ブログ画像の作り方を説明しました。

  • デザインなんて考えたことがない
  • センスがないからできない

なんてことをよく聞きます。これは考えなくても良いです。
デザインに使う時間が少ないないなら、当たり前だと思います。

それよりも、どんどん手を動かしてつくりましょう。
100記事くらいの画像をつくれば、色々なことを「視る」ことができるようになります。
ある程度やってから、リテイクするなりすれば良いです。

まずは、時間をかけずにやってみてはいかがですか?

アマゾンでみてみる

最後まで読んで頂きありがとうございました。

編集後記

いつもやっている画像加工について書きました。記事にしてみると、「適当に」していることが多いことがわかりました。自分らしいなって思いました。それにしても手順を書くとなると、画像数もおおくなるし大変です。。

スポンサーリンク
コバタケ@BizHack

ラジオパーソナリティー・2030SDGs認定ファシリテーター|『少人数×経営×IT×デザイン』をテーマに情報発信中。2019年から話す仕事、書く仕事をメインに再構築しています。現在アラフォーで住処は関西です。ITコンサルと開発マネジメントが得意で、中小零細企業や個人事業主、起業する人へ「これからの在り方」をサポートしています。

コバタケをフォローする
\ この記事が気に入ったらシェアしてね /
コバタケをフォローする
BizHack
タイトルとURLをコピーしました