ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第31回目「 フォトエディターを使ってみよう! 」

「フォトエディターを使ってみよう!」前ページからの続きです。

 

⑥「切り抜き」を使ってみよう

 

画像を任意のサイズに切り抜くことができます。あらかじめ用意されている縦横の比率を10パターンの中から選ぶ、もしくは指定したサイズで切り抜くことができます。

 

フォトエディター「切り抜き」の基本機能

 

■あらかじめ用意されたパターンで切り抜く場合

上部に配置されているボタンをクリックして、好みの比率を選びます。

用意されたパターンで切り抜く場合

▼「Square」を適用しました

「Square」を適用した画面

▼「6:4」を適用しました

「6:4」を適用した画面

▼「10:8」を適用しました

「10:8」を適用した画面

 

■任意のサイズや場所で切り抜く場合

カスタムで、四隅の「●」をドラッグすることで、任意のサイズに切り抜くことができます。

任意のサイズや場所で切り抜く場合の画面

▼高さを半分にしてみました

高さを半分にした画面

▼横幅を半分にしてみました

横幅を半分にした画面

 

「切り抜き」を活用してみよう!

 

カラム機能を使って、画像を並べるときは画像の高さを揃えると見栄えがよくなります。

猫の画像(後姿)
猫の画像(横顔)
猫の画像(正面)

「切り抜き」機能で、高さを揃えました。

猫の画像(後姿)、切り抜き後
猫の画像(横顔)、切り抜き後
猫の画像(正面)、切り抜き後

 

 

⑦「Color」を使ってみよう

 

彩度、色温度、Tint(色彩度)、Fade(フェード)の4つのモードを使って、画像の色味を調整することができます。各機能をクリックし、スライダーで適用量を調整します。

 

フォトエディター「Color」の基本機能

彩度:適用量を高くすると、鮮やかな色になります。

色温度:適用量が高いと暖色系(黄色や橙色)、適用量を低くすると寒色系の色(青色)になります。

Tint(色彩度):赤、青、緑のセロファンを上に乗せたような効果を適用することができます。

Fade(フェード):適用量を高くすると曇ったような色になり、適用量を低くすると黒い部分がより黒くなります。

▼「彩度」を最高にして適用しました

「彩度」を最高にして適用した画面

▼「彩度」を最低にして適用しました

「彩度」を最低にして適用した画面

▼「色温度」を最高にして適用しました

「色温度」を最高にして適用した画面

▼「色温度」を最低にして適用しました

「色温度」を最低にして適用した画面

▼「Tint(色彩度)」を最高にして適用しました

「Tint(色彩度)」を最高にして適用した画面

▼「Tint(色彩度)」を最低にして適用しました

「Tint(色彩度)」を最低にして適用した画面

▼「Face(フェード)」を最高にして適用しました

「Fade(フェード)」を最高にして適用した画面

▼「Face(フェード)」を最低にして適用しました

「Fade(フェード)」を最低にして適用した画面

 

 

⑧「シャープ」を使ってみよう

 

アップロードした画像を、シャープな印象に補正をしたり、逆にボケさせたり調整ができます。

 

フォトエディター「シャープ」の基本機能

▼「シャープ」の値を高くすると、輪郭がくっきります。

「シャープ」の値を高くし、輪郭がくっきりした画面

▼「シャープ」の値を低くすると、輪郭がぼやけます。

「シャープ」の値を低くし、輪郭がぼやけた画面

 

 

⑨「フォーカス」を使ってみよう

 

ピントを合わせるように焦点を当てたい場所だけ残して、周りをぼかしたような加工ができます。円形とライン、2種類のフォーカス形状が選べます。

 

フォトエディター「フォーカス」の基本機能

▼円形を適用しました

「円形」を適用した画面

▼ラインを適用しました

「ライン」を適用した画面

 

 

⑩「Vignette(ビネット)」を使ってみよう

 

Vignette(ビネット)には、背景をぼかした画像という意味があります。この機能を使うことで画像の内側に円状の影をつけることができます。

 

フォトエディター「Vignette(ビネット)」の基本機能

▼「Vignett」の値を高くすると、周囲が黒っぽくぼやけていきます。

「Vignette」の値を高くし、周囲が黒っぽくぼやけた画面

▼「Vignett」の値を低くすると、周囲が白っぽくぼやけていきます。

「Vignette」の値を低くし、周囲が白っぽくぼやけた画面

フォトエディター「テキスト」の基本機能

 

 

⑪「テキスト」を使ってみよう

 

微妙な色味も選べるカラーパレットと58種類のフォントを使って、画像にテキストを入れることができます。

 

 

■文字を変更してみよう

「Enter text here」と書かれたところを、好きな文字に書き換えます。

「Enter text here」を書き換える画面

 

入力エリア以外のところをクリックすると、文字の周囲に表示される黒い枠が消えます。

文字の周囲をクリックして、黒い枠が消えた画面

 

■文字を大きくするときはドラッグで

文字を大きくしたいときは、右下の「●」をドラッグします。角度を斜めにすることもできます。

ドラッグして文字を大きくする画面

 

■文字を微妙な色にしたいとき

左側の丸いボタンをクリックすると、カラーパレットが表示されます。微妙なカラーを使用したいときは、このパレットで調整しましょう。

文字を微妙な色合いにする画面

 

■フォントを変更したいとき

フォントを変更できる機能もついているので、好みに応じて変更しましょう。

フォントの変更ができる画面

 

■削除したいとき

入力した文字を削除したいときは、左側の「■」をクリックします。

入力した文字を削除するときの画面

 

 

(3)フォトエディターが使用できる機能

 

「画像」機能の他、「写真付き文章」や「フォトギャラリー」「ショップの商品/商品カタログ」でもフォトエディターが使用できます。

 

■「写真付き文章」でフォトエディターを使用する場合

「画像」タブをクリックします。

「写真付き文章」でフォトエディターを使用する場合の画面

 

「フォトエディター」のボタンがあるので、クリックします。

「写真付き文章」でフォトエディターを使用する場合の画面

 

■フォトギャラリーで使用する場合

フォトギャラリーのエリアをクリックします。

「フォトギャラリー」でフォトエディターを使用する場合の画面

 

下方に表示されるサムネイル上にマウスを近づけると、フォトエディターアイコンが表示されるので、クリックしましょう。

 

あとは同様の手順で、加工を行ってください。

「フォトギャラリー」でフォトエディターを使用する場合の画面

 

■ショップ機能の「商品」でフォトエディターを使用する場合

商品写真をアップロードした後、下のサムネイルにマウスを合わせると、フォトエディターアイコンが表示されますので、クリックしましょう。

ショップ機能の「商品」でフォトエディターを使用する場合の画面

【フォトエディターで編集できない画像の形式について】

以下の画像ファイルはアップロードは可能ですが、フォトエディターでの編集には対応しておりません。ご注意ください。

・透過PNG / 透過GIF はフォトエディターで編集を行うと、透明度部分が破棄され色が入ります。

・アニメーションGIF はフォトエディターで編集を行うと、アニメーションが破棄され静止画になります。

【関連記事】

・<新機能>フォトエディターでもっと美しいサイト作り:http://jp.jimdo.com/2016/06/28/photo-editor/

・フォトエディター(Jimdo SUPPORT CENTER):http://jp-help.jimdo.com/design/photoeditor/

輝くルドルフ

アリーナちゃーーーーーーん、ありがとう! すごい機能だね、ビックリしたよ。早速僕も使ってみたので、見て見てー。


ウインクアリーナ

ふふふふふふ、バッチリね!ルドルフくん。


まとめ

画像編集をする場合、これまでは別途画像編集ソフトを使って加工してからJimdoへアップしていましたが、新しく加わった「フォトエディター」を使えば、そのままJimdo内で加工ができます。ホームページの雰囲気に合わせて色を変えたり、切り抜いてサイズを最適化することも可能になりました。とても便利な機能なので、作業の効率化や表現力のアップに役立ててくださいね。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」