写真 バナー

WEB知識

PixlrEditor(ピクセラエディタ)でバナー作成方法

今回は、画像加工の方法をご案内致します。最近では、お客様からどの様に作るのか?との質問も多くなっていますのでお伝えしたいと思います。使うソフトはオンラインの無料画像加工ソフト(ピクセラ エディタ)を使いたいと思います。

 

作成するレイヤーを開く

今回は横幅900px×高さ300pxの画像を作りたいと思います。まずは、入門編です。pngの画像を一枚ご準備ください。まずは、Pixlr Editor(ピクセラエディタ)を開きます。

では、早速Pixlr Editorを開いてください。

今回はバナーの作成なので
+新しい画像を作成(空白の画像またはクリップボードからの画像で開始するを選びます。

画像の切り取りの場合は、
📁コンピューターから画像を開くを選んでください。

 

バナー作成①

次画面では縦と横幅を指定します

今回では、900px × 300px (幅900px 高さ300px)に設定をします。

バナー作成②

次は白いレイヤー(キャンパスみたいの)が出てきます。このサイズが『900px × 300px』なのでこの中に画像や文字を入れて画像を作っていきます。まずは重ねる画像をこの中に入れ込みます。

画像を入れ込む

左上の【ファイル】をクリックします。プルダウンメニューが開きます。その中から【新しい画像を開く…】を選択します。

バナー作成③

あとは、パソコンの開きたい画像を選択してPixlr Editor(ピクセラエディタ)に画像をクリックして開くとクリックした画像が最上部に表示されまます。

バナー作成④

バナー作成⑤

新しく選んだ画像を全てを選択して、コピーします。

シィートカットキーで行う場合

Windowsの場合
Control+A Control+C

Macの場合
command+A command+C

もしくは、上部の編集をクリックして【全て選択】そのまま上部の編集で【コピー】をクリックします。全体をコピーして、作成したいレイヤーに貼り付けます。

バナー作成⑥

作成したいレイヤーに貼り付けを行います。

ショートカットキーで行う場合

Windowsの場合
Control+V

Macの場合
command+V

貼り付けた画像を、作成レイヤーに合わせる

そうすると、元の画像が貼り付けさせるのでコピーした画像の一部しか入らなくなります。(元画像が大きい場合)その際は、画像の画像を小さくしなければいけません。下記の画像を貼りけた場合リボンが少ししか見えません。

バナー作成⑦

上部の編集から【自由変形…】をクリックします。

バナー作成⑧

そうすると、貼り付けた画像の角に青い四角が出てきます。この、青い四角ドラックしてし小さくしていきます。この時にshiftを押しながら、小さくしてください。shiftを押すことで縦横の比率を変えずに小さくすることができます。

バナー作成⑨

小さくすると画像が、最初のレイヤー内に入ります。青い四角で囲まれた中をクリックしながら画像を動かせますので好きな位置まで動かしましょう。

あとは文字などを入れ、完成です。

バナー作成⑩

こんな感じで、出来ました。

バナー作成11

まとめ

今回は、画像を入れたり、小さくしたりフォント文字を入れたりしてみましたが次回は、もう少しこったバナーを作りたいと思います。ここで、覚えて頂きたいのは、レイヤーと、画像の縮小です。

基本になりますので、是非とも覚えていただけたらと思います。

jeg png 違いロゴなどを写真に重ねる前に覚えておきたい事前のページ

目立てばいいの?見せるかではなく何を見ようとしているのか?次のページ広告 画像

ピックアップ記事

  1. ロゴ作成で大切なこと
  2. 【最適プランの選び方】ホットペッパー|エステサロン/ネイルサロン編
  3. マーケティングに大切なもの、第二章
  4. 大阪で2つのセミナーを開催します。
  5. ロゴ作成ってどうするの?

関連記事

  1. ビジネスプロフィール

    よくある質問

    Googleビジネスプロフィールのユーザー権限の追加方法

    Googleビジネスプロフィールの権限の追加方法をお伝えいたします。2…

  2. 最終目標 ゴール

    WEB知識

    何事も、始める前が大切だなぁ〜。最終目標の設定!

    今日は、セミナーに参加してきました。今回参加したのは、WEBのキャ…

  3. フェイスブックページ 用語

    WEB知識

    Facebook(フェイスブック)ページのリーチ・エンゲージメントとは

    前回Facebook(フェイスブック)ページのと個人ページの違いについ…

  4. 記事 メモ

    WEB知識

    読まれるブログを作る為に必要な事

    読まれるブログを書く方法は、様々あると思います。書くだけなら出来ると思…

  5. 調べる ネット

    WEB知識

    皆さんはスマホ?パソコン派(PC派)

    久しぶりにブログ書きました。皆さんはネットを使うときってどんなときです…

  6. SEO

    WEB知識

    SEOなどに有効で、色々な意味でいいドメインってあるの?

    自分のWEBサイト(ホームページ)などえを持つ際は独自ドメインを取得す…

  1. HEIC

    WEB知識

    HEICって拡張子なに?JPGに変換したい
  2. 時間 名前 共有

    プライベート

    お客様を名前で呼んでますか?共有してますか?
  3. 考える 迷い

    WEB知識

    SEO・検索エンジンの対策する前に知らないといけない事
  4. 充電

    充電スポット

    仙川駅|充電スポット
  5. Macbook

    スキルアップ

    WEBディレクターの外で使うPCはMacで決定!
PAGE TOP