SAMPLE IMAGE この画像は差し替えてご利用ください

Web でロゴを作成する

Webサイトを使用してロゴ画像を作成する方法として、ここに紹介するほかに、 Pixlr Editor を使用する方法もガイドしております。

P40 画像に描画とテキストを追加するを参照します。

差し替えるロゴ画像のサイズと、色を確認する

➊ 差し替えるロゴ画像のサイズを、デベロッパー・ツールで確認する

1)サンプルのロゴの上で右クリックし、コンテクストメニューの[検証]をクリックする。

jdg026_02:ロゴ画像のサイズを検証する
jdg026_02:ロゴ画像のサイズを検証する

2)デベロッパー・ツールが表示され、ロゴ画像のサイズも表示されるので、確認する。ここでは、240px X 54px と表示されている。

jdg026_03:ロゴ画像のサイズを確認する
jdg026_03:ロゴ画像のサイズを確認する

➋ 作成するロゴに色を付ける場合の色を確認する

ロゴに固有の色がある場合は別として、ページに映えるようにロゴを塗りつぶす場合の色を確認します。

ロゴとかナビの色でたくさんの種類の色を使うよりは、統一した色合いを使う方が見やすくなります。例として、ロゴがナビメニューと同じ領域にある場合、アクティブなナビに使う色をロゴにも使うことで統一できます。以下は、アクティブなナビメニューのボタンの色を確認する方法です。

1)「プレビュー」モードにし、アクティブなナビメニューの処で右クリックし、「検証」をクリックし、デベロッパーツールを表示します。

2)アクティブなメニューボタンを記述するHTMLソースを確認()し、そこで使われている背景色(background-color)()をメモする。

ここでは、16進で表現される色 #1382b9 が使われていることが分かる。

jdg026_17:アクティブなナビボタンの色を確認する
jdg026_17:アクティブなナビボタンの色を確認する

ロゴを作成する

➊ 以下のロゴ作成サイト Squarespace へアクセスする

➋ ロゴに使う文字を入力し、→ をクリックする

カーソルが点滅しているボックスに入力する。

ここでは「レンズの記憶」と入力する

jdg026_04:ロゴに使う文字を入力する
jdg026_04:ロゴに使う文字を入力する

➌ ロゴに使いたいシンボルを検索するため、関連する検索用語を英語で入力し、→ をクリックする

ここでは、写真系のシンボルを使いたいので[camera]と入力する。

jdg026_05:シンボル検索の検索語(英単語)入力
jdg026_05:シンボル検索の検索語(英単語)入力

❹ 検索結果が表示されるので、使いたいシンボルをクリックする

jdg026_06:シンボルの選択
jdg026_06:シンボルの選択

●や▶の仮のシンボルが、選択されたシンボルで置き換わる。

❺ ロゴに文字を追加する場合は [Tag Line] に入力する

ここでは、「PhotoGallery」と入力する

❻ フォントを変更する場合は、文字をクリックし、フォントを選択する

変更できるのは半角英数字文字だけです。

❼ シンボルや文字をドラッグして位置を調整する

jdg026_07:位置の調整
jdg026_07:位置の調整

❽ 周囲をドラッグするとサイズを調整できる

❾ シンボルや文字に色を付ける場合はクリックし、色を選択し[FILL COLOR]をクリックする

ロゴを挿入する位置の周りの色を考慮して、ロゴに色を付けます。

jdg026_08:色を付ける
jdg026_08:色を付ける

❿ [SAVE LOGO]をクリックする

jdg026_09:Save Logo
jdg026_09:Save Logo

⓫ [DOWNLOAD LOW RES]をクリックする

低解像度版は無料でダウンロードできます。

jdg026_10:Download Low Res
jdg026_10:Download Low Res

ダウンロード後、Squarespace サイトはしばらく閉じないでおきましょう

閉じないで置くと、ロゴをさらに編集するときに役に立ちます。サイトを閉じた後は、作成したロゴに再度アクセスすることはできなくなります。

⓬ ダウンロードフォルダーに保存されたロゴを、ウィルススキャンする

⓭ ダウンロードフォルダーから保存先フォルダーへロゴを移動する

⓮ ファイル名を半角英数字で入力する

ここでは、photogallery-logo.png とする。

ロゴを切り抜く(トリミング)

保存したロゴ画像は、ロゴの下に提供サービス名が表示される。これを削除する場合は以下の操作をし、トリミングする。

➊ ブラウザで、以下の Pixlr Editor サイトへアクセスする

➋ [コンピューターから画像を開く] をクリックする

jdg026_11:Pixlr Editor
jdg026_11:Pixlr Editor

➌ 先ほど保存した画像を選択し、[開く]をクリックする

jdg026_12:画像を開く
jdg026_12:画像を開く

❹ [切り抜きツール]で切り抜く範囲をドラッグし、ダブルクリックすると切り抜かれる

jdg026_13:切り抜きツール
jdg026_13:切り抜きツール

❺ 切り抜いた画像のサイズを変更する

ここでは、サンプルロゴサイズの高さ(54px)と同じにする。

jdg026_14:画像サイズ変更
jdg026_14:画像サイズ変更

jdg026_15:リサイズされた画像
jdg026_15:リサイズされた画像

❻ 画像を保存する

「ファイル」から「保存」を選びます。

jdg026_16:ロゴ画像の保存
jdg026_16:ロゴ画像の保存