大島学習塾のブログ

モーションロゴを作ってみました!
2020年9月10日
大島学習塾のロゴを、流行りの「モーションロゴ」にしてみました!
GIFアニメーション版も作ってみました。こちらです:
大島学習塾モーションロゴ(gif)
ひとまず、当サイトのトップページに設置してみました。

ホームページ以外にはあまり使い道はなさそうですが、SNSなどで使えるシーンがあれば使っていこうと思います。

このアニメーションは、ホームページを表示しているのと同じ、PHP(Hypertext Preprocessor)とCSS(Cascading Style Sheets)という技術を使って作られています。

少し専門的な(?)話になりますが、当塾のロゴマークはSVG(Scalable Vector Graphics)という画像フォーマット(拡張子は.svg)で作られています。
これはAdobe Illustratorというお絵かきをするソフトで作ることができます。
この画像フォーマットの特徴は、デジカメ等で撮った写真などと違い、拡大してもギザギザにならずにキレイに表示されることです。
画像ファイルの中に「この座標にこういう曲線をこの線の太さで描く」のように図形のデータが入っており、拡大率にあわせて画面表示されるので、キレイに表示されるというワケです!

今回は、もともとあった塾のロゴマークのSVG(を少し加工したもの)を、ホームページを記述しているPHPに取り込み、それをCSSのアニメーション機能で動かすという方法でモーションロゴを作成しました。

もともとこういうものを作るのが好きだし、いろいろやり方を調べたりして作っていくのは楽しいです^^
SNSでシェア!
コメントを残す
お名前
メッセージ