ホームページライフ 活用ガイド

ホームページ作成ガイド
かんたんサイト作成で、サイトを立ち上げてみましょう!

ホームページ作成ガイド

かんたんサイト作成ガイド編

STEP3 基本情報入力

  • STEP1 URL確認
  • STEP2 テンプレートの選択
  • STEP3 基本情報入力
  • STEP4 コンテンツ設定
  • STEP5 入力内容確認
  • STEP6 プレビュー
  • STEP7 サイト設置完了!
ロゴ画像はあるがサイズが違う場合
3.画像を保存する

メニューの「ファイル」から「別名で保存」をクリックしてください。

3.画像を保存する
3.画像を保存する 保存用のダイアログボックスが表示されるので、保存先のフォルダを開きます。

ファイル名を入力し・ファイルの種類を選んで保存してください。
※ファイル名の入力
必ず半角英数字で入力してください。日本語は使えません。
その他特に決まりはありませんが、自分のわかりやすい名前をつけましょう。

○:logo.jpg ×:ロゴ.jpg

※ファイルの種類
透過されていない画像の場合、基本的には、JPEGで保存しましょう。
しかし、より綺麗な画像を保存したい場合は画像によってJPEGとGIFを使い分けるか、もしくはPNG形式で保存します。

JPEG…
主に写真や、グラデーションのかかった画像
GIF…
主にイラストやアイコン・ロゴなど、特に単色ベタ面の画像
PNG…
写真・イラストどちらの特徴を持っていてもきれいに保存できる。ただし、一般的にJPEGやGIFに比べると若干データが重くなる


3.画像を保存する

 画像の用意が出来たので次へ進む
ロゴ画像を透過データにしたい場合
背景が白色になっている画像を使い透過データを作成してみます。

3.画像を保存する

まずは、背景と背景じゃない部分の区別をわかりやすくするため、背景部分を別の色にします。何色でもいいですが、境界をわかりやすくするため、濃い色にするとよいでしょう。
3.画像を保存する 右上の方にあるツールバーの中から、「塗りつぶし」3.画像を保存するを選択します。

その下にあるコントロールパネルで塗りつぶし色を選択します。まず、カラーモデルをRGBにします。

3.画像を保存する

次に、R(赤)、G(緑)、B(青)のバーの上で左右にドラッグし、色を変更します。
※注意!何色でもいいですが、ロゴ画像本体には使われていない色にして下さい。

3.画像を保存する

ここではR(赤)のバーを右にずらし、濃い赤色にしました。
そのままカーソルを画像の上に持っていき、背景部分をクリックします。すると、同じ色領域の部分が選択した色に塗りつぶされます。背景部分は全て同じ色になるように、繰り返しクリックして塗りつぶしてください。

3.画像を保存する
うまく選択できない場合
背景の塗りつぶしがなかなかうまくいかない場合、コントラストを調整すると広範囲を選択できるようになる場合があります。
 メニューの「フィルタ」から「明度・コントラスト」を選択します。
 明度・コントラスト調整用のダイアログボックスが現れるので、「明度」「コントラスト」のバーをそれぞれ少しづつ右へドラッグします。

※画像を確認しつつ、不自然にならない程度に。

すると、色の違いがはっきりし、塗りつぶしを行う時も広域を選択しやすくなります。
「塗りつぶし」で細かい部分をクリックして潰していきます。赤色になっているのが透明になる部分です。



※ロゴの背景が淡色のテンプレートを選んでいる場合は、それほど細かく処理する必要はありません。ただし、背景が濃色のテンプレートの場合は細かく処理しないと粗が目立つ場合もあるので注意してください。

まだ背景には色のついた状態ですが、保存形式を選ぶことで透過データとして保存します。
メニューの「ファイル」から「別名で保存」を選択して下さい。

2.画像のサイズを変更する

※ファイル名の入力
必ず半角英数字で入力してください。日本語は使えません。
その他特に決まりはありませんが、自分のわかりやすい名前をつけましょう。

○:logo.jpg ×:ロゴ.jpg
 ※JPEGは透過データを扱えないので、選ばないように注意してください。
「保存する場所」「ファイル名」「ファイルの種類」を設定したら「保存」をクリックして透過色の指定に進みます。
「保存」をクリックすると下記のようなダイアログボックスが立ち上がります。



まず、「透過色指定」の部分にチェックを入れてください。この画像の中でどの色の領域を透明にするか、という指定をします。「透過色指定」の右隣、初期状態では白色になっている部分をクリックします。
 すると、左のように画像が拡大プレビューされます。

どこでもいいので、背景色の部分をクリックしてください。
 「透過色指定」の右隣の部分が自分が指定した背景色に変更されます。
画像の中で、この赤色の部分は透明になる、ということです。

「OK」をクリックすると保存されます。
これで、透過データの作成・保存が完了しました!
このページの先頭へ