簡単ホームページ作成ツールならAMS - ホームページ初心者のための無料サービスをご紹介

サイト制作代行+初年度利用料で…たったの48,000円!詳しくはこちら
石川県内の地域情報プラットフォーム れじおん(レジオン)

初心者でも写真・画像切り抜きが簡単にできる方法(やり方・フリーソフト)

写真・画像切り抜く方法【無料・初心者向け】



バナー作成のときに「人」や「物」を切り抜いて
「貼り付けたい」と思うことがよくあると思います。

ホームページ初心者の場合
(イメージはあったとしても)
どうすれば具体化できるのか

という部分に悩みがあります。

外部の業者に依頼したり
高額なソフトを買うことなく

「無料」で「簡単」に写真画像を切り抜く・加工する方法になります。

ただ無料で簡単という条件つきですので
複雑な形のもの(人物の髪の毛など詳細な部分)

「本当にきれいに」切り抜きたい
「大量に」切り抜きたい


そんな場合は外部に依頼
またはPhotoShop(有料ソフト)が必要になる
と思います。

例えば最新のPhotoShopを利用すれば簡単に
人物などの複雑な形を切り抜くことができます。

参考:『超簡単! 髪の毛の画像を1分で切り抜く方法まとめ』


目的をもう一度確認しますが

「ホームページ初心者」が
「無料」で「数点」の画像を
「比較的きれいに」切り抜く方法・コツ
について説明します。

 初級編 

まず、使うツールはこちらです。

このホームページ作成ツールはホームページ編集画面内に
画像加工機能がついているので、
ホームページ初心者の方には最適です。

例えば、下記のように画像を切り抜く場合にも
カーソルをハンドルに合わせて、上下左右に移動し、
好きなサイズに切り抜くことができます。

gazoukiritori.jpg
 

また、下記のような加工もボタン一つで可能です。
image_processin4.jpg image_processin5.jpg
image_processin6.jpg image_processin7.jpg
image_processin8.jpg image_processin9.jpg
image_processin10.jpg image_processin11.jpg

以上が「ホームページ作成ツールAMS」を利用した場合の
切り抜き・加工についてでした。

また、もう少し自由な形・複雑な形に切り抜きたい場合には
下記の中級編を参考にしてみてください。

具体的な内容としては

■基礎知識「透過PNG」について
■5ステップでわかるフリーソフト「鋏」の使い方
■複雑な形を一気に切り抜く「手軽に透明png」の使い方


になります。

 中級編 

■基礎知識「透過PNG」


ゴールがバナーを作成する際に重ねて使用する
「人」や「物」を切り抜くこと、とした場合に

切り抜かれた(背景がない画像)のことを

「透過PNG」

といいます。

ホームページ初心者がの場合は
普段利用している画像では

「JPEG」「GIF」「PNG」になると思います。

この3つの違いについては
こちら「WEB画像について」を参照してみてください。

参考URL:http://www.htmq.com/gazo/index.shtml

サンプルとして


「JPEG」画像(背景があるもの)と

背景がある画像

「透過PNG」画像(背景がないもの)を

背景がない画像

を比べてみてください。


バナーに切り抜いた画像を貼り付けるためには
(ホームページ初心者のための必要知識として)
「透過PNG」が必要であるということを確認してください


■「透過PNG」の作り方(切り抜きたい場合)


ここではフリーソフト「鋏」を使います。

※Windows XP以外の環境では動作しない可能性があります

ダウンロードは下記のページからできます。

フリーソフト「鋏」

参考URL:http://book.geocities.jp/gardeniainslumber/


「scissors.zip」をクリックすると
zip圧縮されたデータがダウンロードされるので解凍してください。

解凍したフォルダの中身は下記の通りです。

切り抜きソフト「鋏」

「お読み下さい.chm」は「扱える画像」や「使い方」の説明になります。
「鋏.exe」をダブルクリックするとソフトが起動します。


メニューバーには左から(アイコンで)

「開く」・・・編集したい画像を開く(読み込む)
「保存」・・・編集した画像を名前をつけて保存する
「やり直し」・・・ひとつ前の状態に戻す
「各種処理」・・・切り抜き方や画像の処理について

切り抜きソフト初期画面

とシンプルになっています。


■フリーソフト「鋏」の使い方・切り抜きのコツ


「使い方」という説明方法はありますが
文字だけでは使い方(切り抜き方)のイメージが
つかみづらい
ので実際に使ってみましょう。

次に説明する「5つのステップ」マスターすることで
ホームページ初心者であっても(プロとはいわないまでも)
必要最低限の写真や画像の切り抜き・切り落としができるようになります。


ステップ:1.「開く」をクリックし切り抜きたい画像を選択する(=読み込む)

切り抜きたい画像を選択

ここで切り抜きたい形がきまっているなら

型抜きを選択

「各種処理」 → 「型抜き」 → 「(形を選択)」

して(ここではハート型を選びます)

画面左上にでてくるマークの

「大きさを確定」させて

ハートで型抜き

上記例だとハートマークの右下にある
(赤マルで囲まれた)小さな四角を
クリックしてドラッグすることで
「切り抜きの大きさの変更」ができます。

大きさを確定させた後
小さい四角以外の部分をクリックして
切り抜きたい場所へ移動させます。

そして

コントロールボタン(キーボード左下や右下にある「Ctrl」)
を押しながら


ハート型抜きを移動

(上記、赤四角の範囲)
四角部分をマウスでクリックすると

ハート型で切り抜き

このように型どおりに
「外切り落とし」ができます。


ですが、

背景がない画像

上記切り抜き画像のように
型ではない形(=自由な形)に

切り抜きたい
という場面が多いと思います。

そのような場合は

ステップ:2.「各種処理」をクリックして「切り落とし方」を選択する

この「切り落とし方」というのは

・外切り落とし
・内切り落とし

の2種類になります。

たいていは「外切り落とし」になると思うので
ここでは「外切り落とし」をクリックした形で説明を進めていきます。


ステップ:3.はじまりの点「始点」を決める

外切り落としを選択したあと画像の部分を
クリックすると切り抜きの「始点」が決まります。

実はこの「始点」が大事です。

フリーソフト「鋏」の使い方のコツですが

最終的に線と線を交わらせたあと
「コントロールボタン」をクリックすることで
切り抜かれる
ので「始点」は

なるべく切り抜きたいものとピッタリにしないほうが
初心者には切り落としやすくなると思います。

フリーソフト切り抜きの使い方のコツ

あとは「切り取り線」をダブルクリックして確定させていき
(曲線部分は、普通のクリックで進めていくほうが楽)

最後に下記のように「線」と「線」を交わらせたあと

切り抜きたいポイントで終わらせる

コントロールボタン(キーボード左下や右下にある「Ctrl」)
を押しながら、クリック
することで

「外切り落とし」が完了します。

画像を切り抜く

ステップ:4.「背景透過」ボタンをクリック

あとは「背景透過」ボタンをクリックすることで

背景透過させる

「透過PNG」

が完成します。


ステップ:5.もう少し切り抜きたい場合

ここで注意点は、
(フリーソフト「鋏」を利用する場合)

一度作ってしまった「透過PNG」を
もう一度加工することができない
という部分です。

中をもう少し切り抜きたい場合について
以下、説明していきます

もし「背景透過」ボタンをクリックしていた場合は
「やり直し」をクリックして

「3」の切り落としが終了した状態に一度戻しましょう。

次に「各種処理」 → 「内切り落とし」を選択します。

※フリーソフト「鋏」の内切り落としの使い方になります。

内切り落とし

そして
内切り落としのやり方

上記画像のように始点(赤マル)から終点(青マル)まで引き
コントロールボタンを押しながら、クリックすることで

写真を内切り落とし

このように写真画像を切り抜くとができます。

また下記のように
中身を切り抜くことができます。

画像の中身くり抜き

※中身を切り抜き落としたい(=くり抜きたい)場合は
 線と線をきっちり結ぶ必要があります。

必要な切り抜き処理が終了したら
「背景透過」ボタンをクリックすることで

「透過PNG」

が完成します。

画像の中身くり抜き

名前をつけて「保存」することで作業は終了します。


■境界が明確なものを切り抜きたい場合


例えば次の画像のような
「境界(の色)」が明確なものの場合

(城と空を切り抜いて「透過PNG」を作りたい)

城と空の画像

フリーソフト『手軽に透明png』
参考URL:http://www.officedaytime.com/toumei/index.html


を利用すると初心者でも
写真・画像切り抜きが簡単に行えます。

上記参考URLの下部から
無料ダウンロードができます。

手軽に透明pngの使い方

赤マルで囲んだ機能
・塗りつぶしモード
・四角形モード

青マルで囲んだ部分(誤差許容度)で
どの程度まで認識させるかを調整することで
切り抜いて「透過PNG」を作成できます。

四角形モードは、その名の通り
「四角形」で透明にしていきますし

塗りつぶしモードは
(境界が明確な部分を)クリックするだけで
自動的手に「透明」に塗りつぶします。

色の境界が明確な場合は、下記画像のように
一気に写真や画像が切り抜けるので便利です。

簡単に透過PNG

塗りつぶしモードのポイントは
「誤差許容度」の数字調整
ですので

うまくいかない場合は

「一つ前に戻る」ボタンを押しながら
最適な「誤差許容度」をつかむことがポイント
です。
※上記の空切り抜きは誤差許容度60でうまくいきました

名前をつけて「保存」することで作業は終了します。

以上、中級編としてご紹介しましたが、
この2つのソフトを使いこなせば
ホームページ初心者でも簡単に「透過PNG」を作り
思うようなバナーが作れるようになります。


ただ複雑な形のものに関しては技術が必要ですので
「自分で可能か?」「外部に任せたほうがいいのか?」
その見極めが大切だと言えます。

※アクセス先の情報は公開時点の情報です。コンテンツ内容の実施につきましては、ご自身の責任のもと安全性・有用性を考慮してご利用いただくようお願い致します。外部ウェブサイト・アプリ・ソフト利用によって生じた損害に対しての責任は一切負いかねますので、予めご了承下さい

まずは無料で操作感をチェック!簡単ホームページ作成ツールAMS:FREEプラン >

もしこの記事がお役に立てれば、下記ボタンから共有頂けると運営の励みになります。



AMS簡単ホームページ作成ツール

AMSで作成したあなたのサイトをPRしましょう!

AMSマニュアル

よくある質問と回答

はじめてのAMS

このブログ記事について

このページは、AMSスタッフが2012年11月14日 08:58に書いたブログ記事です。

ひとつ前のブログ記事は「12ステップでホームページが完成!知識0の初心者でも作れるホームページの作り方」です。

次のブログ記事は「申し込み電話がかかってくるホームページ:6つの改善項目」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

カテゴリ