質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Photoshop

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

Q&A

解決済

8回答

2287閲覧

photoshopで、gifでジャギーなしの角丸長方形を簡単に作る方法

aki_

総合スコア18

Photoshop

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

0グッド

0クリップ

投稿2018/09/30 04:18

編集2018/10/13 03:03

photoshopでgif形式で、
ジャギーなしの角丸長方形を
簡単に作る方法を知りたいです。

ボタンを作りたいのですが、
角丸長方形gifにすると、
不透明度の影響のせいか、角部分にジャギーが入ってしまいます。

角にアンチエイリアスをなくし、
gifで作りたいと思いますが
(chromeなどで画像をクリックすると背景が黒なので
角の部分が白くジャギーが入ってわかりやすいと思います)

歩的かもしれませんが方法をご存知の方、
教えて頂ければ幸いです。
イメージ説明

追記:すみません、
「web用として保存」の中を探していましたが、
photoshop最新バージョンだとどこに
アンチエイリアス」が
あるかどうか、見当たらなくて困っています。
もしだめそうなら、しきい値や2値で
角丸部分を2値になるように変更したりしようと考えております。

pngだとすごく楽ですが、どうしてもgifにしなければならないようです。

イメージ説明

さらに追記:
みなさん、お返事が遅くなって申し訳ございません。
本当にpngで扱えればこんな苦労はしないと思います…。
普通ならpngで作成しているであろうことを理解しております。
やはり半透明ではgifでは扱えないこと、でもgifのやり方についてお話を伺いわかりました。
ありがとうございました!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikadzuchi

2018/10/04 16:46

ちょっとどのような結果を望まれているのか分からなくなったのですが、私の回答の参考画像2を見てください。一番左が半透明を扱えるPNGの場合でこれはGIFでは不可能です。2番めが現状の白く縁が残る状態です。3番目と4番目が縁の色(マット色)を調整して背景色が合っている場合のみ綺麗に見えるものです。一番右がアンチエイリアス無しです。背景色が決まっているなら3,4番目、決まっていないなら一番右が妥当だと思いますが、どちらですか?
aki_

2018/10/13 02:24 編集

すごく詳しいご解説頂き、ありがとうございます。多少アンチエイリアスがなくなってギザギザになっても、背景色が残らないことが望みなので、一番右が望みの結果になります。
aki_

2018/10/13 02:58 編集

お返事が遅くなって申し訳ございません。 2値にする一番楽な方法はこちら側でさがすとして、 (角丸を2値にするとジャギーがなくなることがわかりました。※私はシェイプで角丸を作って、2値で一度保存するという方法をとりました…) ありがとうございました!!
guest

回答8

0

確認ですが、角丸パスからgif出力ということでよろしいでしょうか?
パスでなかったら、パスの方がまずきれいです。

あとは、出力時のアンチエイリアスが入っていない可能性が。。
https://forums.adobe.com/thread/2424515
バージョン違いでも設定は類似あると思います。

投稿2018/09/30 04:24

hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

PNG8(透明部分あり)
イメージ説明
PNG24(透明部分なし)
イメージ説明
PNG32前投稿≒PNG24(透明部分あり)
イメージ説明

つもりになっていた原因
イメージ説明

PNG24

PNG-24 形式はグラデーションなどの画像の圧縮に適しています。ただし、ファイルサイズは JPEG 形式に比べてかなり大きくなります。 PNG-24 形式を使用する利点は、画像内に 256 レベルの透明度を持たせることができることです。

アニメーションには対応していません。
FireworksではPNG-24は透過には対応していません。PNG-32が透過に対応しています。Photoshopでは両方まとめてPNG-24としているようです。透明部分にチェックを入れるとPNG-32になっているようです。(未検証)<

となっておりますね?
また、WEB用に保存の変更時期も、2015から?でしょうか?
8bitは半透明を扱えず、透過属性だけなので汚いでしょうか?こちらで様子を見たいと思います。

訂正ありがとうございます。

ただ、外野で強い言葉を使ってあげつらうよりも、
質問者さんのためになる解答を優先すべきではないでしょうか??

投稿2018/10/01 08:27

編集2018/10/02 18:22
hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

macaron_xxx

2018/10/01 08:52

>質問者さんのためになる解答を優先すべきではないでしょうか?? もちろんその通りでございます。 私は本件に対して回答を持ち合わせておりません。 しかしながら回答に事実でないことが含まれている場合は訂正することもまた質問者及び後学者のためになると思っています。 また、複数回答を投稿されていますが、編集して追記なされたほうが、後から見た方も見やすいですし、おすすめしますよ。
hectopascal1013

2018/10/03 05:37 編集

>しかしながら回答に事実でないことが含まれている場合は訂正することもまた質問者及び後学者のためになると思っています。 2値化に反対したものであり、事実ではないというのは曲解のような気がします。 投稿ごとにテーマを分けていますので。 質問者さんへの説明はすでに終わっていますが、他の方からのご指摘を頂いているので、分けたほうがわかりいいと判断しました。 透過属性については、CS時代からあり、PNG8,24でもサポートしています。 半透明属性がサポートされたのが32になってからで、こちらも、CS5の時代から、裏技的に保存方法があったというのが事実のようですよ?
guest

0

しつこいようですがすいません。
GIFは半透明が扱えないから汚いという主張は本来成り立ちません。
なぜなら、半透明が扱える形式はPNG32になってからです。
Web用の保存形式、きちんと使い分けてますか?

PhotoshopでもPNG24までです。
ですが、きれいな輪郭を出せるのは、PNGの方が色数が桁違いに豊富で、アンチエイリアスをかけているからにほかなりません。

試しにPNG24でも保存。
イメージ説明

試しに黒マット追加(256透明ディザなし0%です)
イメージ説明

黒マット(2透明ディザなし)
イメージ説明

もし私がやるなら、html側の背景色が固定で決まっているなら、マット設定で挿入して目立ちを防ぎます。
写真の場合は使えなくなりますがね?
今回のご提示のように黒背景で目立つことをさせたくないということであれば、クロマットを入れます。
しかし、そうすると、GIFボタンが黒背景に黒と意味のわからない事になってしまいますから、どういった想定で質問されたのかが、よりこちらでは難解となってきます。

どういったhtml状況での出力をお望み如何で、出力方法も設定方法も変わってまいりますので、あくまで確認をしております。

投稿2018/09/30 15:17

編集2018/09/30 16:04
hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

macaron_xxx

2018/10/01 07:32

photoshop(CC)ではPNG32を扱えます。 「透明部分」にチェックをいれた場合はPNG32になります。
hectopascal1013

2018/10/01 07:35 編集

あくまでPNG24の説明のために載せたものです。 CCについては、まだまだ私も勉強不足ですいません。 趣旨は2値化できれいになるということについての反対意見ですので、 趣旨を履き違えてしまわれたら申し訳なく。
macaron_xxx

2018/10/01 07:38

あなたが載せている画像の 「試しにPNG24でも保存。」 としている画像はPNG32です。 確認してみてくださいね。
hectopascal1013

2018/10/01 07:50

確認してみますが、24で保存しましたよ?そこで確認してから載せてますし。。 サーバーに上がる段階で情報が変化したのか?
macaron_xxx

2018/10/01 09:27 編集

PNG24には半透明情報(訂正前:透過情報)を持ちません。 現在載せている画像は明らかに半透明情報(訂正前:透過情報)を持っているPNG32です。 仮にサーバーに上がる段階でPNG24→PNG32になっていたとしても、このPNG32が半透明情報(訂正前:透過情報)を持ちえません。 あなたがPNG24で保存した"つもり"になっているだけです。
hectopascal1013

2018/10/01 08:17

一応確認しました。こちらでは絵が載せられないので別コメ投稿失礼しますね?
hectopascal1013

2018/10/01 08:53

https://helpx.adobe.com/jp/photoshop/kb/222990.html#anc_g 細かいようですが、透過PNGはCSの頃からあったようですね?やはり、半透明と透過を混同されたということでよろしいでしょうか。論理的には、間違ったことは言っていないと思います。揚げ足取りはご勘弁を。
macaron_xxx

2018/10/01 09:11

透過情報ではなく半透明情報ですね。訂正します。
hectopascal1013

2018/10/01 09:13

疑うわけではありませんし、評価目的でteratailさんの方にお邪魔いてるわけではありませんが、 揚げ足取りの情報で、ー評価がついてしまうということは正直傷つきますね。。。誤解であればすいませんと。
macaron_xxx

2018/10/01 09:16

>論理的には、間違ったことは言っていないと思います。 ①GIFは半透明が扱えないから汚いという主張は本来成り立ちません。 ②なぜなら、半透明が扱える形式はPNG32になってからです。 ③PhotoshopでもPNG24までです。 ④ですが、きれいな輪郭を出せるのは、PNGの方が色数が桁違いに豊富で、アンチエイリアスをかけているからにほかなりません。 ⑤試しにPNG24でも保存。(PNG32を提示) ①が結論です。 ②は正しい。 ③は間違い ④は正しい(ただし、ジャギーの多さという意味では正誤判断できない) ⑤は間違ったエビデンスを提示 論理的には破綻しています。
hectopascal1013

2018/10/01 09:54

3,5は認めていますが、 まだお続けに? PNG32対応が最近なら、半透明対応は近年ですよね? CSよりちょっと前の時代からPNG保存はされており、半透明疑似対応としての誤差拡散がでた。 だから、PNGでもアンチエイリアスをかけてるほうがきれいに保存される。 論理的には通っていることがまだおわかりにならず、揚げ足取りだけなら、それなりに私も対応しますよ? >つもりになってるだけだ とか強い言葉での凶弾は間違っていたことを貴方はお認めになられている。意趣返しに、他者の質問を汚すべきではない。
hectopascal1013

2018/10/01 10:02

すいません。精神衛生上よくないので撤退します。お答えは皆様で出してください。
ikadzuchi

2018/10/01 16:00

昨日低評価を付けて理由(PNG24=PNG32)を書こうとしたところで停電にあい、戻ってきたら既に説明されていますね。私からは特に付け加えることはありません。
hectopascal1013

2018/10/01 16:08 編集

残念ながら、PNG32の半透明属性の話が正しいからと言って、私の論理が間違いというのは飛躍ですよ。。 それならPNG8のアンチエイリアスがなぜアンチエイリアスオフよりきれいなのかが説明になってない。 反対派がどのように受け取るかはご勝手ですが、正しいことを排除してまで、自己弁護される姿には、何がしかの違和感を持ちます。論理的妥当性をそもそもわからないのでしょうか?
strictsilence

2018/10/03 00:48 編集

PhotoshopのPNGはアルファ値の8bitも考慮して32bit扱いですが、 ブラウザ対応によっては表示不可もありましたので、長らく、32bitとは呼ばれてきませんでした。 ニアイコールではありますが、完全な=ではありませんので、それを根拠に間違いだとかおっしゃるのは早計ではないかと思われます。 いずれにしろ解答はPNG NGなのではないでしょうか。 明後日の議論をしている方は信用できなくなりますよ?
hectopascal1013

2018/10/02 18:22

PNG32=24はそうではないというご指摘で、≒に訂正しました。
strictsilence

2018/10/03 00:50

ちなみにPNG自体は90年代後半からありました。 IE6が非対応で、透過対応は大変だったという話をしても、 今の子は爺が何いってんだ程度にしか思わないでしょうけどね。 PS7前後の時代です。 >Web用の保存形式、きちんと使い分けてますか? https://www.vanfu-vts.jp/blog/2017/03/save_for_web/ 出されているリンクで正解出てると思います。 背景色指定で暗色でもきれいなディザは可能です。
hectopascal1013

2018/10/03 05:38

大先輩ですね。訂正ありがとうございます。
guest

0

アンチエイリアスありなし

ネットのひろいもんですが。。
アンチエイリアス
アンチエイリアス オン・オフは、
そもそも、アンチエイリアスがディザを取る為の機能ですので、オンで、ディザが消えます。
オフでディザが残ります。
ですから、機能をオン・オフとディザのありなしは逆のことをおっしゃっております。
そして、透明化、インターレスされているので、シロは残りえません。
2値化することで、ギザギザが際立ちます。下の別投稿で2値化したものとくらべてみてください。
お疑いかと思い、きちんとGIF出力し、HTML上で乗っけてみました。

投稿2018/09/30 13:11

編集2018/09/30 13:36
hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

もし、背景黒で、クロ角丸をお作りになるなら、ディザは目立ちますが、背景色は決まっているのですよね?
もしくは、写真か何かでしょうか?

ディザについては、誤差拡散が一番よろしいかと。
photoshop CC2017です。

誤差拡散法透明ディザ(photoshopでは透明を扱えてますね?)
イメージ説明

透明ディザなし
イメージ説明

ディザ0%
イメージ説明

*脱字訂正
あ、忘れてましたが、いずれも256値です。
背景に馴染む方法ということであれば、誤差拡散法透明ディザが今回は一番よろしいのかと。
しかし、出題者様の意図やご希望がはっきりしないため、どういった状況にGIFボタンを配置されるのかは確認した上で、解答を導き出すのがよろしいのではないかと。
現段階での、正解については、保留しときます争いの種になってるようですので。

*ディザがきれいか汚いかという点は白背景上のパット見だけではなく、今回のように黒背景では、、、という設定ですから言ってます。
画像クリックすることでchromeだと黒背景でご覧になれますでしょうからご確認を。意味がわかるはずです。見た目で

投稿2018/09/30 15:00

編集2018/09/30 15:56
hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ディザありなし256値
ディザありなし

2値化
2値化

度々すいません。
一個バージョン古いですが2017で

左から
誤差拡散、透明ディザなし、ディザ0%です
ご提示画像でいうと、上から4,5番目の項です。
(ディザなしの場合、二階調で更に汚くなります。)

ただ、拝見するに、画像ではきれいにする為の要件満たしているように見えます。(階調下げ以外は。)
インターレスチェックが入ってれば、背景透明であれば本来問題ないはずです。

とすると、可能性があるのが、html側で呼び出す時に拡大縮小してしまっておりませんか?

投稿2018/09/30 13:21

編集2018/09/30 13:37
hectopascal1013

総合スコア466

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

下記のような3つの2値の透明部分を持つgif画像を用意します
(上から 64×64,128×128,256×256 となっています)
64×64
128×128
256×256

それを以下のようなhtmlファイルで
すべて64×64のサイズで並べて表示してみます
(背景はわかりやすいように薄い青にしました)

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body bgcolor="#CCCCFF"> 8 <img src= "64.gif" width=64 height=64 alt=""> 9 <img src="128.gif" width=64 height=64 alt=""> 10 <img src="256.gif" width=64 height=64 alt=""> 11 </body> 12</html>

これをChromeで開くと下記のように表示されました(2倍に拡大しています)
スクリーンショット
(SafariでもFireFoxでも同様でした、EDGEは不明です)

一番左の64×64以外はアンチエイリアスがかかっています!
これはブラウザさんが画像が表示サイズと異なる際に
リサイズのアルゴリズムにバイリニアやバイキュービックを使用しているためです
(CSSで、どのレンダリングアルゴリズムを使うかも指定できるようです)


ちなみに下記は「Photoshop7.0」で
「PNG-24」の設定で「透明部分」をONにして保存したpngファイルです
右下はアルファチャンネルがないと黒なのですが
半透明効果によって白っぽく表示されているはずです
MD5=0bcbfca068f1c4aa5788c39d961e200d

↓保存時の様子
イメージ説明

24と言いつつ
諧調を持つ半透明のアルファチャンネルが
しっかり保存されていることがわかります
たいへんアレなネーミングです
(ご存知の方ならヘッダを見れば詳細がわかると思います)

投稿2018/10/09 06:11

編集2018/10/09 06:18
e-cube

総合スコア284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aki_

2018/10/13 02:53

おお、大きな画像を縮小することで アンチをかけた様な綺麗な表示をすることも可能なのですね。 今回は拡大することもできませんが、 とてもありがたい情報をいただきました。
guest

0

ベストアンサー

2値化すればよいです。具体的な操作は分かりませんが、しきい値を決めて2値化する操作やインデックスカラーでパレットを2色にする操作があると思います。
(追記)あ、出力時のアンチエイリアスなんていう設定があるんですね。それを切ればよいと思います。

ただ、GIFである必要がなければPNGにするのが最も綺麗にできます。何かPNGを使えない理由があるのでしょうか。


参考画像2
マット色の説明


コメントの参考画像
コメントの参考画像

投稿2018/09/30 04:50

編集2018/10/04 16:41
ikadzuchi

総合スコア3047

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hectopascal1013

2018/09/30 05:02

アンチエイリアスが切れているからこそ汚いのでは?
ikadzuchi

2018/09/30 12:16

いえ、状況を見るに、アンチエイリアスされたせいで黒~白のグラデーションが出ているのが問題です。GIFでは不透明になるので。 このアンチエイリアスをどこかで切れればいいんですが、考えてみると「出力時の」アンチエイリアスは別物かも知れないですね…。
hectopascal1013

2018/09/30 13:01

白く残るのは背景をシロにしているからです。透明にしてれば残りません。その場合むしろ切れている方が汚いです。 別コメで画像貼りますね? おそらく、アンチエイリアスとは何かを正反対に議論しているのではないかと思われます。
ikadzuchi

2018/09/30 14:49

ええと、GIFは半透明を扱えないことをご存じないのでしょうか。
hectopascal1013

2018/09/30 14:56 編集

ええと、半透明は誤差拡散が一番よろしいかと。2値や透明ディザなしですと、問い合わせのように汚くなります。 別コメで確認を。2値にすることで、photoshopでは、ディザ機能がグレーアウトして使えなくなってしまうからです。どちらが正しいか?という議論ならば、私は間違っていないとは思いますが、貴方が正しいという意見だけを押し付けるのは、この場合質問者視点でのプラスにならないのではないでしょうか?水掛け論的に外野で争うのが一番不毛かと。 私が言っているのは、質問者さんの状態確認として、アンチエイリアスを出しました。 貴方はphotoshopの出力形式については、正確な情報提供ではないという点だけご指摘申し上げます。(貴方のご趣旨は理解した上で私は発言しているものです。)
ikadzuchi

2018/09/30 15:15

ああ、なぜアンチエイリアスと関係のないディザやインターレースの話をするのだろうと思っていましたが、ディザも半透明の一種ということですか。(インターレースは分かりませんが) それならそれとして、ディザをかけた方が綺麗になるというのは、私はそうは思いません。(画像参照)
hectopascal1013

2018/09/30 15:19

>ディザも半透明の一種ということですか。(インターレースは分かりませんが) 正確には異なります。誤差拡散法でお調べになるか、photoshopで実践をされるかをおすすめします。 >ディザをかけた方が綺麗になるというのは、私はそうは思いません。(画像参照) ディザをかけたら良いと入っておりません。誤差拡散法は、透明ディザの一種ですからね?半透明が扱えないがゆえの対処です。
hectopascal1013

2018/09/30 15:34

下記参照のことそこで画像で説明しておりますのでね。ご納得いただけるかと思います。 >もし、背景黒で、クロ角丸をお作りになるなら… 何がきれいか、の基準ですが、もし背景色を気にしないでの話なら、アンチエイリアスオンのディザなしがきれいですが、黒背景上では今回のように汚くなってしまいます。(シロマットでは)。 白マットで黒背景上できれいにするという条件付きならば、誤差拡散法です。 html背景色が固定で決まっているならば、マット色挿入で透明ディザでもいいでしょう。 背景が写真なら、コレまた、ボタン境界は汚くなりますが、透け度で言えば、誤差拡散、ある程度マット色が決まっているなら透明で近似色マットも行けるでしょう。 要は求められている案件に一番適した素材かどうかは、要求次第です。
ikadzuchi

2018/10/01 16:05

あなたの支離滅裂な文章を解釈するのが大変なので、撤退されるようですしもう反論返さなくていいですかね…。
hectopascal1013

2018/10/03 03:01

そうですか、分かりづらいようですいません。訂正依頼入りましたので訂正しました。ご気分害してしまったら申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問