光沢のあるアイコンを作成しました

アイコン追加後の shinsuke.com トップページのスクリーンショット
アイコン追加後の shinsuke.com トップページのスクリーンショット

前日から続きます。光沢のあるアイコンの作り方を解説したサイトを検索したところ、確かに多くのサイトがヒットしたのですが、そのほとんどは Adobe の Photoshop を対象としたものでした。その上、デザインがあまり私の好みではありませんでした。

面白いところでは glossy.js という JavaScript も見つけました。これはページに配置されている img タグに glossy というクラスを設定しておけば、自動的に光沢のある画像に変換するというものです。残念ながら商用サイトでの利用は認められていないので、当サイトでは楽譜の販売も行っている以上、利用することはできませんでした。

仕方がないので、Paint Shop Pro を使ってアイコンを作る方法を、自分で確立する以外に道はなくなってしまいました。先ほどの glossy.js のおかげで、どういう操作をすればアイコンに光沢を出せるのかがよくわかりましたので、それを Paint Shop Pro での作業に置き換えました。同時に、glossy.js の出力が、ガラスというよりはプラスチック的な風合いになる点も改めました。

以上のような経緯で完成したのが、スクリーンショットの右側に映っているアイコン群です。僕が確立した方法はこちらのページにまとめておきましたので、よろしければご覧ください。

しかし、今ご紹介しましたページを書いている最中に、新たな問題点や、更なるクオリティの向上策を思いついてしまいました。そろそろ年賀状作りにも励まねばなりませんが、まだもう少しばかりアイコンの制作に時間を取りたいと思っています。


投稿日

カテゴリー:

投稿者:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です