写真 バナー

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. Affinity Photo(アフィニティフォト)で文字にグラデーション入れる方…
  3. Facebook(フェイスブック)ページのリーチ・エンゲージメントとは
  4. フェイスブックでブログのサムネイル(OGP)画像の確認方法
  5. 最近、Googleのクチコミが減ってるんだけど勝手に減る?

関連記事

  1. フェイスブック 画像

    WEB知識

    フェイスブックは最大の口コミ・プロモーション

    色々なSNSがありますが、今回はFace bookの特徴をご案内したい…

  2. SSL保護されていない通信

    WEB知識

    SSL|保護されていない通信ってなに?

    お客様からのお問い合わせで多くなっているのが、SSLについてです。ドメ…

  3. オープン準備

    よくある質問

    サロンオープンで忘れがちの準備内容

    美容室、エステサロン、ネイルサロンなどサロンを開業するにあたり色々と準…

  4. ロゴ作成

    よくある質問

    ロゴ作成ってどうするの?

    みなさん、ロゴってありますか?あって当たり前だと思いますが、作ってない…

  5. 考える 迷い

    WEB知識

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

    みなさんが悩んでいるSEOですが、上位検索の対策はみんな考えていますが…

  6. jeg png 違い

    WEB知識

    ロゴなどを写真に重ねる前に覚えておきたい事

    今回は、画像にロゴなどを重ねる画像を作る前に覚えておいて頂きたい事があ…

  1. 雑誌

    マーケティング

    気付かないが雑誌から読み取る顧客心理
  2. 雪 差別化

    スキルアップ

    ちょっとした投稿でも差別化を図る
  3. 写真 バナー

    WEB知識

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

    スキルアップ

    WEBディレクターの外で使うPCはMacで決定!
  5. ブログを書く

    プライベート

    ブログの記事を続ける大切さ
PAGE TOP