photoshopでgif形式で、
ジャギーなしの角丸長方形を
簡単に作る方法を知りたいです。
ボタンを作りたいのですが、
角丸長方形gifにすると、
不透明度の影響のせいか、角部分にジャギーが入ってしまいます。
角にアンチエイリアスをなくし、
gifで作りたいと思いますが
(chromeなどで画像をクリックすると背景が黒なので
角の部分が白くジャギーが入ってわかりやすいと思います)
歩的かもしれませんが方法をご存知の方、
教えて頂ければ幸いです。
追記:すみません、
「web用として保存」の中を探していましたが、
photoshop最新バージョンだとどこに
アンチエイリアス」が
あるかどうか、見当たらなくて困っています。
もしだめそうなら、しきい値や2値で
角丸部分を2値になるように変更したりしようと考えております。
pngだとすごく楽ですが、どうしてもgifにしなければならないようです。
さらに追記:
みなさん、お返事が遅くなって申し訳ございません。
本当にpngで扱えればこんな苦労はしないと思います…。
普通ならpngで作成しているであろうことを理解しております。
やはり半透明ではgifでは扱えないこと、でもgifのやり方についてお話を伺いわかりました。
ありがとうございました!
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/13 02:24 編集
2018/10/13 02:58 編集
回答8件
0
確認ですが、角丸パスからgif出力ということでよろしいでしょうか?
パスでなかったら、パスの方がまずきれいです。
あとは、出力時のアンチエイリアスが入っていない可能性が。。
https://forums.adobe.com/thread/2424515
バージョン違いでも設定は類似あると思います。
投稿2018/09/30 04:24
総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
PNG8(透明部分あり)
PNG24(透明部分なし)
PNG32前投稿≒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総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/01 08:52
2018/10/03 05:37 編集
0
しつこいようですがすいません。
GIFは半透明が扱えないから汚いという主張は本来成り立ちません。
なぜなら、半透明が扱える形式はPNG32になってからです。
Web用の保存形式、きちんと使い分けてますか?
PhotoshopでもPNG24までです。
ですが、きれいな輪郭を出せるのは、PNGの方が色数が桁違いに豊富で、アンチエイリアスをかけているからにほかなりません。
もし私がやるなら、html側の背景色が固定で決まっているなら、マット設定で挿入して目立ちを防ぎます。
写真の場合は使えなくなりますがね?
今回のご提示のように黒背景で目立つことをさせたくないということであれば、クロマットを入れます。
しかし、そうすると、GIFボタンが黒背景に黒と意味のわからない事になってしまいますから、どういった想定で質問されたのかが、よりこちらでは難解となってきます。
どういったhtml状況での出力をお望み如何で、出力方法も設定方法も変わってまいりますので、あくまで確認をしております。
投稿2018/09/30 15:17
編集2018/09/30 16:04総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/01 07:32
2018/10/01 07:35 編集
2018/10/01 07:38
2018/10/01 07:50
2018/10/01 09:27 編集
2018/10/01 08:17
2018/10/01 08:53
2018/10/01 09:11
2018/10/01 09:13
2018/10/01 09:16
2018/10/01 09:54
2018/10/01 10:02
2018/10/01 16:00
2018/10/01 16:08 編集
2018/10/03 00:48 編集
2018/10/02 18:22
2018/10/03 00:50
2018/10/03 05:38
0
ネットのひろいもんですが。。
アンチエイリアス
アンチエイリアス オン・オフは、
そもそも、アンチエイリアスがディザを取る為の機能ですので、オンで、ディザが消えます。
オフでディザが残ります。
ですから、機能をオン・オフとディザのありなしは逆のことをおっしゃっております。
そして、透明化、インターレスされているので、シロは残りえません。
2値化することで、ギザギザが際立ちます。下の別投稿で2値化したものとくらべてみてください。
お疑いかと思い、きちんとGIF出力し、HTML上で乗っけてみました。
投稿2018/09/30 13:11
編集2018/09/30 13:36総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
もし、背景黒で、クロ角丸をお作りになるなら、ディザは目立ちますが、背景色は決まっているのですよね?
もしくは、写真か何かでしょうか?
ディザについては、誤差拡散が一番よろしいかと。
photoshop CC2017です。
誤差拡散法透明ディザ(photoshopでは透明を扱えてますね?)
*脱字訂正
あ、忘れてましたが、いずれも256値です。
背景に馴染む方法ということであれば、誤差拡散法透明ディザが今回は一番よろしいのかと。
しかし、出題者様の意図やご希望がはっきりしないため、どういった状況にGIFボタンを配置されるのかは確認した上で、解答を導き出すのがよろしいのではないかと。
現段階での、正解については、保留しときます争いの種になってるようですので。
*ディザがきれいか汚いかという点は白背景上のパット見だけではなく、今回のように黒背景では、、、という設定ですから言ってます。
画像クリックすることでchromeだと黒背景でご覧になれますでしょうからご確認を。意味がわかるはずです。見た目で
投稿2018/09/30 15:00
編集2018/09/30 15:56総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
投稿2018/09/30 13:21
編集2018/09/30 13:37総合スコア466
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
下記のような3つの2値の透明部分を持つgif画像を用意します
(上から 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ファイルです
右下はアルファチャンネルがないと黒なのですが
半透明効果によって白っぽく表示されているはずです
24と言いつつ
諧調を持つ半透明のアルファチャンネルが
しっかり保存されていることがわかります
たいへんアレなネーミングです
(ご存知の方ならヘッダを見れば詳細がわかると思います)
投稿2018/10/09 06:11
編集2018/10/09 06:18総合スコア284
0
ベストアンサー
投稿2018/09/30 04:50
編集2018/10/04 16:41総合スコア3047
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/30 05:02
2018/09/30 12:16
2018/09/30 13:01
2018/09/30 14:49
2018/09/30 14:56 編集
2018/09/30 15:15
2018/09/30 15:19
2018/09/30 15:34
2018/10/01 16:05
2018/10/03 03:01
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。