新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。
人によってはそれらを公開するだけでなく配布しているという人もいたので、個人的に目についたロゴデザインを再現したデザインリソースやCSSテクニックをいくつかまとめてみました。
もちろんデザインで使用する際など本来は公式のものを使用するべきですが、どのようにして再現しているのかなど覗いてみると新しい発見があるかもしれないので、興味ある人は見てみてください :)

Instagram Logo - Free PSD

Instagram Logo - Free PSD
Instagram Logo - Free PSD

形式:PSD

カラフル・モノクロ・アウトラインの3パターンのデザインがセットになっており、グラデーション部分で使用してるカラーパレットを一覧化したものも配布しています。

Instagram 2016 (FREE PSD)

Instagram 2016 (FREE PSD)

形式:PSD

Free Vector Instagram Logo

Free Vector Instagram Logo

形式:AI

New Instagram Logo.sketch

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形式でそれぞれダウンロードできます。

Close the search window,
please press close button or esc key.