画像の加工方法

イラストを選択

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

https://wxwindows.org/での、画像設置の基本方針

この記事は「FXによろしく!」というサイト専用のマニュアルです。

 

①「ブラックジャックによろしく」の漫画画像をできるだけ使う

ブラックジャックによろしくの無料画像

有料版の高画質画像を買ってあるので、それを使う

 

注意

郵送したUSB内にある高画質画像を使ってください

 

漫画の加工方法はこちら

漫画をPhotoshopで開く 漫画画像の加工・編集方法

 

②漫画以外の画像はhttps://stock.adobe.com/jp/で購入したイラストを使う

有料のイラスト画像を購入

*淡い色合いの優しい印象を与えるイラストを選択

マテリアルデザインカラーに合う画像(ワードプレステーマの「sango」に合う画像)

 

③ ①と②に該当する画像がない場合は写真画像を使うが、ファッション誌に載っているようなきれいな画像を使う

税金と追徴課税

きれいな画像

 

④画像の横幅は700PXに統一

横幅と縦幅は2対1の割合(700px×350px)に画像をトリミング(加工)する。

 

縦長の画像はやぼったい印象を与えるので注意!

 

memo

画像の横幅・縦幅を統一すると、サイトに統一感が出て見やすくなる

 

⑤小さい画像を使う場合は、真ん中寄せに必ずする

スマホで見るユーザーが増えているので、画像は小さな画像を含めて、真ん中寄せにする。

 

横幅350px以下の小さな画像を右寄せ、左寄せに配置して文章を回り込ませる設定をした場合、見るデバイス(PC、タブレット、スマホ)によって見え方が大きく変わってしまうので注意!

memo

特にスマホは縦長の文字になりやすく、見にくくなる場合がある。

 

画像の取得方法

① 画像取得サイト

Adobe Stockから画像を購入

Adobe Stockから画像を購入(https://stock.adobe.com/jp/

月に750枚ダウンロードできるプラン(27,478円)を契約しているので、気になる画像はガンガンダウンロードしてOK!

 

注意

通常ライセンスでダウンロードする(拡張ライセンスはNG)。

 

また、jpegかAI(イラストレーターのファイル)か設定でダウンロード形式を選べるので、AIがダウンロードできる場合はAIをダウンロードする

*AIはAdobeのillustratorを持ってないと使えないので注意

 

② 画像を検索・ダウンロード

画像サイトへ行く
画像を検索
画像のイメージを検索

 

イメージの画像が出やすそうなキーワードを入力して、画像を検索

 

フィルターをかけてイラスト画像に絞り込む
画像を絞り込む

 

フィルターをクリックして「イラスト」と「ベクター」にチェックを入れる

 

記事のイメージと合うイラストを選択
イラストを選択

 

記事のイメージに合う画像を画像をクリック

 

画像ファイル形式を選択して、画像をダウンロード
画像のダウンロードファイルの形式を選択

 

画像を加工(文字入れ)する場合はAIファイル、加工せずにそのまま画像を使う場合はJPEGをダウンロード。

 

memo

設定ボタンでAIかJPEGか、ダウンロードファイルを選べます。

 

まずはイラスト画像を探し、良いイラスト画像がない場合は、写真画像を使います。

 

イメージに合う画像を探すの大変ですが、妥協せずにクオリティーの高い良い画像を探しましょう!

 

memo

画像の横幅が700pxより大きい場合は、リサイズソフトかPhotoshopを使って横幅を700pxにリサイズする。

 

リサイズ後に、画像圧縮サイト画像を圧縮してからサイトにUPロードする

 

画像のリサイズ(幅700px)

画像をPhotoshopで開く
画像をPhotoshopで開く

 

長方形ツールをクリック
長方形ツールを選択

 

切り抜きたい部分を選択
切り抜きたい部分を選択

 

切り抜きを実行
切り抜きを実行

 

「イメージ」 → 「切り抜き」をクリックして切り抜く

 

横700px、縦350pxの比率で切り抜き完了
抜き完了

 

画像の横幅を700pxにリサイズ
リサイズ設定

 

「イメージ」 → 「画像解像度」をクリック

 

「幅」に700を入力してリサイズ
リサイズ後

 

横幅700px、縦350xにリサイズ完了
700pxにリサイズ完了

 

画像に文字入れ

画像に文字入れをしない場合は、この部分は読まなくてOK!

 

文字入力用のテンプレートファイルをダウンロード
ダウンロードはこちら

 

テンプレートを開く
PSDテンプレートファイル

 

設定済みの文字設定
  • 文字形式は:ヒラギノ角ゴ7
  • フォントサイズ:36pt
  • 文字色カラーコード:黒(222222)、赤部分(c81515)
  • 文字効果:境界線で外側に4px、白色で縁取り
  • 文字配置:左寄せ

 

3つの文字から選んで画像にコピペ
画像に文字をコピペ

 

文字の変更
文字の変更

 

テンプレートから文字をコピーして、画像に貼り付けてから、画像に合った文字に変更する

 

画像をJPEGで出力する手順
JPEGで画像を出力

 

「ファイル」 → 「書き出し」 → 「Web用に保存(従来)」をクリック

 

画像の出力形式を選択
画像の出力形式を選択

 

JPEGを選択し、画質は60を設定

 

ファイル名をローマ字に変更して保存
ファイル名をローマ字に変更して保存

 

ファイル名をローマ字に変更して保存

 

ファイル名の変更例
「AdobeStock_201382192.jpeg」→ 「fx-bouraku.jpg」

 

保存完了
保存完了

 

 

画像の圧縮後、サイトへUPロード

画像を圧縮しないと、サイトが重たくなりSEOの順位が上がりにくくなります。

 

面倒でも画像を軽くして、使いやすいサイトを作りましょう。

 

画像圧縮サイトで画像を圧縮
画像圧縮サイトで画像を圧縮

 

画像圧縮サイトで画像を圧縮

 

圧縮した画像をダウンロード
13%圧縮できた

 

memo

ダウンロードファイルはZIP形式なので、解凍ソフトが必要です。

 

オンラインでの解凍はこちら

解凍ソフトのインストールはこちら

 

オンラインで解凍するのは効率が悪いので、解凍ソフトをPCにインストールする方がおすすめです。

 

 

サイトに画像をUPする手順
「メディアを追加」をクリック

 

画像をUPロード
画像をUPロード

 

画像の詳細設定
画像の詳細設定

 

画像の設定
  • 代替テキスト・タイトル:画像の内容を表す短い文章
  • 配置:中央
  • リンク:なし
  • サイズ:フルサイズ

 

大きい画像でもサイトの横幅に自動でリサイズされて表示されますが、実際のサイズはそのままです。

 

実際に使うサイズにリサイズしてからサイトにUPしましょう。

 

サイトに画像のUPロード完了
サイトにUPロード完了