Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
496 lines (297 sloc) 20.2 KB

Sporticon design guidelines

Table of Contents

English
日本語 (Japanese)

General

Anatomy
  1. Stroke
  2. Corner
  3. Interior Corner
  4. Bounding Area
  5. Offset

Icon Anatomy 1

Icon Anatomy 2

Icon Anatomy 3

Artboard
  • Design on 480x480px Artboard with the appropriate grids.

    Artboard Template
  • Design all icons with motions towards the right.

    Design all icons with motions towards the right O Design all icons with motions towards the right X
  • 2 Ball sizes available when applied with tools or environment:

    • 300px
    • 200px
    2 Ball sizes
Corners
  • Corner radiuses are 8px by default.

    Corner radiuses are 8px O Corner radiuses are 8px X
  • Except for icons that contain:

    • Overlapping paths (lines that crossover one another) eg. net-like shapes, X shape, etc.
    • Environment shapes that mask other shapes. eg. water, sand over the boat
    • Balls with strokes.
    Except O Except X
Icon & Text combinations
  • All sports icons have their own specific margins so they look consistent with the other icons. Please align to the center of the icon when using the icon with text.

    Icon with Text O Icon with Text X
Position of stroke
  • As a general rule, align the stroke to the center when creating an icon with paths (pen tool).

  • However, if the center alignment of the path causes the icon to go beyond the boundary, or if there is an unbalance between the path and fill, please use Inside Stroke.(ex: Ball).

    Stroke O

Human form icon

  • Keep the body and legs separated.

    • Exception for wheelchairs
  • Align paths to the grids

  • Set Stroke options at:

    • 20px
    • Align Center stroke
    • Rounded cap, corner
  • In case of rotations, rotate at an angle of

    • 325°
  • With Ball:

    • 60px x 60px
    • 20px offset
  • With Tools:

    • 20px offset
    Keep a division between the body and legs O Keep a division between the body and legs X

Ball icon

  • Ball outline stroke:

    • 30px
  • Inside Ball paths:

    • Simple designs 30px
    • Complex designs 30px
    Ball outline stroke

Tools icon

  • Set Stroke options at:

    • 20px
  • In case of rotations, rotate at an angle of

    • 325°
  • Ball:

    • 60px x 60px
    • The ball can be placed in 3 places using the guide, choose the best one to balance the icon.
  • Offset

    • 20px
    Offset Angle O Offset Angle X

Rackets

  • Set height of the racket to the top and bottom guide baseline

  • Set Racket on angle of

    • 325°
  • Ball placed on the left of the tool

    3 places O 3 places X

Stick

  • Set height of the tool to 30px from the top and bottom of the guide baseline

  • Set stick on an angle of

    • 325°
  • Ball can be placed on either side

Environment icon

Beach Sports

  • Use the Sand asset

  • Place the Sand asset 10px from the baseline of the guide

  • Sand asset offset is 20px

    • In case of using a person, apply the offset to the right leg
    Beach Beach Leg O Beach Leg X Sand Offset O

Water Sports

  • Use the Water asset

  • Place the Water asset 30px from the baseline of the guide

  • Water asset offset is 20px

    Water Sports Wave Offset O Wave Offset X

Floor

  • Floor can be used anywhere the floor is a special feature of the sport eg. hard surfaces

    Floor O Floor X

Wall / Glass

  • Wall/Glass asset is placed on the top left corner of the guidelines

  • If tools are placed above the wall/glass, apply offset to tools and delete the remaining parts of the wall inside the tool eg.

    Wall Wall Offset O Wall Offset X

Multi Category Sports

  • Contain icon within 30px stroke circle

  • Apply 30px offset to inside of circle

  • Use a general, easy to understand symbol to encapsulate the meaning of the sport

    Multi O Multi X

Adding Symbols

Only apply symbols in cases where the sport icon alone is difficult to interpret the sport.

    1. Category (people, ages, environment)
    • Place at the top right corner
    • Symbol size: 140px with an offset of 20px
    • Examples: 9 man volley, Snow Volley
    1. Rules (Country)
    • Place at the bottom right corner
    • Symbol size: 140px with an offset of 20px
    • Examples: Canadian football, Australian football
    Symbol Guide Rules O Category O Category X Rules X Symbol X

基本事項

アイコンの作成ポイント

  1. 角丸
  2. 内側の角
  3. マージン
  4. オフセット

Icon Anatomy 1

Icon Anatomy 2

Icon Anatomy 3

レイアウト

  • 作成するアイコンに沿った適切なテンプレートを使用してください

    • アートボードのサイズ
      • 480x480px
    Artboard Template
  • すべての動作が右に向かうように作成する

    Design all icons with motions towards the right O Design all icons with motions towards the right X
  • ボールとツールを一緒に使用する場合は、ボールのサイズを大・小の2種類の内から使用する

    • 300px
    • 200px
    2 Ball sizes

角丸

  • 原則的に全てのパスに8pxの角丸をつけること

    Corner radiuses are 8px O Corner radiuses are 8px X
  • ※以下の場合は除く

    • ボールの線

    • Environmentのマスク

      • ex) Wave, Sand
    • 重なり合ったパス

      • ex) X
    Except O Except X

アイコンとテキストの組み合わせ

  • テキストを併用する場合は、アイコンの位置をすべて真ん中に来るようにする

    Icon with Text O Icon with Text X

線の位置

  • 基本的に「真ん中」に設定した状態で作成する

  • ただし、線が真ん中になることによってガイドからパスが出てしまう場合や、パスの線と塗りのバランスが崩れるときには、内側を使用する(例: ボール)

    Stroke O

人型のアイコン

  • 体と足は離して作成すること

    • ただし車椅子は、体と合体した状態で作成する
  • グリッドに沿ってアイコンを作成すること

    • 20px
    • 角丸の線
    • 線の位置は真ん中
  • 角度

    • 325°
  • ボール

    • 60px x 60px
    • ボールから20pxのオフセット
  • ツール

    • ボールから20pxのオフセット
    Keep a division between the body and legs O Keep a division between the body and legs X

ボールのアイコン

  • ボールの外線

    • 30px
  • ボールの中のパス

    • シンプルなパスを描くとき = 30px
    • 複雑なパスを描くとき = 20px
    Ball outline stroke

ツールのアイコン

    • 20px
  • 角度

    • 325°
  • ボール

    • 60px x 60px
    • グリッド内にある3箇所のボールガイドのうち、そのアイコンに合った場所にボールは置くこと
  • オフセット

    • 20px
    Offset Angle O Offset Angle X

ラケット系

  • 上下のベースラインをガイドに合わせて作成すること

  • 角度

    • 325°
  • ボールはいつも左側に置くようにして作成する

    3 places O 3 places X

スティック系

  • 上下30pxをガイドから開けてください。

  • 角度

    • 325°
  • ボールは左右どちらでも置くことができる

環境が伴うアイコン

ビーチスポーツ

  • 砂のパスを付け加える

  • ガイドの一番下から10pxスペースをとる

  • 下から40pxスペースをとる

  • 砂の周りは20pxのオフセットをする

    • 人型のアイコンの場合、片足オフセットを無視することができる

      Beach Beach Leg O Beach Leg X Sand Offset O

ウォータースポーツ

  • 水のパスを付け加える

  • ガイドの一番下から30pxスペースを入れる

  • 水の周りは20pxのオフセットをする

    Water Sports Wave Offset O Wave Offset X

  • Floorは特別な素材や特徴を持ったスポーツアイコンに使用できます
    • 例) ハードコートバイクポロ
    Floor O Floor X

壁 / ガラス

  • 壁を使用するスポーツの場合は、すべて左側にくるようにする

    • 例) スカッシュ
  • ツールが壁のパスの上にきた場合、壁はそのツールに合わせて切り取らなければいけない

    Wall Wall Offset O Wall Offset X

マルチカテゴリースポーツ

  • 複数競技を1つのアイコンにする場合には、丸を付ける

    • 30px
  • 丸の周りは20pxのオフセットをする

  • それらのスポーツを象徴とするアイコンを使用する

    • 例) スキー&スノーボード→山

      Multi O Multi X

シンボル

スポーツアイコンだけではその競技の特徴を表せないときに、シンボルを使用する

    1. カテゴリ (人, 年齢, 環境)
    • 右上に設置する
      • 例: 9人制バレー, スノーバレーボール
    • シンボルのサイズ
      • 140x140px
    • シンボルのオフセット
      • 20px
    1. ルール(国)
    • 右下に設置する
      • 例: カナディアンフットボール

        Symbol Guide Rules O Category O Category X Rules X Symbol X
You can’t perform that action at this time.