写真 バナー

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. ウェブデザイン技能検定3級 合格しました。

関連記事

  1. WEB知識

    いいホームページを作る為に考えなければいけないこと

    ホームページを作るのであれば、ただ作るだけでなく『より実になるサイト』…

  2. Affinity Photo 髪の毛まで 綺麗に切り取る

    WEB知識

    Affinity Photoで髪の毛一本まで切抜く方法

    Affinity Photoでの画像切り取り方法をお伝えします。画像加…

  3. エキ

    WEB知識

    サロン集客にエキテンを使い地域のコアユーザーを集めよう!

    サロン集客にエキテンを使い地域のコアユーザーを集めよう!ってエキテン?…

  4. alt タグ SEO

    WEB知識

    ワードプレスで大切なalt設定(オルト設定)

    最近では、ブログをWordPressで書いている方も凄く増えてきている…

  5. ネット 好き

    WEB知識

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

    では、具体的にどの様なホームページが『クローラー』に、良い評価を得られ…

  6. 考える 迷い

    WEB知識

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

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

  1. 充電 電源 画像

    充電スポット

    あざみ野駅|充電スポット
  2. 充電 電源 画像

    充電スポット

    赤羽駅|充電スポット
  3. 画像 重ねる

    スキルアップ

    画像加工の知らないでは済まされない最低限の用語
  4. スマホ 画像

    WEB知識

    スマホサイトがあるだけではダメな時代へ突入ですね
  5. 画像に文字を重ねる

    WEB知識

    画像に文字を入れたり、画像を重ねる方法
PAGE TOP