ノーコード bubble 解説_ロゴを綺麗に表示

ロゴ、マーク、アイコンなど単純でパキッとした物を綺麗に表示したいなら拡大縮小しても綺麗な「SVG」scalable vector graphics(スケイラブル・ベクター・グラフィックス)で保存した物がおすすめです。

 

イラストレーターは勿論、Inkscape(インクスケープ、フリーソフト)でもsvgファイルが作れます。

Inkscapeのダウンロードから解説した「Inkscape1年生」はこちらです◎

サイトのロゴを綺麗に表示

 

bubbleで作ったサイトのsvg、png、gifの綺麗さ比較

1番上のガールがsvgで保存した物、次がpng、1番下のボーイはgifです。少し見えにくいですが1番上に比べて下の2つはぼやけてアウトラインも若干太く見えます。

 

表示をこのように大きく(250%)してもsvgは綺麗なままです。下のガールpngの画像サイズが5KBなのに比べて13KBと大きくはなります(svgの文字を入れたせいも、、)が微々たる物ですしサイトの顔となるロゴなどここぞという所に。

ちなみにsvgやpngは背景を透明にして保存する事も出来、この2つのガールはそうしています。

 

背景色を統一したい時、色の付いた背景の上に表示させたい時など便利です。BubbleでもGroupのBackground color〜を変更して

 

一気に変えられます。ボーイとワニは元々背景色付きの画像だったので影響しません。

 

イラストレーターは持っていないし、Inkscapeもダウンロードとかインストールとか大変そう

という方はアカウントを作るだけで良いスクラッチScratchのお絵かき機能で描くと言う手もあります◎

スクラッチでオリジナルキャラクターを作る_4

スクラッチの保存形式もsvgです。

スクラッチを保存してファイルの中身を見てみる