【デザイン】Photoshopがなくても大丈夫!写真サイズを手軽に整える方法


ウェブページを作成する際に、文字だけでなく写真を載せることも多いと思います。しかし、いくつか写真を並べたときに写真の高さがデコボコになったり幅がバラバラで見た目が悪くなることありませんか?

そんなときに手軽に写真サイズを変更できたら嬉しいですよね?いくつかの方法がありますが、今回は「pixlr」ピクスラーを使って手軽にサイズ変更する方法をご紹介します。

目次

pixlr(ピクスラー)ってなに?

pixlrとは、非常にPhotoshopに似ているのですが、簡単に言うと写真の加工ができるソフトです。しかしインストールすることなく使用できるソフトです。なのでインターネットにつながっている必要があります。グーグルで検索してみると、英語なんですが、起動すると日本語になるので安心してください。

pixlr(ピクスラー)の起動方法

【画像】pixlrを検索して出たグーグルの検索結果

「pixlr」とグーグルなどの検索ボックスに入力すると、以上の検索結果が出ると思いますので、こちらをクリックします。検索結果が英語ですが、pixlrを起動したら日本語表記になるので、安心してください。

【画像】pixlrメニュー画面

グーグルの先ほどの検索結果をクリックするとこちらのメニュー画面になります。もうここから日本語表記なので、安心ですね!今回は、画像のサイズを手軽に変更したいのでメニュー画面にある「コンピューターから画像を開く」で画像を開きましょう。

pixlr(ピクスラー)を使って画像サイズを変更してみよう

【画像】画像を開き、変更したい画像サイズを調整している

先ほどのメニュー画面から画像を選択すると、以上のような画面になります。今回は、先日ホットドッグや焼きそばを作ってみんなで食べるパーティー(結構身内ネタ)があったので、その時の写真を使用しています。

  • 切り抜きツールを選択
  • 固定化の▼をクリックして出力サイズに変更
  • お好きなサイズに変更します。今回は400×250に。

これは余談ですが、黄金律って知っていますか?画像サイズをこの黄金律で統一すると少し良く見えるかもしれません。計算する必要があるのですが、1:1.618の比率が黄金比です。ただこの計算通りにやると端数が出てしまうので、僕は1:1.6でやっています。

指定のサイズにトリミングします!

【画像】pixlrでトリミングしている

すでに先ほどサイズの指定をしているので、ただドラッグするだけです。

”画像のトリミングとは、写真や画像などの不要な部分を取り除いて整えること。” を言います。

  • 画像の幅いっぱいにこの切り抜きツールの網がしっかりかぶるようにしましょう。
    (もし、画像の左右もトリミングしたいのであれば、この限りではありません。)
  • 上と下に入りきらない隙間ができると思います。これが余分部分になります。
  • 丁度いいところを上下に調整してENTERキーでトリミングできます。

サイズ変更した画像を出力する

【画像】ファイルから保存を選択しているところ
※クリックで拡大
【画像】画像出力の設定画面
※クリックで拡大

  • メニューのファイルから保存を選びます。
  • 名前・フォーマット(画像の種類のこと写真ならpegで問題なし)
  • クオリティー(80くらいで大丈夫です)

このステップで指定のサイズに画像をトリミングしながら、画像のサイズも同時に整えることが可能になります。手順は少し多めかもしれませんが、慣れればそこまで難しい作業ではないので、これで見た目もググッと高まること間違いなしです!

まとめ

いかがだったでしょうか?画像のサイズがデコボコだとかっこ悪いということもありますが、画像サイズを整えることはウェブページを製作する上では、大事なことです。サイズ次第で容量も変わりますので、画像を載せる際にはこのpixlrピクスラーを使って手軽に画像をトリミングして素敵なJimdoライフを送ってください。