写真 バナー

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. Facebook(フェイスブック)ページを変えたらブログアクセスが
  3. ロゴ作成ってどうするの?
  4. ロゴ作成で大切なこと
  5. 看板のメニューを考えて来店動機を掴もう

関連記事

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

    WEB知識

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

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

  2. WEB知識

    Photoshopを使わずに画像加工をする無料ソフト

    サイト作成・バナーの作成などをする際はAdobe Photoshop …

  3. HEIC

    WEB知識

    HEICって拡張子なに?JPGに変換したい

    スマホは買い換えていますか?iPhoneを買い換えるとOSが変わります…

  4. インスタ写真

    WEB知識

    ブログにインスタのタイムラインの画像を表示させる方法

    最近は、色々な美容師さんや、ネイリストさんなどとお話しをさせて頂いてお…

  5. タグ カテゴリー

    WEB知識

    WordPress(ワードプレス)のカテゴリーとタグって

    豆知識ですね。ワードプレスでブログを書いている方多いです。そこで、書い…

  6. フェイスブック 画像

    WEB知識

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

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

  1. 充電

    充電スポット

    仙川駅|充電スポット
  2. 手帳 写真

    WEB知識

    ディレクション大事な事〜スケジュール管理〜
  3. 口コミ 集客

    WEB知識

    口コミ連動型のホームページ作成
  4. ウェブデザイン検定

    独り言

    ウェブデザイン技能検定3級 合格しました。
  5. 街の広告 写真

    スキルアップ

    WEBも看板も見てもらえる広告の共通する点とは
PAGE TOP