するこの記事は、2014年11月7日の記事を再編集しています。ホームページで欠かせないのが画像です。「なんだか画像処理って難しそう」と思っている人にオススメなツールがあります。無料でしかも高機能です。Editor(ピクセラエディター)をご紹介します。機能説明のほか、チュートリアル(演習)も用意しましたので、この機会にぜひマスターしましょう!なお、ブラウザ版は常にメニューなどが変わる可能性があります。以下の操作手順やキャプチャは2014年11月7日時点のものとご了承ください。Editor(以下・ピクセラエディター)は、オートデスク社が提供する無料の画像処理ソフトです。ホームページ版やアプリ版、そして無料・有料版などがあり、対応機器もWindowsやMacなど豊富に用意され、世界中で利用されています。オートデスク社は、もともとプロダクトデザインなどで使われる3Dの設計ソフトで有名な企業で、その技術がピクセラエディターにも生かされています。Pixlrピクセラエディターのおもな機能ピクセラエディターにはおもに次のような機能があります。ファイル形式の取り扱い・Facebookなどソーシャルメディアへの投稿(保存)機能このように、無料ながら市販の画像処理ソフトにも引けをとらない高機能なソフトになっています。フォトショップというデザインツールに詳しい方は、フォトショップのバージョン6に近い、といえばわかりやすいかもしれません。ピクセラエディターのはじめ方ピクセラエディターを使うのに、いわゆる会員登録は必要ありません。Library(ピクセラライブラリ)というインターネット上のファイル保存領域が使えるようになるようです(もちろん自分のパソコンに保存もできます)。Editor(ピクセラエディター)では基本的に次のような流れで画像処理を行います。Editor(ピクセラエディター)にアクセスする。ファイルを新規作成する(もしくは既存のファイルを開く)。画像補正や画像の加工を行う。ファイルを保存(投稿)する。ポイントは、どういったファイル形式や画像サイズで作るのか、というところをしっかり押さえることです。基本メニューピクセラエディターでは、以下のようなツールを使い、画像処理を行います。基本操作としては、選択範囲ツールや投げ縄ツールなどで加工したいところをドラッグして選びます。次に、色補正やフィルタをかけるなど処理をします。この繰り返しで画像処理を行うのです。メニューですが、変形させたり、補正をかけたり、フィルターをかけたりなど処理に関する操作は以下のとおりです。フィルターなどは、実際に操作して覚えたほうが早いくらい直感的に操作ができます。後述の演習で基本を理解したら、あとは自身でいろいろと試してみると良いでしょう。Editor(ピクセラエディター)で利用できるファイル形式ピクセラエディターでは、以下のようなファイル形式を扱えます。広く普及している画像ファイルはほぼ使えるといっても過言ではありません。デジカメで撮影した画像などもすぐに加工ができます。Editor(ピクセラエディター)以外では開けません。業務により高度に使いたい、といった場合には有料版を使うか、他の画像処理ソフトを使うほうが無難かもしれません。3.画像処理演習~ブログのキャッチ画像を作る完成イメージブログでは、投稿した記事の冒頭に、記事を印象づけるような画像を掲載することが主流です。それをキャッチ画像といいます。新聞や雑誌などでも、まず写真に目がいき、その記事の概要(リード)を読み、さらに知りたければ本文を読む、という作りになっています。ブログでも慣れ親しんだ読み手の誘導をすることが多いのです。本演習で学ぶことは次のとおりです。ファイル保存1.画像の読み込みあらかじめ画像を用意しておきます。前述のファイル形式のものを用意します。Editor(ピクセラエディター)にアクセスすると、初期画面で新しく画像を作る、ファイルを開くなどといった画面がでますので、コンピュータから画像を開くを選び、用意した画像を開きます。2.画像サイズの変更ブログにあった画像サイズに整えます。投稿したいブログの本文の横幅600ピクセルというサイズでしたら、あらかじめ画像もそれに合わせておく、ということです。画像メニューから「画像サイズ」を選びます。横幅を適正値に変更し「OK」をクリックします。このとき、縦横比を固定としておけば、縦サイズは自動的に計算されますので、とても便利です。縮小したら、マウスのホイール操作で、拡大縮小ができますので、作業しやすいよう調整してください。3.レイヤーの作成つぎにタイトルの下地になる黒い部分を作っていきましょう。手順としてはレイヤーと呼ばれる透明シートのようなものを、新しく画像の上に作ります。そこに黒い四角形を選択し塗りつぶします。新しいレイヤーという名称が作られます。それが選択されているのを確認します。4.塗りつぶし選択範囲ツールを選びます。文字を入れます下地を作ります。以下のようにドラッグすると、長方形で点滅がされます。これがある範囲の選択、という操作です。塗りつぶしツールを選び、描画色を黒にします。その上で、選択範囲の内側をクリックします。すると、黒く塗りつぶされます。レイヤーパレットの下図のマークをクリックし、透明度を下げましょう。下地として背景になじむのがわかります。5.文字入れ文字ツールを選び、画面をクリックします。文字入力モードになりますので、文字を入力します。Editor(ピクセラエディター)は日本語フォントにも対応しています。書体や文字サイズ、色、位置を決めて「OK」をクリックします。6.フィルター(モザイク)プライバシーに配慮するときには、人物にモザイクをかけます。背景レイヤーをクリックし選択します。これで、背景にモザイクをかける、という準備になります。選択範囲ツールを選び、モザイクをかけたいところをドラッグします。画面上方のメニューから、フィルター>ピクセレートを選びます。適当なモザイクサイズにし「OK」をクリックします。7.ファイル保存ファイルを保存するときは、2つの形式で保存することをオススメします。レイヤーなどすべての操作情報が含まれますPXD形式で、まずは保存し「原本」としましょう。何か修正が必要なときは、これを直せば効率的です。ワードやエクセルでいいます「名前をつけて保存」に該当しますのが「保存」です。上書きされませんので、安心して下さい。PXD形式で保存し、あらためて次に、JPEG形式で保存します。ファイル名は日本語を使わないようにして、任意のものをつけてください。Pixlr.com4.データ作成時の注意点いかがでしたでしょうか。した画像であれば、無料のピクセラエディターでも十分、と感じていただけたのではないでしょうか。いっぽうで、ピクセラエディターならではの注意点があります。ブラウザソフトである以上仕方ないのですが、ブラウザを間違って閉じてしまうと、保存していないデータは消えてしまうことです。こまめにデータを保存し、万一に備えてください。興味がある人はデスクトップ版をダウンロードして利用すると良いかもしれません。これはブラウザやOSの問題かもしれませんが、タブレットはペンの追従がかなり遅く使えませんでした(ワコムCTL-460でテスト)。Editor(ピクセラエディター)は、フリーソフトながらフォトショップという業界でもっとも普及しているソフトのメニューやツールとほぼ類似しています(以前のバージョンですが)。フォトショップのチュートリアルサイト(レッスンホームページ)や、情報源は参考になるはずです。本記事では、概要をつかむことと、全体の操作の流れに重きをおいて解説しました。画像処理はとても奥の深いソフトです。みなさんもこの機会にスキルアップして、素敵なキャッチ画像やバナーなどを作ってみてください。YouTube◇写真加工の流れがわかりやすい。参考リンク:絶対おすすめ!無料の画像処理サービス|らくらく活用ウェブUCOM光のネットライフマガジン◇デジカメ写真の加工手順が書いてあります。◇フォトショップver6の基本操作動画がたくさんあります。YouTube◇GIMPというフリーソフトでもほぼ操作は同じです。GIMP初心者向けサイト◇基礎用語も詳しく書いてあります。参考リンク:GIMPの使い方この記事に関連するニュース制作に関するまとめニュースホームページの運営で欠かせないのが、ページの更新です。ページの更新は本文もさることながら画像も最新にしたいものです。そんな画像処理や素材の準備まで含めFerretではホームページ制作に関する記事を多数用意しています。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るキャプチャキャプチャとは、出力されたデータを別の機器で取り込み利用可能な状態にすることを言います。例としては、TV映像をパソコンに取り込み、その映像を保存(キャプチャ)し、パソコンで再生可能にすることなどです。ホームページの分野では、ブラウザなどでホームページのデザインを画像として保存することなどを指すこともあります。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るアプリアプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るインターネットインターネットとは、通信プロトコル(規約、手順)TCP/IPを用いて、全世界のネットワークを相互につなぎ、世界中の無数のコンピュータが接続した巨大なコンピュータネットワークです。インターネットの起源は、米国防総省が始めた分散型コンピュータネットワークの研究プロジェクトARPAnetです。現在、インターネット上で様々なサービスが利用できます。詳しく見るブログブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。詳しく見るブログブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。詳しく見るブログブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。詳しく見るタイトルホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。詳しく見るフォントフォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。詳しく見るタブレットタブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るバナーバナーとは、ホームページ上で他のホームページを紹介する役割を持つ画像ファイルです。画像にリンクを貼り、クリックするとジャンプできるような仕組みになっています。画像サイズの規定はありませんが、88×31ピクセルや234×60ピクセルが一般的です。静止画像だけでなく、アニメーションを用いたバナーもあります。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るリンクリンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。「Pardotユーザー会」が国内最大級のMAユーザー会へと成長した理由マーケティングオートメーション(MA)ADCMS・Webサイト制作Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはCMS・Webサイト制作ADマーケティングオートメーション(MA)伝達から会話の時代へ。AI時代を一足先に予習する「マーケティングの練習問題」マーケティングオートメーション(MA)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。編集部厳選!最新情報をお届けもう一度読みたい記事をブックマーク実務に役立つ資料をダウンロード無料会員登録会員ログインこの記事を書いたライターferret編集部ferret編集メンバーが不定期で更新します。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはAD記事を作っているのにサイト流入が足踏み・・・・・・。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。