Fotorを使ってロゴ画像をつくる

前回に続いてインターネットブラウザだけで画像加工できる「Fotor」を使ってロゴ画像を作成してみたいと思います。

インターネットブラウザだけで画像加工できる「Fotor」を試してみた

背景が透過したpng画像を作成する

png画像とは

png（ピング）画像とは画像の保存形式の一種です。（一般的に知られているjpg（ジェイペグ）もその一種です）
png画像は部分的に透過（透明に）させることができるのが特徴です。切り抜かれた画像と背景をなじませたい場合などに適しています。

Fotorでpng画像を作成する

Fotorでpng画像を作成するには無料のユーザー登録が必要です。png画像作成以外にもユーザー登録者だけの限定機能が多数ありますので、この機会に登録をおすすめします。

Fotorウェブサイトは

ユーザー登録は右上の「ログイン」ボタンから行います。
ユーザー登録後に「デザイン作成」からロゴ画像を作成していきます。

「デザインを作成」をクリックすると表示されるテンプレートカテゴリーの中から「ロゴ」をクリックします。

ロゴのベースとなるテンプレートが表示されますので、好みのデザインを選択しましょう。

好みのテンプレートを選択。
このアイコンが付いているテンプレートは有料ユーザー限定です。

選択したテンプレートをベースに修正を行います

選択したテンプレートは文言や色、大きさを自在に変更することができます。
また「ステッカー」のメニューから装飾を追加することも可能です。

ステッカー／装飾用の画像集
テキスト／文字の追加
サブメニュー／ページ上部のサブメニューは選択している要素毎に切り替わります

テキスト選択時サブメニュー

カラーパレット／テキストの色を変更
フォント／書体の変更
フォントサイズ
テキストの揃え
テキスト形式／文字間や斜体、太字　など
複製
more／回転やドロップシャドウ、レイヤー（要素の重なり順の変更）　など
ロックする／要素を選択できないようにします
削除

ステッカー選択時サブメニュー

設定のお気に入り／※有料機能
カラーパレット／ステッカーの色を変更
エッジ／縁取り設定
複製
回転
シャドー／ドロップシャドウをかける
透明度
レイヤー／要素同士の重なり順を変更します
ロックする／要素を選択できないようにします
削除

背景選択時サブメニュー

カラーパレット／背景色を変更
透明度／背景の透明度の変更

余分な背景を切り取る

不要な余白を絵柄の輪郭で切り抜きます。

作成した画像を一旦自分のパソコンにダウンロードします。

ページ上部の保存ボタンをクリックします。

任意のファイル名を入力します。
ファイル形式はpngを選択。
すべてのページを透明な背景に設定するのチェックボックスにチェックを入れます。（左のプレビュー画像で背景が透明になるのが確認できます）
クオリティはHDを選択。

最後にダウンロードボタンをクリックすると自身のパソコンに画像がダウンロードされます。

ダウンロードした画像を編集

「編集」をクリックします。

赤枠内をクリックして先程ダウンロードした画像をアップロードします。

「基本的な調整」をクリックします。
「切り取り」をクリックするとメニューが開きます。
「Freeform」を選択。
切り取り範囲をドラックして希望のサイズに変更します。
「変更する」ボタンをクリックすると切り取り完了です。

修正した画像をダウンロードする

修正したロゴ画像を先程と同じように「保存」ボタンからダウンロードしましょう。

ロゴ画像を浜松LIFEのホームページに設定する

初期設定では事業者名がテキスト表示されていますが、この部分を作成したロゴ画像に変更します。

ヘッダーにオリジナルのロゴ画像を設定する

はままつライフサポートガイド