写真 バナー

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. Facebook(フェイスブック)ページのリーチ・エンゲージメントとは
  2. フェイスブックでブログのサムネイル(OGP)画像の確認方法
  3. 顧客満足度って大切だとディズニーで思った
  4. ロゴ作成ってどうするの?
  5. 大阪で2つのセミナーを開催します。

関連記事

  1. スマホ 画像

    WEB知識

    スマホサイトがあるだけではダメな時代へ突入ですね

    Googleが新たな検索エンジンの対策を発表しました。今までの常識を覆…

  2. THE タイトルタグ

    よくある質問

    titleタグ(タイトルタグ)とは

    SEOの基本のtitleタグの説明を致します。前回TDKHでも説明しも…

  3. 目 画像

    WEB知識

    WordPress(ワードプレス)でアイキャッチ画像を設定する

    Wordpress(ワードプレス)で記事などを書く際ですが、記事を書く…

  4. ピンタレスト

    WEB知識

    まだブックマーク?Pinterest を活用しよう

    まだブラウザでサンプルサイト等をブックマークしていますか?僕もそうでし…

  5. 404 エラー

    WEB知識

    サイトをリニュアールしたら、Googleからエラーメールが来た

    皆さま、ドメインをそのままホームページをリニューアル出来るのは知ってい…

  6. フェイスブックページ とは

    WEB知識

    Facebookページと個人ページとの違いとは

    お店の情報などをお客様の届ける時にFacebook(フェイスブック)ペ…

  1. ロゴ作成

    よくある質問

    ロゴ作成ってどうするの?
  2. ワードプレスって なに

    よくある質問

    Word Press(ワードプレス)って何?
  3. ホームページ作成 費用

    よくある質問

    ホームページ作成って何に費用がかかるの?
  4. Macbook

    スキルアップ

    WEBディレクターの外で使うPCはMacで決定!
  5. ネット 好き

    WEB知識

    SE0対策・クローラーに気に入られるホームページとは
PAGE TOP