写真 バナー

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

まとめ

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

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

ピックアップ記事

  1. 顧客満足度って大切だとディズニーで思った
  2. Facebook(フェイスブック)ページを変えたらブログアクセスが
  3. 物事を極端に考えることをやめること
  4. 看板のメニューを考えて来店動機を掴もう
  5. 大阪で2つのセミナーを開催します。

関連記事

  1. ピンタレスト

    WEB知識

    Pinterest(ピンタレスト)でWEBサイト全体がスクショできない

    Pinterest(ピンタレスト)をダウンロードをしたけれどWEBサイ…

  2. フェイスブック フォロー

    WEB知識

    Facebook(フェイスブック)の好かれるプロフィール

    Facebook(フェイスブック)は、様々な人が使っていてサロンの宣伝…

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

    WEB知識

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

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

  4. エキテン 地域 集客 

    WEB知識

    エキテンを使いコアユーザーを集めるという事は

    先日書いた『サロン集客にエキテンを使い地域のコアユーザーを集めよう!』…

  5. 口コミ 集客

    WEB知識

    口コミ連動型のホームページ作成

    今回は、口コミ連動型のホームページの作成をさせて頂きましたのでその事に…

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

    WEB知識

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

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

  1. 5円 ご縁

    独り言

    5%値引くより、意味のある5円の方がいい
  2. チラシ 読んでる

    WEB知識

    基本をマスターして読まれるチラシを作る方法
  3. WEB知識

    メディアの使い方
  4. セミナー

    日記

    先日のセミナーを終えて
  5. ピンタレスト

    WEB知識

    Pinterest(ピンタレスト)でWEBサイト全体がスクショできない
PAGE TOP