logo

1. インスピレーションを得る

  1. canva でデザイン検索
  2. (stable difusion / dale-2 を試してみる)商用利用可能
    clip-iconhttps://www.youtube.com/watch?v=V1_x8w9fHbs&t=18s
  3. syopify logo で検索

2. Figmaで作成

  1. コミュニティで検索　土台をコピー
  2. 台形編集
    1. コンポーネント、バリアント、マスク
  3. カラーコードについて
    1. 白、黒はデザインの世界では使われない
  4. ダークモードについて
    1. アウトラインを入れる
  5. 文字編集
    1. プラグイン　font picker
  6. logo + text
    1. auto layout
      1. hug，fill
        clip-iconhttps://www.figma.com/community/file/1030308171146621283

3. 出力

  1. フレームサイズについて
    1. 適切な余白について
    2. 　1/3は確保
    3. ソーシャルメディアのフレームサイズ
      1. figma templates
        clip-iconhttps://www.figma.com/community/file/779517575644450137/Social-Media-Templates
        clip-iconhttps://www.figma.com/community/file/902612470789123675/Social-media-template
      2. Figma help page
        clip-iconhttps://www.figma.com/templates/social-media/
      3. 投稿するときはサイズにも気をつける 日本語ページ
        clip-iconhttps://www.comnico.jp/we-love-social/social-media-image-sizes-guide
  2. png svg について
  3. 解像度
    • 900x900のgifをエクスポートしてから、gif変換ウェブアプリでリサイズすることで解像度が良くなった
    • 透明背景にしないで、黒背景にすることで、解像度が気にならない。
    • 余白なしverも作った
      clip-iconhttps://ezgif.com/

4. アニメーション

5. gif編集

  • 無限ループさせる 他、リサイズも可能
    clip-iconhttps://ezgif.com/loop-count/
  • ScreenToGifでgif画像の圧縮するときのオススメ設定 23MB→8MB ▲60%くらい圧縮できる。
  • 背景を透過させる設定 Figmotionで出力するアニメgifだと背景がついてきてしまう。そこで白背景を透明にする。

6. favicon ファビコン作成

clip-iconhttps://ao-system.net/favicon/