画像の加工を覚えると、サイト作成の幅がグンと広がります

画像の加工を覚えると、サイト作成の幅がグンと広がります

父と子で木材加工をしている写真

 

「ここに線を引いてごらん」

 

 

画像加工ソフトはたくさんありますが、長年使っていてだんだん同じソフトばかり使うようになりました。私が最も多用しているソフトをご紹介します。傾向としては、とにかく簡単なので使いやすいもの、動きが軽いものが生き残っているようです。

 

 

使いやすい画像加工ソフトがわかる もくじ

 

 

○「JTrim」は動きが軽くて手軽に使える便利なソフト

 

  「画像切り抜き」「リサイズ」はどの画像ソフトでもある機能

 

  モザイクは知られたくない情報を隠すのに必要な機能

 

  ・これが重宝してる!意外とできるソフトが少ない「画像の枠線作成」

 

○私は「PhotoScape」で、文字入れをしています。

 

○画像を使う上で、ぜひ知っておいてほしいたった1つのこと

 

  ・キーワードは「拡張子で使い分ける」

 

 

 

 

「JTrim」は動きが軽くて手軽に使える便利なソフト

 

 

平成27年12月31日更新

 

 

 

私が最も愛用している画像ソフトは「JTrim」です。

 

 

jtrimのショートカット画像

 

  無料ダウンロードはこちらから→ Vector ソフトを探す!

 

 

とにかく軽くて、すぐに立ち上がりますので、
「ファイルが開くまで待つ」というストレスは
ほとんどありません。

 

私の画像加工は、そんなに複雑なことまで
していません。使う機能はほぼ限られて
いますので、この軽さが非常に快適で使い
心地よく感じます

 

よく使う機能をご紹介します。

 

 

 

「画像切り抜き」と「リサイズ」はどの画像ソフトでもある機能

 

 

画像切り抜き

 

 

 

画像ソフトの基本機能なので、どのソフト
でもだいたいできる作業です。

 

 

jtrimで画像切抜きをしている画像

 

 

マウスで画像を切り抜く場所をドラッグして
範囲指定→「切り抜き」ボタンを押すだけです

 

作業完了すると下のようになります↓↓

 

 

jtrimで画像切抜きをしている画像

 

 

 

画像の「リサイズ」もかんたん

 

 

 

画像のリサイズ(サイズ変更)も簡単です。

 

「リサイズ」のボタンを押し、入力画面に
変えたい大きさを入力してゆきます。

 

「縦横の比率を維持する」にチェックを入れて
おけば、縦あるいは横を入力すると、自動的に
縦横の大きさを合わせてくれます。

 

 

※クリックすると大きな画像が見れます
jtrimで画像のリサイズをしている画像

 

 

一般的に、画像は元画像を拡大すると
画像が乱れますので、基本は大きなものを
小さい画像に縮小する使い方をします。

 

 

 

モザイクは知られたくない情報を隠すのに必要な機能

 

 

 

知られたくない情報に、モザイクをかける事も
よくあります。

 

これも範囲指定して、「モザイク」ボタンを
押すだけで簡単にできます。

 

なお、モザイクの「粗さ」も指定できます

 

 

jtrimで画像のモザイクがけをしている画像

 

 

 

これが重宝してる!意外とできるソフトが少ない「画像の枠線作成」

 

 

 

私が「JTrim」を使っているのは動きが軽い
からという理由と、もう1つ「画像の枠線」が
簡単にできるからという理由があります。

 

いろいろ試してみましたが、枠線がかんたんに
引けるソフトは意外と少ないです。

 

 

jtrimで画像の枠線をひいている画像

 

 

「余白作成」ボタンを押すと、入力画面が
出てきますが、数値をすべて1にしてOKすると
枠線付きの画像になります。

 

下の画像は左が枠線あり、右が枠線なしです
必要ない場合ももちろんありますが、枠線がある
ほうが、サイトのデザイン上 上手くいくことが多い
です。

 

 

<枠線あり>              <枠線なし>

jtrimで枠線ありなしを比較する画像  jtrimで枠線ありなしを比較する画像

 

 

<枠線あり>              <枠線なし>

jtrimで枠線ありなしを比較する画像  jtrimで枠線ありなしを比較する画像

 

 

ほら、全然仕上がりが違うでしょ
ぜひあなたも試してみてください。

 

 

 

 

 

私は「PhotoScape」で、文字入れをしています。

 

 

 

「JTrim」にも文字入れの機能は付いて
いますが、私は文字入れは「PhotoScape」
を使っています。

 

 

photoscapeのショートカット画像

 

  無料ダウンロードはこちらから→ Vector ソフトを探す!

 

 

「PhotoScape」のいいところは、文字のフォント
が豊富なこと、枠線の太さなどの加工がしやすい
こと、四角や矢印などの記号が使いやすいこと
などたくさんの長所があげられます。

 

 

※クリックすると大きな画像が見れます
photoscapeのテキスト入力画面の画像

 

 

いままでは文字入れ専門で使っていましたが
写真の加工ソフトというだけあって、かなりの
多機能です。

 

いろいろ試してみると可能性も広がりそうです。

 

「GIFアニメ」という機能を使って、こんなことも
できました。↓↓

 

 

photoscapeのテキスト入力画面の画像

 

 

 

画像を使う上で、ぜひ知っておいてほしいたった1つのこと

 

 

キーワードは「拡張子で使い分ける」

 

 

 

私がホームページを作るようになって、拡張子に
ついて知ってから、画像を格段に上手く扱える
ようになりました。

 

拡張子というのは、ファイルの種類を識別する
ため、ファイル名の末尾につけられた文字列の
ことを指します。

 

画像の名前の後についている「.jpg」「.png」「.gif」
という拡張子は、恐らくご覧になったことはあるはず。

 

 

画像の拡張子がわかる画像

 

 

まずは、実際に画像を見比べていただきたいと
思います。左が「.jpg」、右が「.png」です。

 

 

<「.jpg」の画像>            <「.png」の画像>

画像の拡張子がわかる画像  画像の拡張子がわかる画像

 

 

よく目を凝らして見ないと分かりにくいですが、
「.png」の方がくっきりしていて、「.jpg」の方が
ぼやっとしているように感じませんか?

 

では、もう一枚比較してみます。次は写真です

 

 

<「.jpg」の画像>            <「.png」の画像>
画像の拡張子がわかる画像  画像の拡張子がわかる画像

 

 

よく見てもあまり違いが分かりませんね。

 

でも、この2枚の写真の画像の詳細を
比較すると、下のようにサイズが大きく
違うことがわかると思います。

 

 

画像の拡張子がわかる画像

 

 

「.jpg」の画像は、「.png」の画像の1/9
のサイズです。

 

画像のサイズは、webサイトの表示速度
と大きく関係します。重たいサイトはなかなか
開かなくていらいらしますね。

 

「.jpg」の画像は、境界線のはっきりしない
写真のような画像を軽いサイズで保存
できるという長所があります。

 

 

画像拡張子のまとめ

 

○パソコンの画面など境界のはっきりした画像を保存するときは「.png」を使う。
○写真のような境界のはっきりしない画像を保存するときは「.jpg」を使う

 

 

いかがですか?

 

覚えておけば便利な知識です。
ぜひご活用ください。

 

なお、「.gif」は小さくてはっきりしたものを
保存するのに適しています。

 

画像の圧縮や拡張子については、別のページ
にも記事にしていますのでぜひ参考にして下さい。

 

 →もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化

 

 

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

 

 

よく読まれる関連ページ

もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化

もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化

10分でできる!バナーの貼りつけ

10分でできる!バナーの貼りつけ

目障りな広告はイヤ!・・に対する対策はどうする?

目障りな広告はイヤ!・・に対する対策はどうする?

バナープラスは直感的に使えて、高級感を感じる使い心地です!

バナープラスは直感的に使えて、高級感を感じる使い心地です!

 


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです




 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ