背景が透明なアイコンを作る。 [ブログカスタマイズ]
私の希望は・・・
○自分でアイコンを作りたい!
○背景は透明にしたい!
○PCにインストールされているソフトで済ませたい!
(新たにソフトを買いたくない!)
○子供でもわかるような方法で!
というわけで・・・
1キロバイトの素材屋さん の「アイコンの作り方」を参考に
我が家のPCに入っているソフトと格闘した結果、
以下2つのソフトでできることがわかりました。
■Microsoft Windows(アクセサリの中)に付属されている「ペイント」
■Microsoft Office(XP以前のみ)に付属されていた「Microsoft Photo Editor」
ここでは私なみへいのプロフィール画像を使ってご説明します。
①まずはイラストを描くため、ペイントを起動。
②適当なキャンバスサイズにしておきます。
⇓
③いわゆる「ドット絵」で描いていきますので、800%の拡大表示、
グリッドを表示にしておきます。
④実寸表示で確認しながら描くとわかりやすいです。
⑤描いていきます。
キャンバスの大きさに合わせて描く場合は、その枠の中で修整して
いかなければなりませんが、特に決めていない場合は②の方法で
キャンバスを大きくするか、ポインタをドラッグして広げてください。
⑥描き終わったら、キャンバスの大きさを調整します。
⑦「背景」の部分をイラストと区別するため、イラストで使っていない色を
背景色にしておきます。ここではグレーにしました。
白のままでも構いませんが、イラストに白が使われているとその部分も
透過されます。
⑧画像を「24ビット ビットマップ(.bmp)」で保存します。
⑨続いては背景の透過処理をするため、フォトエディタを起動。
⑩赤の矢印で示した所をクリックするとペンのポインタが表示。
⑪透明にしたい所をクリック。
⑫透明感を少なくしたい場合はパーセンテージを小さくします。
⑬透過された部分が(わかりにくいですが…)チェックで表示されました。
⑭必ず「PNG形式(.png)」で保存します。
イラストの代わりに色でやると、透明感のある背景素材が作れます。
ちなみに、このブログの記事やサイドバーの背景は「白・透過性60%」に
なっています。
ただし、Windows Internet Explorer 6 以前のバージョンでは
表示されないようです。
表示させたい場合にはその方法を紹介されている方がたくさん
いらっしゃいますので、申し訳ありませんが検索していただいて
ご自分に合った方法でカスタマイズしてみてくださいね。
※フォトエディターがない方には・・・
N Galleryさんの 「ペイントTips」でWordを使って透過させる方法が紹介されてます。
ちょっと手間は掛かりますが、ご参考までに。(7/2追記)
○自分でアイコンを作りたい!
○背景は透明にしたい!
○PCにインストールされているソフトで済ませたい!
(新たにソフトを買いたくない!)
○子供でもわかるような方法で!
というわけで・・・
1キロバイトの素材屋さん の「アイコンの作り方」を参考に
我が家のPCに入っているソフトと格闘した結果、
以下2つのソフトでできることがわかりました。
■Microsoft Windows(アクセサリの中)に付属されている「ペイント」
■Microsoft Office(XP以前のみ)に付属されていた「Microsoft Photo Editor」
ここでは私なみへいのプロフィール画像を使ってご説明します。
①まずはイラストを描くため、ペイントを起動。
②適当なキャンバスサイズにしておきます。
⇓
③いわゆる「ドット絵」で描いていきますので、800%の拡大表示、
グリッドを表示にしておきます。
④実寸表示で確認しながら描くとわかりやすいです。
⑤描いていきます。
キャンバスの大きさに合わせて描く場合は、その枠の中で修整して
いかなければなりませんが、特に決めていない場合は②の方法で
キャンバスを大きくするか、ポインタをドラッグして広げてください。
⑥描き終わったら、キャンバスの大きさを調整します。
⑦「背景」の部分をイラストと区別するため、イラストで使っていない色を
背景色にしておきます。ここではグレーにしました。
白のままでも構いませんが、イラストに白が使われているとその部分も
透過されます。
⑧画像を「24ビット ビットマップ(.bmp)」で保存します。
⑨続いては背景の透過処理をするため、フォトエディタを起動。
⑩赤の矢印で示した所をクリックするとペンのポインタが表示。
⑪透明にしたい所をクリック。
⑫透明感を少なくしたい場合はパーセンテージを小さくします。
⑬透過された部分が(わかりにくいですが…)チェックで表示されました。
⑭必ず「PNG形式(.png)」で保存します。
イラストの代わりに色でやると、透明感のある背景素材が作れます。
ちなみに、このブログの記事やサイドバーの背景は「白・透過性60%」に
なっています。
ただし、Windows Internet Explorer 6 以前のバージョンでは
表示されないようです。
表示させたい場合にはその方法を紹介されている方がたくさん
いらっしゃいますので、申し訳ありませんが検索していただいて
ご自分に合った方法でカスタマイズしてみてくださいね。
※フォトエディターがない方には・・・
N Galleryさんの 「ペイントTips」でWordを使って透過させる方法が紹介されてます。
ちょっと手間は掛かりますが、ご参考までに。(7/2追記)
ペイントはよく利用しますが
自分でイラストを作るとは思いませんでした~。
点でイラストを作っているとは知っていましたが
ペイント内にもあったんですね~無知でした(≧∀≦)
出来たらヘッダーを作りたいですが
幅770ともなると確認しづらいですね( ≧Д≦ )
没頭しすぎて肝心なブログがアップできなくなりそうです(笑)
透過させるのはxp以前のものなんですね。。。
我がPCには見つかりませんでした。
ペイントで出来たらいいのに・・・なんて( ´艸`)
また、こちらにも遊びに来てくださいね!!!
by usaco (2010-07-01 21:27)
⇒ usacoさんへ
私もグリッド線が出せるなんて全然知りませんでした!
でも意外と大変[汗汗]
感覚で描いていると左右対称になってなかったり・・・。
透過ですが、実はwordで出来る方法もあります。
http://homepage3.nifty.com/graphics/tips/paint05.html
こちらも試してみましたができました♪
ご参考までに。
たくさんのnice!本当にありがとうございました[ラブラブハート]
これが最後…ですね。
もちろん!これからも遊びに行きますよ~[__パー]
これからもよろしくお願いします!!
by なみへい (2010-07-02 11:39)
見ました♪
wordなら出来そうです♡
本当にソネではお世話になりました♡
また新たによろしくお願いしますヾ(o´∀`o)ノ
ブログに載せるかは?ですが
ちょいと暇つぶしに頑張ってみます!!!
by usaco (2010-07-02 23:28)
⇒ usacoさんへ
引き続きコメントありがとうございます♪
現在のデザインで十分カワイイですけど
イベントの季節が近づくと…(笑)
ぜひぜひトライしてみてくださいね~(^o^)/
by なみへい (2010-07-03 14:02)
沒有醫生的處方
how much does a cialis cost http://kawanboni.com/ Cialis 20 mg
by Viagra cialis levitra (2018-04-14 01:09)
<a href="http://pinkwire.7m.pl/news/107-okisheva-vera-skachat-knigi-besplatno-bez-registracii.html#">Окишева вера скачать книги бесплатно без регистрации</a> программа для удаления флеш плеера скачать бесплатно <a href=http://arvara.7m.pl/posts/642-instrukcija-po-ohrane-truda-dlja-dezhurnyh-po-obschezhitiyu.html#>Инструкция по охране труда для дежурных по общежитию</a>
<a href="http://onglanab.7m.pl/articles/184-zolotoi-klyuchik-skachat-knigu-besplatno-fb2.html#">Золотой ключик скачать книгу бесплатно fb2</a> приложение гитара про скачать <a href=http://agviter.7m.pl/articles/283-new-headway-beginner-skachat-besplatno-pdf.html#>New headway beginner скачать бесплатно pdf</a>
http://kittbirthhofs.7m.pl/news/14-instrukcija-kak-luchshe-vyebat-babu.html
а
by RogerLew (2018-09-05 14:34)
<a href="http://canadianpharmacyies.com/#">canadian pharmacy online</a> drugs for sale on internet <a href="http://canadianpharmacyies.com/#">canadianpharmacyies.com</a>
canadianpharmacy <a href=http://canadianpharmacyies.com/#>http://canadianpharmacyies.com/</a>
canadian pharmacy meds http://canadianpharmacyies.com/
<a href=http://canadianpharmacyies.com/#>canada pharmacy online</a>
п»їhttp://iluvglhec.biz/__media__/js/netsoltrademark.php?d=canadianpharmacyies.com
<a href="http://villagelandingheritagecenter.org/__media__/js/netsoltrademark.php?d=canadianpharmacyies.com#">canadian drug store</a>
http://rndschool61.org.ru/bitrix/rk.php?goto=http://canadianpharmacyies.com/
<a href="http://excavator-hyundai.ru/bitrix/rk.php?goto=http://canadianpharmacyies.com/#">canadianpharmacyusa24h</a>
by DouglasSnart (2018-11-29 01:52)