Cloudinary でロゴ入り合成写真を量産してみた

画像や動画のデジタルメディア管理・変換 SaaS、Cloudinary でウォーターマークとオーバーレイを簡単にやってみます。

#Cloudinary

#SaaS

#デザイン

Ito ma

2023.06.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudinary は、画像や動画、その他のデジタルアセットを管理、変換・最適化、そして配信まですべてできる SaaS です。

先日のブログで、複数のオーバーレイを重ねて、ロゴ入り合成写真を作り出しました。
このオーバーレイの変換パラメータでは、ベース画像のサイズに比例してサイズを決めるよう指定しているので、他のベース画像にも簡単に流用できます。

https://res.cloudinary.com/CLOUD-NAME/image/upload/{ベース画像の変換}/c_scale,l_cm_logo_black_600,**w_0.37,fl_relative**/o_70/g_north_east,**x_0.01,y_0.01,fl_relative**,fl_layer_apply/c_scale,l_test:hoya_s,**w_0.37,fl_relative**/g_south,fl_layer_apply/l_test:paw,a_-140/**w_0.25,fl_relative**/g_south_east,**x_0.05,y_0.01,fl_relative**,fl_layer_apply/v1600331668/{ベース画像のパス}

それにしても、変換パラメータが長すぎてややこしい…ということで、今回はこれを名前で登録して、他のベース画像にも適用して量産するまでの方法をご紹介します。

Named Transformation とは？

変換パラメータの組み合わせに名前を付けて登録できる仕組みです。

例えば、c_scale,g_south_east,l_logo,o_70,w_100,x_10,y_10 のような長い変換パラメータに「logo」という名前を付けて登録すれば、長いパラメータの代わりにt_logoだけで同じ変換が適用できます。

登録はアカウント単位なので、登録した Named Transformation はアカウント内のどの画像にも同様に適用することができ、ウォーターマークなど同じ変換を複数の画像に適用させたい場合に便利です。

変換パラメータを登録

Cloudinary コンソールから Named Transformation を登録します。

先日 Transformations の機能セットが一新され、 Named Transformation もこの一部となり操作画面が進化しています。APIでの方法は以前のブログより。

Add New をクリックしたら、Transformation Builder が起動します。
本来はここで変換を一つずつ設定してパラメータセットを作っていけばいいのですが、今回はもう変換パラメータが分かっているので、画面右の Quick Edit をクリックします。

適用するパラメータセットをダイアログに貼り付け、Apply 。

すると、プレビューのサンプル画像にきちんとオーバーレイが追加されていますね。ここで、画面右上の Save as Named Transformation をクリックします。

変換に関連のある分かりやすい名前を付けましょう。名前にはスラッシュ(/)、ダブルコロン(:)、アスタリスク(*)、ハッシュ(#)など使えない記号があります。

保存をクリックしたら、これで登録完了です！

いろんな画像に適用

では、登録した変換をいろいろ適用してみましょう。

https://res.cloudinary.com/CLOUD-NAME/image/upload/c_scale,q_auto,w_500/t_multi-overlays/v1686667393/abs2023/rotes_rathaus.jpg

https://res.cloudinary.com/CLOUD-NAME/image/upload/w_1000,ar_1:1,c_fill,g_auto,e_art:hokusai/t_multi-overlays/v1686667393/abs2023/conference_hall.jpg

https://res.cloudinary.com/CLOUD-NAME/image/upload/e_improve,w_300,h_500,c_thumb,g_auto/t_multi-overlays/v1686667393/abs2023/hall.jpg

登録した変換パラメータを付与するだけで同様の画像が量産できますね！

備考

複数の Named Transformation で適用することも可能

先ではすべてまとめて “t_multi-overlays” としましたが、オーバーレイを分けて登録しておき、URLに複数の登録済み変換パラメータを適用することももちろん可能です。

例）以下でそれぞれ登録し、続く通りにURLを指定

t_logo-overlay: c_scale,l_cm_logo_black_600,w_0.37,fl_relative/o_70/g_north_east,x_0.01,y_0.01,fl_relative,fl_layer_apply/
t_hoya-boya-overlay: c_scale,l_test:hoya_s,w_0.37,fl_relative/g_south,fl_layer_apply/l_test:paw,a_-140/w_0.25,fl_relative/g_south_east,x_0.05,y_0.01,fl_relative,fl_layer_apply