少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。人によってはそれらを公開するだけでなく配布しているという人もいたので、個人的に目についたロゴデザインを再現したデザインリソースやCSSテクニックをいくつかまとめてみました。もちろんデザインで使用する際など本来は公式のものを使用するべきですが、どのようにして再現しているのかなど覗いてみると新しい発見があるかもしれないので、興味ある人は見てみてください :)
Instagram Logo – Free PSD
形式：PSD
カラフル・モノクロ・アウトラインの3パターンのデザインがセットになっており、グラデーション部分で使用してるカラーパレットを一覧化したものも配布しています。
Instagram 2016 (FREE PSD)
形式：PSD
Free Vector Instagram Logo
形式：AI
New Instagram Logo.sketch
形式：SKETCH
Instagram’s new logo in CSS
HTMLとCSSを使ってロゴデザインを作ってみたもので、複雑なグラデーションもradial-gradientを利用して綺麗に再現されています。
See the Pen Instagram’s new logo in CSS by Monir Abu Hilal (@monir) on CodePen.
New Instagram Logo in CSS3
ちょっとアニメーションがあれですが、同じくHTMLとCSSを使ってロゴデザインを作ってみたものです。
記述の感じなど先ほどのものとは異なりますが、こちらも複雑なグラデーションも綺麗に再現されています。
See the Pen New Instagram Logo in CSS3 by Alexey Smelyanets (@amoralov) on CodePen.
ちゃんと公式のデザインデータを使用すると時は以下よりダウンロード可能で、GlyphはEPSとPNG、カラフルなApp IconはPNG形式でそれぞれダウンロードできます。