人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Photoshopで透明GIFの境界線を綺麗に作る方法を教えて下さい!

素材サイトさんの透明GIFを見ているととても綺麗に作っていらっしゃるので
それを目指して何回も作ってみたのですが、どうしても地の色がでてしまうか
ギザギザになってバックに背景が入るとじジャギーになってしまい綺麗ではないので
いい方法がありましたお教えください*

また、御存じの方はURL欄はダミーでも結構です〜(^-^)
ページがあれば一層嬉しいのです*

●質問者: earthlittlestar
●カテゴリ:ウェブ制作
✍キーワード:GIF Photoshop URL しゃる ギザギザ
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● crossingpoint
●60ポイント

透明gifではPhotoshopのレイヤーのように半透明な部分の表現ができません。

そのためPhotoshop等の透明gif書き出しのオプションでは「マット」という項目があり、背景や壁紙の色を想定した縁取りを作り、gifの本体と透明部分との境目を目立たなくする設定があります。

透明部分を持ったレイヤーを「Web用に保存...」する際に、マットの部分の色を指定してみてください。これを「なし」にしたままだとジャギーが出るtoumeigifになってしまいます。(これだと背景の色関係なく完全な透明gifとして扱えますが(^^;)

◎質問者からの返答

ご回答ありがとうございました!

透明gifの書き出しオプションのマットを以前も使ってみたのですが

いまひとつ綺麗にできずでしたので、仕方が悪いのでしょうか;;う〜〜ん;;

たまにイラストなどでも滑らかに、本当に透明GIFなのかなあ?とびっくりするぐらいに

綺麗にされているのを見ると単純な作りで綺麗に透明GIFを作れない自分の未熟さにうなだれています(笑)

もう一度、試してみます!ありがとうございました(^-^)!

(上の質問文、”嬉しいのです(嬉しいです)”や”じジャギー(ジャギー)”など

誤字が多くて恥ずかしいです(笑;;)


2 ● Rainmaker
●60ポイント

背景の色が出てしまう、と言うのはおそらく背景レイヤーに直接絵を描かれているか、もしくは背景色を保存時に

透明に指定しているのだと思いますが、

・背景レイヤーを透明にする(もしくは非表示にする)

・その上に別レイヤーで絵を描く

・Wab用に保存を選び、GIFを選ぶ

・「透明部分」にチェックを入れて保存

の手順は試されているでしょうか?

私はこれで問題なく出力出来ています。

◎質問者からの返答

ご回答ありがとうございました!

お教え頂きました通りに一度作ってみると綺麗な透明になりました(^-^)!

前あんなにうんうん唸って悩んでいたのが嘘のようです*

いつも透明画像の書き出しを使っていたのですが、web保存からでもできたんですね!

作り方としては、背景レイヤーは何も触らず、ひとつレイヤーを作り

背景画像を透明にするという設定で作っていたのですがいつもギザギザがでてしまっていたので

お教え頂け嬉しいです*ありがとうございました!


3 ● subesube
●60ポイント

http://super.sub.jp/index.shtml

基本的にGIFの透明化は1色しか行えないため縁にグラデーションを使わざるをえない球や円形の素材を作ってバック(キャンバス)の白を透明化すると質問通り縁がきたなくなってしまいます。

回避する方法としては、はじめから背景画像に似た色をバックに素材を完成させて透明化させるか素材を可能なかぎり拡大して背景と素材の色の境目をしっかり分けるかどちらかだと思います。(素材サイトさんは白バック用、黒バック用で分けて用意したりしますよね)

参考URLはダミーですがHP作成のお役立ちリンクにはっておきましたので参考までにどうぞ。

◎質問者からの返答

ご回答ありがとうございました!

やはり透明GIFを作るときはwebセーフカラーであらかじめ曖昧な色をなくし

ドット絵的な作り方をしていく方が綺麗にできるのでしょうか*頑張ってみます!

素材屋さんで白バック、黒バックと分けていらっしゃってもその境目の背景に合わす色がとても細くでているので

どうされているのかなあ?と思ってばかりでした(^-^)

URLもおつけくださりありがとうございました*

お教え頂いた方法でいろいろな形やものを作って試してみます(^-^)

きっとまた壁にぶつかってしまうと思うのですが、またもしそのときに宜しければ

お教え頂けましたらとっても嬉しいです!

皆様お教えくださり本当にありがとうございました!*

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ