画像の任意の色を透過色にしたい
ブログのタイトル画像をアップロードしてみたんだけど・・
ブログなどをやっていると、タイトルの画像を凝ったものにしたい！と思って色々考えて作って、よしできた！とブログのタイトル画像をいざアップロード！これでトップページがかっこよくなった・・・はず。
しかし！
ブログの背景の色とタイトルの背景の色に食い違いがあってなんか余計カッコ悪くなった！ということがありませんか？
りんずです。
こんばんわぁ＞ω＜
今回、画像の任意の色を透過色にしたいということで、便利！なところを利用させていただきました。
画像背景透過処理
画像背景透過処理というページ
http://pcrice.web.fc2.com/alpha/
当サイトのタイトル画像はここで背景を透過色にしました。タイトル自体はAdobe Photoshop Elementsを使用しました。バージョンはさっぱりアップしていないので、いまだに8.0なんですが・・。2016年7月現在の最新版は14とか・・・。
で、でも結局フォトショップは初歩的な機能しか使ってないし！べ、別にいいもん！とか思いつつ・・
タイトルはただ、そこそこかっこよさげなフォントをフリーウェアで頂いてきて、それっぽく繋げた感じです。
タイトルやアドレス、ロゴマーク的なものを制作。ロゴマークを1から作りたい！というこだわりが多少あったんですが、とくにいいアイデアも思いつかないので、フォントにある「Webdings」や「Wingdings」を利用。最初使い道あるんかしらんなんて思ったんだけど、意外にロゴマーク的な目的に使えそう。
使いかた
当サイトのタイトル画像。
フォトショップでここまで作成。とりあえずうまく出来たと自画自賛しておきました。
しかし、これは背景色が白になっていて、ブログの背景が同じ白なら問題ないように思えますが、例えばちょっとデザインをリニューアルしたいかなーと思っていざ背景を黒にしました！となると黒色の背景にブログタイトルの画像の背景まわりだけ白色が残ってて、なんだかなぁ・・という気持ちになってしまいます。
なので、前述の画像背景透過処理のページで背景色（白色）を透過させます。
- ブラウザに透過処理したい画像ファイルをドラッグ＆ドロップします
作成した画像ファイルをただドラッグしてもってくるだけ。
- 透明にしたい色の場所をクリックします
背景を透明にしたいので、ロゴまわりの白い部分をクリックしました。これで背景が透明に処理されました。
画像が小さい、もしくは透明にしたい場所が細かいところだった、という場合は画像を拡大させることができます。
- 右クリックで名前をつけて保存で画像ファイルを保存します。
これで完成！
背景が透明になりました。
記事の背景も白色なもんで、見た目がさっぱり変わらない気もしますが、背景色がしっかり透明になっています。
ド忘れしたときの備忘録
画像の背景などを透明にしたい、と思ってフォトショップなどを起動しても、あれどうやるんだっけ・・・ってことがあったりするので、手間もかからず便利だったってことで、このサイトを利用させていただきました。
対応ブラウザにGoogle Chrome、Internet Explorer、Safari、Mozilla Firefox、Operaのアイコンがあり、推奨ブラウザがGoogle Chromeになっているようです。
ちなみに、Microsoft Egdeでもちゃんと処理できました。
