本文へスキップ
画像背景を透明化し【一瞬で背景を消し透明化処理する方法】バナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
画像背景を透明化し【一瞬で背景を消し透明化処理する方法】バナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
画像背景を透明化し【一瞬で背景を消し透明化処理する方法】バナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
画像背景を一瞬で透明化する方法/ウェブアートデザイナー編集
▼画像背景を透明化し【一瞬で背景を消し透明化処理する方法】バナーを作る方法
■私が使っているのは「ホームページビルダー22ビジネスプレミアム」です。
■ホームページビルダー22を起動します。
【編集前に】編集前に透明化したい画像を準備して下さい。
私は、下のの「500×412ピクセル」の「さくら」の写真を使って編集します。
※下の写真のように、
主たる所(背景以外の残す所)と背景の彩色が際立っているとき【一瞬で背景を消し透明化処理する方法】もあります。
①サイトを開く前の最初の画面(エディターズ表示)で
メニューからューから
「ツール(T)」→「ウェブアートデザイナーの起動(D)」を選択します。
②「ツール(T)」→「ウェブアートデザイナーの起動(D)」を選択しました。
③ウェブアートデザイナーの最初の画面が表示されました。
④「編集(E)」→「キャンパスの設定(S)」と進みます。
▼用意した背景を消す写真のサイズにキャンパスを設定します。
私は、「幅(W)サイズ
500
ピクセル×高さ(H)サイズ
412
ピクセル」としました。
そして、メニューから「編集E)」→「ファイルから貼り付け(F)」を選択し用意した写真を呼び込みました。
⑤・
「透明色で塗りつぶし」をクリック
します。
・次に
「花以外の背景」をどこでも良いのでクリック
します。
⑥「ほんの一瞬」で下の画像のように背景が透明化処理されました。
・しかしながら、まだかなり背景ごみが残っています。
【一瞬で背景を消し透明化処理する方法】が使えそうになかった方は、この文字列をクリックして下さい。
⑦「消しゴムの先サイズ」を選択し「消しゴム」をクリックして残りを丁寧に消していきます。
下の画像のようになるまで消します。
かなりきれいに透明化処理されました。
⑭ファイルを「保存」します。
・ファイルの名前は「さくら500」
・ファイルの種類は「ウェブアートファイル(*.mif)」とします。
⑮どこかにしまってある「グラデーション」のアイコン(ウェブアートデザイナー印)をクリックします。
すみません!
「グラデーション」のアイコン(ウェブアートデザイナー印)がない方は、
恐れ入りますが
「グラデーションバナー作成」
をお読みください。
⑯「編集(E)」→「キャンパスの設定(S)」でキャンバスが開いたらキャンパスを 「幅(W)サイズ
1026
ピクセル×高さ(H)サイズ
500
ピクセル」設定します。
⑰キャンバスが開いたら
メニューから「編集(E)」→「ファイルから貼り付け(F)」で⑬で保存した・・・
「さくら500」のアイコンをWクリックして開きます。
⑱バナーの上にファイル「さくら500」が開きました。
⑲花の部分をマウスで押え右の方向へドラッグし「花」の位置を確定します。
⑳グラデーションに桜の花が咲いているバナーの完成です。
▼いろいろ応用ができるはずです。
㉑保存します。
・ファイルの名前は、私の場合は「さくら500」です。
・ファイルの種類は、「JPEGファイル」としました。
㉒「ペイント」に読み込んでサイズを変更します。
▼私の場合はテンプレートのバナーサイズ「239×116」としました。
㉓出来上がったバナーに「文字」を入れます。
▼ペイントに読み込んで文字を入れることができますが私の場合は「ウェブアートデザイナー」でやります。。
▼「ウェブアートデザイナー」を起動し、「編集(E)」→「キャンパスの設定(S)」でキャンパスを 「幅(W)サイズ
239
ピクセル×高さ(H)サイズ
116
ピクセル」設定します。
㉔▼バナー「さくら500」を読み込みます。
▼私の場合はテンプレートのバナーサイズ「239×116」と設定しました。
▼文字を挿入するときは「A」をクリックします。
㉕「文字」挿入のスペースができました。
▼文字を書きます。私の場合は、「アクセス」です。
㉖文字スペースをWクリックすると「文字のダイアログボックス」が開きます。
▼「タブ」をクリックして文字を加工します。
㉗文字の位置を調整したら、タブ「縁取り」「効果」で設定するといろいろ文字の雰囲気が変わります。
㉘文字が入り完成したバナーを「保存」します。
▼私の場合はテンプレートのバナーサイズ「238×116」としました。
・ファイルの名前は、私の場合は「アクセス」です。
・ファイルの種類は、「JPEGファイル」としました。
▼質問やお問い合わせは、LINEでお願い致します。(無料)
・
編集中の「わからない」「困った」にはLINEにてお問い合わせください。(無料)
(LINE無料相談は、9時~23時ですがすぐに返信できないことももあります。)
・
出張訪問(関東地区・その他相談)によるサービス(お困りごとの解決)は有料となります。
▼LINE登録は、QRコードをタップして下さい。
このページの先頭へ
ナビゲーション
最初から設定する
①クラシック版で直ぐ始める
②タイトル画像の加工と編集
②-2タイトル写真の編集
②-3タイトル用写真の変更
③TOPページ「index」を編集
③-2編集方法-タブを選択
③-3要素<title>の書換
③-4TOPICSに本文を書く
・TOPICSの増やし方く
・段落の増やし方く
・TOPICSに写真挿入方法
・TOPICSに表挿入方法
・NWESを削除する方法
・文字サイズを変更スル方法
CSSを書換えfontの属性を変更
オプションでfontの属性を変更
ページを増やす方法
ナビゲーションを編集
NAVIを全頁に反映させる
・NAVIの順序を変更スル
・NAVIの名称を変更スル
・不要NAVIの頁を削除
・NAVIボタンの色を変更
・NAVIのリンク色を変更
・NAVIの不要HTMLを削除
タップすると電話番号表示
④会社方針のページ編集
⑤サービス/製品一覧の頁編集
⑥新着情報・FAQの頁編集
⑦会社概要の頁編集
⑧採用情報の頁編集
⑨お問い合わせのページ編集
⑩プライバシーポリシーの頁編集
⑪特定商取引法ニ関スル記述編集
⑫アクセスaccess.html の編集
⑬バナーを編集
バナー編集/ウェブアートデザイナー
・グラデーションバナー作成
・画像背景透明化/ウェエブアートD
⑭ナビゲーションを全頁に反映
⑮ホームページヲアップロードする
⑯ホームページヲサーバに転送する
ホームページをダウンロ-ド
ヘッダー(header)を編集
フッター(footer)を編集
MENUアイコンを編集加工
ハンバーガーメニューにMENU表示-①
ハンバーガーメニューにMENU表示-②
グーグルマップの挿入方法
XMLサイトマップを作る
サイト内サイトマップを作る
タップすると電話番号表記
LINE-QRコードで友だち追加
ブログをナビボタンにリンクさせる
内部リンク元から内部リンク先
サイト転送の自動転送設定
ビルダーで基本のSEO設定
freedom思考的SEO対策
検索順位ノ検証(SEO効果ノ検証)
SEO対策をあれこれ考える前に!
・SEO対策をアレコレ考エル前に!②
・SEO対策をアレコレ考エル前に!③
・SEO対策をアレコレ考エル前に!④
キャッシュを知ろう・考えよう
検索に引っかからないホームページ
検索に引っかカラナイホームページ②
検索に引っかカラナイホームページ③
検索に引っかカラナイホームページ④
検索に引っかカラナイホームページ⑤
SP版-サイトフォルダの場所ヲ探す方法
SP版-背景色を変更する方法
SP版-文字のイロイロ変更方法
編集方法 / まとめ
いろいろな編集方法(質問から)
ホームページサンプル集
索引(タグ一覧)
編集に必要なソフト・参考書
バナー・タイトル用写真など販売
SEO
仕事
バナースペース
ビルダーのテンプレートが購入できます
freedomは
ホームページビルダー22で編集中