「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする

Photoshop ＞ Photoshop CS3

概要

　状態:- 　閲覧数:4,643 　投稿日:2013-05-20 　更新日:2015-01-02
・「Photoshop CS3」で、画像を円形に切り取り背景を透明にしようと思い試すも、なかなかうまくいかず
・原因は「楕円形選択ツール」と「楕円形ツール」を勘違いしていたこと
・毎日利用してるならともかく、利用頻度が低いと分からくなるよね

ツールによる操作の違い
・Illustratorならクリッピングパスで刳り抜くんだと思うけど、「Photoshop」「Illustrator」「Fireworks」の操作方法の違いが未だに理解できないー
・ちなみに、PHPで画像を丸く切り取る(png、gif指定すると背景透明)方法はこちら

2種類


・「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする方法は、大きく分けて2種類ある
1.円形選択した範囲を、新規ファイルにコピーする方法
2.選択した円形以外の部分を削除する方法

1.円形選択した範囲を、新規ファイルにコピーする方法

　閲覧数:617　投稿日:2013-05-20　更新日:2013-05-20

手順


1.円形に切り取りたい写真を表示

2.「楕円形選択ツール」をクリック
・左のツールウインドウの長方形選択ツールを長押しし選択
※「楕円形ツール」ではないので注意が必要

3.写真の上をドラッグし必要な範囲を選択
・正方円にしたいなら「SHIFT」キーを押しながらドラッグ

4.コピー

5.新規ファイルを開き、貼り付け

6.「png」または「gif」形式で保存

画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する

ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「Photoshop CS3」で、画像を円形に切り取り、背景を透明にする 81
2 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 48
3 Photoshop CS3 「全てのメニュー項目を表示する」 45
4 画像を小さくトリミングして綺麗にみせるため、PhotoShop CS3 で色調補正する 43
5 PhotoShop CS3で画像読み込み 43
6 PhotoshopCS3 で、テキストをアウトライン 42
7 「PhotoShop CS3」　と、「Vieas」　の違い 40
8 Fireworks で背景画像透明化 37
9 PhotoShop CS3でトリミング 36
10 PhotoShop CS3で、ドロップシャドウと、テキストを囲む色 35
11 「Illustrator CS3」で出力範囲指定 33
12 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 33
13 Twitter ヘッダー画像は、Fireworks CS3 で作成している 33
14 透明な文字を、短形に敷き、文字色として、短形の下の背景画像を表示させるやり方 32
15 Bootstrap3 で、固定ナビゲーションの下だけ背景色を指定 32
16 CSS3で背景色にグラデーションをつける 32
17 画像背景色を透明化するオンラインサービス 32
18 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 32
19 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 32
20 Chrome ブラウザで画像の DataURI を取得 32
2024/11/23 0:36 更新
週間人気ページランキング ／ 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード ／ 2進数 4
6 カラーコード ／ 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
7 RGBの種類 ／ ビットカラー | RGB(色) 2
7 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新